// methodology.jsx — /methodology page (Pilot to Practice deep-dive).
// Standalone file: inlines the hooks/components it needs so it doesn't
// depend on home.jsx scope.

const { useState: useS_m, useEffect: useE_m, useRef: useR_m, useMemo: useM_m } = React;

// ── Hooks ─────────────────────────────────────────────────────────
function useScrollYm() {
  const [y, setY] = useS_m(0);
  useE_m(() => {
    let raf = 0;
    const handler = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => { setY(window.scrollY); raf = 0; });
    };
    window.addEventListener('scroll', handler, { passive: true });
    return () => { window.removeEventListener('scroll', handler); cancelAnimationFrame(raf); };
  }, []);
  return y;
}

function useInViewM(ref, { threshold = 0.15, once = true } = {}) {
  const [inView, setInView] = useS_m(false);
  useE_m(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) { setInView(true); if (once) io.disconnect(); }
      else if (!once) setInView(false);
    }, { threshold });
    io.observe(el);
    return () => io.disconnect();
  }, [ref, threshold, once]);
  return inView;
}

function RevealM({ children, delay = 0, y = 28, style = {}, as: As = 'div', className = '' }) {
  const ref = useR_m(null);
  const seen = useInViewM(ref);
  return (
    <As ref={ref} className={className} style={{
      transition:'opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.1s cubic-bezier(.2,.7,.2,1)',
      transitionDelay:`${delay}ms`,
      opacity: seen ? 1 : 0,
      transform: seen ? 'translateY(0)' : `translateY(${y}px)`,
      willChange:'transform, opacity',
      ...style,
    }}>{children}</As>
  );
}

// ── Site Nav (shared via site-nav.jsx; SiteNav is on window) ─────
// SiteNav from site-nav.jsx is used directly below.

