/* ============================================================
   Financieel Perspectief — FULL landing page (direction C)
   Reuses PlayButton / Scrubber / Ic / usePlayer / Footer from pod-core.
   ============================================================ */

function scrollToId(id, offset) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - (offset || 64), behavior: "smooth" });
}

/* ---------- NAV ---------- */
function FullNav() {
  const [solid, setSolid] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => {
      const hero = document.querySelector(".fp-hero");
      const h = hero ? hero.offsetHeight : 520;
      setSolid(window.scrollY > h - 90);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["Afleveringen", "afleveringen"], ["Over", "over"], ["Hosts", "hosts"], ["Abonneer", "abonneer"]];
  return (
    <header className={"fp-nav" + (solid ? " is-solid" : "")}>
      <div className="fp-nav-inner">
        <a className="fp-brand" href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: "smooth" }); }}>
          <img src="assets/vector-mark.png" alt="Vector" />
          <span className="fp-brand-word">VECTOR</span>
          <span className="fp-brand-div"></span>
          <span className="fp-brand-show">Financieel Perspectief</span>
        </a>
        <nav className="fp-nav-links">
          {links.map(([l, id]) => <a key={id} onClick={(e) => { e.preventDefault(); scrollToId(id); }}>{l}</a>)}
        </nav>
        <div className="fp-nav-right">
          <span className="fp-lang"><b>NL</b><i></i>EN<i></i>FR</span>
          <button className="pp-btn pp-btn--primary" style={{ padding: "10px 18px", fontSize: "14px" }}
            onClick={() => scrollToId("abonneer")}>
            <Ic name="headphones" size={16} /> Abonneer
          </button>
        </div>
      </div>
    </header>
  );
}

/* ---------- HERO ---------- */
function Hero() {
  const ep = window.POD.EPISODES[0];
  return (
    <header className="fp-hero" id="top">
      <div className="fp-hero-glow"></div>
      <div className="fp-hero-grid-bg"></div>
      <div className="fp-hero-head">
        <span className="fp-hero-badge"><Ic name="mic" size={14} /> De podcast over investeren &amp; vermogen</span>
        <h1 className="fp-hero-title">Financieel Perspectief</h1>
        <p className="fp-hero-sub">
          De strategen van Vector aan tafel over de markten, het model en de mens achter de belegger.
          Helder, onderbouwd en recht voor z'n raap.
        </p>
        <div className="fp-hero-cta">
          <button className="pp-btn pp-btn--primary" onClick={() => Player.toggle(ep)}>
            <Ic name="play" /> Beluister de nieuwste
          </button>
          <button className="pp-btn pp-btn--ghost" onClick={() => scrollToId("afleveringen")}>
            <Ic name="headphones" size={18} /> Alle afleveringen
          </button>
        </div>
      </div>
      <div className="fp-hero-frame">
        <div className="fp-hero-frame-inner">
          <img src="assets/banner.png" alt="Werner, Thierry en Nils tijdens de opname van Financieel Perspectief" />
        </div>
      </div>
    </header>
  );
}

