/* global React */

function PressHero() {
  const t = useT();
  return (
    <section className="page-hero">
      <div className="wrap page-hero-content">
        <h1 className="title-xl">
          {t(<>For the <em>journalists.</em></>, <>Para los <em>periodistas.</em></>)}
        </h1>
        <p className="body" style={{ maxWidth: "52ch", marginTop: 32, fontSize: 17 }}>
          {t(
            "Everything you need to write about The 1 Percent, the Hunt for Hope documentary, or Timothy Valverde's work — in one quiet dossier.",
            "Todo lo que necesitas para escribir sobre The 1 Percent, el documental Hunt for Hope o el trabajo de Timothy Valverde — en un solo dossier."
          )}
        </p>
      </div>
    </section>
  );
}

function Bio() {
  const t = useT();
  return (
    <section className="section">
      <div className="wrap two-col">
        <div className="reveal">
          <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>{t("OFFICIAL BIO · SHORT", "BIO OFICIAL · CORTA")}</p>
          <h2 className="serif" style={{ fontSize: "clamp(28px, 3.5vw, 44px)", fontWeight: 300, lineHeight: 1.15, margin: "16px 0 24px" }}>
            {t(<>Timothy <em>Valverde</em>.</>, <>Timothy <em>Valverde</em>.</>)}
          </h2>
        </div>
        <div className="reveal">
          <p className="body" style={{ marginBottom: 18 }}>
            {t(
              "Timothy Valverde is a Pastor, husband, father of three, and the founder of The 1 Percent — a movement built on the daily discipline of becoming better physically, spiritually and emotionally. He lives in Southern California with his wife Sonia and their three children, including his son Hunt, who has battled retinoblastoma twice.",
              "Timothy Valverde es pastor, esposo, padre de tres y fundador de The 1 Percent — un movimiento construido sobre la disciplina diaria de ser mejor en lo físico, lo espiritual y lo emocional. Vive en el sur de California con su esposa Sonia y sus tres hijos, incluyendo a su hijo Hunt, quien ha enfrentado el retinoblastoma dos veces."
            )}
          </p>
          <p className="body" style={{ marginBottom: 18 }}>
            {t(
              "His writing, podcast and the upcoming Hunt for Hope documentary draw from those eight years beside a hospital bed — and from a quiet conviction that pain, well stewarded, becomes progress.",
              "Su escritura, su podcast y el próximo documental Hunt for Hope nacen de esos ocho años junto a una cama de hospital — y de una convicción silenciosa: el dolor, bien administrado, se vuelve progreso."
            )}
          </p>
        </div>
      </div>
    </section>
  );
}

function Quotes() {
  const t = useT();
  return (
    <section className="big-quote">
      <blockquote>
        {t(
          <>“The One Percent was <em>birthed through pain</em>.”</>,
          <>“The One Percent <em>nació del dolor</em>.”</>
        )}
      </blockquote>
      <cite>— Timothy Valverde</cite>
    </section>
  );
}

function KitDownloads() {
  const t = useT();
  const items = [
    {
      kicker: t("HEADSHOTS", "FOTOS"),
      titleEn: "Tim — high-resolution",
      titleEs: "Tim — alta resolución",
      bodyEn: "Studio + on-location portraits, JPG, no watermark.",
      bodyEs: "Retratos de estudio y exteriores, JPG, sin marca de agua.",
      cta: t("Download pack", "Descargar pack"),
      href: "/images/about-tim.jpg",
    },
    {
      kicker: t("FILM ASSETS", "MATERIAL DEL FILM"),
      titleEn: "Hunt for Hope — poster + stills",
      titleEs: "Hunt for Hope — póster + stills",
      bodyEn: "Theatrical poster (3:1) and three production stills.",
      bodyEs: "Póster oficial (3:1) y tres stills de producción.",
      cta: t("Download pack", "Descargar pack"),
      href: "/images/hunt-for-hope.jpg",
    },
    {
      kicker: t("LOGOS", "LOGOTIPOS"),
      titleEn: "Brand · The 1 Percent",
      titleEs: "Marca · The 1 Percent",
      bodyEn: "Symbol mark and full lockup, PNG with transparency.",
      bodyEs: "Símbolo y lockup completo, PNG con transparencia.",
      cta: t("Download pack", "Descargar pack"),
      href: "/images/symbol-black.png",
    },
    {
      kicker: t("FACT SHEET", "FICHA TÉCNICA"),
      titleEn: "One-page summary",
      titleEs: "Resumen de una página",
      bodyEn: "Bio, project facts, key dates, contact — single PDF.",
      bodyEs: "Bio, datos del proyecto, fechas clave, contacto — un solo PDF.",
      cta: t("Email for PDF", "Solicitar PDF"),
      href: "mailto:press@the1percent.work",
    },
  ];
  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead num="N° 01" label={t("Assets", "Recursos")} title={t("<em>Download</em> the dossier.", "<em>Descarga</em> el dossier.")} />
        <div className="kit-grid">
          {items.map((it, i) => (
            <a key={i} href={it.href} target="_blank" rel="noreferrer" className="kit-card reveal">
              <span className="kicker">{it.kicker}</span>
              <h3>{t(it.titleEn, it.titleEs)}</h3>
              <p>{t(it.bodyEn, it.bodyEs)}</p>
              <span className="btn-ghost" style={{ display: "inline-flex" }}>{it.cta} <span className="arrow">→</span></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contact() {
  const t = useT();
  return (
    <section className="section" id="contact">
      <div className="wrap" style={{ maxWidth: 720, textAlign: "center" }}>
        <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>{t("PRESS CONTACT", "CONTACTO DE PRENSA")}</p>
        <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 64px)", fontWeight: 300, lineHeight: 1.1, margin: "20px 0 24px" }}>
          {t(<>Get the <em>full file.</em></>, <>Obtén el <em>expediente completo.</em></>)}
        </h2>
        <p className="body" style={{ margin: "0 auto 36px", maxWidth: "44ch" }}>
          {t(
            "Interview requests, embargo questions, advance screeners — write directly. Responses within 48 hours.",
            "Solicitudes de entrevista, preguntas de embargo, copias preview — escribe directamente. Respuestas en 48 horas."
          )}
        </p>
        <a href="mailto:press@the1percent.work?subject=Press%20%C2%B7%20The%201%20Percent" className="btn">
          <span>press@the1percent.work</span><span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

function AppInner() {
  useReveal();
  return (
    <>
      <div className="grain" />
      <TopBar />
      <main>
        <PressHero />
        <Bio />
        <Quotes />
        <KitDownloads />
        <Contact />
      </main>
      <Footer />
    </>
  );
}
function App() { return <LangProvider><AppInner /></LangProvider>; }
ReactDOM.createRoot(document.getElementById("app")).render(<App />);