// sections.jsx — Metrics, Overview, Projects, Reel, Testimonials, Timeline, Partners, FAQ, CTA, Footer
const { useState: useS, useEffect: useE, useMemo: useM, useRef: useR } = React;

/* ── Metrics (counter animates on enter) ────────────────── */
function CountUp({ to, suffix, decimals = 0, heavy }) {
  const [n, setN] = useS(0);
  const ref = useR(null);
  useE(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        const start = performance.now();
        const dur = heavy ? 1800 : 1100;
        const tick = (t) => {
          const k = Math.min(1, (t - start) / dur);
          const ease = 1 - Math.pow(1 - k, 3);
          setN(to * ease);
          if (k < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        io.disconnect();
      }
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to, heavy]);
  const display = decimals ? n.toFixed(decimals) : Math.round(n).toLocaleString();
  return <span ref={ref}>{display}{suffix && <span className="suffix">{suffix}</span>}</span>;
}

function MetricsStrip({ heavy }) {
  return (
    <section className="section on-blue" id="metrics" style={{ paddingTop: 0, paddingBottom: 0 }}>
      <div className="container" style={{ paddingTop: 64, paddingBottom: 24 }}>
        <div className="section-head" style={{ marginBottom: 32 }}>
          <div>
            <span className="eyebrow">By the Numbers · 2022–2025</span>
            <h2 className="headline" style={{ marginTop: 18, color: "var(--gw-buff-pale)" }}>
              Four cohorts<br /> <em>of real work.</em>
            </h2>
          </div>
          <div className="head-meta">
            Global Capstone Office (2026)
          </div>
        </div>
      </div>
      <div className="container" style={{ paddingBottom: 64 }}>
        <div className="metrics">
          <div className="metric reveal">
            <div className="metric-num"><CountUp to={ALL_PROJECTS.length} heavy={heavy} /></div>
            <div className="metric-label">Projects Delivered</div>
            <div className="metric-detail">Real client engagements completed across the last four cohorts.</div>
          </div>
          <div className="metric reveal">
            <div className="metric-num"><CountUp to={MAP_PROJECTS.length + FOOTPRINT.length} heavy={heavy} /></div>
            <div className="metric-label">Countries Reached</div>
            <div className="metric-detail">Field and research engagements spanning six continents.</div>
          </div>
          <div className="metric reveal">
            <div className="metric-num"><CountUp to={CLIENT_STATS.organizations} heavy={heavy} /></div>
            <div className="metric-label">Partner Organizations</div>
            <div className="metric-detail">From State and DoD to multilaterals, NGOs and foreign governments.</div>
          </div>
          <div className="metric reveal">
            <div className="metric-num"><CountUp to={13} heavy={heavy} /></div>
            <div className="metric-label">Faculty Advisors</div>
            <div className="metric-detail">Renowned regional and policy experts — former ambassadors, agency leads, senior practitioners.</div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── Overview / Pillars ─────────────────────────────────── */
function Overview() {
  const pillars = [
  { num: "01", title: "Real Clients", body: "Every team is matched to a vetted partner — governments, multilaterals, INGOs, foundations and private-sector actors — with a signed terms-of-reference and named counterpart." },
  { num: "02", title: "Eight Months. One Brief.", body: "From scoping memo in October to final defense in May, the work follows the rhythm of a real consulting engagement, not an academic syllabus." },
  { num: "03", title: "Field-First Method", body: "Roughly 80% of cohorts travel to the partner site. Where travel isn't possible, we run intensive in-person engagement in Washington and remotely." },
  { num: "04", title: "Faculty Backbone", body: "Each project is paired with a faculty advisor with first-hand operational experience — former ambassadors, deputy ministers, senior NGO leaders." }];

  const [open, setOpen] = useS(0);
  return (
    <section className="section" id="overview">
      <div className="container">
        <div className="overview-grid">
          <div className="reveal">
            <span className="eyebrow">The Program</span>
            <h2 className="headline" style={{ marginTop: 20, marginBottom: 28 }}>
              An <em>eight-month</em><br /> apprenticeship in shipping.
            </h2>
            <p className="lede">
              The Capstone is not a thesis. It is a real engagement with a real client, with real deliverables that are used — or rejected — in the world. The discipline is everything.
            </p>
            <div className="step-accent" style={{ marginTop: 36 }} aria-hidden="true">
              <span></span><span></span><span></span><span></span>
            </div>
          </div>
          <div className="reveal">
            <div className="overview-pillars">
              {pillars.map((p, i) =>
              <div key={p.num} className={`pillar ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="pillar-num">{p.num}</span>
                  <div>
                    <div className="pillar-title">{p.title}</div>
                    <div className="pillar-body">{p.body}</div>
                  </div>
                  <span className="pillar-toggle">+</span>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── Projects portfolio ─────────────────────────────────── */
function Projects() {
  const [year, setYear] = useS("All Years");
  const [theme, setTheme] = useS("All Themes");
  const [limit, setLimit] = useS(12);

  const filtered = useM(() => ALL_PROJECTS.filter((p) =>
  (year === "All Years" || p.year === year) && (
  theme === "All Themes" || p.theme === theme)
  ), [year, theme]);

  const shown = filtered.slice(0, limit);

  useE(() => {setLimit(12);}, [year, theme]);

  return (
    <section className="section" id="projects" style={{ background: "var(--paper)" }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Recent Work · {ALL_PROJECTS.length} projects since 2022</span>
            <h2 className="headline" style={{ marginTop: 20 }}>
              The brief, <em>delivered.</em>
            </h2>
          </div>
          <div className="head-meta">
            {String(filtered.length).padStart(3, "0")} of {String(ALL_PROJECTS.length).padStart(3, "0")} match<br />
            ▸ filter by year or theme
          </div>
        </div>

        <div className="filters reveal">
          <div className="filter-row">
            <span className="filter-label">Year —</span>
            {YEARS.map((y) =>
            <button key={y} className={`filter-btn ${year === y ? "active" : ""}`} onClick={() => setYear(y)}>
                {y === "All Years" ? "All" : y}
              </button>
            )}
          </div>
          <div className="filter-row">
            <span className="filter-label">Theme —</span>
            {THEMES.map((t) =>
            <button key={t} className={`filter-btn ${theme === t ? "active" : ""}`} onClick={() => setTheme(t)}>
                {t === "All Themes" ? "All" : t}
              </button>
            )}
          </div>
        </div>

        <div className="project-grid reveal">
          {shown.map((p, i) =>
          <div key={i} className="project-card">
              <div className="pj-loc">
                <span>{p.theme}</span>
                <span>{p.year}</span>
              </div>
              <div className="pj-title">{p.title}</div>
              <div className="pj-partner">{p.client}</div>
            </div>
          )}
          {filtered.length === 0 &&
          <div style={{ padding: 48, gridColumn: "1 / -1", textAlign: "center", color: "var(--slate)" }}>
              No projects match. Clear filters to see all {ALL_PROJECTS.length}.
            </div>
          }
        </div>

        {filtered.length > shown.length &&
        <div style={{ textAlign: "center", marginTop: 32 }}>
            <button
            className="btn ghost"
            onClick={() => setLimit((l) => l + 12)}>
            
              Show {Math.min(12, filtered.length - shown.length)} more <span className="chev">↓</span>
            </button>
            <div style={{
            marginTop: 14,
            fontFamily: "var(--sans)", fontSize: 11, fontWeight: 600,
            letterSpacing: "0.16em", textTransform: "uppercase",
            color: "var(--slate-soft)"
          }}>
              Showing {shown.length} of {filtered.length}
            </div>
          </div>
        }
      </div>
    </section>);

}

/* ── Video reel ─────────────────────────────────────────── */
function VideoReel() {
  const [active, setActive] = useS(0);
  const v = VIDEOS[active];
  return (
    <section className="section on-blue" id="reel">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Voices · Capstone Reel</span>
            <h2 className="headline" style={{ marginTop: 20, color: "var(--gw-buff-pale)" }}>
              Hear the work, <em>first-hand.</em>
            </h2>
          </div>
          <div className="head-meta">
            5 short films · 35 minutes total<br />
            ▸ click any to play
          </div>
        </div>

        <div className="reel-stage reveal">
          <div className="reel-featured" onClick={() => alert(`(demo) Would play: ${v.title}`)}>
            <div className="ph-grid"></div>
            <div className="ph-stripes-overlay"></div>
            <div className="ph-label">{v.meta}</div>
            <div className="ph-tc">TC 00:00:{String((active + 1) * 7).padStart(2, "0")}:14</div>
            <button className="play-btn" aria-label={`Play ${v.title}`}></button>
            <div className="reel-caption">
              <div className="ttl">{v.title}</div>
              <div className="meta">{v.meta} · {v.dur}</div>
            </div>
          </div>

          <div className="reel-list">
            {VIDEOS.map((vid, i) =>
            <div key={vid.id} className={`reel-item ${active === i ? "active" : ""}`} onClick={() => setActive(i)}>
                <div className="thumb"></div>
                <div className="info">
                  <div className="t">{vid.title}</div>
                  <div className="m">{vid.meta}</div>
                </div>
                <div className="dur">{vid.dur}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ── Testimonials ───────────────────────────────────────── */
function Testimonials({ heavy }) {
  const [i, setI] = useS(0);
  const t = TESTIMONIALS[i];
  const prev = () => setI((i - 1 + TESTIMONIALS.length) % TESTIMONIALS.length);
  const next = () => setI((i + 1) % TESTIMONIALS.length);

  // auto-advance in heavy mode
  useE(() => {
    if (!heavy) return;
    const id = setInterval(next, 8000);
    return () => clearInterval(id);
  }, [heavy, i]);

  return (
    <section className="section" id="voices" style={{ background: "var(--gw-buff-pale)" }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Cohort Voices</span>
            <h2 className="headline" style={{ marginTop: 20 }}>
              Students <em>in their own words.</em>
            </h2>
          </div>
          <div className="head-meta">
            ▸ swipe or click below<br />
            audio interviews available
          </div>
        </div>

        <div className="testimonial-stage reveal">
          <div className="t-portrait">
            <div className="ph-stripes"></div>
            <div className="ph-tag">▸ Portrait · {t.country}</div>
            <div className="ph-name">{t.portrait}  —  {t.name}</div>
          </div>
          <div className="t-content">
            <div className="t-quote-mark">"</div>
            <div className="t-quote">{t.quote}</div>
            <div className="t-attr">
              <div>
                <div className="name">{t.name}</div>
                <div className="role">{t.role}</div>
              </div>
              <div className="country">{t.country}</div>
            </div>
            <div className="t-nav">
              <button onClick={prev} aria-label="Previous">‹</button>
              <button onClick={next} aria-label="Next">›</button>
              <span className="t-counter"><b>{String(i + 1).padStart(2, "0")}</b> / {String(TESTIMONIALS.length).padStart(2, "0")}</span>
            </div>
          </div>
        </div>

        {heavy &&
        <div className="pull-quote-row reveal">
            {PULL_QUOTES.map((pq, idx) =>
          <div key={idx} className="pull-quote">
                "{pq.text}"
                <div className="pq-attr"><b>{pq.name}</b> · {pq.role}</div>
              </div>
          )}
          </div>
        }
      </div>
    </section>);

}

/* ── Advisors — "Meet your advisor" carousel ────────────── */
function Advisors({ heavy }) {
  const [i, setI] = useS(0);
  const f = FACULTY[i];
  const prev = () => setI((i - 1 + FACULTY.length) % FACULTY.length);
  const next = () => setI((i + 1) % FACULTY.length);

  useE(() => {
    if (!heavy) return;
    const id = setInterval(next, 9000);
    return () => clearInterval(id);
  }, [heavy, i]);

  return (
    <section className="section on-blue" id="advisors">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Faculty</span>
            <h2 className="headline" style={{ marginTop: 20, color: "var(--gw-buff-pale)" }}>
              Meet your <em>advisor.</em>
            </h2>
          </div>
          <div className="head-meta">
            <b style={{ color: "var(--gw-buff)" }}>{FACULTY_YEARS_TOTAL}+ years</b> of cumulative<br />
            experience guiding capstone cohorts
          </div>
        </div>

        <div className="advisor-stage reveal">
          <div className="advisor-portrait">
            <div className="ph-stripes"></div>
            <div className="ph-tag">▸ {f.dept}</div>
            <div className="ph-initials">{f.initials}</div>
          </div>

          <div className="advisor-content">
            <div className="advisor-dept">{f.dept}</div>
            <div className="advisor-name">{f.name}</div>
            <div className="advisor-title">{f.title} · Elliott School</div>
            <p className="advisor-bio">{f.bio}</p>

            <div className="advisor-foot">
              <div className="advisor-years">
                <span className="num">{f.years}</span>
                <span className="lbl">years advising<br />capstone teams</span>
              </div>
              <div className="advisor-nav">
                <button onClick={prev} aria-label="Previous advisor">‹</button>
                <button onClick={next} aria-label="Next advisor">›</button>
                <span className="advisor-counter"><b>{String(i + 1).padStart(2, "0")}</b> / {String(FACULTY.length).padStart(2, "0")}</span>
              </div>
            </div>

            <div className="advisor-dots" role="tablist">
              {FACULTY.map((_, idx) => (
                <button key={idx}
                  className={`advisor-dot ${idx === i ? "active" : ""}`}
                  onClick={() => setI(idx)}
                  aria-label={`Advisor ${idx + 1}`}></button>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ── Timeline ───────────────────────────────────────────── */
const TRACKS = {
  "fall-spring": { label: "Fall / Spring", range: "September → May", months: ["Sept", "Nov", "Feb", "May"] },
  "spring-summer": { label: "Spring / Summer", range: "January → August", months: ["Jan", "Mar", "Jun", "Aug"] },
  "spring-fall": { label: "Spring / Fall", range: "January → December", months: ["Jan", "Mar", "Summer / Early Fall", "Dec"] }
};

function Timeline() {
  const [track, setTrack] = useS("fall-spring");
  const months = TRACKS[track].months;
  return (
    <section className="section on-blue" id="timeline">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">The Capstone Year</span>
            <h2 className="headline" style={{ marginTop: 20, color: "var(--gw-buff-pale)" }}>
              Four phases. <em>One arc.</em>
            </h2>
          </div>
          <div className="head-meta">
            {TRACKS[track].range}<br />
            ▸ continuous client engagement
          </div>
        </div>

        <div className="track-toggle reveal">
          <span className="track-label">Cohort track —</span>
          {Object.entries(TRACKS).map(([key, t]) =>
          <button key={key}
          className={`track-btn ${track === key ? "active" : ""}`}
          onClick={() => setTrack(key)}>
            
              {t.label}
            </button>
          )}
        </div>

        <div className="timeline reveal">
          {TIMELINE.map((t, idx) => {
            const m = months[idx];
            const longMonth = m.length > 6;
            return (
              <div key={idx} className="timeline-step">
                <div className="step-marker" aria-hidden="true">
                  <span></span><span></span><span></span><span></span>
                </div>
                <div className="season">{t.season}</div>
                <div className={`month ${longMonth ? "month-long" : ""}`}>{m}</div>
                <div className="step-title">{t.title}</div>
                <div className="step-desc">{t.desc}</div>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

/* ── Partners ───────────────────────────────────────────── */
function PartnersSection() {
  return (
    <section className="section" id="partners">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">Recurring Clients · 2022–2025</span>
            <h2 className="headline" style={{ marginTop: 20 }}>
              The people <em>who hire us.</em>
            </h2>
          </div>
          <div className="head-meta">
            {CLIENT_STATS.engagements} engagements across<br />
            {CLIENT_STATS.organizations} partner organizations
          </div>
        </div>
        <div className="partner-grid reveal">
          {PARTNERS.map((p) =>
          <div key={p.name} className="partner">
              <div className="p-name">{p.name}</div>
              <div className="p-loc">▸ {p.type}</div>
              <div className="p-type">
                <b style={{
                fontFamily: "var(--display)",
                fontSize: 22, fontWeight: 700,
                color: "var(--gw-blue)",
                letterSpacing: "-0.01em",
                marginRight: 6
              }}>{p.count}</b>
                projects since 2022
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── FAQ ────────────────────────────────────────────────── */
function FAQSection() {
  const [open, setOpen] = useS(0);
  return (
    <section className="section" id="faq" style={{ background: "var(--gw-buff-pale)" }}>
      <div className="container">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow">FAQ</span>
            <h2 className="headline" style={{ marginTop: 20 }}>
              Everything <em>you'd ask.</em>
            </h2>
          </div>
          <div className="head-meta">
            Still wondering?<br />
            ▸ <a href="#apply" style={{ color: "var(--gw-blue)", textDecoration: "underline" }}>talk to the Capstone Office</a>
          </div>
        </div>
        <div className="faq reveal">
          {FAQS.map((f, i) =>
          <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
              <div className="faq-q">
                <span className="faq-num">{String(i + 1).padStart(2, "0")}</span>
                <span className="faq-text">{f.q}</span>
                <span className="faq-toggle">+</span>
              </div>
              <div className="faq-a">{f.a}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ── CTA + Footer ──────────────────────────────────────── */
function CTA() {
  return (
    <section className="section on-blue" id="apply">
      <div className="container">
        <div className="cta-block reveal">
          <span className="eyebrow" style={{ justifyContent: "center" }}>CLASS OF 2029</span>
          <h2 className="display" style={{ marginTop: 28, marginBottom: 28, fontSize: "clamp(48px, 7vw, 116px)" }}>
            Your capstone<br />is <em>waiting.</em>
          </h2>
          <p className="lede" style={{ textAlign: "center", margin: "0 auto 36px" }}>
            Every capstone begins with one decision — yours. Applications for the 2027 cohort <b style={{ color: "var(--gw-buff)" }}>are now open</b>.
          </p>
          <div className="cta-row">
            <a className="btn" href="#">Start an application <span className="chev">›</span></a>
            <a className="btn ghost" href="#">Talk to a current student <span className="chev">›</span></a>
          </div>
          <div className="cta-meta">
            <span>165 projects delivered</span>
            <span>62 countries reached</span>
            <span>196 partner organizations</span>
            <span>13 faculty advisors</span>
          </div>
        </div>
      </div>
    </section>);

}

function FooterSection() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="signoff">Global<br />Capstone</div>
            <p className="sub">An eight-month, real-client engagement at the Elliott School. Independent prototype — not affiliated with the live program page.</p>
          </div>
          <div>
            <h4>The Program</h4>
            <ul>
              <li><a href="#overview">How it works</a></li>
              <li><a href="#timeline">The capstone year</a></li>
              <li><a href="#partners">Clients</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>
          <div>
            <h4>Browse</h4>
            <ul>
              <li><a href="#map">Where we work</a></li>
              <li><a href="#projects">Projects</a></li>
              <li><a href="#reel">Reel</a></li>
              <li><a href="#voices">Voices</a></li>
            </ul>
          </div>
          <div>
            <h4>Apply</h4>
            <ul>
              <li><a href="#apply">Cohort 2026 timeline</a></li>
              <li><a href="#apply">Talk to a student</a></li>
              <li><a href="#apply">Visit the office</a></li>
              <li><a href="#apply">Email us</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-base">
          <span>▸ Elliott School · 1957 E Street NW · Washington, D.C.</span>
          <span>Prototype · May 2026</span>
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  MetricsStrip, Overview, Projects, VideoReel, Testimonials, Advisors,
  Timeline, PartnersSection, FAQSection, CTA, FooterSection
});