/* global React, PFGlyph */
/* Strategy & Foresight — v2 remix. Header/Footer come from homepage.jsx + sections.jsx. */

const { useState: useStateSF } = React;

/* ============================================================
   HERO — editorial chapter opener
   ============================================================ */
const sfHero = {
  wrap: { background: "var(--paper)", borderBottom: "1px solid var(--line)", padding: "clamp(48px, 6vw, 88px) var(--gutter)", 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, 4vw, 56px)", 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(260px, 5fr) 7fr", gap: "clamp(28px, 4vw, 56px)" },
  aside: { borderRadius: "var(--radius)", background: "var(--accent-wash)", padding: "clamp(28px, 3vw, 40px)", display: "flex", flexDirection: "column", justifyContent: "space-between", gap: 32, minHeight: 360 },
  asideTop: { display: "flex", flexDirection: "column", gap: 20 },
  chapterName: { 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" },
  asideBottom: { display: "flex", alignItems: "flex-end", gap: 18, borderTop: "1px solid color-mix(in srgb, var(--accent-deep) 25%, transparent)", paddingTop: 22 },
  glyphBox: { width: 64, height: 64, borderRadius: "var(--r-sm)", background: "color-mix(in srgb, var(--accent) 22%, var(--surface))", color: "var(--accent-deep)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 },
  asideMeta: { fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 15, lineHeight: 1.4, color: "var(--ink-2)", margin: 0 },

  canvas: { display: "flex", flexDirection: "column", gap: 28, paddingTop: 6 },
  thesisLabel: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.14em", color: "var(--ink-3)", display: "inline-flex", alignItems: "center", gap: 10 },
  thesisLabelRule: { width: 22, height: 2, background: "currentColor", display: "inline-block" },
  thesis: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(30px, 4vw, 58px)", lineHeight: 1.02, letterSpacing: "-0.025em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  thesisEm: { color: "var(--accent-deep)" },
  divider: { width: 56, height: 4, borderRadius: 2, background: "var(--accent-grad)", border: 0, margin: 0 },
  lede: { fontFamily: "var(--font-body)", fontSize: "clamp(17px, 1.5vw, 20px)", lineHeight: 1.6, color: "var(--ink)", margin: 0, maxWidth: 560 },
  ledeEm: { fontStyle: "italic", color: "var(--ink-2)" },
  ledeFootnote: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.02em", marginTop: 4 }
};

function SFHero() {
  return (
    <section style={sfHero.wrap} data-ink="ember" data-screen-label="Strategy Hero">
      <div className="pf-motif pf-motif--grid pf-motif--fade-l" style={{ opacity: 0.06 }}></div>
      <div style={sfHero.inner}>
        <div style={sfHero.topStrip}>
          <div style={sfHero.crumb}>
            <a href="index.html" style={sfHero.crumbHome}>Plural Futures</a>
            <span style={{ margin: "0 10px", color: "var(--ink-3)" }}>/</span>
            <span style={{ color: "var(--ink)" }}>Strategy &amp; Foresight</span>
          </div>
          <div style={sfHero.pageMark}>§ 01 of 06 · ~7 min read</div>
        </div>

        <div style={sfHero.comp} className="pf-collapse-2">
          <aside style={sfHero.aside}>
            <div style={sfHero.asideTop}>
              <span className="eyebrow">Chapter 01 · The engine room</span>
              <h1 style={sfHero.chapterName}>Strategy &amp; Foresight</h1>
            </div>
            <div style={sfHero.asideBottom}>
              <span style={sfHero.glyphBox}><PFGlyph name="eye" size={34} /></span>
              <p style={sfHero.asideMeta}>Six sections on how we think before we act.</p>
            </div>
          </aside>

          <div style={sfHero.canvas}>
            <span style={sfHero.thesisLabel}><span style={sfHero.thesisLabelRule}></span>The thesis</span>
            <p style={sfHero.thesis}>Most organisations plan for the future they expect. We help you prepare for the <span style={sfHero.thesisEm}>futures you don't.</span></p>
            <hr style={sfHero.divider} />
            <p style={sfHero.lede}>
              Plural Futures collaborates with leaders and key stakeholders who suspect their existing strategy is rehearsing yesterday's challenges. We build the vocabulary, cadence, and institutional muscle to recognise change <span style={sfHero.ledeEm}>before</span> it becomes a crisis — not by forecasting harder, but by changing what the organisation can perceive in the first place.
            </p>
            <p style={sfHero.ledeFootnote}>↓ &nbsp; Continue reading. The page argues itself.</p>
          </div>
        </div>
      </div>
    </section>);

}
window.SFHero = SFHero;

/* ============================================================
   PROBLEM — essay + pull quote, loam
   ============================================================ */
const sfProb = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  head: { display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: "clamp(40px, 6vw, 96px)", marginBottom: "clamp(48px,6vw,64px)", alignItems: "end" },
  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)", letterSpacing: "0.04em", marginTop: 12 },
  title: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(34px, 4.6vw, 64px)", lineHeight: 0.98, letterSpacing: "-0.025em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  body: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(40px, 5vw, 80px)", alignItems: "start" },
  prose: { fontFamily: "var(--font-body)", fontSize: 18, lineHeight: 1.6, color: "var(--ink)", margin: "0 0 24px" },
  proseLast: { margin: 0 },
  emph: { color: "var(--accent-deep)", fontStyle: "italic" },
  figureBox: { borderRadius: "var(--radius)", background: "var(--surface)", border: "1px solid var(--line)", padding: "clamp(20px,2.2vw,30px)", position: "sticky", top: 90 },
  figureSvg: { display: "block", width: "100%", height: "auto" },
  figCaption: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.12em", color: "var(--ink-3)", marginTop: 18, paddingTop: 16, borderTop: "1px solid var(--line)", display: "flex", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }
};

