/* global React */
const { useState } = React;

const EPISODES = [
  {
    num: "01",
    code: "EP·001",
    title: "Get to Know Hunt.",
    guest: "Hunt Valverde",
    duration: "42 min",
    date: "Recently",
    vid: "CFLCFMVPu48",
    descEn: "I interview my son Hunt. We discuss his six-year battle with eye cancer, some of his favorite things, why God allowed it, his eye removal — and much more. He is strong and courageous. I cried. He is the reason for The 1 Percent.",
    descEs: "Entrevisto a mi hijo Hunt. Hablamos de sus seis años de batalla contra el cáncer ocular, sus cosas favoritas, por qué Dios lo permitió, la extracción de su ojo — y mucho más. Es fuerte y valiente. Lloré. Él es la razón de The 1 Percent.",
    quoteEn: "He is the reason for The 1 Percent.",
    quoteEs: "Él es la razón de The 1 Percent.",
    quoteAttr: "Timothy Valverde",
  },
  {
    num: "02",
    code: "EP·002",
    title: "Smiling Through the Pain.",
    guest: "Sonia Valverde",
    duration: "58 min",
    date: "Recently",
    vid: "LoiKVsTCSGs",
    descEn: "My wife Sonia joins me to discuss life, Hunt, suffering — and the overall goodness of God through what we never thought we'd survive.",
    descEs: "Mi esposa Sonia se suma para hablar de la vida, de Hunt, del sufrimiento — y de la bondad de Dios a través de aquello que nunca pensamos sobrevivir.",
    quoteEn: "We smiled through what we never thought we'd survive.",
    quoteEs: "Sonreímos a través de aquello que nunca pensamos sobrevivir.",
    quoteAttr: "Sonia Valverde",
  },
  {
    num: "03",
    code: "EP·003",
    title: "Pain Affects the Entire Family.",
    guest: "Maddie & Emma Valverde",
    duration: "36 min",
    date: "Recently",
    vid: "_R08YjFH1e0",
    descEn: "A light-hearted episode with Hunt's sisters — Maddie and Emma. They share their perspective on this journey from an innocent place. They too are impacted by the processes of life. As always, there is always hope.",
    descEs: "Un episodio liviano con las hermanas de Hunt — Maddie y Emma. Comparten su mirada sobre este camino desde un lugar inocente. A ellas también las atraviesan los procesos de la vida. Como siempre, hay esperanza.",
    quoteEn: "There is always hope. Always.",
    quoteEs: "Siempre hay esperanza. Siempre.",
    quoteAttr: "Maddie & Emma",
  },
];

function PodcastHero() {
  const t = useT();
  return (
    <section className="podcast-hero">
      <div className="wrap podcast-hero-content">
        <h1 className="title-xl">
          {t(
            <>The <em>conversations</em><br />that built us.</>,
            <>Las <em>conversaciones</em><br />que nos forjaron.</>
          )}
        </h1>
        <p className="body" style={{ maxWidth: "48ch", marginTop: 32 }}>
          {t(
            "Long-form transmissions from the Valverde family — recorded on quiet days, released only when the words feel earned.",
            "Conversaciones largas con la familia Valverde — grabadas en días tranquilos y publicadas solo cuando las palabras se ganan su lugar."
          )}
        </p>

        <div className="podcast-hero-stats">
          <div><dt>{t("Episodes", "Episodios")}</dt><dd>03</dd></div>
          <div><dt>{t("Format", "Formato")}</dt><dd>Video · Audio</dd></div>
          <div><dt>{t("Cadence", "Cadencia")}</dt><dd>{t("When called", "Cuando toca")}</dd></div>
          <div><dt>{t("Host", "Anfitrión")}</dt><dd>Timothy Valverde</dd></div>
        </div>
      </div>
    </section>
  );
}

