/* global React, PFGlyph */
/* Who We Are / About — v2 remix. Header/Footer come from homepage.jsx + sections.jsx. */

/* ============================================================
   CONTENT
   ============================================================ */
const ABOUT_PARTNERS = [
  {
    id: "daniel",
    slot: "about-partner-daniel",
    name: "Daniel Riveong",
    role: "Founding partner",
    ink: "ember",
    bio: [
      "Daniel began his foresight practice at Plural Futures after spending over 15 years in digital marketing and data analytics in San Francisco and Kuala Lumpur. He took his passionate about understanding how technological and social shifts create new markets and behaviour into the foresight and policymaking space.",
      "He believes that future thinking is a core skill across sectors and generations. He sits on the board of the Association of Professional Futurists and is the Foresight Learning Lead for next generation of changemakers at the School of International Futures.",
      "For clients, that means foresight built to survive contact with an actual Tuesday — translated between the people who hold the data and the people who hold the decision."
    ],
    quote: "The point was never to be right about the future. It was to be a little less surprised by it — and to have decided, in advance, what we would do either way.",
    thinking: "What is the dynamic between aging society and AI-led automation - how do we automate areas where we need labour and keep people employed amidst automation pressure.",
    links: [
      { label: "LinkedIn", href: "https://linkedin.com/in/riveong" },
      { label: "Assoc. of Professional Futurists", href: "#" }
    ]
  },
  {
    id: "estefania",
    slot: "about-partner-estefania",
    name: "Estefania Simon-Sasyk",
    role: "Partner",
    ink: "sprout",
    bio: [
      "Estefania is a Michelin-trained chef with a passion for transformation. She has led kitchens across Asia, South America, and Europe, but her desire to make a broader impact led her to become a food innovation and foresight practitioner.",
      "She’s collaborated with organizations like the WTO and IDB, tackling critical issues such as health, sustainability, and regional economic development. But she has also worked in product development, bringing new ideas to the market. She holds a Masters degree in Innovation and Entrepreneurship Management from HEC Paris.",
      "She founded the Mycelium Gastronomy Network to work with the producers, cooperatives, and communities who rarely get invited to imagine their own futures. Her work is grounded in the politics of inheritance: who gets to decide what a place keeps, changes, or lets go.",
      "She brings the studio a stubborn insistence that the future is something people live inside — not a quadrant on a chart."
    ],
    quote: "",
    thinking: "How diaspora movement, human mobility, and shifting cultural food practices are reshaping demand and supply, often well ahead of formal markets.",
    links: [
      { label: "LinkedIn", href: "https://www.linkedin.com/in/estefania-simon123/" },
      { label: "Mycelium Gastronomy Network", href: "https://www.myceliumgastronomy.com/" }
    ]
  }
];

const ABOUT_TEAM = [
  { slot: "about-team-1", descriptor: "Technology governance and regulatory foresight", sector: "Emerging Tech", ink: "sky" },
  { slot: "about-team-2", descriptor: "Participatory research and community futures", sector: "Governance", ink: "bloom" },
  { slot: "about-team-3", descriptor: "Food systems and demographic foresight", sector: "Agrifood", ink: "sprout" },
  { slot: "about-team-4", descriptor: "Strategy facilitation and scenario design", sector: "Emerging Tech", ink: "sky" }
];

const ABOUT_PRINCIPLES = [
  {
    n: "01", glyph: "eye", ink: "ember", title: "We start with listening",
    body: "Every engagement begins with conversation, not a methodology. Before we bring a single framework into the room, we want to understand your situation in its own language — its history, its constraints, the things people are careful about saying out loud. The first deliverable is usually a better question than the one you arrived with."
  },
  {
    n: "02", glyph: "chevron", ink: "sky", title: "We work iteratively, not linearly",
    body: "We do not hand over a report and disappear. The work evolves as you do — scenarios get revisited, signals re-weighted, decisions tested against what actually happened last quarter. We are trying to leave behind anticipatory infrastructure, not a document. That takes more than one meeting."
  },
  {
    n: "03", glyph: "network", ink: "sprout", title: "We bring the team that fits the work",
    body: "Depending on the sector and the question, different collaborators join the engagement. A governance project pulls in different people than a food-systems one — and that is the point. The team above is not decorative; it is how the work actually gets staffed."
  }
];