function SFProcessGraphic() {
  return (
    <figure style={sfProb.figureBox}>
      <svg viewBox="0 0 800 740" role="img" aria-labelledby="sf-ig-t" style={sfProb.figureSvg}>
        <title id="sf-ig-t">Strategy &amp; Decision Process — Frame, Alternatives, Analysis, Decision, with an anticipatory infrastructure feedback loop.</title>
        <defs>
          <linearGradient id="sf-ig-spectrum" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="#42EBB9"></stop>
            <stop offset="0.32" stopColor="#42C0EB"></stop>
            <stop offset="0.72" stopColor="#EB426D"></stop>
            <stop offset="1" stopColor="#EB6541"></stop>
          </linearGradient>
          <marker id="sf-ah-sky" markerWidth="11" markerHeight="11" refX="5.6" refY="5.5" orient="auto-start-reverse"><path d="M1.6 1.8 L9.8 5.5 L1.6 9.2 Z" fill="#1C93BD"></path></marker>
          <marker id="sf-ah-sprout" markerWidth="11" markerHeight="11" refX="5.6" refY="5.5" orient="auto-start-reverse"><path d="M1.6 1.8 L9.8 5.5 L1.6 9.2 Z" fill="#16B98A"></path></marker>
          <marker id="sf-ah-bloom" markerWidth="11" markerHeight="11" refX="5.6" refY="5.5" orient="auto-start-reverse"><path d="M1.6 1.8 L9.8 5.5 L1.6 9.2 Z" fill="#C72753"></path></marker>
          <marker id="sf-ah-ember" markerWidth="11" markerHeight="11" refX="5.6" refY="5.5" orient="auto-start-reverse"><path d="M1.6 1.8 L9.8 5.5 L1.6 9.2 Z" fill="#C44A2A"></path></marker>
          <marker id="sf-ah-loam" markerWidth="11" markerHeight="11" refX="5.6" refY="5.5" orient="auto-start-reverse"><path d="M1.6 1.8 L9.8 5.5 L1.6 9.2 Z" fill="#6E4A40"></path></marker>
        </defs>
        <g><rect x="48" y="300" width="704" height="186" fill="#F0EEF4"></rect>
          <line x1="48" y1="300" x2="752" y2="300" stroke="#D7C9BC" strokeWidth="1.5"></line></g>
        <g><rect x="48" y="486" width="704" height="184" fill="#EFE6E2"></rect></g>
        <g><rect x="48" y="36" width="704" height="84" fill="#241A17"></rect>
          <rect x="48" y="36" width="704" height="6" fill="url(#sf-ig-spectrum)"></rect>
          <text x="400" y="90" textAnchor="middle" fontSize="38" fill="#FBF7F1" style={{ fontFamily: "var(--font-display)", fontWeight: 700, letterSpacing: "-0.02em" }}>Strategy &amp; Decision Process</text></g>
        <path fill="none" stroke="#1C93BD" strokeWidth="3" strokeLinecap="round" markerEnd="url(#sf-ah-sky)" d="M 64 248 C 64 156, 136 156, 136 256"></path>
        <path fill="none" stroke="#16B98A" strokeWidth="3" strokeLinecap="round" markerEnd="url(#sf-ah-sprout)" d="M 136 256 C 136 156, 312 156, 312 256"></path>
        <path fill="none" stroke="#C72753" strokeWidth="3" strokeLinecap="round" markerEnd="url(#sf-ah-bloom)" d="M 312 256 C 312 156, 488 156, 488 256"></path>
        <path fill="none" stroke="#C44A2A" strokeWidth="3" strokeLinecap="round" markerEnd="url(#sf-ah-ember)" d="M 488 256 C 488 156, 664 156, 664 256"></path>
        <g><circle cx="136" cy="320" r="62" fill="#1C93BD"></circle>
          <text x="136" y="326" textAnchor="middle" fontSize="19" fill="#FBF7F1" style={{ fontFamily: "var(--font-mono)", fontWeight: 600, letterSpacing: "0.06em" }}>FRAME</text></g>
        <g><circle cx="312" cy="320" r="62" fill="#16B98A"></circle>
          <text x="312" y="326" textAnchor="middle" fontSize="15.5" fill="#FBF7F1" textLength="104" lengthAdjust="spacingAndGlyphs" style={{ fontFamily: "var(--font-mono)", fontWeight: 600, letterSpacing: "0.06em" }}>ALTERNATIVES</text></g>
        <g><circle cx="488" cy="320" r="62" fill="#C72753"></circle>
          <text x="488" y="326" textAnchor="middle" fontSize="16.5" fill="#FBF7F1" style={{ fontFamily: "var(--font-mono)", fontWeight: 600, letterSpacing: "0.06em" }}>ANALYSIS</text></g>
        <g><circle cx="664" cy="320" r="62" fill="#C44A2A"></circle>
          <text x="664" y="326" textAnchor="middle" fontSize="17" fill="#FBF7F1" style={{ fontFamily: "var(--font-mono)", fontWeight: 600, letterSpacing: "0.06em" }}>DECISION</text></g>
        <text x="400" y="454" textAnchor="middle" fontSize="24" fill="#241A17" style={{ fontFamily: "var(--font-body)", fontStyle: "italic" }}>Strategic Foresight insights feeding into Strategy</text>
        <path fill="none" stroke="#6E4A40" strokeWidth="3" strokeLinecap="round" markerEnd="url(#sf-ah-loam)"
        d="M 664 386 C 752 480, 752 630, 612 630 L 188 630 C 48 630, 48 480, 136 386"></path>
        <text x="400" y="557" textAnchor="middle" fontSize="24" fill="#6E4A40" style={{ fontFamily: "var(--font-body)" }}>Anticipatory Infrastructure Feedback Loop</text>
      </svg>
      <figcaption style={sfProb.figCaption}>
        <span>FIGURE 01. FORESIGHT AS ANTICIPATORY INFRASTRUCTURE</span>
        <span></span>
      </figcaption>
    </figure>);

}

