// Header, Hero, Proof, Programs, Faculty, Differentiation
const { useState, useEffect, useRef } = React;

/* ================= LOGO ================= */
function WDALogo({ inverted }) {
  const color = inverted ? "var(--paper)" : "var(--ink)";
  return (
    <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12, textDecoration: "none", color }}>
      <svg width="28" height="28" viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <circle cx="16" cy="16" r="15" stroke={color} strokeWidth="1" />
        <circle cx="16" cy="16" r="9" stroke={color} strokeWidth="0.6" opacity="0.5" />
        <line x1="16" y1="1" x2="16" y2="31" stroke={color} strokeWidth="0.6" opacity="0.5" />
        <line x1="1" y1="16" x2="31" y2="16" stroke={color} strokeWidth="0.6" opacity="0.5" />
        <circle cx="16" cy="16" r="2.4" fill="var(--bordeaux)" />
      </svg>
      <div style={{ lineHeight: 1, display: "flex", flexDirection: "column", gap: 2 }}>
        <div style={{ fontFamily: "var(--serif)", fontSize: 17, letterSpacing: "-0.01em", fontWeight: 400 }}>
          Washington International Diplomatic Academy
        </div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 9.5, letterSpacing: "0.16em", color: inverted ? "rgba(245,241,234,0.55)" : "var(--ink-mute)", textTransform: "uppercase" }}>
          Independent · Washington, DC
        </div>
      </div>
    </a>
  );
}

/* ================= HEADER ================= */
function Header({ data }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <header className="header" data-scrolled={scrolled}>
      <div className="container" style={{ display: "grid", gridTemplateColumns: "auto 1fr auto", alignItems: "center", gap: 32, padding: "18px 32px" }}>
        <WDALogo />
        <nav aria-label="Primary" style={{ display: "flex", justifyContent: "center", gap: 36 }}>
          {data.nav.map((n) => (
            <a key={n.label} href={n.href} className="ulink" style={{ fontSize: 14, fontWeight: 450, letterSpacing: "0.005em", background: "none", paddingBottom: 4 }}>
              {n.label}
            </a>
          ))}
        </nav>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="#admissions" className="btn btn-ghost" style={{ padding: "10px 16px", fontSize: 13 }}>
            Apply
          </a>
          <a href="#programs" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 13 }}>
            Explore Programs <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </header>
  );
}