/* ============================================================
   HERO — disarming opening, no CTA
   ============================================================ */
const aHero = {
  wrap: { background: "var(--paper)", borderBottom: "1px solid var(--line)", padding: "clamp(56px, 8vw, 120px) var(--gutter) clamp(48px, 6vw, 88px)", position: "relative", overflow: "hidden" },
  inner: { maxWidth: "var(--container)", margin: "0 auto", position: "relative", zIndex: 1 },
  topStrip: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, paddingBottom: 20, borderBottom: "1px solid var(--line)", marginBottom: "clamp(36px, 5vw, 64px)", flexWrap: "wrap" },
  crumb: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-2)", letterSpacing: "0.04em" },
  crumbHome: { color: "var(--ink-2)", textDecoration: "none", borderBottom: "1px solid var(--line-2)" },
  pageMark: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" },
  comp: { display: "grid", gridTemplateColumns: "minmax(220px, 0.62fr) 1.38fr", gap: "clamp(28px, 5vw, 80px)", alignItems: "start" },
  eyebrowCol: { paddingTop: 8 },
  statement: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(30px, 3.8vw, 56px)", lineHeight: 1.06, letterSpacing: "-0.025em", color: "var(--ink)", margin: "20px 0 0", textWrap: "balance" },
  statementEm: { color: "var(--accent-deep)", fontStyle: "italic", fontFamily: "var(--font-body)", fontWeight: 400 }
};

function AboutHero() {
  return (
    <section style={aHero.wrap} data-ink="ember" data-screen-label="About Hero">
      <div className="pf-motif pf-motif--dots pf-motif--fade-r" style={{ opacity: 0.07 }}></div>
      <div style={aHero.inner}>
        <div style={aHero.topStrip}>
          <div style={aHero.crumb}>
            <a href="index.html" style={aHero.crumbHome}>Plural Futures</a>
            <span style={{ margin: "0 10px", color: "var(--ink-3)" }}>/</span>
            <span style={{ color: "var(--ink)" }}>Who we are</span>
          </div>
          <div style={aHero.pageMark}>The people behind the practice</div>
        </div>
        <div style={aHero.comp} className="pf-collapse-2">
          <div style={aHero.eyebrowCol}>
            <span className="eyebrow">Who we are</span>
          </div>
          <div>
            <p style={aHero.statement}>
              Plural Futures was built on a simple belief: better futures take more than better analysis. They take people willing to sit with complexity long enough to <span style={aHero.statementEm}>act on it</span> — and to be changed by what they find.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}
window.AboutHero = AboutHero;

/* ============================================================
   THE TWO PARTNERS — full-width alternating
   ============================================================ */
const aPart = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  block: { display: "grid", gridTemplateColumns: "minmax(260px, 0.85fr) 1.15fr", gap: "clamp(32px, 5vw, 72px)", alignItems: "start" },
  blockStacked: { display: "grid", gridTemplateColumns: "minmax(220px, 320px) 1fr", gap: "clamp(28px, 4vw, 56px)", alignItems: "start" },
  figCol: { display: "flex", flexDirection: "column", gap: 18 },
  slot: { width: "100%", height: "auto", aspectRatio: "4 / 5", display: "block", border: "1px solid var(--line)" },
  thinkCard: { border: "1px solid var(--line)", borderRadius: "var(--radius)", background: "var(--accent-wash)", padding: "18px 20px", display: "flex", flexDirection: "column", gap: 8 },
  thinkLabel: { fontFamily: "var(--font-mono)", fontSize: 10.5, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--accent-deep)" },
  thinkText: { fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 15, lineHeight: 1.4, color: "var(--ink)", margin: 0 },
  role: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--accent-deep)", marginBottom: 10 },
  name: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(30px, 3.4vw, 48px)", lineHeight: 1.0, letterSpacing: "-0.025em", color: "var(--ink)", margin: "0 0 26px" },
  bio: { fontFamily: "var(--font-body)", fontSize: "clamp(16px, 1.25vw, 18px)", lineHeight: 1.62, color: "var(--ink-2)", margin: "0 0 18px" },
  quote: { fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: "clamp(20px, 2vw, 27px)", lineHeight: 1.3, color: "var(--ink)", margin: "30px 0 0", borderLeft: "var(--stroke-bold) solid var(--accent)", paddingLeft: 24, textWrap: "pretty" },
  links: { display: "flex", flexWrap: "wrap", gap: 10, marginTop: 30 }
};