function FeaturedEpisode({ ep }) {
  const t = useT();
  return (
    <section className="section featured-episode">
      <div className="wrap">
        <div className="featured-grid">
          <div className="video-frame featured-video">
            <YTEmbed vid={ep.vid} title={ep.title} />
            <div className="video-caption">
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.3em", color: "var(--gold)" }}>● REC · LIVE</span>
              <span className="mono" style={{ fontSize: 9, letterSpacing: "0.3em", color: "var(--cream-dim)" }}>{ep.code}</span>
            </div>
          </div>

          <div className="featured-text reveal">
            <p className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--gold)" }}>{t("FEATURED · LATEST DROP", "DESTACADO · ÚLTIMO ESTRENO")}</p>
            <h2 className="serif" style={{ fontSize: "clamp(40px, 5vw, 72px)", fontWeight: 300, lineHeight: 1.0, margin: "20px 0 18px" }}>
              {ep.title}
            </h2>
            <p className="serif" style={{ fontStyle: "italic", color: "var(--gold)", fontSize: 22, marginBottom: 24 }}>
              {t("with", "con")} {ep.guest}
            </p>
            <p className="body">{t(ep.descEn, ep.descEs)}</p>
            {ep.quoteEn && (
              <figure className="ep-quote ep-quote--featured">
                <blockquote className="serif">“{t(ep.quoteEn, ep.quoteEs)}”</blockquote>
                <figcaption className="mono">— {ep.quoteAttr}</figcaption>
              </figure>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function EpisodeListItem({ ep, open, onToggle }) {
  const t = useT();
  return (
    <article className={`ep-item ${open ? "is-open" : ""}`}>
      <button className="ep-item-head" onClick={onToggle}>
        <span className="mono ep-num">{ep.num}</span>
        <span className="ep-title-wrap">
          <span className="serif ep-title">{ep.title}</span>
          <span className="mono ep-guest">{t("with", "con")} {ep.guest}</span>
        </span>
        <span className="mono ep-meta">{ep.duration}</span>
        <span className="ep-toggle" aria-hidden>{open ? "—" : "+"}</span>
      </button>

      <div className="ep-item-body">
        <div className="ep-item-body-inner">
          <div className="video-frame is-in" style={{ marginBottom: 24 }}>
            {open && <YTEmbed vid={ep.vid} title={ep.title} />}
          </div>
          <p className="body">{t(ep.descEn, ep.descEs)}</p>
          {ep.quoteEn && (
            <figure className="ep-quote">
              <blockquote className="serif">“{t(ep.quoteEn, ep.quoteEs)}”</blockquote>
              <figcaption className="mono">— {ep.quoteAttr}</figcaption>
            </figure>
          )}
        </div>
      </div>
    </article>
  );
}

function EpisodeList() {
  const t = useT();
  const [openId, setOpenId] = useState(null);
  return (
    <section className="section" style={{ background: "var(--ink-2)" }}>
      <div className="wrap">
        <SectionHead num="N° 02" label={t("The archive", "El archivo")} title={t("<em>All</em> transmissions.", "<em>Todas</em> las conversaciones.")} />
        <div className="ep-list">
          {EPISODES.map((ep) => (
            <EpisodeListItem
              key={ep.num}
              ep={ep}
              open={openId === ep.num}
              onToggle={() => setOpenId(openId === ep.num ? null : ep.num)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

function ListenOn() {
  const t = useT();
  const platforms = ["YouTube", "Apple Podcasts", "Spotify", "Overcast"];
  return (
    <section className="section">
      <div className="wrap">
        <SectionHead num="N° 03" label={t("Distribution", "Distribución")} title={t("<em>Listen</em> wherever you are.", "<em>Escucha</em> donde estés.")} />
        <div className="platforms-grid">
          {platforms.map((p) => (
            <a key={p} className="platform-card reveal" href="#">
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.3em", color: "var(--cream-dim)" }}>{t("AVAILABLE", "DISPONIBLE")}</span>
              <span className="serif" style={{ fontSize: 28, fontWeight: 400, marginTop: 12, display: "block" }}>{p}</span>
              <span className="arrow" style={{ marginTop: 24, display: "block", color: "var(--gold)" }}>→</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function AppInner() {
  const t = useT();
  useReveal();
  return (
    <>
      <div className="grain" />
      <TopBar active="podcast" />
      <main>
        <PodcastHero />
        <FeaturedEpisode ep={EPISODES[0]} />
        <EpisodeList />
        <ListenOn />
      </main>
      <Footer />
    </>
  );
}

function App() {
  return <LangProvider><AppInner /></LangProvider>;
}

ReactDOM.createRoot(document.getElementById("app")).render(<App />);