/* global React */

function StoryHero() {
  const t = useT();
  return (
    <section className="page-hero">
      <div className="wrap page-hero-content">
        <h1 className="title-xl">
          {t(<>Eight years.<br /><em>One spirit.</em></>, <>Ocho años.<br /><em>Un espíritu.</em></>)}
        </h1>
        <p className="body" style={{ maxWidth: "52ch", marginTop: 32, fontSize: 17 }}>
          {t(
            "Two cancer battles. One eye removed. A retinoblastoma diagnosis at age one. And through every single day of it — a boy named Hunt who never let go of hope.",
            "Dos batallas contra el cáncer. Un ojo extraído. Un diagnóstico de retinoblastoma al año de edad. Y, a través de cada día — un niño llamado Hunt que nunca soltó la esperanza."
          )}
        </p>
        <div className="page-hero-stats">
          <div><dt>{t("Diagnosis", "Diagnóstico")}</dt><dd>{t("Age 1", "Al año")}</dd></div>
          <div><dt>{t("Battles", "Batallas")}</dt><dd>{t("Two", "Dos")}</dd></div>
          <div><dt>{t("Surgeries", "Cirugías")}</dt><dd>{t("Two", "Dos")}</dd></div>
          <div><dt>{t("Hope", "Esperanza")}</dt><dd>{t("Unbroken", "Intacta")}</dd></div>
        </div>
      </div>
    </section>
  );
}