function PartnerBlock({ p, i, reversed, stacked, showThinking }) {
  const figIdx = (reversed && !stacked) ? 2 : 1;
  const fig = (
    <div style={{ ...aPart.figCol, order: stacked ? 0 : figIdx }}>
      <image-slot id={p.slot} src={`assets/${p.slot}.webp`} shape="rounded" radius="14" style={aPart.slot}
        placeholder={`Drop ${p.name.split(" ")[0]}'s portrait`}></image-slot>
      {showThinking &&
        <div style={aPart.thinkCard}>
          <span style={aPart.thinkLabel}>Currently thinking about</span>
          <p style={aPart.thinkText}>{p.thinking}</p>
        </div>}
    </div>
  );
  const content = (
    <div style={{ order: stacked ? 1 : (reversed ? 1 : 2) }}>
      <div style={aPart.role}>{p.role} · 0{i + 1}</div>
      <h3 style={aPart.name}>{p.name}</h3>
      {p.bio.map((para, k) => <p key={k} style={aPart.bio}>{para}</p>)}
      {p.quote && <blockquote style={aPart.quote}>{p.quote}</blockquote>}
      <div style={aPart.links}>
        {p.links.map((l) =>
          <a key={l.label} href={l.href}
            onClick={l.href === "#" ? (e) => e.preventDefault() : undefined}
            target={l.href === "#" ? undefined : "_blank"}
            rel={l.href === "#" ? undefined : "noopener"}
            className="pf-pill-link">
            {l.label} <span aria-hidden>↗</span>
          </a>
        )}
      </div>
    </div>
  );
  return (
    <div data-ink={p.ink} style={stacked ? aPart.blockStacked : aPart.block} className="pf-collapse-2">
      {fig}
      {content}
    </div>
  );
}

function AboutPartners({ stacked = false, showThinking = true }) {
  return (
    <section className="pf-section pf-bg-1" data-screen-label="The Two Partners">
      <div style={aPart.inner}>
        <div className="pf-headrow" style={{ marginBottom: "clamp(40px, 5vw, 64px)" }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>The two partners</div>
            <h2 className="pf-section-title">Two people. One network.</h2>
          </div>
          <p className="pf-section-sub">We are deliberately small. The work is led by two partners who have spent their careers refusing the easy version of the future.</p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: "clamp(56px, 7vw, 104px)" }}>
          {ABOUT_PARTNERS.map((p, i) =>
            <PartnerBlock key={p.id} p={p} i={i} reversed={i % 2 === 1} stacked={stacked} showThinking={showThinking} />
          )}
        </div>
      </div>
    </section>
  );
}
window.AboutPartners = AboutPartners;

/* ============================================================
   WHY A TEAM — transition
   ============================================================ */
const aWhy = {
  inner: { maxWidth: 900, margin: "0 auto", padding: "0 var(--gutter)", textAlign: "left" },
  label: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--accent-deep)", display: "inline-flex", alignItems: "center", gap: 12, marginBottom: 22 },
  rule: { width: 22, height: 2, background: "currentColor", display: "inline-block" },
  text: { fontFamily: "var(--font-body)", fontSize: "clamp(21px, 2.1vw, 30px)", lineHeight: 1.4, color: "var(--ink)", margin: 0, textWrap: "pretty" },
  em: { color: "var(--accent-deep)", fontStyle: "italic" }
};