// ── Header (page title) ───────────────────────────────────────────
function MHeader() {
  return (
    <header className="h-hero" style={{padding:'160px 64px 90px', background:'var(--paper)', position:'relative', overflow:'hidden'}}>
      <div className="h-hero__grid" style={{maxWidth: 1280, margin:'0 auto', display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 60, alignItems:'center'}}>
        <div>
          <RevealM>
            <div className="f-mono" style={{fontSize:11, color:'var(--accent-warm)', letterSpacing:'0.28em', textTransform:'uppercase', display:'flex', alignItems:'center', gap:10, marginBottom: 22}}>
              <span style={{width: 24, height: 1, background:'var(--accent-warm)'}}/>
              Methodology
            </div>
          </RevealM>
          <RevealM delay={60}>
            <h1 className="h-hero__title" style={{
              fontFamily:'"DM Serif Display", serif', fontSize: 144, lineHeight: 0.96,
              letterSpacing:'-0.025em', margin: 0, fontWeight: 400, color:'var(--ink)',
              fontStyle:'normal',
            }}>
              Pilot to <span style={{color:'var(--accent-warm)'}}>Practice</span>
            </h1>
          </RevealM>
          <RevealM delay={140}>
            <p className="h-hero__intro" style={{fontSize: 20, lineHeight: 1.55, color:'var(--ink-2)', margin:'32px 0 0', maxWidth: 660}}>
              How regulated organizations move from AI experimentation to dependable, scaled deployment — and why most of them fail to.
            </p>
          </RevealM>
        </div>

        {/* Pilot → Practice pipeline animation */}
        <div className="h-hero__anim-wrap" style={{position:'relative', display:'flex', justifyContent:'center', alignItems:'center', height: 420}}>
          <style>{`
            @keyframes p2p-token {
              0%   { offset-distance: 0%;   opacity: 0; }
              5%   { opacity: 1; }
              95%  { opacity: 1; }
              100% { offset-distance: 100%; opacity: 0; }
            }
            @keyframes p2p-gate-pulse {
              0%, 100% { transform: scale(1);    opacity: 0.55; }
              50%      { transform: scale(1.18); opacity: 0; }
            }
            @keyframes p2p-scan {
              from { transform: rotate(0deg); }
              to   { transform: rotate(360deg); }
            }
            @keyframes p2p-dash {
              to { stroke-dashoffset: -32; }
            }
            @keyframes p2p-tick {
              0%, 100% { transform: translateY(0); opacity: 0.45; }
              50%      { transform: translateY(-3px); opacity: 1; }
            }
            @keyframes p2p-trail {
              0%   { transform: scale(0.4); opacity: 0; }
              30%  { transform: scale(1);   opacity: 0.45; }
              100% { transform: scale(1.6); opacity: 0; }
            }
          `}</style>
          <svg viewBox="0 0 510 420" width="100%" height="420" aria-hidden="true" preserveAspectRatio="xMidYMid meet" style={{maxWidth: 540, overflow:'visible'}}>
            <defs>
              <linearGradient id="p2pSpine" x1="0" x2="1">
                <stop offset="0"    stopColor="rgba(14,84,170,0)"/>
                <stop offset="0.08" stopColor="rgba(14,84,170,0.65)"/>
                <stop offset="0.5"  stopColor="rgba(29,78,216,0.85)"/>
                <stop offset="0.92" stopColor="rgba(217,119,87,0.7)"/>
                <stop offset="1"    stopColor="rgba(217,119,87,0)"/>
              </linearGradient>
              <radialGradient id="p2pTok" cx="0.5" cy="0.5" r="0.5">
                <stop offset="0"    stopColor="#fff"/>
                <stop offset="0.45" stopColor="#dbeafe"/>
                <stop offset="1"    stopColor="rgba(147,197,253,0)"/>
              </radialGradient>
              <pattern id="p2pGrid" width="20" height="20" patternUnits="userSpaceOnUse">
                <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(14,84,170,0.06)" strokeWidth="0.5"/>
              </pattern>
            </defs>

            {/* Soft grid backdrop */}
            <rect x="20" y="160" width="470" height="100" fill="url(#p2pGrid)" opacity="0.7"/>

            {/* Top caption */}
            <text x="255" y="34" textAnchor="middle"
              style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.28em', fill:'var(--ink-3)'}}>
              THE PILOT-TO-PRACTICE PIPELINE
            </text>

            {/* Stage columns. Each column gets ~140px horizontal room so labels never collide. */}
            {[
              {x: 110, code:'01', name:'PILOT',    color:'rgba(14,84,170,1)',    a1:'Use-case scoping',   a2:'Risk framing'},
              {x: 255, code:'02', name:'PREPARE',  color:'var(--accent-warm)',   a1:'Governance setup',   a2:'Procurement review'},
              {x: 400, code:'03', name:'PRACTICE', color:'var(--accent-green)',  a1:'Live monitoring',    a2:'Continuous oversight'},
            ].map((s, i) => (
              <g key={s.name}>
                {/* Stage label group ABOVE the spine */}
                <text x={s.x} y={78}  textAnchor="middle"
                  style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.22em', fill:'var(--ink-3)'}}>
                  STAGE {s.code}
                </text>
                <text x={s.x} y={108} textAnchor="middle"
                  style={{fontFamily:'Inter, system-ui', fontSize: 16, letterSpacing:'-0.018em', fill:'var(--ink)', fontWeight: 700}}>
                  {s.name}
                </text>
                <line x1={s.x - 22} y1={122} x2={s.x + 22} y2={122} stroke={s.color} strokeWidth="1.2" opacity="0.65"/>

                {/* Vertical connector from label down to gate */}
                <line x1={s.x} y1={130} x2={s.x} y2={178} stroke={s.color} strokeWidth="0.6" strokeDasharray="2 4" opacity="0.4"/>

                {/* Gate ring + pulse */}
                <g transform={`translate(${s.x}, 210)`}>
                  <circle r="38" fill="none" stroke={s.color} strokeWidth="0.8"
                    strokeDasharray="3 6" opacity="0.35"
                    style={{animation:`p2p-scan ${18 + i*5}s linear ${i % 2 ? 'reverse' : 'normal'} infinite`, transformOrigin:'center', transformBox:'fill-box'}}/>
                  <circle r="28" fill="none" stroke={s.color} strokeWidth="1.2"
                    style={{animation:`p2p-gate-pulse 3.4s ease-out ${i*0.9}s infinite`, transformOrigin:'center', transformBox:'fill-box'}}/>
                  <circle r="26" fill="var(--paper)" stroke={s.color} strokeWidth="1.6"/>
                  <text textAnchor="middle" y="5"
                    style={{fontFamily:'JetBrains Mono', fontSize: 12, fontWeight: 600, letterSpacing:'0.08em', fill: s.color}}>
                    {s.code}
                  </text>
                </g>

                {/* Activity captions BELOW the spine — stacked on two lines so they never overlap */}
                <text x={s.x} y={278} textAnchor="middle"
                  style={{fontFamily:'JetBrains Mono', fontSize: 9, letterSpacing:'0.14em', fill:'var(--ink-2)'}}>
                  {s.a1}
                </text>
                <text x={s.x} y={294} textAnchor="middle"
                  style={{fontFamily:'JetBrains Mono', fontSize: 9, letterSpacing:'0.14em', fill:'var(--ink-3)'}}>
                  {s.a2}
                </text>
              </g>
            ))}

            {/* Main pipeline spine */}
            <line x1="30" y1="210" x2="480" y2="210"
              stroke="rgba(14,84,170,0.16)" strokeWidth="1" strokeDasharray="3 6"
              style={{animation:'p2p-dash 2.6s linear infinite'}}/>
            <line x1="30" y1="210" x2="480" y2="210"
              stroke="url(#p2pSpine)" strokeWidth="2.5" opacity="0.85"/>

            {/* Endpoint: LAUNCH */}
            <g transform="translate(30, 210)">
              <circle r="7"   fill="rgba(14,84,170,0.12)"/>
              <circle r="3.5" fill="rgba(14,84,170,0.9)"/>
              <text y="-20" textAnchor="middle" style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.22em', fill:'rgba(14,84,170,0.9)'}}>LAUNCH</text>
            </g>

            {/* Endpoint: IN PRACTICE */}
            <g transform="translate(480, 210)">
              <circle r="9" fill="none" stroke="var(--accent-green)" strokeWidth="1.2"
                style={{animation:'p2p-trail 2.2s ease-out infinite', transformOrigin:'center', transformBox:'fill-box'}}/>
              <circle r="7"   fill="rgba(34,168,114,0.15)"/>
              <circle r="3.5" fill="var(--accent-green)"/>
              <text y="-20" textAnchor="middle" style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.22em', fill:'var(--accent-green)'}}>IN PRACTICE</text>
            </g>

            {/* Travelling tokens — SMIL animateMotion for reliable continuous flow */}
            {[0, 1.6, 3.2, 4.8, 6.4].map((delay, i) => (
              <g key={i}>
                <circle r="10" fill="url(#p2pTok)" opacity="0.7">
                  <animateMotion dur="8s" begin={`${delay}s`} repeatCount="indefinite"
                    path="M 30 210 L 480 210"/>
                  <animate attributeName="opacity" values="0;0.7;0.7;0" keyTimes="0;0.08;0.92;1" dur="8s" begin={`${delay}s`} repeatCount="indefinite"/>
                </circle>
                <circle r="4" fill="#fff">
                  <animateMotion dur="8s" begin={`${delay}s`} repeatCount="indefinite"
                    path="M 30 210 L 480 210"/>
                  <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="8s" begin={`${delay}s`} repeatCount="indefinite"/>
                </circle>
              </g>
            ))}

            {/* Outcome ticks at the bottom — never overlap the pipeline labels */}
            <line x1="30" y1="360" x2="480" y2="360" stroke="rgba(14,30,55,0.08)" strokeWidth="1"/>
            {[
              {x: 110, label:'OPERATIONAL'},
              {x: 255, label:'GOVERNABLE'},
              {x: 400, label:'DEFENSIBLE'},
            ].map((t, i) => (
              <g key={t.label} transform={`translate(${t.x}, 380)`}>
                <g style={{animation:`p2p-tick 3.6s ease-in-out ${i*0.5}s infinite`, transformOrigin:'center', transformBox:'fill-box'}}>
                  <line x1="-26" y1="-20" x2="26" y2="-20" stroke="var(--accent-warm)" strokeWidth="1.2"/>
                  <circle cx="0" cy="-20" r="2.5" fill="var(--accent-warm)"/>
                </g>
                <text y="0" textAnchor="middle"
                  style={{fontFamily:'JetBrains Mono', fontSize: 9, letterSpacing:'0.2em', fill:'var(--ink-2)', fontWeight: 600}}>
                  {t.label}
                </text>
              </g>
            ))}
          </svg>
        </div>
      </div>

      {/* Table of contents */}
      <RevealM delay={220}>
        <div className="h-hero__toc" style={{maxWidth: 1280, margin:'90px auto 0', borderTop:'1px solid var(--line)', paddingTop: 24}}>
          <div className="f-mono" style={{fontSize:10.5, color:'var(--ink-3)', letterSpacing:'0.18em', textTransform:'uppercase', marginBottom: 16}}>On this page</div>
          <ol style={{
            listStyle:'none', padding: 0, margin: 0,
            display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0,
            counterReset:'toc',
          }} className="h-hero__toc">
            {[
              ['#problem',  'The problem we saw'],
              ['#research', 'What the research says'],
              ['#failures', 'Why pilots fail'],
              ['#different','Why StratAlliance is different'],
            ].map(([h, t], i) => (
              <li key={h} style={{borderLeft: i ? '1px solid var(--line)' : 'none', paddingLeft: i ? 18 : 0, paddingRight: 16}}>
                <a href={h} style={{textDecoration:'none', color:'var(--ink-2)', display:'block'}}>
                  <span className="f-mono" style={{fontSize:10.5, color:'var(--accent-warm)', letterSpacing:'0.16em'}}>0{i+1}</span>
                  <span style={{display:'block', fontSize: 15, marginTop: 6, fontWeight: 600, color:'var(--ink)', letterSpacing:'-0.01em'}}>{t}</span>
                </a>
              </li>
            ))}
          </ol>
        </div>
      </RevealM>
    </header>
  );
}

