/* global React, PFGlyph */
/* Sectors & Offerings — v2 remix. */

const { useState: useStateSO, useEffect: useEffectSO } = React;

/* ============================================================
   DATA
   ============================================================ */
const SECTOR_DATA = [
{
  id: "agrifood", num: "01", name: "Agrifood Systems & Sustainability", short: "Agrifood",
  ink: "sprout", glyph: "ripples",
  framing: "Who plans for the harvest after the one we will not have?",
  description: "We work with cooperatives, agencies, philanthropies, and producer networks navigating climate volatility, generational handover, and supply chains that are being rewritten in real time. Foresight matters here because food systems answer to slower physics than quarterly capital — and to communities that have always known the future was negotiated, not delivered.",
  caseClient: "Creating more Resilient Agrifood Systems · Southeast Asia",
  caseChallenge: "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.",
  caseSoWhat: "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.",
  offerings: ["Strategic Advisory", "Capacity Building", "Workshops", "Master Class"]
},
{
  id: "tech", num: "02", name: "Emerging Technologies", short: "Emerging Tech",
  ink: "sky", glyph: "spiral",
  framing: "What gets built when AI is not optimised for the next earnings call?",
  description: "We advise research labs, policy bodies, and technology organisations working at the edge of the dominant narrative — particularly those exploring decentralised, public-interest, or post-platform alternatives. The work tends to attract people who are bored of the current consensus and who suspect the consensus is bored of them.",
  caseClient: "Helping Policymakers Avoid Technological Shock",
  caseChallenge: "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? ",
  caseSoWhat: "A published research programme, two externally funded prototypes, and a cross-institution working group that has outlasted the engagement by eighteen months.",
  offerings: ["Strategic Advisory", "Keynote Speaking", "Workshops", "Master Class"]
},
{
  id: "governance", num: "03", name: "Governance & Democracy", short: "Governance",
  ink: "bloom", glyph: "branching",
  framing: "Who is actually allowed to imagine the future of this institution — and who is not in the room?",
  description: "We support city governments, public agencies, civic organisations, and democratic experiments developing the methods, formats, and habits to think on a horizon longer than the next election cycle. This is patient work, often unglamorous, and the only kind of foresight that holds when the political weather changes.",
  caseClient: "Future of Democracy for the Nordic-Baltic (NB8) Region",
  caseChallenge: "How to bring together experts from the Nordic-Baltic region to rapidly develop different pathways for democracy in the year 2050 , and what should we do today in resposnse?",
  caseSoWhat: "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.",
  offerings: ["Capacity Building", "Workshops", "Strategic Advisory"]
}];


const SECTOR_BG = ["pf-bg-1", "pf-bg-2", "pf-bg-3"];

/* ============================================================
   INTRO
   ============================================================ */