function SFProblem() {
  return (
    <section className="pf-section pf-bg-2" data-ink="loam" data-screen-label="Problem">
      <div style={sfProb.inner}>
        <div style={sfProb.head} className="pf-collapse-2">
          <div style={sfProb.side}>
            <p style={sfProb.overline}>§ 02 · The dysfunction</p>
            <p style={sfProb.meta}>Editorial · 3 min</p>
          </div>
          <h2 style={sfProb.title}>The problem with how foresight is usually done.</h2>
        </div>
        <div style={sfProb.body} className="pf-collapse-2">
          <div>
            <p style={sfProb.prose}>Foresight, as most organisations encounter it, is a performance. A consultancy is hired, a workshop is convened, a small group spends two days creating scenarios out of sticky-notes. A handsome report follows. The slide deck circulates. Six months later the file is still on the shared drive, and the strategy team — who were not in the room — is still writing the same plan they would have written anyway.</p>
            <p style={sfProb.prose}>The exercise was real. The insights were not wrong. But nothing about the organisation actually <span style={sfProb.emph}>changed</span>. The capacity to notice a weak signal next quarter is no greater than it was before. The decision protocols are identical. The same people are still rewarded for the same kinds of confidence.</p>
            <p style={{ ...sfProb.prose, ...sfProb.proseLast }}>This is the recurring shape of failed foresight: The insight are not integrated to the decision-making process. It's treated as a one-time event, rather than an anticipatory infrastructure that continually supports strategy and execution. </p>
          </div>
          <div>
            <SFProcessGraphic />
          </div>
        </div>
      </div>
    </section>);

}
window.SFProblem = SFProblem;

