/* global React, PFGlyph */
const { useState, useEffect, useRef } = React;

/* ============================================================
   CONTENT
   ============================================================ */

const PROVOCATIONS = [
{ lead: "The future isn't predicted.", accent: "It's built." },
{ lead: "Strategy without foresight", accent: "is just inertia in a suit." },
{ lead: "The forecast is broken.", accent: "The future is plural." },
{ lead: "Foresight is not fortune-telling.", accent: "It is stewardship." }];


const LENSES = [
{ id: "agrifood", n: "01", name: "Agrifood", glyph: "ripples", ink: "sprout",
  question: "How do we build food systems that thrive amidst climate change and supply chain shocks?" },
{ id: "tech", n: "02", name: "Emerging Tech", glyph: "spiral", ink: "sky",
  question: "What gets built when AI is not optimised for the next quarter's earnings call?" },
{ id: "governance", n: "03", name: "Governance", glyph: "branching", ink: "bloom",
  question: "Are our governance systems built for purpose in the polycrisis era?" }];


const WORK = [
{ sector: "Agrifood", ink: "sprout", title: "A 25-year horizon for a regional food network",
  challenge: "Supported FAO Asia and the Pacific in developing a capacity building programme to train government ministries on climate agrifood systems foresight, connecting scenarios to programmatic responses and relevant national development goals.",
  soWhat: "Training was development and deployed across six countries in Southeast Asia and led to funded agrifood systems programs for a more resilience, adaptive food system." },
{ sector: "Emerging Tech", ink: "sky", title: "Scenarios for a post-platform internet",
  challenge: "How can policymakers anticipate rather than respond to disruptive emerging technologies? What tools and frameworks can bring focus on the potential social, politics, economic impact of cutting-edge technological development?",
  soWhat: "A published research programme, two externally funded prototypes, and a cross-institution working group that has outlasted the engagement by eighteen months." },
{ sector: "Governance", ink: "bloom", title: "Citizen foresight for a mid-sized city",
  challenge: "How to bring together experts from the Nordic-Baltic region to rapidly develop different pathways for democracy in the year 2050 , and how should we do today in resposnse?",
  soWhat: "Developed a repeatable AI-assisted process for rapid prototyping of scenarios and policy response that centers human judgement and wisdom to create quick, yet deep and relevant governance and democracy insights." }];


const PARTNERS = [
{ initials: "DR", name: "Daniel Riveong", role: "Founding partner", ink: "ember",
  bio: "Board member, Association of Professional Futurists. Twenty years across governments, multinationals, and NGOs." },
{ initials: "ES", name: "Estefania Simon-Sasyk", role: "Partner", ink: "sprout",
  bio: "Founder of the Mycelium Gastronomy Network. Food systems, demographic foresight, and the politics of inheritance." }];


const FIELD_NOTES = [
{ date: "27 Apr 2026", sector: "Methodology", ink: "loam", title: "On the quiet violence of strategic plans." },
{ date: "14 Mar 2026", sector: "Demographics", ink: "bloom", title: "Aging Japan is not a cautionary tale. It is a syllabus." },
{ date: "02 Feb 2026", sector: "Studio", ink: "sky", title: "What we mean when we say <em>plural</em>." }];


window.PF_HOME = { PROVOCATIONS, LENSES, WORK, PARTNERS, FIELD_NOTES };

/* ============================================================
   HEADER
   ============================================================ */

const NAV_ITEMS = [
{ label: "Strategy & Foresight", href: "strategy-foresight.html", match: ["Strategy"] },
{ label: "Sectors & Offerings", href: "sectors-offerings.html", match: ["Sectors"] },
{ label: "Field Notes", href: "field-notes.html", match: ["Field Notes"] },
{ label: "About", href: "about.html", match: ["About"] }];


function Header({ active = "Home" }) {
  return (
    <header className="pf-header" data-screen-label="Header">
      <div className="pf-header__seam"></div>
      <div className="pf-header__in">
        <a href="index.html" className="pf-logo" aria-label="Plural Futures — home">
          <img src={(typeof window !== 'undefined' && window.__resources && window.__resources.logoImg) || "assets/logo-horizontal-teal.png"} alt="Plural Futures" />
        </a>
        <nav className="pf-nav">
          {NAV_ITEMS.map((it) => {
            const dead = it.href === "#";
            const isActive = it.match && it.match.includes(active);
            return (
              <a key={it.label} href={it.href} className={`${isActive ? "is-active" : ""} ${it.sec ? "pf-nav__sec" : ""}`.trim()}
              onClick={dead ? (e) => e.preventDefault() : undefined}>
                {it.label}
              </a>);

          })}
          <a href="lets-talk.html" className={`btn btn--primary pf-nav__cta ${active === "Let's Talk" ? "is-active" : ""}`.trim()}>
            Let's Talk <span className="arr" aria-hidden>↗</span>
          </a>
        </nav>
      </div>
    </header>);

}
window.PFHeader = Header;