/* Three-Systems glyph vocabulary (inlined from the intersection diagram) ---- */
const SO_GLYPH = {
  technology: `
    <path d="M120 120 L146 68"/><path d="M120 120 L172 94"/>
    <path d="M120 120 L172 146"/><path d="M120 120 L94 172"/>
    <path d="M120 120 L68 146"/>
    <g fill="currentColor" stroke="none">
      <circle cx="68" cy="68" r="4"/><circle cx="94" cy="68" r="4"/><circle cx="120" cy="68" r="4"/><circle cx="146" cy="68" r="4"/><circle cx="172" cy="68" r="4"/>
      <circle cx="68" cy="94" r="4"/><circle cx="94" cy="94" r="4"/><circle cx="120" cy="94" r="4"/><circle cx="146" cy="94" r="4"/><circle cx="172" cy="94" r="4"/>
      <circle cx="68" cy="120" r="4"/><circle cx="94" cy="120" r="4"/><circle cx="146" cy="120" r="4"/><circle cx="172" cy="120" r="4"/>
      <circle cx="68" cy="146" r="4"/><circle cx="94" cy="146" r="4"/><circle cx="120" cy="146" r="4"/><circle cx="146" cy="146" r="4"/><circle cx="172" cy="146" r="4"/>
      <circle cx="68" cy="172" r="4"/><circle cx="94" cy="172" r="4"/><circle cx="120" cy="172" r="4"/><circle cx="146" cy="172" r="4"/><circle cx="172" cy="172" r="4"/>
      <circle cx="120" cy="120" r="8.5"/>
    </g>`,
  agrifood: `
    <path d="M48 112 L192 112"/>
    <path d="M120 112 L120 80"/><path d="M120 112 L120 140"/>
    <path d="M120 140 L86 174"/><path d="M120 140 L120 182"/><path d="M120 140 L154 174"/>
    <path d="M103 157 L90 150"/><path d="M137 157 L150 150"/>
    <circle cx="120" cy="74" r="9" fill="currentColor" stroke="none"/>
    <circle cx="86" cy="176" r="5" fill="currentColor" stroke="none"/>
    <circle cx="120" cy="184" r="5" fill="currentColor" stroke="none"/>
    <circle cx="154" cy="176" r="5" fill="currentColor" stroke="none"/>`,
  governance: `
    <path d="M120 120 L120 48"/><path d="M120 120 L57.6 84"/>
    <path d="M120 120 L57.6 156"/><path d="M120 120 L120 192"/>
    <path d="M120 120 L182.4 156"/><path d="M120 120 L182.4 84"/>
    <g fill="currentColor" stroke="none">
      <circle cx="120" cy="48" r="8"/><circle cx="57.6" cy="84" r="8"/>
      <circle cx="57.6" cy="156" r="8"/><circle cx="120" cy="192" r="8"/>
      <circle cx="182.4" cy="156" r="8"/><circle cx="182.4" cy="84" r="8"/>
      <circle cx="120" cy="120" r="11"/>
    </g>`
};
function SOGlyph({ name, size = 84, stroke = 4.5, color = "var(--ink)" }) {
  return React.createElement("svg", {
    width: size, height: size, viewBox: "0 0 240 240",
    fill: "none", stroke: color, strokeWidth: stroke,
    strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true,
    dangerouslySetInnerHTML: { __html: SO_GLYPH[name] }
  });
}
const SO_SYSTEMS = [
{ key: "technology", name: "Technology", gloss: "the technologies we build" },
{ key: "agrifood", name: "Food & planet", gloss: "the food systems that sustain us on a living planet" },
{ key: "governance", name: "Governance", gloss: "the governance through which we make decisions together" }];