/* ============================================================
   ANTICIPATORY INFRASTRUCTURE — comparison table
   ============================================================ */
const ROWS = [
{ dim: "Time horizon", a: "A quarter. A planning cycle.", b: "A decade, with checkpoints." },
{ dim: "Ownership", a: "Consultants, then nobody.", b: "A standing internal cohort, paid in real time." },
{ dim: "Outputs", a: "A report. Sometimes a deck.", b: "Decision protocols, signal libraries, scenario reviews." },
{ dim: "Culture", a: "Strategy hides surprise.", b: "Strategy expects to be wrong, productively." },
{ dim: "Cadence", a: "A workshop, then silence.", b: "Rhythmic — quarterly, embedded in how decisions are made." },
{ dim: "Effect", a: "\u201CNow we are thinking about the future.\u201D", b: "\u201CNow we are choosing different things this Tuesday.\u201D" }];


const sfAI = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  head: { marginBottom: "clamp(40px,5vw,56px)" },
  overlineRow: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap", marginBottom: 22 },
  pageMark: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" },
  title: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(40px, 6vw, 88px)", lineHeight: 0.96, letterSpacing: "-0.03em", color: "var(--ink)", margin: 0, textWrap: "balance", maxWidth: "16ch" },
  titleEm: { color: "var(--accent-deep)" },
  lede: { fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: "clamp(19px, 1.8vw, 25px)", lineHeight: 1.45, color: "var(--ink-2)", margin: "28px 0 0", maxWidth: 720 },
  dim: { fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 16, color: "var(--ink)", letterSpacing: "-0.01em" },
  dimMeta: { fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-3)", marginTop: 6, letterSpacing: "0.06em" },
  a: { fontFamily: "var(--font-body)", fontSize: 16, lineHeight: 1.45, color: "var(--ink-3)", margin: 0 },
  b: { fontFamily: "var(--font-body)", fontSize: 17, lineHeight: 1.45, color: "var(--paper)", margin: 0, fontWeight: 500 }
};

