/* global React */

function SpeakingHero() {
  const t = useT();
  return (
    <section className="page-hero">
      <div className="wrap page-hero-content">
        <h1 className="title-xl">
          {t(<>Bring the <em>message</em>.</>, <>Trae el <em>mensaje</em>.</>)}
        </h1>
        <p className="body" style={{ maxWidth: "52ch", marginTop: 32, fontSize: 17 }}>
          {t(
            "Timothy speaks at churches, conferences, retreats, schools, and small fireside gatherings — wherever men, families, and leaders are willing to do the quiet daily work.",
            "Timothy habla en iglesias, conferencias, retiros, escuelas y encuentros íntimos — dondequiera que haya hombres, familias o líderes dispuestos a hacer el trabajo silencioso de cada día."
          )}
        </p>
        <div className="page-hero-stats">
          <div><dt>{t("Audiences", "Audiencias")}</dt><dd>{t("Faith · Family · Health", "Fe · Familia · Salud")}</dd></div>
          <div><dt>{t("Format", "Formato")}</dt><dd>{t("Keynote · Q&A · Sermon", "Keynote · Q&A · Sermón")}</dd></div>
          <div><dt>{t("Length", "Duración")}</dt><dd>30–90 min</dd></div>
          <div><dt>{t("Region", "Región")}</dt><dd>{t("USA · Worldwide", "EE.UU. · Mundial")}</dd></div>
        </div>
      </div>
    </section>
  );
}

function Topics() {
  const t = useT();
  const items = [
    {
      num: "01",
      titleEn: "The 1 Percent Protocol",
      titleEs: "El Protocolo del 1%",
      bodyEn: "How small, daily disciplines compound into a life worth living. A practical framework for men who want to be steady, present, and unshakeable — for their families and their faith.",
      bodyEs: "Cómo las disciplinas pequeñas y diarias se transforman en una vida que vale la pena vivir. Un marco práctico para hombres que quieren ser firmes, presentes e inquebrantables — para sus familias y su fe.",
    },
    {
      num: "02",
      titleEn: "Pain → Progress",
      titleEs: "Del Dolor al Progreso",
      bodyEn: "Lessons learned beside a hospital bed: how suffering — when stewarded — becomes the most reliable teacher we have. For audiences walking through grief, illness, or unwanted seasons.",
      bodyEs: "Lecciones aprendidas junto a una cama de hospital: cómo el sufrimiento — cuando se administra bien — se vuelve el maestro más fiel que tenemos. Para audiencias que atraviesan duelo, enfermedad o tiempos no deseados.",
    },
    {
      num: "03",
      titleEn: "Father · Husband · Pastor",
      titleEs: "Padre · Esposo · Pastor",
      bodyEn: "What it takes to lead from a place of strength when you are exhausted. A talk for men, husbands, fathers — and the women who love them.",
      bodyEs: "Lo que se necesita para liderar desde la fuerza cuando estás agotado. Una charla para hombres, esposos, padres — y para las mujeres que los aman.",
    },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead num="N° 01" label={t("Talks", "Charlas")} title={t("<em>Three</em> talks. One mission.", "<em>Tres</em> charlas. Una misión.")} />
        <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 PastVenues() {
  const t = useT();
  const venues = [
    "Calvary Chapel · CA",
    "Faith & Fatherhood Conf.",
    "Men's Retreat · 2025",
    "Hope Forward Summit",
    "Pediatric Oncology Gala",
    "Family Discipleship Series",
  ];
  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead num="N° 02" label={t("Past venues", "Lugares previos")} title={t("<em>Where</em> the message has gone.", "<em>Dónde</em> ha viajado el mensaje.")} />
        <ul style={{ listStyle: "none", padding: 0, columnCount: 2, columnGap: "clamp(40px, 6vw, 100px)" }}>
          {venues.map((v) => (
            <li key={v} style={{
              fontFamily: "var(--serif)", fontWeight: 300, fontSize: 22,
              padding: "20px 0", borderBottom: "1px solid var(--line-soft)",
              breakInside: "avoid", color: "var(--cream)"
            }}>
              {v}
            </li>
          ))}
        </ul>
        <p className="mono" style={{ marginTop: 32, fontSize: 10, letterSpacing: "0.32em", color: "var(--cream-dim)" }}>
          {t("· AND OTHERS UPON REQUEST", "· Y OTROS A SOLICITUD")}
        </p>
      </div>
    </section>
  );
}

function BookingCTA() {
  const t = useT();
  return (
    <section className="section" id="book">
      <div className="wrap" style={{ maxWidth: 720, textAlign: "center" }}>
        <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>{t("BOOKING · 2026 — 2027", "RESERVA · 2026 — 2027")}</p>
        <h2 className="serif" style={{ fontSize: "clamp(36px, 5vw, 64px)", fontWeight: 300, lineHeight: 1.1, margin: "20px 0 24px" }}>
          {t(<>Invite Timothy <em>to speak</em>.</>, <>Invita a Timothy <em>a hablar</em>.</>)}
        </h2>
        <p className="body" style={{ margin: "0 auto 40px", maxWidth: "44ch" }}>
          {t(
            "Tell us about your audience, the date, the city. Tim reads every request personally and responds within five business days.",
            "Cuéntanos de tu audiencia, la fecha, la ciudad. Tim lee cada solicitud personalmente y responde en cinco días hábiles."
          )}
        </p>
        <a href="https://docs.google.com/forms/d/e/1FAIpQLSe083LpQH5KUI40fLSICV64LOJ7HtafMdug4MhzcrV-_mIzpQ/viewform" target="_blank" rel="noreferrer" className="btn">
          <span>{t("Submit booking request", "Enviar solicitud")}</span><span className="arrow">→</span>
        </a>
      </div>
    </section>
  );
}

function AppInner() {
  useReveal();
  return (
    <>
      <div className="grain" />
      <TopBar />
      <main>
        <SpeakingHero />
        <Topics />
        <PastVenues />
        <BookingCTA />
      </main>
      <Footer />
    </>
  );
}
function App() { return <LangProvider><AppInner /></LangProvider>; }
ReactDOM.createRoot(document.getElementById("app")).render(<App />);