const soIntro = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(72px, 9vw, 132px) var(--gutter) clamp(56px, 6vw, 80px)", position: "relative", zIndex: 1 },
  meta: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, marginBottom: "clamp(40px, 6vw, 72px)", flexWrap: "wrap" },
  crumb: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-2)", letterSpacing: "0.04em" },
  crumbLink: { 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" },
  head: { display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: "clamp(32px, 5vw, 64px)", alignItems: "end", marginTop: 20 },
  title: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(44px, 6vw, 76px)", lineHeight: 0.94, letterSpacing: "-0.03em", color: "var(--ink)", margin: "0", textWrap: "balance", maxWidth: "12ch" },
  lead: { fontFamily: "var(--font-body)", fontSize: "clamp(19px, 1.7vw, 25px)", lineHeight: 1.5, color: "var(--ink)", margin: 0, textWrap: "pretty" },
  leadEm: { fontStyle: "italic", color: "var(--accent-deep)" },
  row: { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", marginTop: "clamp(48px, 6vw, 64px)", borderTop: "1.5px solid var(--ink)" },
  cell: { padding: "clamp(28px, 3vw, 40px) clamp(20px, 2.4vw, 36px) 4px" },
  tile: { width: 112, height: 112, border: "1.5px solid var(--ink)", borderRadius: 4, background: "var(--paper)", display: "flex", alignItems: "center", justifyContent: "center" },
  name: { fontFamily: "var(--font-display)", textTransform: "uppercase", fontWeight: 600, fontSize: "clamp(26px, 2.6vw, 32px)", lineHeight: 1, letterSpacing: "0.005em", color: "var(--ink)", margin: "26px 0 0" },
  gloss: { fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.45, color: "var(--ink-2)", margin: "12px 0 0", maxWidth: "26ch" }
};

function SOIntro() {
  return (
    <section className="pf-bg-1" data-screen-label="Sectors Intro" style={{ position: "relative", overflow: "hidden" }}>
      <div className="pf-motif pf-motif--grid pf-motif--fade-l" data-ink="ember" style={{ opacity: 0.07 }}></div>
      <div style={soIntro.inner}>
        <div style={soIntro.meta}>
          <div style={soIntro.crumb}>
            <a href="index.html" style={soIntro.crumbLink}>Plural Futures</a>
            <span style={{ margin: "0 10px" }}>/</span>
            <span style={{ color: "var(--ink)" }}>Sectors &amp; Offerings</span>
          </div>
          <div style={soIntro.pageMark}>§ 01 · The applied work</div>
        </div>

        <div className="pf-srule"></div>
        <div className="eyebrow" style={{ marginBottom: 0 }}>The intersection</div>
        <div style={soIntro.head} className="pf-collapse-2">
          <h1 style={soIntro.title}>Three sectors. <span className="grad-text">Chosen,</span> not collected.</h1>
          <p style={soIntro.lead}>
            We work at the intersection of complex systems and strategic design&#8209;making in the sectors that shape collective futures:{" "}
            <span style={soIntro.leadEm}>the technologies we build</span>,{" "}
            <span style={soIntro.leadEm}>the food systems that sustain us on a living planet</span>, and{" "}
            <span style={soIntro.leadEm}>the governance through which we make decisions together</span>.
          </p>
        </div>

        <div style={soIntro.row} className="pf-collapse-3">
          {SO_SYSTEMS.map((s) =>
          <div key={s.key} className="so-syscell" style={soIntro.cell}>
              <div style={soIntro.tile}><SOGlyph name={s.key} /></div>
              <h2 style={soIntro.name}>{s.name}</h2>
              <p style={soIntro.gloss}>{s.gloss}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.SOIntro = SOIntro;

/* ============================================================
   STICKY SECTOR NAV
   ============================================================ */
const soNav = {
  wrap: { background: "color-mix(in srgb, var(--paper) 86%, transparent)", WebkitBackdropFilter: "blur(14px)", backdropFilter: "blur(14px)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)", position: "sticky", top: 0, zIndex: 40 },
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "10px var(--gutter)", display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" },
  label: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-3)", marginRight: "auto" },
  tab: { display: "inline-flex", alignItems: "center", gap: 10, padding: "9px 16px", borderRadius: "var(--r-pill)", textDecoration: "none", border: "1.5px solid var(--line-2)", color: "var(--ink)", transition: "background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease)" },
  num: { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.06em", opacity: 0.75 },
  name: { fontFamily: "var(--font-mono)", fontSize: 12, letterSpacing: "0.04em", textTransform: "uppercase" }
};

function SONav() {
  const [active, setActive] = useStateSO("agrifood");
  useEffectSO(() => {
    const ids = SECTOR_DATA.map((s) => s.id);
    const onScroll = () => {
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 160) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav style={soNav.wrap} data-screen-label="Sector Nav">
      <div style={soNav.inner}>
        <span style={soNav.label}>Jump to sector</span>
        {SECTOR_DATA.map((s) => {
          const on = active === s.id;
          return (
            <a key={s.id} href={`#${s.id}`} data-ink={s.ink}
            style={{ ...soNav.tab, ...(on ? { background: "var(--accent)", color: "var(--accent-on)", borderColor: "transparent" } : {}) }}>
              <span style={soNav.num}>{s.num}</span>
              <span style={soNav.name}>{s.short}</span>
            </a>);

        })}
      </div>
    </nav>);

}
window.SONav = SONav;

/* ============================================================
   SECTOR BLOCK
   ============================================================ */
const soSec = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(72px, 9vw, 128px) var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "start", position: "relative", zIndex: 1 },
  leftCol: { display: "flex", flexDirection: "column", gap: 28 },
  topRow: { display: "flex", alignItems: "center", justifyContent: "space-between", borderTop: "var(--stroke-bold) solid var(--ink)", paddingTop: 18 },
  sectorMark: { fontFamily: "var(--font-mono)", fontSize: 11, letterSpacing: "0.1em", color: "var(--ink-3)", textTransform: "uppercase" },
  glyphTile: { width: 68, height: 68, borderRadius: "var(--radius)", background: "var(--accent-wash)", color: "var(--accent-deep)", display: "flex", alignItems: "center", justifyContent: "center" },
  name: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(34px, 4.4vw, 60px)", lineHeight: 0.96, letterSpacing: "-0.025em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  framing: { fontFamily: "var(--font-body)", fontStyle: "italic", fontWeight: 400, fontSize: "clamp(22px, 2.4vw, 30px)", lineHeight: 1.25, color: "var(--ink)", margin: 0, borderLeft: "var(--stroke-bold) solid var(--accent)", paddingLeft: 22, textWrap: "pretty" },
  description: { fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.6, color: "var(--ink-2)", margin: 0, maxWidth: 540 },
  offeringsBox: { borderTop: "1px solid var(--line)", paddingTop: 20 },
  offeringsLabel: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-3)", marginBottom: 12 },
  pills: { display: "flex", flexWrap: "wrap", gap: 8 },

  caseWrap: { borderRadius: "var(--radius)", background: "var(--surface)", border: "1px solid var(--line)", padding: "clamp(26px, 3vw, 38px)", display: "flex", flexDirection: "column", gap: 22, position: "sticky", top: 90, boxShadow: "var(--shadow-2)" },
  caseHead: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 16, borderBottom: "1px solid var(--line)" },
  caseTag: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--accent-deep)" },
  caseId: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.06em" },
  caseClient: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22, lineHeight: 1.15, letterSpacing: "-0.015em", color: "var(--ink)", margin: 0 },
  caseBlock: { display: "flex", flexDirection: "column", gap: 8 },
  caseLabel: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-3)" },
  caseBody: { fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 },
  caseBodyEm: { color: "var(--ink)", fontStyle: "italic" },
  caseLink: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink)", textDecoration: "none", borderTop: "1px solid var(--line)", paddingTop: 16, display: "flex", alignItems: "center", justifyContent: "space-between" }
};