function AboutWhyTeam() {
  return (
    <section className="pf-section pf-bg-2 pf-section--tight" data-ink="bloom" data-screen-label="Why a Team">
      <div style={aWhy.inner}>
        <span style={aWhy.label}><span style={aWhy.rule}></span>Why a wider team</span>
        <p style={aWhy.text}>
          We are two partners, but Plural Futures has never been a practice of two. The name is a commitment — a single pair of perspectives, however experienced, cannot hold the <span style={aWhy.em}>plurality</span> the work demands. For each engagement we convene a small group of collaborators whose expertise actually fits the question in front of us. That is a deliberate choice about how foresight should be done, not a way of padding the roster.
        </p>
      </div>
    </section>
  );
}
window.AboutWhyTeam = AboutWhyTeam;

/* ============================================================
   THE CONSULTING TEAM — labelled placeholder cards
   ============================================================ */
const aTeam = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid3: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  grid4: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 },
  card: { padding: 0, overflow: "hidden" },
  slot: { width: "100%", height: "auto", aspectRatio: "1 / 1", display: "block", borderBottom: "1px solid var(--line)" },
  body: { padding: "22px 22px 24px", display: "flex", flexDirection: "column", gap: 12, flex: 1 },
  top: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10 },
  num: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em" },
  descriptor: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19, lineHeight: 1.18, letterSpacing: "-0.015em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  placeholder: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.04em", lineHeight: 1.5, margin: 0, borderTop: "1px dashed var(--line-2)", paddingTop: 12, marginTop: "auto" }
};