function SFAnticipatory() {
  return (
    <section className="pf-section pf-bg-1" data-ink="sky" data-screen-label="Anticipatory Infrastructure">
      <div style={sfAI.inner}>
        <div style={sfAI.head}>
          <div style={sfAI.overlineRow}>
            <div><div className="pf-srule"></div><div className="eyebrow">Our approach</div></div>
            <div style={sfAI.pageMark}>§ 03 · The core distinction</div>
          </div>
          <h2 style={sfAI.title}>From foresight outputs to <span style={sfAI.titleEm}>anticipatory infrastructure.</span></h2>
          <p style={sfAI.lede}>We do not sell scenarios. We help organisations install the standing capacity to keep generating, stress-testing, and acting on them — long after we have left the building. The shift is small in language, structural in consequence.</p>
        </div>

        <div className="pf-table" style={{ marginTop: 8 }}>
          <div className="pf-table__row pf-table__head">
            <div className="pf-table__cell">Dimension</div>
            <div className="pf-table__cell pf-cell-a">One-off foresight</div>
            <div className="pf-table__cell pf-cell-b">Anticipatory infrastructure</div>
          </div>
          {ROWS.map((r, i) =>
          <div key={r.dim} className="pf-table__row">
              <div className="pf-table__cell">
                <div style={sfAI.dim}>{r.dim}</div>
                <div style={sfAI.dimMeta}>0{i + 1}</div>
              </div>
              <div className="pf-table__cell pf-cell-a"><p style={sfAI.a}>{r.a}</p></div>
              <div className="pf-table__cell pf-cell-b"><p style={sfAI.b}>{r.b}</p></div>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.SFAnticipatory = SFAnticipatory;

/* ============================================================
   CONNECT — framings stack
   ============================================================ */
const FRAMINGS = [
{ setup: "Imagine your leadership team is debating a five-year capital plan, and someone asks:", pivot: "Which of our core assumptions is most likely to be wrong?", follow: "Most teams cannot answer in the room. We install the muscle that can — and the institutional permission to use it." },
{ setup: "Imagine a board pressing you for a single most-likely scenario.", pivot: "Give them something harder, and more useful.", follow: "A set of branching commitments that hold under multiple futures, with the decision rules that say which branch you are actually on this quarter." },
{ setup: "Imagine the moment a weak signal finally becomes obvious to everyone,", pivot: "and you discover your organisation has already started moving.", follow: "That is the point. Not prediction. Position. Anticipatory infrastructure is what makes that early movement possible — and politically survivable." }];


const sfConn = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  head: { display: "grid", gridTemplateColumns: "0.7fr 1.3fr", gap: "clamp(40px, 6vw, 96px)", marginBottom: "clamp(40px,5vw,56px)", alignItems: "end" },
  side: { display: "flex", flexDirection: "column", gap: 14 },
  meta: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.1em", textTransform: "uppercase" },
  title: { fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(34px, 4.6vw, 64px)", lineHeight: 0.98, letterSpacing: "-0.025em", color: "var(--ink)", margin: 0, textWrap: "balance" },
  item: { display: "grid", gridTemplateColumns: "80px 1fr", gap: 32, padding: "40px 0", borderTop: "1px solid var(--line)" },
  itemFirst: { borderTop: "var(--stroke) solid var(--ink)" },
  itemLast: { borderBottom: "var(--stroke) solid var(--ink)" },
  num: { fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--ink-3)", letterSpacing: "0.08em" },
  setup: { fontFamily: "var(--font-body)", fontSize: "clamp(18px, 1.5vw, 22px)", lineHeight: 1.4, color: "var(--ink-2)", margin: "0 0 14px", fontStyle: "italic" },
  pivot: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "clamp(24px, 3vw, 38px)", lineHeight: 1.08, color: "var(--ink)", margin: "0 0 18px", letterSpacing: "-0.02em", textWrap: "balance" },
  pivotMark: { color: "var(--accent-deep)" },
  follow: { fontFamily: "var(--font-body)", fontSize: "clamp(17px, 1.4vw, 19px)", lineHeight: 1.55, color: "var(--ink)", margin: 0, maxWidth: 720 }
};

function SFConnect() {
  return (
    <section className="pf-section pf-bg-3" data-ink="bloom" data-screen-label="Connect to Decisions">
      <div style={sfConn.inner}>
        <div style={sfConn.head} className="pf-collapse-2">
          <div style={sfConn.side}>
            <div className="pf-srule"></div>
            <div className="eyebrow">What this looks like in the room</div>
            <div style={sfConn.meta}>§ 04 · Decision-making</div>
          </div>
          <h2 style={sfConn.title}>How anticipatory work changes the meeting.</h2>
        </div>
        <div>
          {FRAMINGS.map((f, i) =>
          <div key={i} style={{ ...sfConn.item, ...(i === 0 ? sfConn.itemFirst : {}), ...(i === FRAMINGS.length - 1 ? sfConn.itemLast : {}) }}>
              <div style={sfConn.num}>0{i + 1} / 0{FRAMINGS.length}</div>
              <div>
                <p style={sfConn.setup}>{f.setup}</p>
                <h3 style={sfConn.pivot}><span style={sfConn.pivotMark}>“</span>{f.pivot}<span style={sfConn.pivotMark}>”</span></h3>
                <p style={sfConn.follow}>{f.follow}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}
window.SFConnect = SFConnect;

/* ============================================================
   WHERE WE WORK — sector teaser
   ============================================================ */
const SECTORS = [
{ num: "01", name: "Agrifood Systems", ink: "sprout", glyph: "ripples", desc: "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.", anchor: "#agrifood" },
{ num: "02", name: "Emerging Technologies", ink: "sky", glyph: "spiral", desc: "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?", anchor: "#tech" },
{ num: "03", name: "Governance & Democracy", ink: "bloom", glyph: "branching", desc: "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?", anchor: "#governance" }];


const sfWW = {
  inner: { maxWidth: "var(--container)", margin: "0 auto", padding: "0 var(--gutter)" },
  grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 },
  card: { padding: "26px 26px 24px", display: "flex", flexDirection: "column", gap: 16 },
  cardTop: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 },
  num: { fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--ink-3)", letterSpacing: "0.08em" },
  glyphTile: { width: 48, height: 48, borderRadius: "var(--r-sm)", background: "var(--accent-wash)", color: "var(--accent-deep)", display: "flex", alignItems: "center", justifyContent: "center" },
  name: { fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 26, lineHeight: 1.02, letterSpacing: "-0.02em", color: "var(--ink)", margin: 0 },
  desc: { fontFamily: "var(--font-body)", fontStyle: "italic", fontSize: 16, lineHeight: 1.45, color: "var(--ink-2)", margin: 0 },
  more: { fontFamily: "var(--font-mono)", fontSize: 11, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.1em", display: "flex", alignItems: "center", justifyContent: "space-between", paddingTop: 14, borderTop: "1px solid var(--line)", marginTop: "auto", color: "var(--ink-2)" }
};

function SFWhereWeWork() {
  return (
    <section className="pf-section pf-bg-1" data-screen-label="Where We Work">
      <div style={sfWW.inner}>
        <div className="pf-headrow" style={{ marginBottom: 40 }}>
          <div>
            <div className="pf-srule"></div>
            <div className="eyebrow">Where we work</div>
            <h2 className="pf-section-title" style={{ marginTop: 14 }}>The approach, applied.</h2>
          </div>
          <a href="sectors-offerings.html" className="pf-arrowlink">Sectors &amp; offerings ↗</a>
        </div>
        <div style={sfWW.grid} className="pf-collapse-3">
          {SECTORS.map((s) =>
          <a key={s.name} href={`sectors-offerings.html${s.anchor}`}
          className="pf-card pf-card--link" data-ink={s.ink} style={sfWW.card}>
              <div style={sfWW.cardTop}>
                <span style={sfWW.num}>{s.num}</span>
                <span style={sfWW.glyphTile}><PFGlyph name={s.glyph} size={26} /></span>
              </div>
              <h3 style={sfWW.name}>{s.name}</h3>
              <p style={sfWW.desc}>{s.desc}</p>
              <div style={sfWW.more}><span>See the work</span><span style={{ color: "var(--accent-deep)" }} aria-hidden>→</span></div>
            </a>
          )}
        </div>
      </div>
    </section>);

}
window.SFWhereWeWork = SFWhereWeWork;

/* ============================================================
   CLOSE — dark band
   ============================================================ */
const sfClose = {
  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 SFClose() {
  return (
    <section className="pf-band" data-screen-label="Closing Provocation">
      <div className="pf-motif pf-motif--rings pf-motif--fade-r" data-ink="ember" style={{ opacity: 0.14 }}></div>
      <div style={sfClose.corner}>§ 06 · Closing provocation</div>
      <div style={sfClose.inner} className="pf-collapse-2">
        <div>
          <div className="eyebrow" style={{ color: "var(--ember-soft)", marginBottom: 24 }}>One question, before you go</div>
          <h2 className="pf-band__display">Is your organisation building for the futures it does <span className="grad-text">not yet see?</span></h2>
          <p className="pf-band__sub" style={{ marginTop: 24, maxWidth: 500 }}>We are not asking rhetorically. The answer determines what kind of conversation makes sense next.</p>
        </div>
        <div style={sfClose.ctaCol}>
          <a href="lets-talk.html" className="btn btn--primary btn--on-ink btn--lg">Reach out <span className="arr" aria-hidden>→</span></a>
        </div>
      </div>
    </section>);

}
window.SFClose = SFClose;