/* global React */

/**
 * NOTE: Replace the STRIPE_LINK constants below with real Stripe Payment Links
 * (or any platform you prefer — PayPal.me, Donorbox, Givebutter, Cash App).
 * Each tier opens that link in a new tab.
 */
const STRIPE = {
  TIER_25:    "https://buy.stripe.com/REPLACE_25",
  TIER_100:   "https://buy.stripe.com/REPLACE_100",
  TIER_CUSTOM:"https://buy.stripe.com/REPLACE_CUSTOM",
};

function DonateHero() {
  const t = useT();
  return (
    <section className="page-hero">
      <div className="wrap page-hero-content">
        <h1 className="title-xl">
          {t(<>Sustain the <em>journey</em>.</>, <>Sostén el <em>camino</em>.</>)}
        </h1>
        <p className="body" style={{ maxWidth: "52ch", marginTop: 32, fontSize: 17 }}>
          {t(
            "Every gift goes to three places — Hunt's continued care, the Hunt for Hope documentary release, and a small fund for families navigating childhood cancer.",
            "Cada aporte va a tres lugares — el cuidado continuo de Hunt, el lanzamiento del documental Hunt for Hope, y un pequeño fondo para familias que atraviesan el cáncer infantil."
          )}
        </p>
      </div>
    </section>
  );
}

function Tiers() {
  const t = useT();
  const tiers = [
    {
      amount: <>$<em>25</em></>,
      labelEn: "A HAND",
      labelEs: "UNA MANO",
      bodyEn: "A small contribution that helps publish the documentary on YouTube — free for anyone.",
      bodyEs: "Un aporte pequeño que ayuda a publicar el documental en YouTube — gratis para todos.",
      href: STRIPE.TIER_25,
    },
    {
      amount: <>$<em>100</em></>,
      labelEn: "A FAMILY",
      labelEs: "UNA FAMILIA",
      bodyEn: "Help cover meals, gas and parking for one family during a treatment week.",
      bodyEs: "Ayuda a cubrir comidas, gasolina y estacionamiento para una familia durante una semana de tratamiento.",
      href: STRIPE.TIER_100,
    },
    {
      amount: <><em>$</em>—</>,
      labelEn: "ANY AMOUNT",
      labelEs: "OTRA CANTIDAD",
      bodyEn: "Whatever you can give — every dollar goes to the same three places.",
      bodyEs: "Lo que puedas aportar — cada dólar va a los mismos tres lugares.",
      href: STRIPE.TIER_CUSTOM,
    },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead num="N° 01" label={t("Choose a level", "Elige un nivel")} title={t("<em>Three</em> ways to give.", "<em>Tres</em> formas de dar.")} />
        <div className="tiers-grid">
          {tiers.map((ti, i) => (
            <a key={i} href={ti.href} target="_blank" rel="noreferrer" className="tier-card reveal">
              <span className="tier-amount serif">{ti.amount}</span>
              <span className="tier-label">{t(ti.labelEn, ti.labelEs)}</span>
              <p className="tier-body">{t(ti.bodyEn, ti.bodyEs)}</p>
              <span className="btn-ghost" style={{ marginTop: 6 }}>{t("Give", "Aportar")} <span className="arrow">→</span></span>
            </a>
          ))}
        </div>
        <p className="mono" style={{ marginTop: 36, fontSize: 9, letterSpacing: "0.3em", color: "var(--cream-dim)", textAlign: "center" }}>
          {t(
            "· SECURE CHECKOUT VIA STRIPE · NO ACCOUNT REQUIRED",
            "· COBRO SEGURO POR STRIPE · NO REQUIERE CUENTA"
          )}
        </p>
      </div>
    </section>
  );
}

function WhereItGoes() {
  const t = useT();
  const items = [
    { num: "01", titleEn: "Hunt's care", titleEs: "El cuidado de Hunt", bodyEn: "Follow-up scans, prosthetic fittings, therapy. Childhood cancer doesn't end at remission.", bodyEs: "Resonancias de seguimiento, ajustes de prótesis, terapia. El cáncer infantil no termina con la remisión." },
    { num: "02", titleEn: "The film release", titleEs: "El estreno del film", bodyEn: "Theatre rental, sound, ushers, captions, and a free public release on YouTube.", bodyEs: "Renta de sala, sonido, acomodadores, subtítulos y un estreno público gratuito en YouTube." },
    { num: "03", titleEn: "Other families", titleEs: "Otras familias", bodyEn: "A small fund — gas cards, hotel nights, hospital meals — for families in active treatment.", bodyEs: "Un pequeño fondo — tarjetas de gasolina, noches de hotel, comidas hospitalarias — para familias en tratamiento activo." },
  ];
  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead num="N° 02" label={t("Transparency", "Transparencia")} title={t("<em>Where</em> it goes.", "<em>A dónde</em> va.")} />
        <div className="topics-grid">
          {items.map((it) => (
            <article className="topic-card reveal" key={it.num}>
              <span className="topic-num">{it.num}</span>
              <h3 className="topic-title">{t(it.titleEn, it.titleEs)}</h3>
              <p className="topic-body">{t(it.bodyEn, it.bodyEs)}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function OtherWays() {
  const t = useT();
  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 880, textAlign: "center" }}>
        <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>{t("OTHER WAYS", "OTRAS FORMAS")}</p>
        <h2 className="serif" style={{ fontSize: "clamp(28px, 4vw, 48px)", fontWeight: 300, lineHeight: 1.1, margin: "16px 0 28px" }}>
          {t(<>Not money? <em>Still help.</em></>, <>¿No es dinero? <em>También ayudas.</em></>)}
        </h2>
        <p className="body" style={{ margin: "0 auto 32px", maxWidth: "48ch" }}>
          {t(
            "Pray for Hunt. Share the documentary. Buy a tee. Host a screening. Send the family a note. The currency of this work is presence — show up however you can.",
            "Reza por Hunt. Comparte el documental. Compra una camiseta. Organiza una proyección. Envíale una nota a la familia. La moneda de este trabajo es la presencia — preséntate como puedas."
          )}
        </p>
        <div style={{ display: "flex", gap: 24, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="/merch" className="btn-ghost">{t("Shop the collection", "Ver la tienda")} <span className="arrow">→</span></a>
          <a href="https://www.youtube.com/@The1Percent_Work" target="_blank" rel="noreferrer" className="btn-ghost">{t("Watch on YouTube", "Ver en YouTube")} <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

function AppInner() {
  useReveal();
  return (
    <>
      <div className="grain" />
      <TopBar />
      <main>
        <DonateHero />
        <Tiers />
        <WhereItGoes />
        <OtherWays />
      </main>
      <Footer />
    </>
  );
}
function App() { return <LangProvider><AppInner /></LangProvider>; }
ReactDOM.createRoot(document.getElementById("app")).render(<App />);