/* ================= HERO ================= */
function Hero({ data }) {
  const h = data.hero;
  return (
    <section id="top" style={{ padding: "72px 0 96px", position: "relative" }}>
      <div className="container">
        {/* Eyebrow + dateline */}
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", borderBottom: "1px solid var(--rule)", paddingBottom: 18, marginBottom: 56 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span className="dot" />
            <span className="eyebrow">{h.eyebrow}</span>
          </div>
          <div className="meta" style={{ display: "flex", gap: 24 }}>
            <span>EST. WASHINGTON, DC</span>
            <span>SUMMER ACADEMY · 8–30 JULY 2026</span>
            <span>1717 K STREET NW</span>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.6fr 1fr", gap: 64, alignItems: "end" }}>
          <div>
            <h1 className="display" style={{ fontSize: "clamp(48px, 7vw, 96px)", margin: "0 0 36px", textWrap: "balance", maxWidth: "16ch" }}>
              Train like a professional <em style={{ fontStyle: "italic", color: "var(--bordeaux)", fontVariationSettings: '"opsz" 144' }}>diplomat</em>.
            </h1>
            <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <a href="#programs" className="btn btn-primary">{h.primary} <span className="arrow">→</span></a>
              <a href="#admissions" className="btn btn-ghost">{h.secondary}</a>
              <span className="meta" style={{ marginLeft: 12 }}>{h.nextCourse}</span>
            </div>
          </div>

          <div style={{ borderLeft: "1px solid var(--rule)", paddingLeft: 32 }}>
            <p className="lede" style={{ margin: 0, textWrap: "pretty" }}>
              {h.lede}
            </p>
          </div>
        </div>

        {/* Visual plate — real photo */}
        <div style={{ marginTop: 80, position: "relative" }}>
          <div role="img" aria-label={h.plateAlt} style={{ width: "100%", aspectRatio: "21 / 9", borderRadius: 2, overflow: "hidden", background: `url(${h.plate}) center/cover no-repeat, var(--paper-deep)` }}>
          </div>
          <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "20px 24px", display: "flex", justifyContent: "space-between", alignItems: "flex-end", color: "var(--paper)" }}>
            <div className="meta" style={{ color: "rgba(245,241,234,0.85)", background: "rgba(20,24,28,0.55)", padding: "6px 10px", borderRadius: 2 }}>
              FIG. 01 · WIDA · WASHINGTON, DC
            </div>
            <div className="meta" style={{ color: "rgba(245,241,234,0.85)", background: "rgba(20,24,28,0.55)", padding: "6px 10px", borderRadius: 2 }}>
              38.9026° N · 77.0398° W · 1717 K STREET NW
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= PROOF / CREDIBILITY ================= */
function Proof({ data }) {
  return (
    <section className="tight" style={{ borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
          {data.proof.map((p, i) => (
            <div key={i} style={{ borderLeft: i === 0 ? "none" : "1px solid var(--rule)", paddingLeft: i === 0 ? 0 : 32, paddingRight: 32 }}>
              <div className="display" style={{ fontSize: 56, fontVariationSettings: '"opsz" 96', lineHeight: 1 }}>
                {p.k}
              </div>
              <div className="meta" style={{ marginTop: 12 }}>{p.l}</div>
            </div>
          ))}
        </div>

        {/* Affiliates marquee */}
        <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--rule-soft)" }}>
          <div className="meta" style={{ marginBottom: 20 }}>Faculty drawn from · partner institutions · advisory affiliations</div>
          <div className="marquee">
            <div className="marquee-track">
              {[...data.affiliates, ...data.affiliates].map((a, i) => (
                <span key={i} style={{ fontFamily: "var(--serif)", fontSize: 22, letterSpacing: "-0.01em", color: "var(--ink-soft)" }}>
                  {a}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ================= PROGRAMS ================= */
function Programs({ data }) {
  return (
    <section id="programs">
      <div className="container">
        <div className="section-label">
          <div className="num">§ 01 — Programs</div>
          <div className="title-row">
            <h2>Four programs. One curriculum philosophy.</h2>
            <a href="#all-programs" className="btn-link" style={{ display: "inline-block" }}>All programs →</a>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }}>
          {data.programs.map((p, i) => (
            <ProgramCard key={i} p={p} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ProgramCard({ p, index }) {
  const [hover, setHover] = useState(false);
  const isRight = index % 2 === 1;
  return (
    <article
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        borderBottom: "1px solid var(--rule)",
        borderLeft: isRight ? "1px solid var(--rule)" : "none",
        padding: "48px 40px",
        display: "grid",
        gridTemplateRows: "auto auto 1fr auto",
        gap: 24,
        background: hover ? "var(--paper-warm)" : "transparent",
        transition: "background 280ms",
        cursor: "pointer",
        position: "relative",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <span className="meta">{p.tag}</span>
        <span className="meta" style={{ color: "var(--bordeaux)" }}>0{index + 1} / 0{4}</span>
      </div>
      <h3 className="title" style={{ fontSize: 36, margin: 0, fontVariationSettings: '"opsz" 36' }}>
        {p.title}
      </h3>
      <p className="body" style={{ margin: 0, maxWidth: "44ch", fontSize: 15.5, lineHeight: 1.55, textWrap: "pretty" }}>
        {p.desc}
      </p>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 24, marginTop: 16, paddingTop: 24, borderTop: "1px solid var(--rule-soft)" }}>
        <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 4 }}>
          {p.facts.map((f, j) => (
            <li key={j} className="meta" style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 4, height: 4, background: "var(--ink-mute)", borderRadius: "50%" }} />
              {f}
            </li>
          ))}
        </ul>
        <span style={{ fontFamily: "var(--sans)", fontSize: 13, fontWeight: 500, display: "inline-flex", alignItems: "center", gap: 8, transform: hover ? "translateX(4px)" : "translateX(0)", transition: "transform 220ms" }}>
          Read syllabus →
        </span>
      </div>
    </article>
  );
}

/* ================= FACULTY ================= */
function Faculty({ data }) {
  return (
    <section id="faculty" style={{ background: "var(--paper-warm)", borderTop: "1px solid var(--rule)", borderBottom: "1px solid var(--rule)" }}>
      <div className="container">
        <div className="section-label">
          <div className="num">§ 02 — Faculty</div>
          <div className="title-row">
            <h2>Career ambassadors. One faculty.</h2>
            <a href="#all-faculty" className="btn-link">Meet all instructors →</a>
          </div>
        </div>

        <p className="lede" style={{ maxWidth: "62ch", marginTop: -16, marginBottom: 56 }}>
          Every WIDA faculty member is a career ambassador. They critique your reporting, run your simulations, and tell you what really happens at post.
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, borderTop: "1px solid var(--rule)" }}>
          {data.faculty.map((f, i) => (
            <FacultyCard key={i} f={f} index={i} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FacultyCard({ f, index }) {
  const isLeftEdge = index % 4 === 0;
  return (
    <article style={{
      padding: "32px 28px",
      borderBottom: "1px solid var(--rule)",
      borderLeft: isLeftEdge ? "none" : "1px solid var(--rule)",
      display: "grid",
      gridTemplateRows: "auto auto auto 1fr",
      gap: 18,
    }}>
      <div role="img" aria-label={`Portrait monogram for ${f.name}`} style={{ aspectRatio: "4 / 5", marginBottom: 8, borderRadius: 2, overflow: "hidden", background: `url("${f.img}") center/cover no-repeat, var(--paper-deep)` }}>
      </div>
      <div className="meta" style={{ color: "var(--bordeaux)" }}>{f.role}</div>
      <h3 style={{ fontFamily: "var(--serif)", fontSize: 24, fontWeight: 400, margin: 0, letterSpacing: "-0.01em", lineHeight: 1.1 }}>
        {f.name}
      </h3>
      <p className="body" style={{ margin: 0, fontSize: 14, lineHeight: 1.55, textWrap: "pretty" }}>
        {f.bio}
      </p>
    </article>
  );
}

/* ================= DIFFERENTIATION ================= */
function Differentiation({ data }) {
  return (
    <section id="about">
      <div className="container">
        <div className="section-label">
          <div className="num">§ 03 — Why WDA</div>
          <div className="title-row">
            <h2>What makes this institution distinct.</h2>
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
          <div style={{ position: "sticky", top: 120 }}>
            <p className="lede dropcap" style={{ marginTop: 0, textWrap: "pretty" }}>
              {data.about.lede}
            </p>
            <div style={{ marginTop: 32, paddingTop: 24, borderTop: "1px solid var(--rule)" }}>
              <div className="meta" style={{ marginBottom: 8 }}>{data.about.missionLabel}</div>
              <div style={{ fontFamily: "var(--serif)", fontStyle: "italic", fontSize: 18, color: "var(--ink-soft)", textWrap: "balance" }}>
                "{data.about.mission}"
              </div>
            </div>
          </div>

          <ol className="numbered">
            {data.diff.map((d) => (
              <li key={d.n}>
                <div style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.14em", color: "var(--bordeaux)" }}>
                  {d.n}
                </div>
                <div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 26, fontWeight: 400, margin: "0 0 10px", letterSpacing: "-0.012em", lineHeight: 1.15, textWrap: "balance" }}>
                    {d.h}
                  </h3>
                  <p className="body" style={{ margin: 0, fontSize: 15.5, lineHeight: 1.6, maxWidth: "56ch", textWrap: "pretty" }}>
                    {d.p}
                  </p>
                </div>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Header, Hero, Proof, Programs, Faculty, Differentiation, WDALogo });