function StoryTimeline() {
  const t = useT();
  const items = [
    {
      year: t("YEAR · 01", "AÑO · 01"),
      titleEn: <>The first <em>diagnosis</em>.</>,
      titleEs: <>El primer <em>diagnóstico</em>.</>,
      bodyEn: "Hunt is one year old. A routine pediatric appointment becomes a referral. The referral becomes a name nobody wants to hear: retinoblastoma — a rare cancer of the retina. Treatment begins immediately.",
      bodyEs: "Hunt tiene un año. Una cita pediátrica de rutina se convierte en una referencia. La referencia trae un nombre que nadie quiere oír: retinoblastoma — un cáncer raro de la retina. El tratamiento comienza de inmediato.",
    },
    {
      year: t("YEARS · 02–04", "AÑOS · 02–04"),
      titleEn: <>The first <em>fight</em>.</>,
      titleEs: <>La primera <em>lucha</em>.</>,
      bodyEn: "Chemotherapy. Cryotherapy. Laser. Repeat. Hunt becomes a regular at the children's hospital — and somehow, the most cheerful person on the floor. The tumour responds. Remission arrives. The family exhales for the first time in three years.",
      bodyEs: "Quimioterapia. Crioterapia. Láser. Repetir. Hunt se vuelve habitual en el hospital infantil — y, de algún modo, la persona más alegre del pasillo. El tumor responde. Llega la remisión. La familia respira por primera vez en tres años.",
    },
    {
      year: t("YEAR · 05", "AÑO · 05"),
      titleEn: <>The 1 Percent <em>is born</em>.</>,
      titleEs: <>Nace <em>The 1 Percent</em>.</>,
      bodyEn: "Timothy starts writing in the margins of waiting rooms. Notes on faith, fatherhood, and the quiet daily work of becoming better. The 1 Percent begins as a discipline — improve by 1% every day, physically, spiritually, emotionally — and slowly becomes a movement.",
      bodyEs: "Timothy comienza a escribir en los márgenes de las salas de espera. Notas sobre la fe, la paternidad y el trabajo silencioso de cada día por ser mejor. The 1 Percent nace como disciplina — mejorar un 1% cada día, en lo físico, lo espiritual y lo emocional — y poco a poco se vuelve movimiento.",
    },
    {
      year: t("YEAR · 06", "AÑO · 06"),
      titleEn: <>The <em>relapse</em>.</>,
      titleEs: <>La <em>recaída</em>.</>,
      bodyEn: "A scan reveals what the family had prayed it never would: the cancer is back. This time it is more aggressive. The doctors deliver the news the parents had silently rehearsed: to save Hunt's life, his right eye must be removed.",
      bodyEs: "Una resonancia revela lo que la familia rogó por que nunca apareciera: el cáncer regresó. Esta vez es más agresivo. Los médicos pronuncian la noticia que los padres habían ensayado en silencio: para salvar la vida de Hunt, hay que extraer su ojo derecho.",
    },
    {
      year: t("YEAR · 07", "AÑO · 07"),
      titleEn: <>The <em>surgery</em>.</>,
      titleEs: <>La <em>cirugía</em>.</>,
      bodyEn: "The night before, Hunt — eight years old — tells his mother he is not afraid. He says, “God gave me two eyes. I'll give one back.” The surgery is successful. He wakes up smiling. The cancer is gone.",
      bodyEs: "La noche anterior, Hunt — ocho años — le dice a su madre que no tiene miedo. Le dice: “Dios me dio dos ojos. Le devuelvo uno.” La cirugía sale bien. Despierta sonriendo. El cáncer se ha ido.",
    },
    {
      year: t("YEAR · 08 · NOW", "AÑO · 08 · HOY"),
      titleEn: <><em>Hunt for Hope</em>.</>,
      titleEs: <><em>Hunt for Hope</em>.</>,
      bodyEn: "A documentary crew has spent two years following the family. The footage becomes a film. The film becomes a movement. On May 23, 2026, Hunt for Hope premieres in Southern California — and the next day, on YouTube, free for everyone walking the same road.",
      bodyEs: "Un equipo de documentalistas pasó dos años siguiendo a la familia. El metraje se convierte en película. La película se convierte en movimiento. El 23 de mayo de 2026, Hunt for Hope se estrena en el sur de California — y al día siguiente, en YouTube, gratis para todos los que caminan la misma senda.",
    },
  ];

  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 920 }}>
        <SectionHead num="N° 01" label={t("Eight years · in chapters", "Ocho años · en capítulos")} title={t("<em>The</em> dossier.", "<em>El</em> dossier.")} />
        <div className="timeline">
          {items.map((it, i) => (
            <article className="timeline-item reveal" key={i}>
              <span className="timeline-year">{it.year}</span>
              <h3 className="timeline-title">{t(it.titleEn, it.titleEs)}</h3>
              <p className="timeline-body">{t(it.bodyEn, it.bodyEs)}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function StoryQuote() {
  const t = useT();
  return (
    <section className="big-quote">
      <blockquote>
        {t(
          <>“God gave me two eyes. <em>I'll give one back.”</em></>,
          <>“Dios me dio dos ojos. <em>Le devuelvo uno.”</em></>
        )}
      </blockquote>
      <cite>{t("— Hunt Valverde · age 8", "— Hunt Valverde · 8 años")}</cite>
    </section>
  );
}

function StoryCTA() {
  const t = useT();
  return (
    <section className="section">
      <div className="wrap" style={{ maxWidth: 720, textAlign: "center" }}>
        <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>{t("CONTINUE", "CONTINÚA")}</p>
        <h2 className="serif" style={{ fontSize: "clamp(32px, 4vw, 56px)", fontWeight: 300, lineHeight: 1.1, margin: "20px 0 28px" }}>
          {t(<>See it told <em>on screen</em>.</>, <>Velo contado <em>en pantalla</em>.</>)}
        </h2>
        <p className="body" style={{ margin: "0 auto 36px", maxWidth: "44ch" }}>
          {t(
            "The full story is told in Hunt for Hope — premiering May 23, 2026.",
            "La historia completa se cuenta en Hunt for Hope — estreno el 23 de mayo de 2026."
          )}
        </p>
        <div style={{ display: "flex", gap: 24, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="https://www.youtube.com/@The1Percent_Work" target="_blank" rel="noreferrer" className="btn"><span>{t("Watch on YouTube", "Ver en YouTube")}</span><span className="arrow">→</span></a>
          <a href="/donate" className="btn-ghost">{t("Support the journey", "Apoya el camino")} <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

function AppInner() {
  useReveal();
  return (
    <>
      <div className="grain" />
      <TopBar />
      <main>
        <StoryHero />
        <StoryTimeline />
        <StoryQuote />
        <StoryCTA />
      </main>
      <Footer />
    </>
  );
}
function App() { return <LangProvider><AppInner /></LangProvider>; }
ReactDOM.createRoot(document.getElementById("app")).render(<App />);