function SOSector({ data, index, onOfferingClick }) {
  return (
    <section id={data.id} className={SECTOR_BG[index]} data-ink={data.ink}
    style={{ scrollMarginTop: 70, position: "relative", overflow: "hidden", borderBottom: "1px solid var(--line)" }}
    data-screen-label={`Sector ${data.num} · ${data.short}`}>
      <div style={soSec.inner} className="pf-collapse-2">
        <div style={soSec.leftCol}>
          <div style={soSec.topRow}>
            <div style={soSec.sectorMark}>Sector · {data.num} of 03</div>
            <span style={soSec.glyphTile}><SOGlyph name={data.id === "tech" ? "technology" : data.id} size={40} stroke={6} color="currentColor" /></span>
          </div>
          <h2 style={soSec.name}>{data.name}</h2>
          <h3 style={soSec.framing}>{data.framing}</h3>
          <p style={soSec.description}>{data.description}</p>
          <div style={soSec.offeringsBox}>
            <div style={soSec.offeringsLabel}>Relevant offerings</div>
            <div style={soSec.pills}>
              {data.offerings.map((o) =>
              <a key={o} href="#offerings" className="pf-pill-link"
              onClick={(e) => {e.preventDefault();onOfferingClick(o);}}>
                  {o} <span aria-hidden style={{ opacity: 0.7 }}>↓</span>
                </a>
              )}
            </div>
          </div>
        </div>

        <div>
          <div style={soSec.caseWrap}>
            <div style={soSec.caseHead}>
              <span style={soSec.caseTag}>Selected work</span>
              <span style={soSec.caseId}>CS · {data.num}</span>
            </div>
            <h4 style={soSec.caseClient}>{data.caseClient}</h4>
            <div style={soSec.caseBlock}>
              <span style={soSec.caseLabel}>The challenge</span>
              <p style={soSec.caseBody}>{data.caseChallenge}</p>
            </div>
            <div style={soSec.caseBlock}>
              <span style={soSec.caseLabel}>So what</span>
              <p style={{ ...soSec.caseBody, ...soSec.caseBodyEm }}>{data.caseSoWhat}</p>
            </div>
            <a href="#" onClick={(e) => e.preventDefault()} style={soSec.caseLink}>
              <span></span><span aria-hidden>↗</span>
            </a>
          </div>
        </div>
      </div>
    </section>);

}
window.SOSector = SOSector;
window.SECTOR_DATA = SECTOR_DATA;

/* ============================================================
   CLIENT LIST
   ============================================================ */
const CLIENTS = [
"European Government Agency",
"FAO Asia and the Pacific",
"Global South-focused Agricultural Financial Organization",
"International IDEA",
"Joint Research Centre, European Commission",
"Save the Children UK",
"School of International Futures",
"Major multinational food company",
"UNICEF Malaysia",
"Westminster International University in Tashkent (WIUT)",
"WHO Western Pacific Region",
"European Research University"];


const soClients = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", borderRadius: "var(--radius)", overflow: "hidden", border: "1px solid var(--line)", background: "var(--surface)" },
  cell: { padding: "20px 22px", fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.35, color: "var(--ink)", borderRight: "1px solid var(--line)", borderBottom: "1px solid var(--line)" },
  cellNum: { fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)", letterSpacing: "0.08em", display: "block", marginBottom: 6 },
  note: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", marginTop: 20, letterSpacing: "0.02em" }
};

