// Norton-Gauss · v2 NEW SECTIONS
// Compounding · PracticesDetail · Roadmaps · Innovation · WorldMap · ImpactV2 · ManifestoBanner · ExtraCases

const { useState: nS, useEffect: nE, useRef: nR, useMemo: nM } = React;

// ─── Small SVG arrow (matches sections.jsx Arr) ────────────────
const NArr = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden>
    <path d="M4 10L10 4M10 4H5.5M10 4V8.5"
      stroke="currentColor" strokeWidth="1.4"
      strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

// ═══════════════════════════════════════════════════════════════
// MANIFESTO BANNER — "Software used to wait. Now it thinks."
// ═══════════════════════════════════════════════════════════════
function ManifestoBanner() {
  const b = window.NG.manifestoBanner || {
    pre: 'Strategy is easy.', post: 'Operations are ', em: 'hard.',
    sub: 'Most transformation programmes produce decks. We produce systems.',
  };
  return (
    <section className="manifesto-banner" data-anim="manifesto-banner">
      <div className="container">
        <h2>
          <span className="banner-pre">{b.pre}</span>{' '}
          <span className="banner-post">{b.post}<em>{b.em}</em></span>
        </h2>
        <div className="sub">{b.sub || 'Most transformation programmes produce decks. We produce systems.'}</div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// COMPOUNDING — unique exponential-curve viz + feedback loops
// ═══════════════════════════════════════════════════════════════
function CompoundingCurve({ progress = 1 }) {
  // viewBox 1200x360
  // Curve: exponential growth from (60, 320) to (1140, 60)
  // points at month 1, 6, 12 — also marked with dashed lines
  const W = 1200, H = 360;
  const pad = { l: 70, r: 60, t: 30, b: 50 };
  const innerW = W - pad.l - pad.r;
  const innerH = H - pad.t - pad.b;
  const points = [];
  for (let i = 0; i <= 100; i++) {
    const t = i / 100;
    // exponential ease: y = 1 - (1 - t)^2.4 with subtle S curve
    const y = Math.pow(t, 1.7);
    points.push({
      x: pad.l + t * innerW,
      y: pad.t + (1 - y) * innerH,
      t,
    });
  }
  // Animate by clipping at progress
  const clipIdx = Math.floor(points.length * progress);
  const visible = points.slice(0, clipIdx + 1);
  const pathD = visible.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x.toFixed(1)} ${p.y.toFixed(1)}`).join(' ');
  const fillD = pathD + ` L ${visible[visible.length - 1]?.x.toFixed(1) || pad.l} ${H - pad.b} L ${pad.l} ${H - pad.b} Z`;

  // milestone positions
  const ms = [
    { t: 0.08, label: 'Month 1', kpi: '1.0×' },
    { t: 0.50, label: 'Month 6', kpi: '3.4×' },
    { t: 0.95, label: 'Month 12+', kpi: '12×' },
  ];

  return (
    <svg viewBox={`0 0 ${W} ${H}`} xmlns="http://www.w3.org/2000/svg">
      <defs>
        <linearGradient id="curve-fill" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%"  stopColor="#D9FF35" stopOpacity="0.32" />
          <stop offset="100%" stopColor="#D9FF35" stopOpacity="0" />
        </linearGradient>
        <pattern id="grid-soft" width="60" height="40" patternUnits="userSpaceOnUse">
          <path d="M 60 0 L 0 0 0 40" fill="none" stroke="#1A2E29" strokeWidth="0.5" />
        </pattern>
      </defs>
      {/* grid */}
      <rect x={pad.l} y={pad.t} width={innerW} height={innerH} fill="url(#grid-soft)" />
      {/* axes */}
      <line x1={pad.l} y1={pad.t} x2={pad.l} y2={H - pad.b} stroke="#1A2E29" strokeWidth="0.8" />
      <line x1={pad.l} y1={H - pad.b} x2={W - pad.r} y2={H - pad.b} stroke="#1A2E29" strokeWidth="0.8" />
      {/* y-axis labels */}
      {[
        { y: 0.0, lbl: '12×' },
        { y: 0.3, lbl: '6×' },
        { y: 0.6, lbl: '3×' },
        { y: 0.95, lbl: '1×' },
      ].map((t, i) => (
        <g key={i}>
          <line x1={pad.l - 5} y1={pad.t + t.y * innerH} x2={pad.l} y2={pad.t + t.y * innerH} stroke="#5A6E6A" />
          <text x={pad.l - 12} y={pad.t + t.y * innerH + 4} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.2" fill="#5A6E6A">{t.lbl}</text>
        </g>
      ))}
      {/* x-axis */}
      <text x={pad.l} y={H - pad.b + 22} fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.2" fill="#5A6E6A">DAY 1</text>
      <text x={(pad.l + W - pad.r) / 2} y={H - pad.b + 22} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.2" fill="#5A6E6A">MONTH 6</text>
      <text x={W - pad.r} y={H - pad.b + 22} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.2" fill="#5A6E6A">MONTH 12</text>

      {/* Linear baseline (what most consultancies deliver) */}
      <line x1={pad.l} y1={H - pad.b - 4} x2={W - pad.r} y2={H - pad.b - 80}
        stroke="#5A6E6A" strokeWidth="1" strokeDasharray="4 4" opacity="0.6" />
      <text x={W - pad.r - 6} y={H - pad.b - 86} textAnchor="end" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.4" fill="#5A6E6A">LINEAR BASELINE</text>

      {/* Fill under our curve */}
      {visible.length > 1 && <path d={fillD} fill="url(#curve-fill)" />}
      {/* Our curve */}
      {visible.length > 1 && <path d={pathD} fill="none" stroke="#D9FF35" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />}

      {/* Milestone markers */}
      {ms.map((m, i) => {
        const x = pad.l + m.t * innerW;
        const y = pad.t + (1 - Math.pow(m.t, 1.7)) * innerH;
        const reveal = progress >= m.t;
        if (!reveal) return null;
        return (
          <g key={i}>
            <line x1={x} y1={y} x2={x} y2={H - pad.b} stroke="#D9FF35" strokeWidth="0.6" strokeDasharray="2 4" opacity="0.5" />
            <circle cx={x} cy={y} r="9" fill="#08110F" stroke="#D9FF35" strokeWidth="2" />
            <circle cx={x} cy={y} r="4" fill="#D9FF35" />
            <text x={x} y={y - 18} textAnchor="middle" fontFamily="Bricolage Grotesque" fontWeight="500" fontSize="22" fill="#D9FF35">{m.kpi}</text>
            <text x={x} y={y - 38} textAnchor="middle" fontFamily="JetBrains Mono" fontSize="9.5" letterSpacing="1.4" fill="#F2F1EC">{m.label.toUpperCase()}</text>
          </g>
        );
      })}

      {/* Annotations */}
      <text x={pad.l + 8} y={pad.t + 18} fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.4" fill="#D9FF35">VALUE \u00b7 COMPOUNDING CURVE</text>
    </svg>
  );
}

function Compounding() {
  const c = window.NG.compounding;
  const ref = nR(null);
  const [progress, setProgress] = nS(0);

  // Animate progress from 0→1 when in view, via IntersectionObserver
  nE(() => {
    const el = ref.current;
    if (!el) return;
    let started = false;
    const io = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !started) {
        started = true;
        io.disconnect();
        const dur = 2200;
        const start = performance.now();
        let raf;
        const tick = (t) => {
          const k = Math.min(1, (t - start) / dur);
          const eased = 1 - Math.pow(1 - k, 2.6);
          setProgress(eased);
          if (k < 1) raf = requestAnimationFrame(tick);
        };
        raf = requestAnimationFrame(tick);
      }
    }, { threshold: 0.2 });
    io.observe(el);
    return () => io.disconnect();
  }, []);

  return (
    <section className="section-pad-sm" data-anim="compounding" id="compounding">
      <div className="section-tag">
        <span><span className="num">05</span> · Compounding</span>
        <span>The platform pays back exponentially</span>
      </div>
      <div className="container" ref={ref}>
        <div className="section-head">
          <h2 className="display-2xl">
            {c.h2A}<em className="serif-em" style={{ color: 'var(--ng-lime)' }}>{c.h2Em}</em>{c.h2B}
          </h2>
          <p className="right">{c.sub}</p>
        </div>

        <div className="compounding-curve">
          <CompoundingCurve progress={progress} />
          <div className="compounding-stops">
            {c.milestones.map((m, i) => (
              <div key={i} className="compounding-stop" data-anim-child>
                <div className="x">{m.x}</div>
                <div className="label">{m.label}</div>
                <div className="kpi">
                  <span className="v">{m.kpi}</span>
                  <span className="k">{m.kpiLabel}</span>
                </div>
                <ul>
                  {m.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>

        <div className="compounding-loops">
          {c.feedbackLoops.map((l, i) => (
            <div key={i} className="compounding-loop" data-anim-child>
              <div className="arrow-row">
                <span className="from">{l.from}</span>
                <svg width="16" height="14" viewBox="0 0 16 14" fill="none">
                  <path d="M1 7h13M10 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
                <span className="to">{l.to}</span>
              </div>
              <p>{l.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// PRACTICES DETAIL — tabbed deep-dive
// ═══════════════════════════════════════════════════════════════
function PracticesDetail({ setRoute }) {
  const data = window.NG.practicesDetail;
  const items = data.items;
  const [active, setActive] = nS(0);
  const p = items[active];

  return (
    <section className="section-pad-sm" data-anim="pdetail">
      <div className="section-tag">
        <span><span className="num">04</span> · Capabilities in depth</span>
        <span>Pod \u00b7 Stack \u00b7 Outcome contract</span>
      </div>
      <div className="container">
        <div className="section-head">
          <h2 className="display-2xl">
            {data.h2A}<em className="serif-em" style={{ color: 'var(--ng-lime)' }}>{data.h2Em}</em>{data.h2B}
          </h2>
          <p className="right">{data.sub}</p>
        </div>

        <div className="pdetail-tabs" style={{ gridTemplateColumns: `repeat(${items.length}, 1fr)` }}>
          {items.map((it, i) => (
            <button key={it.id}
              className={`pdetail-tab ${i === active ? 'active' : ''}`}
              onMouseEnter={() => setActive(i)}
              onClick={() => setActive(i)}>
              <div className="code">{it.num} \u00b7 {it.code}</div>
              <div className="ttl">{it.title}</div>
              <div className="cat">{it.category}</div>
            </button>
          ))}
        </div>

        <div className="pdetail-card" key={p.id}>
          <div className="head" style={{ display: 'flex', flexDirection: 'column', minHeight: 360 }}>
            <div className="num">{p.num} / 0{items.length} \u00b7 {p.code}</div>
            <h3>{p.title}.</h3>
            <div className="cat">{p.category}</div>
            <p>{p.pitch}</p>
            <div className="pod">POD \u00b7 {p.pod}</div>
          </div>
          <div className="stack" style={{ display: 'flex', flexDirection: 'column', minHeight: 360 }}>
            <h5>Stack</h5>
            <ul>
              {p.stack.map((s, i) => <li key={i}>{s}</li>)}
            </ul>
          </div>
          <div className="outcomes" style={{ display: 'flex', flexDirection: 'column', minHeight: 360 }}>
            <h5>Outcome contract</h5>
            <ul>
              {p.outcomes.map((o, i) => <li key={i}><span>{o.split(' ').slice(0, -1).join(' ')}</span><span>{o.split(' ').slice(-1)[0]}</span></li>)}
            </ul>
            <div className="proof">{p.proof}</div>
          </div>
        </div>

        <div style={{ marginTop: 28, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <span className="mono">{p.code} \u00b7 Full spec on the Capabilities page</span>
          <button className="btn ghost" onClick={() => setRoute('services')}><NArr />See all capabilities</button>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// ROADMAPS — Hyper-personalised
// ═══════════════════════════════════════════════════════════════
function RoadmapIcon({ name }) {
  const s = { stroke: 'currentColor', strokeWidth: 1.4, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round' };
  if (name === 'compass') return (
    <svg width="18" height="18" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" {...s} /><path d="M12 8L9 13 8 12 11 7z" stroke="none" fill="currentColor" /></svg>
  );
  if (name === 'stack') return (
    <svg width="18" height="18" viewBox="0 0 20 20"><path d="M3 6l7-3 7 3-7 3-7-3zM3 10l7 3 7-3M3 14l7 3 7-3" {...s} /></svg>
  );
  if (name === 'people') return (
    <svg width="18" height="18" viewBox="0 0 20 20"><circle cx="7" cy="7" r="2.5" {...s} /><circle cx="13" cy="7" r="2.5" {...s} /><path d="M3 17c0-2.8 1.8-4 4-4s4 1.2 4 4M9 17c0-2.8 1.8-4 4-4s4 1.2 4 4" {...s} /></svg>
  );
  if (name === 'risk') return (
    <svg width="18" height="18" viewBox="0 0 20 20"><path d="M10 3l7 13H3z" {...s} /><line x1="10" y1="8" x2="10" y2="12" {...s} /><circle cx="10" cy="14" r=".7" fill="currentColor" /></svg>
  );
  return null;
}

function Roadmaps() {
  const r = window.NG.roadmaps;
  return (
    <section className="section-pad-sm" data-anim="roadmaps">
      <div className="section-tag">
        <span><span className="num">06</span> · Hyper-personalised roadmaps</span>
        <span>No two operators \u00b7 No two roadmaps</span>
      </div>
      <div className="container">
        <div className="section-head">
          <h2 className="display-2xl">
            {r.h2A}<em className="serif-em" style={{ color: 'var(--ng-lime)' }}>{r.h2Em}</em>{r.h2B}
          </h2>
          <p className="right">{r.sub}</p>
        </div>

        <div className="roadmap-grid">
          <div>
            <h5 className="mono" style={{ marginBottom: 18, color: 'var(--ng-ink-dim)' }}>Inputs we shape around</h5>
            <div className="roadmap-inputs" data-anim-child-list>
              {r.inputs.map((inp, i) => (
                <div key={i} className="roadmap-input" data-anim-child>
                  <div className="ic"><RoadmapIcon name={inp.icon} /></div>
                  <div>
                    <div className="k">{inp.k}</div>
                    <div className="v">{inp.v}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div>
            <h5 className="mono" style={{ marginBottom: 28, color: 'var(--ng-ink-dim)' }}>Sample roadmap output</h5>
            <div className="roadmap-output" data-anim-child-list>
              {r.outputs.map((o, i) => (
                <div key={i} className="roadmap-output-stage" data-anim-child>
                  <div className="tag">{o.tag}</div>
                  <h4>{o.h}</h4>
                  <ul>
                    {o.items.map((it, j) => <li key={j}>{it}</li>)}
                  </ul>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// INNOVATION / ALPHA TESTER
// ═══════════════════════════════════════════════════════════════
function Innovation() {
  const i = window.NG.innovation;
  const splineUrl = (window.NG.tweaks && window.NG.tweaks.splineUrl) || '';
  return (
    <section className="innovation-section innovation-spline" data-anim="innovation">
      <div className="section-tag" style={{ borderTop: 0 }}>
        <span><span className="num">10</span> · Innovation partner</span>
        <span>Design partner \u00b7 Alpha programs \u00b7 Norton-Gauss Labs</span>
      </div>
      {/* Magnetic-field 3D stage — fills the right half, behind the cards */}
      <SplineMagnet sceneUrl={splineUrl} />

      <div className="container innovation-inner">
        <div>
          <h2 className="innovation-h2">
            {i.headlineA}<em>{i.headlineEm}</em>{i.headlineB}
          </h2>
          <div className="innovation-tags">
            {i.tags.map((t, j) => <span key={j}>{t}</span>)}
          </div>
          <p className="innovation-sub">{i.sub}</p>
          <div className="innovation-ctas">
            <a className="btn primary" href="#"><NArr />Talk to us</a>
            <a className="btn ghost" href="#"><NArr />Norton-Gauss Labs</a>
          </div>
        </div>
        <div className="innovation-offerings" data-anim-child-list>
          {i.offerings.map((o, j) => (
            <div key={j} className="innovation-offering" data-anim-child>
              <div className="tag">{o.tag}</div>
              <h4>{o.h}</h4>
              <p>{o.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// WORLD MAP — dotted globe + our operating locations
// ═══════════════════════════════════════════════════════════════

// Hand-curated continent polygons in equirectangular projection.
// Coords are x:0-1200, y:0-600 (longitude-latitude mapped).
// These trace rough continent silhouettes, enough to recognise them in a
// dot pattern.
const CONTINENT_POLYS = [
  // North America (lower 48 + Mexico bulk)
  [[160,150],[210,140],[260,150],[310,170],[345,210],[365,240],[355,285],[330,320],[290,335],[245,340],[225,330],[195,290],[170,260],[150,225],[140,190],[150,170]],
  // North America Canada
  [[200,90],[270,80],[330,90],[370,110],[380,140],[365,165],[330,170],[290,165],[245,160],[210,150],[195,130],[195,110]],
  // Greenland
  [[400,70],[455,68],[480,95],[470,130],[440,140],[410,128],[400,100]],
  // South America
  [[290,355],[330,360],[360,395],[365,430],[350,475],[330,510],[300,535],[275,540],[265,500],[270,450],[280,400]],
  // Africa
  [[560,255],[620,250],[665,280],[680,330],[685,380],[665,430],[630,465],[600,475],[575,455],[560,410],[550,355],[555,300]],
  // Europe
  [[540,170],[600,165],[640,175],[665,195],[660,215],[630,230],[590,228],[555,215],[540,195]],
  // UK / Iceland small
  [[490,165],[520,160],[525,190],[505,200],[490,185]],
  // Middle East / Arabia
  [[640,250],[695,260],[710,295],[695,320],[660,325],[640,300]],
  // Russia / North Asia (huge)
  [[600,90],[760,80],[900,85],[1010,100],[1050,140],[1030,170],[990,180],[920,180],[840,175],[780,180],[720,175],[680,165],[640,150],[615,125]],
  // China / SE Asia
  [[770,180],[880,180],[930,210],[940,250],[915,280],[875,295],[840,290],[800,275],[780,235]],
  // India
  [[770,260],[820,265],[820,310],[795,320],[775,300]],
  // Indonesia / Malaysia archipelago
  [[890,330],[950,335],[975,355],[940,365],[900,358]],
  // Japan
  [[990,225],[1020,225],[1015,255],[990,250]],
  // Australia
  [[940,420],[1015,415],[1055,440],[1055,465],[1020,485],[975,485],[945,465]],
  // New Zealand
  [[1090,485],[1115,490],[1120,510],[1100,515]],
];

function pointInPolygon(x, y, poly) {
  let inside = false;
  for (let i = 0, j = poly.length - 1; i < poly.length; j = i++) {
    const [xi, yi] = poly[i], [xj, yj] = poly[j];
    const intersect = ((yi > y) !== (yj > y))
      && (x < ((xj - xi) * (y - yi)) / (yj - yi) + xi);
    if (intersect) inside = !inside;
  }
  return inside;
}

function generateMapDots(spacing = 14) {
  const dots = [];
  for (let y = 50; y <= 560; y += spacing) {
    // jitter to avoid grid feel
    const xJitter = (y % (spacing * 2)) === 0 ? spacing / 2 : 0;
    for (let x = 40; x <= 1170; x += spacing) {
      const px = x + xJitter;
      const py = y;
      for (const poly of CONTINENT_POLYS) {
        if (pointInPolygon(px, py, poly)) {
          dots.push({ x: px, y: py });
          break;
        }
      }
    }
  }
  return dots;
}

function WorldMap() {
  const m = window.NG.map;
  const dots = nM(() => generateMapDots(13), []);
  const W = 1200, H = 600;
  // Convert lon/lat to map coords
  const proj = (lon, lat) => ({
    x: ((lon + 180) / 360) * W,
    y: ((90 - lat) / 180) * H,
  });

  return (
    <section className="section-pad-sm" data-anim="worldmap" id="industries">
      <div className="section-tag">
        <span><span className="num">07</span> · Global footprint</span>
        <span>{m.locations.length} headquarters \u00b7 3 regions</span>
      </div>
      <div className="container">
        <div className="section-head">
          <h2 className="display-2xl">Where we <em className="serif-em" style={{ color: 'var(--ng-lime)' }}>operate.</em></h2>
          <p className="right">{m.sub}</p>
        </div>

        <div className="worldmap-wrap">
          <div className="worldmap-meta">
            <span className="live">LIVE \u00b7 OPERATIONS MAP</span>
            <span>EQUIRECTANGULAR \u00b7 LON \u2212180\u2192180 \u00b7 LAT \u221290\u219290</span>
          </div>

          <svg viewBox={`0 0 ${W} ${H}`}>
            {/* Latitude lines */}
            {[150, 300, 450].map((y) => (
              <line key={y} x1="20" y1={y} x2={W - 20} y2={y}
                stroke="#1A2E29" strokeWidth="0.6" strokeDasharray="2 8" opacity="0.5" />
            ))}
            {/* Longitude lines */}
            {[300, 600, 900].map((x) => (
              <line key={x} x1={x} y1="40" x2={x} y2={H - 30}
                stroke="#1A2E29" strokeWidth="0.6" strokeDasharray="2 8" opacity="0.5" />
            ))}

            {/* Continent dots */}
            {dots.map((d, i) => (
              <circle key={i} cx={d.x} cy={d.y} r="1.4" fill="#234234" opacity="0.9" />
            ))}

            {/* Connecting arcs between HQs and regions */}
            {(() => {
              const hqs = m.locations.filter(l => l.hq);
              const arcs = [];
              m.locations.forEach((loc) => {
                if (loc.hq) return;
                // connect to nearest HQ
                let nearest = hqs[0], dmin = Infinity;
                for (const h of hqs) {
                  const dx = (loc.lon - h.lon), dy = (loc.lat - h.lat);
                  const d = dx * dx + dy * dy;
                  if (d < dmin) { dmin = d; nearest = h; }
                }
                const a = proj(loc.lon, loc.lat);
                const b = proj(nearest.lon, nearest.lat);
                // Quadratic curve with a control point above the midpoint
                const mid = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 - 30 };
                arcs.push({ d: `M ${a.x} ${a.y} Q ${mid.x} ${mid.y}, ${b.x} ${b.y}`, key: loc.id });
              });
              return arcs.map((a) => (
                <path key={a.key} d={a.d} fill="none" stroke="#D9FF35" strokeWidth="0.7" opacity="0.32" />
              ));
            })()}

            {/* Location dots */}
            {m.locations.map((loc, i) => {
              const { x, y } = proj(loc.lon, loc.lat);
              const r = loc.hq ? 7 : 4.5;
              return (
                <g key={loc.id}>
                  <circle cx={x} cy={y} r={r * 3.2} fill="#D9FF35" opacity={loc.hq ? 0.18 : 0.10}>
                    <animate attributeName="r" values={`${r};${r * 3.2};${r}`} dur="3s" repeatCount="indefinite" begin={`${i * 0.2}s`} />
                    <animate attributeName="opacity" values="0.4;0;0.4" dur="3s" repeatCount="indefinite" begin={`${i * 0.2}s`} />
                  </circle>
                  <circle cx={x} cy={y} r={r} fill="#D9FF35" stroke="#D9FF35" strokeWidth="1.5" />
                  <text x={x + r + 6} y={y + 4}
                    fontFamily="JetBrains Mono" fontSize="10" letterSpacing="1.2"
                    fill={loc.hq ? '#D9FF35' : '#F2F1EC'}>
                    {loc.name.toUpperCase()}
                  </text>
                  {loc.hq && (
                    <text x={x + r + 6} y={y - 6}
                      fontFamily="JetBrains Mono" fontSize="8.5" letterSpacing="1.4"
                      fill="#5A6E6A">{loc.role.toUpperCase()}</text>
                  )}
                </g>
              );
            })}
          </svg>
        </div>

        <div className="industry-strip" style={{ marginTop: 32 }}>
          {m.industries.map((ind, i) => (
            <div key={i}>
              <div className="num">{ind.num}</div>
              <h5>{ind.name}</h5>
              <p>{ind.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// IMPACT v2 — clearer measurable outputs
// ═══════════════════════════════════════════════════════════════
function ImpactV2() {
  const imp = window.NG.impact;
  return (
    <section className="section-pad-sm" data-anim="impact" id="impact">
      <div className="section-tag">
        <span><span className="num">08</span> · Business impact</span>
        <span>Measurable, instrumented, contracted</span>
      </div>
      <div className="container">
        <div className="section-head">
          <h2 className="display-2xl">Outcomes, <em className="serif-em" style={{ color: 'var(--ng-lime)' }}>instrumented.</em></h2>
          <p className="right">{imp.lede}</p>
        </div>

        <div className="impact-strip">
          {imp.big.map((k, i) => (
            <div key={i} data-anim-child>
              <div className="v"><Counter value={k.v} /><sup>{k.sup}</sup></div>
              <div className="label">{k.label}</div>
              <div className="desc">{k.desc}</div>
            </div>
          ))}
        </div>

        <h4 className="mono" style={{ marginTop: 48, marginBottom: 18, color: 'var(--ng-ink-dim)' }}>Detailed measurable outputs · medians, 2025 portfolio</h4>
        <div className="impact-detailed" data-anim-child-list>
          {imp.detailed.map((k, i) => (
            <div key={i} data-anim-child>
              <div className="v"><Counter value={k.v} />{k.unit ? <small>{k.unit}</small> : null}</div>
              <div className="k">{k.k}</div>
              <div className="d">{k.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// EXTRA CASES — additional cases grid
// ═══════════════════════════════════════════════════════════════
function ExtraCases({ setRoute }) {
  const more = window.NG.additionalCases || [];
  if (!more.length) return null;
  return (
    <div className="container" data-anim="extra-cases" style={{ marginTop: 32 }}>
      <h4 className="mono" style={{ marginBottom: 18, color: 'var(--ng-ink-dim)' }}>More from the 2025 portfolio</h4>
      <div className="cases-extra-grid" data-anim-child-list>
        {more.map((c) => (
          <article key={c.id} className="case-secondary" data-anim-child onClick={() => setRoute('case')}>
            <div className="tag">{c.tag}</div>
            <div className="client">{c.client}</div>
            <h3>{c.title}</h3>
            <p>{c.summary}</p>
            <div className="metrics">
              {c.metrics.map((m, i) => (
                <div key={i}>
                  <div className="v">{m.v}</div>
                  <div className="k">{m.k}</div>
                </div>
              ))}
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════
// POSITIONING STRIP — short credibility statements (after hero)
// ═══════════════════════════════════════════════════════════════
function PositioningStrip() {
  const items = (window.NG.positioning) || [];
  return (
    <section className="positioning-strip" data-anim="positioning">
      <div className="container">
        <div className="pos-grid">
          {items.map((p, i) => (
            <div key={i} className="pos-item">
              <div className="pos-k">{p.k}</div>
              <div className="pos-v">{p.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ═══════════════════════════════════════════════════════════════
// WHY NORTON-GAUSS — differentiators
// ═══════════════════════════════════════════════════════════════
function WhyNG() {
  const w = window.NG.whyNG;
  return (
    <section className="section-pad-sm" id="why" data-anim="why">
      <div className="section-tag">
        <span><span className="num">10</span> · Why Norton-Gauss</span>
        <span>Boutique · Practical · Outcome-led</span>
      </div>
      <div className="container">
        <div className="section-head">
          <h2 className="display-2xl">
            {w.h2A}<em className="serif-em" style={{ color: 'var(--ng-lime)' }}>{w.h2Em}</em>{w.h2B}
          </h2>
          <p className="right">{w.sub}</p>
        </div>

        <div className="why-grid">
          {w.items.map((it, i) => (
            <div key={i} className="why-card">
              <div className="why-ix">{String(i + 1).padStart(2, '0')}</div>
              <div className="why-k">{it.k}</div>
              <div className="why-v">{it.v}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ManifestoBanner, PositioningStrip, Compounding, PracticesDetail, Roadmaps, Innovation, WhyNG, WorldMap, ImpactV2, ExtraCases });