function AboutTeam({ cols = 4 }) {
  const items = cols === 3 ? ABOUT_TEAM.slice(0, 3) : ABOUT_TEAM;
  return (
    <section className="pf-section pf-bg-1" data-screen-label="The Consulting Team">
      <div style={aTeam.inner}>
        <div className="pf-headrow" style={{ marginBottom: "clamp(36px, 5vw, 56px)" }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>The consulting team</div>
            <h2 className="pf-section-title">The people we bring in.</h2>
          </div>
          <p className="pf-section-sub">A standing group of collaborators, drawn into engagements where their expertise fits the question.</p>
        </div>
        <div style={cols === 3 ? aTeam.grid3 : aTeam.grid4} className="pf-collapse-3">
          {items.map((m, i) =>
            <div key={m.slot} className="pf-card" data-ink={m.ink} style={aTeam.card}>
              <image-slot id={m.slot} shape="rect" style={aTeam.slot}
                placeholder="Drop portrait"></image-slot>
              <div style={aTeam.body}>
                <div style={aTeam.top}>
                  <span style={aTeam.num}>0{i + 1}</span>
                  <span className="pf-tag pf-tag--accent">{m.sector}</span>
                </div>
                <h3 style={aTeam.descriptor}>{m.descriptor}</h3>
                <p style={aTeam.placeholder}>Name &amp; short bio to be added — background, specific expertise, and one concrete thing they have worked on with the studio.</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
window.AboutTeam = AboutTeam;

/* ============================================================
   HOW WE WORK — three named principles
   ============================================================ */
const aHow = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: "clamp(28px, 4vw, 56px)" },
  col: { display: "flex", flexDirection: "column", gap: 18, paddingTop: 26, borderTop: "var(--stroke-bold) solid var(--ink)" },
  top: { display: "flex", alignItems: "center", justifyContent: "space-between" },
  num: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.08em" },
  glyphTile: { width: 52, height: 52, borderRadius: "var(--r-sm)", background: "var(--accent-wash)", color: "var(--accent-deep)", display: "flex", alignItems: "center", justifyContent: "center" },
  title: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(23px, 2vw, 29px)", lineHeight: 1.1, letterSpacing: "-0.02em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  body: { fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.6, color: "var(--ink-2)", margin: 0 }
};

function AboutHowWork() {
  return (
    <section className="pf-section pf-bg-3" data-screen-label="How We Work">
      <div style={aHow.inner}>
        <div className="pf-headrow" style={{ marginBottom: "clamp(40px, 5vw, 64px)" }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>How we work</div>
            <h2 className="pf-section-title">What it's actually like.</h2>
          </div>
          <p className="pf-section-sub">Less a process than a set of habits. This is roughly what a partner would tell you in a first meeting.</p>
        </div>
        <div style={aHow.grid} className="pf-collapse-3">
          {ABOUT_PRINCIPLES.map((c) =>
            <div key={c.n} data-ink={c.ink} style={aHow.col}>
              <div style={aHow.top}>
                <span style={aHow.num}>{c.n}</span>
                <span style={aHow.glyphTile}><PFGlyph name={c.glyph} size={28} /></span>
              </div>
              <h3 style={aHow.title}>{c.title}</h3>
              <p style={aHow.body}>{c.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}
window.AboutHowWork = AboutHowWork;

/* ============================================================
   A NOTE ON COLLABORATION — slim
   ============================================================ */
const aCollab = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", display: "grid", gridTemplateColumns: "0.5fr 1.5fr", gap: "clamp(32px, 6vw, 96px)", alignItems: "start" },
  side: { borderTop: "var(--stroke-bold) solid var(--ink)", paddingTop: 20 },
  overline: { fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-2)", margin: 0 },
  meta: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", marginTop: 12, letterSpacing: "0.04em" },
  prose: { fontFamily: "var(--font-body)", fontSize: "clamp(18px, 1.6vw, 22px)", lineHeight: 1.55, color: "var(--ink)", margin: 0, textWrap: "pretty", maxWidth: "60ch" },
  em: { color: "var(--accent-deep)", fontStyle: "italic" }
};

function AboutCollab() {
  return (
    <section className="pf-section pf-bg-2 pf-section--tight" data-ink="sky" data-screen-label="A Note on Collaboration">
      <div style={aCollab.inner} className="pf-collapse-2">
        <div style={aCollab.side}>
          <p style={aCollab.overline}>A note on collaboration</p>
          <p style={aCollab.meta}>Network-shaped by design</p>
        </div>
        <p style={aCollab.prose}>
          Plural Futures is network-shaped by design. Alongside our consulting team, we work with external researchers, partner organisations, and academic institutions whenever a question calls for expertise we do not hold ourselves. Daniel's work with the <em style={aCollab.em}>Association of Professional Futurists</em> and Estefania's <em style={aCollab.em}>Mycelium Gastronomy Network</em> keep us in close conversation with practitioners well beyond the studio. We would rather bring in the right voice than pretend to be it — and where a collaboration shapes the work, we say so.
        </p>
      </div>
    </section>
  );
}
window.AboutCollab = AboutCollab;

/* ============================================================
   CLOSING CTA — quiet, relational
   ============================================================ */
const aClose = {
  wrap: { background: "var(--paper)", borderTop: "1px solid var(--line)" },
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(64px, 8vw, 112px) var(--gutter)", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: "clamp(36px, 5vw, 72px)", alignItems: "center" },
  eyebrow: { marginBottom: 22 },
  heading: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(28px, 3.4vw, 50px)", lineHeight: 1.05, letterSpacing: "-0.025em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  headingEm: { color: "var(--accent-deep)" },
  ctaCol: { display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" },
  fine: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.04em", marginTop: 6 }
};

function AboutClose() {
  return (
    <section style={aClose.wrap} data-ink="ember" data-screen-label="Closing CTA">
      <div style={aClose.inner} className="pf-collapse-2">
        <div>
          <div className="eyebrow" style={aClose.eyebrow}>Before you go</div>
          <h2 style={aClose.heading}>
            If something we're working on feels relevant to what you're building, <span style={aClose.headingEm}>we'd like to hear from you.</span>
          </h2>
        </div>
        <div style={aClose.ctaCol}>
          <a href="index.html#reach-out" className="btn btn--primary btn--lg">Reach out <span className="arr" aria-hidden>→</span></a>
          <a href="mailto:hello@pluralfutures.com" className="btn btn--outline btn--lg">hello@pluralfutures.com</a>
          <div style={aClose.fine}>We answer most notes within 3 working days.</div>
        </div>
      </div>
    </section>
  );
}
window.AboutClose = AboutClose;