// ── 01 · The problem we saw (dark) ────────────────────────────────
function MProblem() {
  return (
    <section id="problem" data-theme="dark" style={{padding:'140px 64px', background:'var(--ink)', color:'var(--paper)'}}>
      <div style={{maxWidth: 1100, margin:'0 auto'}}>
        <RevealM>
          <div className="sect-label" style={{color:'rgba(255,255,255,0.7)'}}>
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>01</span><span>The problem we saw</span>
          </div>
        </RevealM>
        <RevealM delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 52, lineHeight: 1.04, margin:'24px 0 32px', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 980}}>
            Too many organizations buy AI tools only to watch their pilots stall.
          </h2>
        </RevealM>

        <div style={{display:'grid', gridTemplateColumns:'1fr', gap: 24, marginTop: 12}}>
          <RevealM delay={140}>
            <p style={{fontSize: 18, lineHeight: 1.65, color:'rgba(255,255,255,0.86)', margin: 0, maxWidth: 880}}>
              The problem is usually not the model itself. It is the lack of governance, procurement, integration, and ownership structures needed to move from experimentation to scaled deployment with confidence.
            </p>
          </RevealM>
          <RevealM delay={180}>
            <p style={{fontSize: 18, lineHeight: 1.65, color:'rgba(255,255,255,0.72)', margin: 0, maxWidth: 880}}>
              Recent <strong style={{color:'var(--paper)', fontWeight: 600}}>MIT-linked reporting found that 95% of enterprise AI pilots fail to deliver measurable business value.</strong> That finding reflects a broader market pattern — organizations are moving quickly into pilots without the intake discipline, risk frameworks, procurement guardrails, and operational readiness required to make AI work in real-world settings.
            </p>
          </RevealM>

          <RevealM delay={220} style={{
            borderLeft: '2px solid var(--accent-warm)',
            paddingLeft: 28, marginTop: 22, maxWidth: 880,
          }}>
            <p style={{fontSize: 17, lineHeight: 1.65, color:'rgba(255,255,255,0.86)', margin: 0}}>
              StratAlliance Global was built to address this recurring problem. Drawing on our combined experience in government, diplomacy, and the technology sector, we saw the same story play out repeatedly: organizations were procuring AI tools before they had the right governance structures, risk processes, and deployment plans in place.
            </p>
            <p style={{fontSize: 17, lineHeight: 1.65, color:'rgba(255,255,255,0.72)', margin:'16px 0 0'}}>
              Pilots often look promising in isolation, but they are tested under controlled conditions. Once they encounter real workflows, legacy systems, procurement rules, internal accountability gaps, and public scrutiny, many of them stall. That is why we built a pilot-to-practice approach that connects procurement decisions to AI governance from day one.
            </p>
          </RevealM>
        </div>
      </div>
    </section>
  );
}