/* ---------- FEATURED (overlapping latest episode) ---------- */
function FeatureSection() {
  const ep = window.POD.EPISODES[0];
  return (
    <div className="fp-wrap">
      <div className="fp-feature-shell">
        <div className="fp-feature">
          <PlayButton ep={ep} size="lg" />
          <div className="fp-feature-main">
            <span className="fp-feature-label"><Ic name="sparkle" size={14} /> Nieuwste aflevering</span>
            <div className="fp-feature-meta">
              <span className="fp-chip">Aflevering {ep.num}</span>
              <span className="fp-ep-date">{ep.date}</span>
              <span className="fp-dot"></span>
              <span className="fp-ep-dur">{ep.dur}</span>
            </div>
            <h3 className="fp-feature-title">{ep.title}</h3>
            <p className="fp-feature-desc">{ep.desc}</p>
            <Scrubber ep={ep} />
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- EPISODE ROW ---------- */
function EpRow({ ep }) {
  const st = usePlayer();
  const isCur = st.id === ep.id;
  return (
    <div className={"fp-ep" + (isCur ? " is-active" : "")}>
      <div className="fp-ep-play"><PlayButton ep={ep} /></div>
      <div className="fp-ep-body">
        <div className="fp-ep-top">
          <span className="fp-ep-num">{ep.num}</span>
          <h3 className="fp-ep-title">{ep.title}</h3>
        </div>
        <p className="fp-ep-desc">{ep.desc}</p>
        <div className="fp-ep-meta">
          <span className="fp-ep-date">{ep.date}</span>
          <span className="fp-dot"></span>
          <span className="fp-ep-dur">{ep.dur}</span>
        </div>
        {isCur ? <div className="fp-ep-scrub"><Scrubber ep={ep} /></div> : null}
      </div>
    </div>
  );
}

/* ---------- EPISODES SECTION ---------- */
function EpisodesSection() {
  const rest = window.POD.EPISODES.slice(1);
  return (
    <section id="afleveringen" className="fp-section">
      <div className="fp-wrap">
        <p className="fp-eyebrow">Archief</p>
        <h2 className="fp-h2">Eerdere afleveringen</h2>
        <p className="fp-lead" style={{ maxWidth: 620 }}>
          Druk op play en luister direct in je browser — je luisterpositie wordt onthouden, ook na een refresh.
        </p>
        <div className="fp-eplist">
          {rest.map((ep) => <EpRow key={ep.id} ep={ep} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- ABOUT ---------- */
function AboutSection() {
  const A = window.POD.ABOUT;
  return (
    <section id="over" className="fp-section fp-section--mist">
      <div className="fp-wrap fp-about">
        <div>
          <p className="fp-eyebrow">{A.eyebrow}</p>
          <h2 className="fp-h2" style={{ maxWidth: 580 }}>{A.title}</h2>
          <p className="fp-lead">{A.lead}</p>
          <p className="fp-about-quote">"Geen black-box. Wél een volledig retraceerbaar proces — voor elk aandeel op onze lijst."</p>
        </div>
        <div className="fp-stats">
          {A.stats.map((s) => (
            <div className="fp-stat" key={s.l}>
              <div className="fp-stat-n">{s.n}<span>{s.u}</span></div>
              <div className="fp-stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- HOSTS BAND (navy) ---------- */
function HostsBand() {
  return (
    <section id="hosts" className="fp-hosts-band">
      <div className="fp-hosts-glow"></div>
      <div className="fp-section" style={{ position: "relative" }}>
        <div className="fp-wrap">
          <p className="fp-eyebrow fp-eyebrow--cyan">Aan tafel</p>
          <h2 className="fp-h2" style={{ color: "#fff" }}>Maak kennis met de hosts</h2>
          <div className="fp-hosts-grid">
            {window.POD.HOSTS.map((h) => (
              <div className="fp-host" key={h.name}>
                <div className="fp-host-mono">{h.initials}</div>
                <div className="fp-host-name">{h.name}</div>
                <div className="fp-host-role">{h.role}</div>
                <p className="fp-host-bio">{h.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- STICKY NOW-PLAYING BAR ---------- */
function PlayBar() {
  const st = usePlayer();
  const E = window.POD.EPISODES;
  const active = E.find((e) => e.id === st.id);
  const ep = active || E[0];
  return (
    <div className={"fp-playbar" + (active ? " is-open" : "")}>
      <div className="fp-playbar-inner">
        <div className="fp-playbar-mark"><img src="assets/vector-mark.png" alt="" /></div>
        <PlayButton ep={ep} size="sm" onDark />
        <div className="fp-playbar-info">
          <p className="fp-playbar-label">Nu spelen · Financieel Perspectief</p>
          <p className="fp-playbar-title">{ep.title}</p>
        </div>
        <div className="fp-playbar-scrub"><Scrubber ep={ep} onDark /></div>
      </div>
    </div>
  );
}

/* ---------- PAGE ---------- */
function FullPage() {
  const st = usePlayer();
  const open = !!st.id;
  return (
    <div className="fp-root" style={{ paddingBottom: open ? 72 : 0, transition: "padding-bottom var(--dur-slow) var(--ease-out)" }}>
      <FullNav />
      <Hero />
      <FeatureSection />
      <EpisodesSection />
      <AboutSection />
      <HostsBand />
      <div id="abonneer"><Footer /></div>
      <PlayBar />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<FullPage />);