function SOClients() {
  const cols = 3,rows = Math.ceil(CLIENTS.length / cols);
  return (
    <section className="pf-section pf-bg-1" data-screen-label="Client List">
      <div style={soClients.inner}>
        <div className="pf-headrow" style={{ marginBottom: 40 }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>SELECTED EXPERIENCE</div>
            <div className="pf-overline">§ 05 · Track record</div>
          </div>
          <p className="pf-section-sub" style={{ maxWidth: 460 }}>A partial list</p>
        </div>
        <div style={soClients.grid} className="pf-collapse-3">
          {CLIENTS.map((c, i) => {
            const col = i % cols,row = Math.floor(i / cols);
            return (
              <div key={c} style={{ ...soClients.cell,
                borderRight: col === cols - 1 ? 0 : soClients.cell.borderRight,
                borderBottom: row === rows - 1 ? 0 : soClients.cell.borderBottom }}>
                <span style={soClients.cellNum}>{String(i + 1).padStart(2, "0")}</span>{c}
              </div>);

          })}
        </div>
        <p style={soClients.note}> </p>
      </div>
    </section>);

}
window.SOClients = SOClients;

/* ============================================================
   OFFERINGS
   ============================================================ */
const OFFERINGS = [
{ n: "01", name: "Workshops",
  desc: "Bounded, intensive formats — two days to two weeks — that solve a specific question: scanning a horizon, surfacing assumptions, testing a strategy under multiple futures, and connecting new possibilities with strategy. Often the start of a longer relationship.",
  bestFor: "Teams who need a sharp instrument before they need a long programme." },
{ n: "02", name: "Capacity Building",
  desc: "Multi-month programmes that install foresight as an internal practice — vocabulary, cadence, a small cohort of trained internal practitioners, a working signal library, and the institutional permission to use them.",
  bestFor: "Organisations ready to stop renting foresight and start owning it." },
{ n: "03", name: "Strategic Advisory",
  desc: "Embedded engagements with leadership teams, board chairs, and executive offices on decisions where the cost of being confidently wrong is high. Scenario work, stress-tests, and decision protocols delivered alongside your team, not over the top of them.",
  bestFor: "Leadership teams making decisions that will outlive the people in the room." },
{ n: "04", name: "Master Class",
  desc: "Structured teaching for universities and executive-education programmes — futures literacy, scenario practice, and foresight methods delivered as a syllabus rather than a one-off lecture. Built so students and faculty leave able to run the methods themselves.",
  bestFor: "Universities and degree programmes embedding futures literacy into a curriculum." },
{ n: "05", name: "Keynote Speaking",
  desc: "Provocations that move a room from \"interesting\" to \"what do we do on Monday.\" Conference programmes, leadership retreats, all-hands moments where the question of the future needs to be asked sharply, by someone who is not in the org chart.",
  bestFor: "Leadership audiences who need a calibrated provocation, not motivational futurism." }];


const soOff = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 },
  card: { padding: "clamp(28px, 3.4vw, 44px)", display: "flex", flexDirection: "column", gap: 18, transition: "box-shadow 240ms var(--ease), border-color 240ms var(--ease)" },
  cardTop: { display: "flex", alignItems: "baseline", justifyContent: "space-between", gap: 12 },
  cardNum: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.08em" },
  cardName: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(28px, 3.2vw, 42px)", lineHeight: 1, letterSpacing: "-0.025em", color: "var(--ink)", margin: 0 },
  cardDesc: { fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 },
  bestForBox: { marginTop: "auto", paddingTop: 18, borderTop: "1px solid var(--line)" },
  bestForLabel: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--accent-deep)", marginBottom: 8, display: "inline-flex", alignItems: "center", gap: 8 },
  bestForBody: { fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 16, lineHeight: 1.5, color: "var(--ink)", margin: 0 }
};