// ── 02 · What the research says (light) ───────────────────────────
function MResearch() {
  // Uniform card shape: percent — short headline — single explanatory line — source.
  const stats = [
    { n:'95%', h:'Stall before value',     l:'of enterprise AI pilots fail to deliver measurable business outcomes.', src:'MIT-linked reporting' },
    { n:'78%', h:'Won\u2019t integrate',   l:'of enterprises can\u2019t connect AI tools to existing systems and workflows.', src:'Zapier' },
    { n:'70%', h:'Wrong data foundation',  l:'of organizations have an incomplete picture of the data their AI needs.', src:'Couchbase-linked reporting' },
    { n:'6%',  h:'See ROI inside a year',  l:'of organizations achieve payback on AI investments in under 12 months.', src:'Deloitte' },
  ];
  return (
    <section id="research" data-theme="light" style={{padding:'140px 64px', background:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <RevealM>
          <div className="sect-label">
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>02</span><span>What the research says</span>
          </div>
        </RevealM>
        <RevealM delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 52, lineHeight: 1.04, margin:'24px 0 0', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 1080}}>
            The evidence is increasingly consistent. AI pilots fail for organizational reasons more often than technical ones.
          </h2>
        </RevealM>

        <div className="h-grid-4" style={{marginTop: 56, display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
          {stats.map((s,i) => (
            <RevealM key={s.n} delay={i * 100}>
              <div className="h-stat-card" style={{
                padding:'36px 26px 30px',
                borderLeft: i ? '1px solid var(--line)' : 'none',
                height: 360,
                display:'grid', gridTemplateRows:'auto auto 1fr auto', rowGap: 14,
              }}>
                <div className="h-stat-num" style={{fontFamily:'Inter, system-ui', fontSize: 96, lineHeight: 0.9, color:'var(--accent-warm)', letterSpacing:'-0.045em', fontWeight: 800}}>{s.n}</div>
                <div style={{fontFamily:'Inter, system-ui', fontSize: 22, lineHeight: 1.18, color:'var(--ink)', fontWeight: 700, letterSpacing:'-0.022em'}}>{s.h}</div>
                <div style={{fontSize: 14, lineHeight: 1.55, color:'var(--ink-2)'}}>{s.l}</div>
                <div className="f-mono" style={{fontSize:10, color:'var(--ink-3)', letterSpacing:'0.14em', textTransform:'uppercase'}}>SOURCE · {s.src}</div>
              </div>
            </RevealM>
          ))}
        </div>

        {/* HBR full-width pull */}
        <RevealM delay={500}>
          <div className="h-pull-quote" style={{
            marginTop: 22, padding:'30px 32px',
            background:'var(--paper-2)',
            border:'1px solid var(--line)',
            borderRadius: 8,
            display:'grid', gridTemplateColumns:'1fr auto', gap: 36, alignItems:'center',
          }}>
            <p style={{margin: 0, fontSize: 19, lineHeight: 1.45, color:'var(--ink)', fontWeight: 500, maxWidth: 920, letterSpacing:'-0.01em'}}>
              "Organizational resistance, fear, and internal process barriers remain major obstacles to AI adoption."
            </p>
            <div className="f-mono" style={{fontSize:10, color:'var(--ink-3)', letterSpacing:'0.16em', textTransform:'uppercase', textAlign:'right'}}>SOURCE<br/>Harvard Business Review</div>
          </div>
        </RevealM>
      </div>
    </section>
  );
}

// ── 03 · Why pilots fail (dark) ──────────────────────────────────
function MFailures() {
  const fails = [
    { k:'Integration gaps',     src:'Zapier',
      d:'Many AI pilots fail because the system never connects cleanly to the workflows, approvals, and platforms where work happens. A tool can perform well in a demonstration but still fail in production if it cannot integrate with existing systems, data flows, and operational processes.' },
    { k:'Incomplete data',      src:'Couchbase 2026 CIO AI Survey',
      d:'AI outputs are only as reliable as the data behind them. When data is incomplete, inconsistent, siloed, or locked in spreadsheets, pilots produce weak results and lose credibility quickly.' },
    { k:'Unclear ROI',          src:'Deloitte',
      d:'Organizations often cannot determine whether a pilot succeeded because they never defined success in operational terms. If no one agrees on what "working" means, it becomes impossible to measure improvement, justify investment, or decide whether a pilot should scale.' },
    { k:'Misallocated budgets', src:'Massachusetts Institute of Technology NANDA Initiative',
      d:'Many organizations overinvest in visible AI tools while underinvesting in the underlying infrastructure, governance, and workflow changes that make adoption sustainable. Excitement around front-end tools can obscure the quieter work required to build lasting value.' },
    { k:'Cultural resistance',  src:'Harvard Business Review',
      d:'Even capable systems fail when the people expected to use them were not involved in choosing, testing, or shaping them. Fear of job displacement, weak change management, and poor stakeholder engagement can stop adoption before a pilot has a chance to mature.' },
    { k:'Lack of orchestration', src:'Deloitte',
      d:'When no one owns the pilot, no one owns the outcome. Without clear accountability for intake, approvals, risk escalation, deployment readiness, and performance oversight, pilots drift until they stall.' },
    { k:'Governance deficits',  src:'Couchbase 2026 CIO AI Survey',
      d:'Governance is too often treated as something to add after a pilot proves itself. In practice, organizations need review thresholds, data controls, procurement safeguards, monitoring structures, and accountability frameworks from the start — especially when systems affect sensitive data, regulated processes, or public-facing decisions.' },
  ];

  return (
    <section id="failures" data-theme="dark" style={{padding:'140px 64px', background:'var(--ink)', color:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <RevealM>
          <div className="sect-label" style={{color:'rgba(255,255,255,0.7)'}}>
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>03</span><span>Why pilots fail</span>
          </div>
        </RevealM>
        <RevealM delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 52, lineHeight: 1.04, margin:'24px 0 56px', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 980}}>
            Seven organizational failure modes.
          </h2>
        </RevealM>

        <div style={{display:'grid', gridTemplateColumns:'1fr', gap: 0}}>
          {fails.map((f,i) => (
            <RevealM key={f.k} delay={i * 60}>
              <div className="h-meth-failures-row" style={{
                display:'grid', gridTemplateColumns:'80px 280px 1fr', gap: 40,
                padding:'34px 0',
                borderTop: '1px solid rgba(255,255,255,0.16)',
                borderBottom: i === fails.length - 1 ? '1px solid rgba(255,255,255,0.16)' : 'none',
                alignItems:'baseline',
              }}>
                <span className="f-mono" style={{fontSize:13, color:'var(--accent-warm)', letterSpacing:'0.18em', fontWeight: 600}}>0{i+1}</span>
                <h3 style={{fontFamily:'Inter, system-ui', fontSize: 26, lineHeight: 1.15, margin: 0, fontWeight: 700, letterSpacing:'-0.022em'}}>{f.k}</h3>
                <div>
                  <p style={{fontSize:15.5, lineHeight: 1.6, color:'rgba(255,255,255,0.78)', margin: 0, maxWidth: 720}}>
                    {f.d}
                  </p>
                  <p style={{
                    margin:'10px 0 0',
                    color:'rgba(255,255,255,0.42)',
                    fontFamily:'"DM Serif Display", serif',
                    fontStyle:'italic',
                    fontSize: 14,
                    lineHeight: 1.4,
                  }}>— {f.src}</p>
                </div>
              </div>
            </RevealM>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── 04 · Why StratAlliance is different (light) ───────────────────
function MDifferent() {
  const connects = ['Procurement','Legal review','Governance','Risk','Deployment','Public trust'];
  return (
    <section id="different" data-theme="light" style={{padding:'140px 64px', background:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <RevealM>
          <div className="sect-label">
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>04</span><span>Why StratAlliance is different</span>
          </div>
        </RevealM>
        <RevealM delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 52, lineHeight: 1.04, margin:'24px 0 32px', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 1080}}>
            Responsible AI adoption begins before deployment.
          </h2>
        </RevealM>

        <div className="h-meth-different" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 60, alignItems:'flex-start'}}>
          <div>
            <RevealM delay={140}>
              <p style={{fontSize: 18, lineHeight: 1.65, color:'var(--ink-2)', margin: 0, maxWidth: 720}}>
                StratAlliance Global was built around the idea that responsible AI adoption begins before deployment. We help clients put the right structures in place early — from intake and risk assessment to procurement strategy, governance design, deployment readiness, and long-term oversight.
              </p>
            </RevealM>
            <RevealM delay={200}>
              <p style={{fontSize: 18, lineHeight: 1.65, color:'var(--ink-2)', margin:'24px 0 0', maxWidth: 720}}>
                Our approach is different because it <strong style={{color:'var(--ink)', fontWeight: 600}}>connects functions that are too often treated separately</strong>: procurement, legal review, governance, risk, deployment, and public trust. That integration helps clients move from experimentation to operational value with greater confidence and less friction.
              </p>
            </RevealM>

            {/* Closing paragraph */}
            <RevealM delay={280} style={{
              marginTop: 40, padding:'28px 32px',
              background:'var(--ink)', color:'var(--paper)',
              borderRadius: 8,
            }}>
              <div className="f-mono" style={{fontSize:10.5, color:'var(--accent-warm)', letterSpacing:'0.18em', textTransform:'uppercase', marginBottom: 14}}>The shift that matters</div>
              <p style={{fontSize: 17, lineHeight: 1.6, color:'rgba(255,255,255,0.92)', margin: 0, fontWeight: 500, letterSpacing:'-0.005em'}}>
                Too many organizations treat AI pilots as isolated experiments. We treat them as the first stage of an operational, governance, and procurement journey.
              </p>
              <p style={{fontSize: 15, lineHeight: 1.6, color:'rgba(255,255,255,0.7)', margin:'14px 0 0'}}>
                That difference is why StratAlliance is uniquely positioned to help organizations build AI systems that are not only innovative, but governable, defensible, and ready to scale under real-world conditions.
              </p>
            </RevealM>
          </div>

          {/* Right: connected functions diagram */}
          <RevealM delay={240}>
            <div className="h-meth-different__rail" style={{position:'sticky', top: 100}}>
              <div className="f-mono" style={{fontSize:10.5, color:'var(--ink-3)', letterSpacing:'0.18em', textTransform:'uppercase', marginBottom: 18}}>Functions we connect</div>
              <div style={{display:'flex', flexDirection:'column', gap: 8}}>
                {connects.map((c,i) => (
                  <div key={c} style={{
                    display:'flex', alignItems:'center', gap: 14,
                    padding:'14px 18px',
                    background:'var(--paper)',
                    border:'1px solid var(--line)',
                    borderRadius: 6,
                    position:'relative',
                  }}>
                    <span className="f-mono" style={{fontSize:11, color:'var(--accent-warm)', letterSpacing:'0.14em'}}>0{i+1}</span>
                    <span style={{fontSize:15, fontWeight: 600, color:'var(--ink)', letterSpacing:'-0.01em'}}>{c}</span>
                    {i < connects.length - 1 && (
                      <div style={{
                        position:'absolute', left: 36, bottom: -9, width: 1, height: 9,
                        background:'var(--accent-warm)',
                      }}/>
                    )}
                  </div>
                ))}
              </div>
              <div style={{marginTop: 14, padding:'10px 18px', textAlign:'center', background:'var(--accent-warm)', color:'var(--paper)', borderRadius: 6, fontFamily:'JetBrains Mono', fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase'}}>
                → One accountable system
              </div>
            </div>
          </RevealM>
        </div>
      </div>
    </section>
  );
}

// ── 05 · Closing CTA (dark) ───────────────────────────────────────
function MCTA() {
  return (
    <section id="cta" data-theme="dark" style={{padding:'150px 64px', background:'var(--ink)', color:'var(--paper)', textAlign:'center', position:'relative', overflow:'hidden'}}>
      <svg width="100%" height="500" viewBox="0 0 1280 500" preserveAspectRatio="xMidYMid meet" style={{position:'absolute', inset:'80px 0 0', zIndex:0, opacity:0.35}}>
        {[80, 160, 260, 380, 520].map((r,i)=>(
          <circle key={r} cx="640" cy="250" r={r} fill="none" stroke="var(--accent-warm)" strokeWidth="0.7" strokeDasharray={i%2?'3 6':'none'}/>
        ))}
      </svg>
      <div style={{position:'relative', zIndex:1, maxWidth: 1080, margin:'0 auto'}}>
        <RevealM>
          <div className="f-mono" style={{fontSize:11, color:'var(--accent-warm)', letterSpacing:'0.28em', textTransform:'uppercase', display:'inline-flex', alignItems:'center', gap:10, marginBottom: 20}}>
            <span style={{width: 24, height: 1, background:'var(--accent-warm)'}}/>
            Bring the methodology in-house
          </div>
        </RevealM>
        <RevealM delay={60}>
          <h2 style={{fontFamily:'"DM Serif Display", serif', fontSize: 88, lineHeight: 0.98, margin:'0 auto 24px', letterSpacing:'-0.025em', fontWeight: 400}}>
            Walk Pilot → Practice with us.
          </h2>
        </RevealM>
        <RevealM delay={100}>
          <p style={{maxWidth: 760, margin:'18px auto 40px', color:'rgba(255,255,255,0.78)', fontSize: 18, lineHeight: 1.55}}>
            Book a methodology briefing. We'll walk your team through the seven failure modes, the three stages, and where your current AI initiatives land on the curve.
          </p>
        </RevealM>
        <RevealM delay={180}>
          <div style={{display:'inline-flex', gap:14, flexWrap:'wrap', justifyContent:'center'}}>
            <a className="btn btn-filled" href="mailto:info@stratallianceglobal.com?subject=Methodology%20briefing" style={{textDecoration:'none', borderColor:'var(--accent-warm)', background:'var(--accent-warm)'}}>Book a methodology briefing →</a>
            <a className="btn" href="services.html" style={{textDecoration:'none', borderColor:'var(--paper)', color:'var(--paper)', background:'transparent'}}>See services per stage</a>
          </div>
        </RevealM>
      </div>
    </section>
  );
}

// (Footer uses shared SiteFooter from site-nav.jsx)

// ── App ───────────────────────────────────────────────────────────
function MethodologyApp() {
  const scrollY = useScrollYm();
  return (
    <>
      <SiteNav/>
      <main id="main-content">
        <MHeader/>
        <MProblem/>
        <MResearch/>
        <MFailures/>
        <MDifferent/>
        <MCTA/>
        <SiteFooter/>
      </main>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<MethodologyApp/>);