/* ============================================================
   HERO — rotating provocations, plural / spectrum moment
   ============================================================ */

const hero = {
  wrap: { background: "var(--paper)", position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line)" },
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(72px, 10vw, 150px) var(--gutter) clamp(48px, 6vw, 88px)", position: "relative", zIndex: 1 },
  eyebrowRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, marginBottom: "clamp(40px, 6vw, 72px)", flexWrap: "wrap" },
  posTag: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase" },

  statementWrap: { position: "relative", minHeight: "clamp(240px, 30vw, 420px)" },
  statement: { position: "absolute", inset: 0, display: "flex", flexDirection: "column", justifyContent: "center", transition: "opacity 640ms var(--ease), transform 640ms var(--ease)" },
  lead: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(48px, 8.5vw, 132px)", lineHeight: 0.92, letterSpacing: "-0.03em", color: "var(--ink)", margin: 0, textWrap: "balance" },

  bottomRow: { display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: "clamp(32px, 5vw, 56px)", alignItems: "end", marginTop: "clamp(40px, 5vw, 64px)", paddingTop: 36, borderTop: "1px solid var(--line)" },
  descriptor: { fontFamily: "var(--font-body)", fontSize: "clamp(18px, 1.6vw, 23px)", lineHeight: 1.5, color: "var(--ink)", margin: 0, maxWidth: 540, textWrap: "pretty" },
  descriptorEm: { fontStyle: "italic", color: "var(--ink-2)" },

  ctaRow: { display: "flex", gap: 12, flexWrap: "wrap" },

  dots: { display: "flex", gap: 8, marginTop: 32, alignItems: "center" },
  dotsLabel: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em", marginRight: 8 },
  dot: { width: 26, height: 5, borderRadius: 3, background: "var(--line-2)", border: 0, padding: 0, cursor: "pointer", transition: "background 280ms var(--ease)" }
};

function Hero({ rotate = true, fixedIndex = 0, spectrumAccent = true }) {
  const [idx, setIdx] = useState(fixedIndex);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (!rotate || paused) return;
    const t = setInterval(() => setIdx((i) => (i + 1) % PROVOCATIONS.length), 6000);
    return () => clearInterval(t);
  }, [rotate, paused]);

  useEffect(() => {if (!rotate) setIdx(fixedIndex);}, [rotate, fixedIndex]);

  return (
    <section style={hero.wrap} id="top" data-screen-label="Hero"
    onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
      <div className="pf-motif pf-motif--rings pf-motif--fade-l" data-ink="ember" style={{ opacity: 0.1 }}></div>
      <div style={hero.inner}>
        <div style={hero.eyebrowRow}>
          <span className="eyebrow">Plural Futures — strategic foresight, since 2018</span>
          <span style={hero.posTag}></span>
        </div>

        <div style={hero.statementWrap}>
          {PROVOCATIONS.map((p, i) =>
          <h1 key={i} aria-hidden={i !== idx}
          style={{ ...hero.statement, ...hero.lead,
            opacity: i === idx ? 1 : 0,
            transform: i === idx ? "translateY(0)" : "translateY(14px)",
            pointerEvents: i === idx ? "auto" : "none" }}>
              {p.lead}<br />
              <span className={spectrumAccent ? "grad-text" : ""} style={spectrumAccent ? null : { color: "var(--ember)" }}>{p.accent}</span>
            </h1>
          )}
        </div>

        <div style={hero.bottomRow} className="pf-collapse-2">
          <p style={hero.descriptor}>
            We bring and develop strategy-oriented foresight practices to organisations that take the long view <span style={hero.descriptorEm}>seriously</span> — and who are willing to be changed by what they find.
          </p>
          <div style={hero.ctaRow}>
            <a href="strategy-foresight.html" className="btn btn--primary btn--lg">How we work <span className="arr" aria-hidden>→</span></a>
          </div>
        </div>

        {rotate &&
        <div style={hero.dots}>
            <span style={hero.dotsLabel}>0{idx + 1} / 0{PROVOCATIONS.length}</span>
            {PROVOCATIONS.map((_, i) =>
          <button key={i} aria-label={`Show provocation ${i + 1}`} onClick={() => setIdx(i)}
          style={{ ...hero.dot, background: i === idx ? "var(--ink)" : "var(--line-2)" }} />
          )}
          </div>
        }
      </div>
    </section>);

}
window.PFHero = Hero;