function SOOfferings({ highlight }) {
  return (
    <section id="offerings" className="pf-section pf-bg-2" data-screen-label="Offerings">
      <div style={soOff.inner}>
        <div className="pf-headrow" style={{ marginBottom: "clamp(40px,5vw,56px)" }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow" style={{ marginBottom: 14 }}>How we engage</div>
            <h2 className="pf-section-title">Five ways we show up.</h2>
          </div>
          <p className="pf-section-sub" style={{ maxWidth: 440 }}>
            We engage depending on where you are in your foresight journey. The format follows the <em>question</em>, not the other way around.
          </p>
        </div>
        <div style={soOff.grid} className="pf-collapse-2">
          {OFFERINGS.map((o) => {
            const on = highlight === o.name;
            return (
              <div key={o.name} className="pf-card" style={{ ...soOff.card,
                boxShadow: on ? "0 0 0 2.5px var(--accent)" : "none",
                borderColor: on ? "transparent" : "var(--line)" }}>
                <div style={soOff.cardTop}>
                  <span style={soOff.cardNum}>{o.n}</span>
                  <span style={{ ...soOff.cardNum, color: "var(--ink-3)" }}>Offering</span>
                </div>
                <h3 style={soOff.cardName}>{o.name}</h3>
                <p style={soOff.cardDesc}>{o.desc}</p>
                <div style={soOff.bestForBox}>
                  <div style={soOff.bestForLabel}><span style={{ width: 16, height: 1.5, background: "currentColor", display: "inline-block" }}></span>Best for</div>
                  <p style={soOff.bestForBody}>{o.bestFor}</p>
                </div>
              </div>);

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

}
window.SOOfferings = SOOfferings;

/* ============================================================
   HOW WE ENGAGE
   ============================================================ */
const soHow = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)", display: "grid", gridTemplateColumns: "1fr 1.6fr", gap: "clamp(40px, 6vw, 96px)", alignItems: "start" },
  side: { borderTop: "var(--stroke-bold) solid var(--ink)", paddingTop: 18 },
  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: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase", marginTop: 10 },
  title: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(30px, 3.6vw, 52px)", lineHeight: 1.0, letterSpacing: "-0.025em", color: "var(--ink)", margin: "0 0 24px", textWrap: "balance" },
  prose: { fontFamily: "var(--font-body)", fontSize: "clamp(18px, 1.6vw, 22px)", lineHeight: 1.55, color: "var(--ink)", margin: 0, maxWidth: 720, textWrap: "pretty" },
  emph: { color: "var(--accent-deep)", fontStyle: "italic" }
};

function SOHowWeEngage() {
  return (
    <section className="pf-section pf-bg-1" data-ink="loam" data-screen-label="How we engage">
      <div style={soHow.inner} className="pf-collapse-2">
        <div style={soHow.side}>
          <p style={soHow.overline}>§ 07 · A note on process</p>
          <p style={soHow.meta}>How we engage</p>
        </div>
        <div>
          <h2 style={soHow.title}>A conversation first. A brief later.</h2>
          <p style={soHow.prose}>
            Most engagements begin with a conversation, not a brief. We are most useful in the months <span style={soHow.emph}>before</span> an RFP is written, when the question is still unstable. Our work is iterative — what is scoped in week one is rarely what is delivered in month six, and that is a feature. We move across sectors as readily as within them; many of the best questions sit at the seams.
          </p>
        </div>
      </div>
    </section>);

}
window.SOHowWeEngage = SOHowWeEngage;

/* ============================================================
   CLOSING CTA — dark band
   ============================================================ */
const soClose = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "clamp(72px, 9vw, 128px) var(--gutter)", display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 56, alignItems: "center", position: "relative", zIndex: 1 },
  ctaCol: { display: "flex", flexDirection: "column", gap: 14, alignItems: "flex-start" },
  corner: { position: "absolute", right: "var(--gutter)", top: 28, fontFamily: "var(--font-mono)", fontSize: 11, color: "rgba(251,247,241,0.4)", letterSpacing: "0.1em", textTransform: "uppercase", zIndex: 1 }
};

function SOClose() {
  return (
    <section className="pf-band" data-screen-label="Closing CTA">
      <div className="pf-motif pf-motif--rings pf-motif--fade-r" data-ink="sky" style={{ opacity: 0.14 }}></div>
      <div style={soClose.corner}>§ 08 · Reach out</div>
      <div style={soClose.inner} className="pf-collapse-2">
        <div>
          <div className="eyebrow" style={{ color: "var(--sky-soft)", marginBottom: 24 }}>Start the conversation</div>
          <h2 className="pf-band__display">Working on something in <span className="grad-text">one of these spaces?</span> We would like to hear about it.</h2>
          <p className="pf-band__sub" style={{ marginTop: 24, maxWidth: 500 }}>
            We take on a small number of engagements each year. The good ones usually begin with an email that is a little too long.
          </p>
        </div>
        <div style={soClose.ctaCol}>
          <a href="mailto:hello@pluralfutures.com" className="btn btn--primary btn--on-ink btn--lg">hello@pluralfutures.com <span className="arr" aria-hidden>↗</span></a>
          <a href="index.html#reach-out" className="btn btn--outline btn--on-ink btn--lg">Other ways to reach out</a>
        </div>
      </div>
    </section>);

}
window.SOClose = SOClose;