// Homepage — scroll-driven assembly of the StratAlliance Global site.
// Uses components from wireframe-h.jsx but wires real scroll behavior:
// - Hero globe: parallax + scale + fade as you leave
// - Section reveals via IntersectionObserver
// - Methodology pipeline: tokens advance with scroll position
// - Sticky side progress nav

const { useState: useS, useEffect: useE, useRef: useR, useMemo: useM, useCallback: useCB } = React;

// ── Hooks ───────────────────────────────────────────────────────

function useScrollY() {
  const [y, setY] = useS(typeof window === 'undefined' ? 0 : window.scrollY);
  useE(() => {
    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;
}

// Progress 0..1 of how far an element has moved through the viewport.
// Pin mode = uses element height − viewport height (for sticky/pinned sections).
function useScrollProgress(ref, { pin = false } = {}) {
  const [p, setP] = useS(0);
  useE(() => {
    let raf = 0;
    const compute = () => {
      raf = 0;
      const el = ref.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const vh = window.innerHeight;
      if (pin) {
        const scrollable = rect.height - vh;
        const scrolled = Math.max(0, -rect.top);
        setP(Math.max(0, Math.min(1, scrolled / Math.max(scrollable, 1))));
      } else {
        // 0 when element bottom hits viewport bottom, 1 when element top hits viewport top.
        const total = vh + rect.height;
        const scrolled = vh - rect.top;
        setP(Math.max(0, Math.min(1, scrolled / total)));
      }
    };
    const handler = () => { if (!raf) raf = requestAnimationFrame(compute); };
    window.addEventListener('scroll', handler, { passive: true });
    window.addEventListener('resize', handler);
    compute();
    return () => { window.removeEventListener('scroll', handler); window.removeEventListener('resize', handler); cancelAnimationFrame(raf); };
  }, [ref, pin]);
  return p;
}

function useInView(ref, { threshold = 0.15, once = true } = {}) {
  const [inView, setInView] = useS(false);
  useE(() => {
    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;
}

// Reveal wrapper — adds class when in view.
function Reveal({ children, delay = 0, y = 28, style = {}, as: As = 'div', className = '' }) {
  const ref = useR(null);
  const seen = useInView(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>
  );
}

// ── Easing utility ──────────────────────────────────────────────
const easeInOut = (t) => t * t * (3 - 2 * t);
const clamp = (v, a, b) => Math.max(a, Math.min(b, v));

// ── Nav (uses shared SiteNav) ───────────────────────────────────
// SiteNav is loaded from site-nav.jsx before this file.

// ── Side progress indicator (fixed, right) ──────────────────────
function SideProgress({ active, sections }) {
  return (
    <div className="h-side-progress" style={{
      position:'fixed', right: 22, top:'50%', transform:'translateY(-50%)',
      zIndex: 40, display:'flex', flexDirection:'column', gap: 14,
      mixBlendMode:'difference', color:'#fff',
    }}>
      {sections.map((s, i) => (
        <a key={s.id} href={`#${s.id}`} style={{
          display:'flex', alignItems:'center', gap: 10,
          color:'inherit', textDecoration:'none',
        }}>
          <span style={{
            fontFamily:'JetBrains Mono, monospace', fontSize: 10, letterSpacing:'0.16em', textTransform:'uppercase',
            opacity: active === i ? 1 : 0,
            transition:'opacity .3s ease',
          }}>{s.label}</span>
          <span style={{
            width: active === i ? 30 : 16,
            height: 1.5,
            background:'currentColor',
            opacity: active === i ? 1 : 0.45,
            transition:'width .4s cubic-bezier(.2,.7,.3,1), opacity .3s',
          }}/>
        </a>
      ))}
    </div>
  );
}

// ── Hero ────────────────────────────────────────────────────────
// Headless TimelineContext provider — gives GlobeScene the time it needs
// to spin, without the Stage's playback chrome.
function HeadlessTimeline({ duration = 9, children }) {
  const [time, setTime] = useS(0);
  useE(() => {
    let raf = 0;
    const start = performance.now();
    const step = (t) => {
      const elapsed = ((t - start) / 1000) % duration;
      setTime(elapsed);
      raf = requestAnimationFrame(step);
    };
    raf = requestAnimationFrame(step);
    return () => cancelAnimationFrame(raf);
  }, [duration]);
  const value = useM(() => ({ time, duration, playing: true }), [time, duration]);
  return <TimelineContext.Provider value={value}>{children}</TimelineContext.Provider>;
}

function HomeHero({ scrollY }) {
  const fade = clamp(1 - scrollY / 700, 0, 1);
  const lift = clamp(scrollY * 0.18, 0, 140);
  const [heroTheme, setHeroTheme] = useHeroTheme();
  const themeCfg = HERO_THEME_CONFIG[heroTheme];
  const heroText = heroTextColors(heroTheme);

  return (
    <section id="top" className="h-hero h-hero--homepage" style={{
      position:'relative', height:'100vh', minHeight: 720,
      overflow:'hidden', background:'#ffffff',
    }}>
      <style>{`
        @keyframes heroCue {
          0%, 100% { transform: translate(-50%, 0); opacity: 0.45; }
          50%      { transform: translate(-50%, 6px); opacity: 0.9; }
        }
        @keyframes heroFadeUp {
          from { opacity: 0; transform: translateY(14px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>

      {/* Globe + wordmark stage — fills the hero */}
      <div className="h-hero__globe-wrap" style={{
        position:'absolute', inset: 0,
        display:'flex', alignItems:'center', justifyContent:'center',
        opacity: fade,
        transform: `translateY(${lift * 0.3}px)`,
        transition:'opacity 0.1s linear',
      }}>
        <div style={{width:'100%', height:'100%', maxWidth: 1920, margin:'0 auto'}}>
          <HeadlessTimeline duration={9999}>
            <LogoScene
              videoSrcs={['assets/stitch1.mp4', 'assets/stitch2.mp4']}
              tintColor={themeCfg.tintColor}
              tintOpacity={themeCfg.tintOpacity}
              tintBlur={themeCfg.tintBlur}
              bgMode="video"
              logoOnDark={themeCfg.logoOnDark}
            />
          </HeadlessTimeline>
        </div>
      </div>

      {/* Theme toggle — sticky in top-right corner */}
      <div className="h-hero__toggle"><HeroThemeToggle theme={heroTheme} setTheme={setHeroTheme}/></div>

      {/* Top-left practice label removed per feedback */}

      {/* Floating CTAs — bottom right, glass card */}
      <div className="h-hero__cta-card" style={{
        position:'absolute', bottom: 56, right: 64, zIndex: 3,
        maxWidth: 440,
        padding: '20px 22px',
        background: heroTheme === 'dark' ? 'rgba(11,20,38,0.45)' : 'rgba(255,255,255,0.78)',
        backdropFilter:'blur(14px) saturate(140%)',
        WebkitBackdropFilter:'blur(14px) saturate(140%)',
        border:`1px solid ${heroTheme === 'dark' ? 'rgba(255,255,255,0.18)' : 'var(--line)'}`,
        borderRadius: 8,
        boxShadow: heroTheme === 'dark' ? '0 12px 40px rgba(0,0,0,0.30)' : '0 12px 40px rgba(14,84,170,0.10)',
        animation:'heroFadeUp 1.2s ease-out 0.9s both',
        opacity: fade,
        transition: 'background .3s ease, border-color .3s ease, box-shadow .3s ease',
      }}>
        <p style={{
          margin: 0, fontSize: 14, lineHeight: 1.5, color: heroText.ink2,
          fontFamily:'Inter, system-ui',
        }}>
          End-to-end support for highly regulated organizations that need to <strong style={{color: heroText.ink, fontWeight: 600}}>govern, buy, and deploy AI</strong> with confidence.
        </p>
        <div style={{display:'flex', gap: 10, marginTop: 16}}>
          <a href="#methodology" className="btn btn-filled" style={{textDecoration:'none', padding:'10px 16px', fontSize: 12, fontFamily:'"DM Serif Display", serif', letterSpacing:'0.04em', textTransform:'none', fontWeight: 400}}>How we work →</a>
          <a href="#contact" className="btn" style={{textDecoration:'none', padding:'10px 16px', fontSize: 12, fontFamily:'"DM Serif Display", serif', letterSpacing:'0.04em', textTransform:'none', fontWeight: 400, color: heroTheme === 'dark' ? '#fff' : undefined, borderColor: heroTheme === 'dark' ? '#fff' : undefined, background: heroTheme === 'dark' ? 'transparent' : undefined}}>Start a conversation</a>
        </div>
      </div>

      {/* Scroll cue */}
      <div className="h-hero__scroll-cue" style={{
        position:'absolute', bottom: 24, left:'50%', zIndex: 3,
        display:'flex', flexDirection:'column', alignItems:'center', gap: 8,
        animation:'heroCue 2.4s ease-in-out infinite',
        opacity: fade,
      }}>
        <div className="f-mono" style={{fontSize:10, color: heroText.ink3, letterSpacing:'0.28em', textTransform:'uppercase'}}>Scroll</div>
        <div style={{width:1, height: 22, background: heroText.ink3}}/>
      </div>
    </section>
  );
}

// ── What we do (dark) ───────────────────────────────────────────
function HomeWhat() {
  return (
    <section id="what" className="h-section" data-theme="dark" style={{padding:'140px 64px', background:'var(--ink)', color:'var(--paper)'}}>
      <div className="h-home-what" style={{maxWidth: 1280, margin:'0 auto', display:'grid', gridTemplateColumns:'220px 1fr', gap: 60}}>
        <Reveal>
          <div className="sect-label" style={{color:'rgba(255,255,255,0.7)'}}>
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>01</span><span>What we do</span>
          </div>
        </Reveal>
        <div>
          <Reveal>
            <p style={{fontFamily:'Inter, system-ui', fontSize: 36, lineHeight: 1.22, margin: 0, fontWeight: 600, letterSpacing:'-0.02em', maxWidth: 1000}}>
              StratAlliance Global provides end-to-end support for highly regulated organizations that need to govern, buy, and deploy AI with confidence.
            </p>
          </Reveal>
          <Reveal delay={80}>
            <p style={{fontSize: 17, lineHeight: 1.6, color:'rgba(255,255,255,0.72)', margin:'24px 0 0', maxWidth: 880, fontWeight: 400}}>
              We act as a trusted partner throughout the AI lifecycle — from early use-case scoping and vendor selection through contract structuring, deployment, and ongoing oversight. Our specialized experience in AI risk management, procurement, and responsible AI governance lets us deliver tailored support at each stage, so clients move from pilots to dependable, well-governed AI in daily operations.
            </p>
          </Reveal>
          <Reveal delay={150}>
            <div className="h-home-companies" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, marginTop: 56, borderTop:'1px solid rgba(255,255,255,0.18)'}}>
              {[
                {k:'White House',  v:'Office of Management & Budget'},
                {k:'U.S. State',   v:'Technology policy team'},
                {k:'Microsoft',    v:'Office of Responsible AI'},
                {k:'ONCD',         v:'Intl. cyber engagements'},
              ].map((c,i) => (
                <div key={c.k} style={{padding:'22px 0 4px', borderLeft: i ? '1px solid rgba(255,255,255,0.18)' : 'none', paddingLeft: i ? 22 : 0}}>
                  <div className="f-mono" style={{fontSize:10.5, color:'var(--accent-warm)', letterSpacing:'0.16em'}}>FORMER</div>
                  <div style={{fontFamily:'Inter, system-ui', fontSize: 22, marginTop:6, fontWeight: 700, letterSpacing:'-0.012em'}}>{c.k}</div>
                  <div style={{fontSize:13, marginTop:4, color:'rgba(255,255,255,0.7)'}}>{c.v}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ── Sectors (light) ─────────────────────────────────────────────
// Editorial horizontal accordion. No icons — the sector code itself is
// the visual anchor, set very large when collapsed and stepping down when
// the tile expands so the description gets the room it needs.
function HomeSectors() {
  const sectors = [
    {
      code:'MUN', name:'Municipal & Public Services',
      detail:'City and regional governments deploying AI in constituent services, 311, benefits, permitting, and public records.',
      deploys:['311 & contact center', 'Benefits delivery', 'Permitting', 'Public records'],
    },
    {
      code:'LEG', name:'Legal & Professional Services',
      detail:'Law firms and professional services organizations serving public-sector and highly regulated clients.',
      deploys:['Document review', 'Conflict screening', 'Matter intake', 'Knowledge management'],
    },
    {
      code:'HEA', name:'Healthcare',
      detail:'Health ministries, hospital systems, and clinics operating under strict privacy, safety, and quality obligations.',
      deploys:['Clinical documentation', 'Triage support', 'Patient access', 'Quality monitoring'],
    },
    {
      code:'FIN', name:'Finance & Insurance',
      detail:'Finance ministries, financial institutions, and insurers balancing AI innovation with capital and consumer-protection requirements.',
      deploys:['Claims processing', 'KYC & fraud', 'Risk modeling', 'Customer servicing'],
    },
    {
      code:'EDU', name:'Education',
      detail:'School systems, universities, and education organizations bringing AI into teaching, research, and administration.',
      deploys:['Student support', 'Curriculum design', 'Research workflows', 'Admin operations'],
    },
    {
      code:'+',   name:'And more',
      detail:'We work wherever public trust and regulatory scrutiny are non-negotiable — government, energy, transport, defense, and beyond.',
      deploys:['Energy', 'Transport', 'Defense', 'Other regulated'],
      more: true,
    },
  ];

  const [active, setActive] = useS(0);

  return (
    <section id="sectors" className="h-section" data-theme="light" style={{padding:'140px 64px', background:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 48}}>
          <div>
            <Reveal>
              <div className="sect-label">
                <span style={{color:'var(--accent-warm)', fontWeight:700}}>02</span><span>Sectors we serve</span>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <h2 style={{fontFamily:'Inter, system-ui', fontSize: 56, lineHeight: 1.02, margin:'20px 0 0', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 920}}>
                Where public trust, regulatory scrutiny, and day-to-day continuity are non-negotiable.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={160}>
            <div className="f-mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.14em'}}>NORTH AMERICA · EUROPE · ASIA PACIFIC</div>
          </Reveal>
        </div>

        <Reveal delay={140}>
          <div className="h-sectors-accordion" style={{
            display:'flex', gap: 0, height: 460,
            border:'1px solid var(--line)',
            background:'var(--paper)',
            position:'relative', overflow:'hidden',
          }}>
            {sectors.map((s, i) => {
              const isActive = active === i;
              const isMore = s.more;
              return (
                <div
                  key={s.code}
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  onKeyDown={(e) => {
                    if (e.key === 'Enter' || e.key === ' ') {
                      e.preventDefault();
                      setActive(i);
                    }
                  }}
                  tabIndex={0}
                  role="button"
                  aria-expanded={isActive}
                  aria-label={`${isMore ? 'And more sectors' : s.name + ' sector'}${isActive ? ' (expanded)' : ''}`}
                  style={{
                    flex: isActive ? 5 : 1,
                    transition: 'flex .7s cubic-bezier(.2,.7,.2,1), background .35s ease',
                    background: isActive
                      ? (isMore ? 'rgba(217,119,87,0.06)' : 'var(--paper-2, #f3f1ec)')
                      : 'var(--paper)',
                    borderLeft: i ? '1px solid var(--line)' : 'none',
                    cursor:'pointer', position:'relative',
                    display:'grid',
                    gridTemplateRows:'auto 1fr auto',
                    padding:'24px 22px 22px',
                    overflow:'hidden',
                    outline:'none',
                  }}
                >
                  {/* Accent bar that runs along the top */}
                  <div style={{
                    position:'absolute', top: 0, left: 0,
                    height: 2,
                    width: isActive ? '100%' : '32px',
                    background: 'var(--accent-warm)',
                    transition:'width .7s cubic-bezier(.2,.7,.2,1)',
                  }}/>

                  {/* Header row: index + code */}
                  <div style={{display:'flex', alignItems:'baseline', justifyContent:'space-between'}}>
                    <span className="f-mono" style={{fontSize: 11, color:'var(--accent-warm)', letterSpacing:'0.2em', fontWeight: 600}}>
                      {isMore ? '06' : `0${i+1}`}
                    </span>
                    <span className="f-mono" style={{
                      fontSize: 11, color:'var(--ink-3)',
                      letterSpacing:'0.2em',
                      opacity: isActive ? 1 : 0,
                      transition:'opacity .4s ease .15s',
                    }}>
                      SECTOR
                    </span>
                  </div>

                  {/* Body — collapsed: quiet vertical mark. expanded: full name + description + deploys */}
                  <div style={{position:'relative', overflow:'hidden'}}>
                    {/* Collapsed visual — a thin vertical hairline with an accent dot.
                        Replaces the previous large typographic monogram so the tile
                        reads as quiet white space rather than competing text. */}
                    <div className="h-sectors-accordion__collapsed-vis" style={{
                      position:'absolute', inset: 0,
                      display:'flex', alignItems:'center', justifyContent:'center',
                      opacity: isActive ? 0 : 1,
                      transition: isActive ? 'opacity .25s ease' : 'opacity .4s ease .25s',
                      pointerEvents:'none',
                    }}>
                      <div style={{
                        display:'flex', flexDirection:'column', alignItems:'center', gap: 10,
                      }}>
                        <span style={{width: 1, height: 42, background:'var(--ink-3)', opacity: 0.32}}/>
                        <span style={{
                          width: 7, height: 7, borderRadius:'50%',
                          background: isMore ? 'var(--accent-warm)' : 'var(--ink)',
                          opacity: isMore ? 1 : 0.55,
                        }}/>
                        <span style={{width: 1, height: 42, background:'var(--ink-3)', opacity: 0.32}}/>
                      </div>
                    </div>

                    {/* Expanded content. */}
                    <div className="h-sectors-accordion__panel" style={{
                      opacity: isActive ? 1 : 0,
                      transform: isActive ? 'translateY(0)' : 'translateY(8px)',
                      transition: isActive
                        ? 'opacity .5s ease .2s, transform .5s ease .2s'
                        : 'opacity .15s ease',
                      pointerEvents: isActive ? 'auto' : 'none',
                      paddingTop: 26,
                    }}>
                      <div className="h-sectors-accordion__title" style={{
                        fontFamily:'"DM Serif Display", serif',
                        fontSize: 48, lineHeight: 1.02,
                        letterSpacing:'-0.02em',
                        color: 'var(--ink)',
                        margin: 0,
                        fontStyle:'normal',
                      }}>
                        {s.name}
                      </div>
                      <p style={{
                        fontSize: 14.5, lineHeight: 1.6,
                        color:'var(--ink-2)', margin:'18px 0 0',
                        maxWidth: 440,
                      }}>{s.detail}</p>

                      <div style={{marginTop: 26}}>
                        <div className="f-mono" style={{fontSize: 10, color:'var(--ink-3)', letterSpacing:'0.18em', textTransform:'uppercase', marginBottom: 10}}>
                          Where AI shows up
                        </div>
                        <div style={{display:'flex', flexWrap:'wrap', gap: 6}}>
                          {s.deploys.map(k => (
                            <span key={k} style={{
                              fontFamily:'Inter, system-ui',
                              fontSize: 12, lineHeight: 1,
                              padding:'7px 11px',
                              background:'rgba(14,30,55,0.05)',
                              color:'var(--ink-2)',
                              borderRadius: 2,
                              fontWeight: 500,
                              letterSpacing:'-0.005em',
                            }}>{k}</span>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Footer row — full sector name when collapsed; CTA when expanded */}
                  <div className="h-sectors-accordion__footer" style={{
                    minHeight: 44,
                    position:'relative',
                  }}>
                    <span className="h-sectors-accordion__footer-name" style={{
                      display:'block',
                      opacity: isActive ? 0 : 1,
                      transition: isActive ? 'opacity .25s ease' : 'opacity .4s ease .25s',
                      fontFamily:'"DM Serif Display", serif',
                      fontSize: 22, lineHeight: 1.12,
                      letterSpacing:'-0.018em',
                      color:'var(--ink)',
                      fontStyle: isMore ? 'italic' : 'normal',
                      position:'absolute', left: 0, right: 0, bottom: 0,
                    }}>
                      {s.name}
                    </span>
                    <span className="h-sectors-accordion__footer-cta" style={{
                      display:'block',
                      opacity: isActive ? 1 : 0,
                      transition:'opacity .4s ease .3s',
                      color:'var(--accent-warm)', fontWeight: 600,
                      fontFamily:'JetBrains Mono, monospace',
                      fontSize: 11, letterSpacing:'0.16em', textTransform:'uppercase',
                      position:'absolute', left: 0, right: 0, bottom: 0,
                    }}>
                      {isMore ? 'Talk to us about your sector →' : 'Explore engagements →'}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        </Reveal>

        {/* Indicator pills under the accordion */}
        <div style={{display:'flex', gap: 10, justifyContent:'center', marginTop: 22}}>
          {sectors.map((s, i) => (
            <button
              key={s.code}
              onClick={() => setActive(i)}
              aria-label={`Show ${s.name}`}
              style={{
                width: active === i ? 28 : 8, height: 4,
                background: active === i ? 'var(--accent-warm)' : 'var(--line)',
                border: 'none', padding: 0, borderRadius: 2, cursor:'pointer',
                transition:'width .4s ease, background .3s ease',
              }}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Methodology — scroll-driven pipeline ─────────────────────────
const STAGES_DATA = [
  {n:'01', name:'Pilot AI Solutions',    sub:'Translate mission goals into technical requirements that anticipate novel risks and reflect your values.',
   items:[
     'AI use-case risk assessments',
     'Tailored AI opportunity maps',
     'Procurement frameworks — RFI templates, scorecards, AI tender evaluation criteria',
     'Executive briefings on AI risk & regulatory compliance',
     'Industry-specific AI harms identification & taxonomy development',
   ]},
  {n:'02', name:'Prepare AI Governance', sub:'Build internal structures that ensure compliance, legitimacy, and accountability.',
   items:[
     'Bespoke AI safety frameworks & governance principles',
     'AI Ethics Board creation & facilitation — charter, member selection, on-demand reviews',
     'Employee AI-use policies & policy roadmaps',
     'AI system review toolkits',
     'AI pilot design & deployment support',
   ]},
  {n:'03', name:'Practice AI Safety',    sub:'Operate, monitor, and refine — turn governance from policy into daily practice that satisfies regulators and protects public trust.',
   items:[
     'Live monitoring & oversight playbooks',
     'On-demand AI Ethics Board reviews',
     'Performance & harm telemetry',
     'Continuous staff capability building',
     'Ongoing evaluation & off-ramp protocols',
   ]},
];

function ScrollPipeline({ progress }) {
  // progress is 0..1 over the methodology section
  const W = 1280, H = 240;
  const trackY = H/2;
  const padX = 80;
  const trackStart = padX;
  const trackEnd = W - padX;
  const trackLen = trackEnd - trackStart;
  const gateX = [trackStart + trackLen*0.22, trackStart + trackLen*0.50, trackStart + trackLen*0.78];

  // Lead token's position: 0..1 along the track.
  const lead = clamp(progress, 0, 1);
  // 4 trailing tokens at staggered offsets
  const tokens = [0, 0.18, 0.36, 0.54, 0.72].map(off => clamp(lead - off, 0, 1));

  // Which gates have been "passed" (filled)
  const gatesPassed = gateX.map(gx => {
    const gxNorm = (gx - trackStart) / trackLen;
    return lead > gxNorm;
  });

  // Active gate (currently being passed)
  const activeGate = (() => {
    for (let i = gateX.length - 1; i >= 0; i--) {
      const gxNorm = (gateX[i] - trackStart) / trackLen;
      if (Math.abs(lead - gxNorm) < 0.08) return i;
    }
    return -1;
  })();

  // Trail line — fill from track start to lead token
  const fillX = trackStart + lead * trackLen;

  return (
    <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{display:'block', overflow:'visible'}}>
      <defs>
        <linearGradient id="trackBase" x1="0" x2="1">
          <stop offset="0" stopColor="rgba(255,255,255,0.08)"/>
          <stop offset="1" stopColor="rgba(255,255,255,0.18)"/>
        </linearGradient>
        <linearGradient id="trackFill" x1="0" x2="1">
          <stop offset="0" stopColor="rgba(96,165,250,0.55)"/>
          <stop offset="1" stopColor="rgba(147,197,253,0.95)"/>
        </linearGradient>
        <radialGradient id="tokenAura" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="rgba(147,197,253,0.9)"/>
          <stop offset="1" stopColor="rgba(147,197,253,0)"/>
        </radialGradient>
      </defs>

      {/* Track base */}
      <line x1={trackStart} y1={trackY} x2={trackEnd} y2={trackY} stroke="url(#trackBase)" strokeWidth="2"/>
      {/* Track fill (clipped to progress) */}
      <line x1={trackStart} y1={trackY} x2={fillX} y2={trackY} stroke="url(#trackFill)" strokeWidth="3"/>
      {/* Aura layer beneath fill */}
      <line x1={trackStart} y1={trackY} x2={fillX} y2={trackY} stroke="rgba(96,165,250,0.18)" strokeWidth="22" strokeLinecap="round"/>

      {/* End markers */}
      <g>
        <text x={trackStart} y={trackY - 22} textAnchor="middle" fill="rgba(255,255,255,0.5)" style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.2em'}}>LAUNCH</text>
        <circle cx={trackStart} cy={trackY} r="6" fill="rgba(255,255,255,0.5)"/>
      </g>
      <g>
        <text x={trackEnd} y={trackY - 22} textAnchor="middle" fill="var(--accent-green)" style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.2em'}}>IN PRACTICE</text>
        <circle cx={trackEnd} cy={trackY} r="8" fill="rgba(59,130,246,0.16)" stroke="var(--accent-green)" strokeWidth="1.2"/>
        <circle cx={trackEnd} cy={trackY} r="3.5" fill="var(--accent-green)" opacity={lead > 0.95 ? 1 : 0.4}/>
      </g>

      {/* Gates */}
      {gateX.map((x, i) => {
        const passed = gatesPassed[i];
        const active = activeGate === i;
        return (
          <g key={i}>
            <circle cx={x} cy={trackY} r={active ? 38 : 32}
              fill="var(--ink)"
              stroke={passed ? 'var(--accent-green)' : 'rgba(255,255,255,0.5)'}
              strokeWidth={passed ? 1.6 : 1.2}
              style={{transition:'r .35s ease, stroke .35s ease'}}/>
            {active && (
              <circle cx={x} cy={trackY} r="46" fill="none" stroke="var(--accent-green)" strokeWidth="0.8" opacity="0.4">
                <animate attributeName="r" values="38;52;38" dur="2.4s" repeatCount="indefinite"/>
                <animate attributeName="opacity" values="0.5;0;0.5" dur="2.4s" repeatCount="indefinite"/>
              </circle>
            )}
            <text x={x} y={trackY + 4} textAnchor="middle" fill="var(--paper)"
              style={{fontFamily:'JetBrains Mono', fontSize: 11, fontWeight: 600, letterSpacing:'0.12em'}}>0{i+1}</text>
            <text x={x} y={trackY - 54} textAnchor="middle" fill="rgba(255,255,255,0.55)"
              style={{fontFamily:'JetBrains Mono', fontSize: 9.5, letterSpacing:'0.22em'}}>STAGE</text>
            <text x={x} y={trackY - 36} textAnchor="middle" fill="var(--paper)"
              style={{fontFamily:'Inter, system-ui', fontSize: 17, fontWeight: 700, letterSpacing:'-0.01em'}}>
              {['Pilot','Prepare','Practice'][i]}
            </text>
          </g>
        );
      })}

      {/* Tokens — only show those that have entered the track */}
      {tokens.map((t, i) => {
        if (t <= 0) return null;
        const x = trackStart + t * trackLen;
        const opacity = i === 0 ? 1 : 0.65 - i * 0.08;
        const size = i === 0 ? 7 : 5;
        return (
          <g key={i} opacity={opacity}>
            <ellipse cx={x - 14} cy={trackY} rx={16} ry={3} fill="url(#tokenAura)" opacity={0.45}/>
            <circle cx={x} cy={trackY} r={size + 4} fill="rgba(147,197,253,0.18)"/>
            <circle cx={x} cy={trackY} r={size} fill="#dbeafe"/>
          </g>
        );
      })}
    </svg>
  );
}

function HomeMethodology() {
  const sectionRef = useR(null);
  const progress = useScrollProgress(sectionRef, { pin: true });

  // section is 240vh tall; inner is sticky pinned at center of viewport
  return (
    <section id="methodology" className="h-home-methodology" data-theme="dark" ref={sectionRef} style={{
      background:'var(--ink)', color:'var(--paper)',
      position:'relative', minHeight: '240vh',
    }}>
      <div className="h-home-methodology__pin" style={{position:'sticky', top: 0, height:'100vh', display:'flex', flexDirection:'column', justifyContent:'center', padding:'40px 64px'}}>
        <div style={{maxWidth: 1280, margin:'0 auto', width:'100%'}}>
          <div className="h-home-methodology__header" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', marginBottom: 28}}>
            <div>
              <div className="sect-label" style={{color:'rgba(255,255,255,0.7)'}}>
                <span style={{color:'var(--accent-warm)', fontWeight:700}}>03</span><span>Your trusted AI procurement journey</span>
              </div>
              <h2 style={{fontFamily:'Inter, system-ui', fontSize: 56, lineHeight: 0.98, margin:'16px 0 12px', letterSpacing:'-0.04em', fontWeight: 800, maxWidth: 880}}>
                From pilot to practice.
              </h2>
              <p style={{fontSize: 16, lineHeight: 1.55, color:'rgba(255,255,255,0.7)', maxWidth: 720, margin: 0}}>
                Trusting AI is a journey. It starts with smart procurement and continues through responsible deployment, monitoring, and ongoing evaluation. We walk every engagement from pilot to practice — technically sound, ethically grounded, publicly trusted.
              </p>
            </div>
            <a href="methodology.html" style={{textDecoration:'none', color:'var(--accent-warm)', fontFamily:'JetBrains Mono', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase'}}>Read the full methodology →</a>
          </div>

          {/* Progress meter */}
          <div className="h-home-methodology__progress" style={{marginTop: 16, marginBottom: 12, display:'flex', alignItems:'center', gap: 14, color:'rgba(255,255,255,0.55)'}}>
            <span className="f-mono" style={{fontSize: 10, letterSpacing:'0.22em'}}>SCROLL PROGRESS</span>
            <div style={{flex: 1, height: 1, background:'rgba(255,255,255,0.18)', position:'relative'}}>
              <div style={{position:'absolute', left: 0, top: 0, bottom: 0, width: `${progress*100}%`, background:'var(--accent-warm)', transition:'width 60ms linear'}}/>
            </div>
            <span className="f-mono" style={{fontSize: 10, letterSpacing:'0.14em', minWidth: 36, textAlign:'right'}}>{Math.round(progress * 100)}%</span>
          </div>

          {/* Pipeline */}
          <div className="h-home-methodology__pipeline" style={{margin:'8px 0 16px'}}>
            <ScrollPipeline progress={progress}/>
          </div>

          {/* Three columns — content morphs based on active stage */}
          <div className="h-home-stages" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 20, marginTop: 16}}>
            {STAGES_DATA.map((p, i) => {
              // Which stage is active given progress?
              const stageProg = clamp((progress - i*0.33) / 0.33, 0, 1);
              const isActive = progress > i*0.33 && progress < (i+1)*0.33 + 0.05;
              const isPassed = progress > (i+1)*0.33;
              const opacity = isActive ? 1 : isPassed ? 0.7 : 0.5;
              return (
                <div key={p.n} style={{
                  padding:'20px 22px 22px',
                  background: isActive ? 'rgba(29,78,216,0.10)' : 'rgba(255,255,255,0.03)',
                  border: `1px solid ${isActive ? 'rgba(96,165,250,0.5)' : 'rgba(255,255,255,0.12)'}`,
                  borderRadius: 6,
                  opacity,
                  transition:'all .35s ease',
                  transform: isActive ? 'translateY(-2px)' : 'translateY(0)',
                }}>
                  <div style={{display:'flex', alignItems:'baseline', gap: 12}}>
                    <span className="f-mono" style={{fontSize: 11, color:'var(--accent-warm)', letterSpacing:'0.16em'}}>STAGE {p.n}</span>
                    {isActive && <span className="f-mono" style={{fontSize: 9, color:'var(--accent-green)', letterSpacing:'0.16em'}}>· ACTIVE</span>}
                  </div>
                  <h3 style={{fontFamily:'Inter, system-ui', fontSize: 24, lineHeight: 1.12, margin:'8px 0 10px', fontWeight: 700, letterSpacing:'-0.022em'}}>{p.name}</h3>
                  <p style={{fontSize: 13, lineHeight: 1.45, color:'rgba(255,255,255,0.7)', margin: 0}}>{p.sub}</p>
                  <div style={{marginTop: 14, display:'flex', flexDirection:'column', gap: 6}}>
                    {p.items.map((it, j) => (
                      <div key={it} style={{display:'flex', alignItems:'baseline', gap:10}}>
                        <span style={{width: 4, height: 4, background:'var(--accent-warm)', borderRadius:'50%', display:'inline-block', marginTop: 6, flex:'0 0 4px'}}/>
                        <span style={{fontSize:12.5, lineHeight: 1.4, color:'rgba(255,255,255,0.88)'}}>{it}</span>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Clients (light) ─────────────────────────────────────────────
// Stakeholder cards — no numbering, flex layout with relaxed vertical rhythm
// so headlines, chips, and descriptions breathe instead of stacking tight.
function HomeClients() {
  const stakeholders = [
    {
      k:'Users',
      ask:'Is this fair to me?',
      d:'People interacting with AI in their daily lives — constituents, patients, students, and customers.',
      cares:['Trust', 'Safety', 'Fairness', 'Access'],
    },
    {
      k:'Employees',
      ask:'Can I rely on this at work?',
      d:'Staff who must use, oversee, and trust the AI systems embedded in their work each day.',
      cares:['Adoption', 'Clarity', 'Capability', 'Safety'],
    },
    {
      k:'Boards',
      ask:'Can we defend this decision?',
      d:'Leaders accountable for organizational risk, governance, and fiduciary responsibility.',
      cares:['Risk', 'Fiduciary', 'Reputation', 'Oversight'],
    },
    {
      k:'Regulators',
      ask:'Does this meet our threshold?',
      d:'Public-sector authorities ensuring AI deployments meet legal and ethical thresholds.',
      cares:['Compliance', 'Audit', 'Transparency', 'Public trust'],
    },
  ];
  return (
    <section id="clients" className="h-section" data-theme="light" style={{padding:'140px 64px', background:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <Reveal>
          <div className="sect-label"><span style={{color:'var(--accent-warm)', fontWeight:700}}>04</span><span>Our clients</span></div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 56, lineHeight:1.02, margin:'20px 0 14px', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 1100}}>
            AI initiatives that are defensible to users, employees, boards, and regulators.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{fontSize: 17, lineHeight: 1.55, color:'var(--ink-2)', margin:'0 0 56px', maxWidth: 880}}>
            Our clients rely on AI in environments where public trust, regulatory scrutiny, and day-to-day continuity are non-negotiable. We help them align innovation with governance, ethics, procurement, and regulatory expectations.
          </p>
        </Reveal>

        {/* 4-up row. Cards size their height to the content, but all four
            stay perfectly aligned because each row of content (label, name,
            ask, divider, chips, description) is given the same vertical slot
            via min-heights, not strict grid tracks. */}
        <div className="h-grid-4" style={{
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0,
          border:'1px solid var(--line)', borderRadius: 8, overflow:'hidden',
        }}>
          {stakeholders.map((c,i) => (
            <Reveal key={c.k} delay={i * 90} style={{
              borderRight: i !== stakeholders.length - 1 ? '1px solid var(--line)' : 'none',
            }}>
              <article className="h-clients-card" style={{
                position:'relative',
                padding:'30px 28px 30px',
                background:'var(--paper)',
                display:'flex',
                flexDirection:'column',
                gap: 20,
              }} aria-label={`${c.k} stakeholder card`}>
                {/* Top hairline accent */}
                <div style={{position:'absolute', top: 0, left: 0, right: 0, height: 2, background:'var(--accent-warm)', opacity: 0.85}}/>

                {/* STAKEHOLDER label */}
                <div className="f-mono" style={{
                  fontSize: 10.5, color:'var(--ink-3)',
                  letterSpacing:'0.22em', textTransform:'uppercase',
                  marginTop: 6,
                }}>
                  Stakeholder
                </div>

                {/* Name + italic ask grouped tightly so they feel like a
                    headline + dek, then space below before the divider */}
                <div>
                  <h3 style={{
                    margin: 0,
                    fontFamily:'Inter, system-ui',
                    fontSize: 40, lineHeight: 1.05,
                    letterSpacing:'-0.03em', fontWeight: 800,
                    color:'var(--ink)',
                    minHeight: 88, // 2 lines reserved — "Regulators" is 1, others vary
                    display:'flex', alignItems:'flex-start',
                  }}>{c.k}</h3>
                  <p style={{
                    margin: '12px 0 0',
                    fontFamily:'"DM Serif Display", serif',
                    fontSize: 18, lineHeight: 1.3,
                    color:'var(--accent-warm)',
                    fontStyle:'italic',
                    minHeight: 48, // reserves room for 2 lines if "ask" wraps
                  }}>
                    "{c.ask}"
                  </p>
                </div>

                {/* Divider */}
                <div style={{height: 1, background:'var(--line)'}}/>

                {/* Chips block — fixed min-height keeps all four cards aligned */}
                <div style={{minHeight: 102, display:'flex', flexDirection:'column', gap: 10}}>
                  <div className="f-mono" style={{
                    fontSize: 10, color:'var(--ink-3)',
                    letterSpacing:'0.2em', textTransform:'uppercase',
                  }}>
                    What they expect
                  </div>
                  <div style={{
                    display:'grid',
                    gridTemplateColumns:'1fr 1fr',
                    gap: 6,
                  }}>
                    {c.cares.map(k => (
                      <span key={k} style={{
                        fontFamily:'Inter, system-ui',
                        fontSize: 11.5, lineHeight: 1,
                        padding:'7px 10px',
                        background:'rgba(14,30,55,0.045)',
                        color:'var(--ink-2)',
                        borderRadius: 2,
                        fontWeight: 500,
                        letterSpacing:'-0.005em',
                        display:'inline-flex',
                        alignItems:'center',
                        whiteSpace:'nowrap',
                        overflow:'hidden',
                        textOverflow:'ellipsis',
                      }}>{k}</span>
                    ))}
                  </div>
                </div>

                {/* Divider */}
                <div style={{height: 1, background:'var(--line)'}}/>

                {/* Description — 4-line clamp keeps card bottoms aligned */}
                <p style={{
                  fontSize: 13, lineHeight: 1.6,
                  color:'var(--ink-3)', margin: 0,
                  display:'-webkit-box',
                  WebkitLineClamp: 4,
                  WebkitBoxOrient:'vertical',
                  overflow:'hidden',
                  minHeight: 80,
                }}>
                  {c.d}
                </p>
              </article>
            </Reveal>
          ))}
        </div>

        <Reveal delay={420}>
          <p style={{fontSize: 15, lineHeight: 1.6, color:'var(--ink-2)', maxWidth: 880, margin:'40px 0 0'}}>
            We provide support from early pilots through enterprise-scale deployments, working alongside legal, technology, and procurement teams to embed AI safeguards into sourcing, contracting, and deployment oversight. Our work spans North America, Europe, and the Asia Pacific.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

// ── Why pilots stall · the research (dark) ──────────────────────
function HomeResearch() {
  // Each card now uses a uniform shape:
  //   {percent}  {short punchy headline}  {single explanatory line}
  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="insights" className="h-section" data-theme="dark" style={{padding:'140px 64px 0', background:'var(--ink)', color:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <Reveal>
          <div className="sect-label" style={{color:'rgba(255,255,255,0.7)'}}>
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>05</span><span>Pilot to practice — the problem we saw</span>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 56, lineHeight: 1.02, margin:'18px 0 16px', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 1060}}>
            AI pilots fail for organizational reasons more often than technical ones.
          </h2>
        </Reveal>
        <Reveal delay={140}>
          <p style={{fontSize:16, lineHeight: 1.6, color:'rgba(255,255,255,0.72)', margin: 0, maxWidth: 860}}>
            Too many organizations buy AI tools only to watch their pilots stall. The problem is usually not the model. It is the lack of governance, procurement, integration, and ownership structures needed to move from experimentation to scaled deployment.
          </p>
        </Reveal>

        {/* Stats row */}
        <div className="h-grid-4" style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 0, marginTop: 56, borderTop:'1px solid rgba(255,255,255,0.18)', borderBottom:'1px solid rgba(255,255,255,0.18)'}}>
          {stats.map((s,i) => (
            <Reveal key={s.n} delay={i * 100}>
              <div className="h-stat-card" style={{
                padding:'32px 24px 28px',
                borderLeft: i ? '1px solid rgba(255,255,255,0.18)' : 'none',
                height: 320,
                display:'grid', gridTemplateRows:'auto auto 1fr auto', rowGap: 12,
              }}>
                <div className="h-stat-num" style={{fontFamily:'Inter, system-ui', fontSize: 82, lineHeight: 0.92, color:'var(--accent-warm)', letterSpacing:'-0.045em', fontWeight: 800}}>{s.n}</div>
                <div style={{fontFamily:'Inter, system-ui', fontSize: 18, lineHeight: 1.2, color:'var(--paper)', fontWeight: 700, letterSpacing:'-0.018em'}}>{s.h}</div>
                <div style={{fontSize: 13, lineHeight: 1.5, color:'rgba(255,255,255,0.7)'}}>{s.l}</div>
                <div className="f-mono" style={{fontSize:10, color:'rgba(255,255,255,0.5)', letterSpacing:'0.14em', textTransform:'uppercase'}}>SOURCE · {s.src}</div>
              </div>
            </Reveal>
          ))}
        </div>
        {/* Failure-modes list has moved into the dedicated <CascadeMode/> section that renders below. */}
      </div>
    </section>
  );
}

// ── CTA + footer ────────────────────────────────────────────────
function HomeCTA() {
  return (
    <section id="contact" className="h-section" data-theme="light" style={{padding:'140px 64px', background:'var(--paper)', textAlign:'center', position:'relative', overflow:'hidden'}}>
      <svg width="100%" height="400" viewBox="0 0 1280 400" preserveAspectRatio="xMidYMid meet" style={{position:'absolute', inset:'90px 0 0', zIndex:0, opacity:0.4}}>
        {[60, 130, 220, 330, 460].map((r,i)=>(
          <circle key={r} cx="640" cy="200" 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'}}>
        <Reveal>
          <h2 style={{fontFamily:'"DM Serif Display", serif', fontSize: 88, lineHeight: 0.98, margin:'0 auto 24px', letterSpacing:'-0.025em', fontWeight: 400}}>
            Ready to move from pilot to practice?
          </h2>
        </Reveal>
        <Reveal delay={100}>
          <p style={{maxWidth: 720, margin:'18px auto 40px', color:'var(--ink-2)', fontSize: 18, lineHeight: 1.55}}>
            We help organizations design the governance, procurement, and deployment structures that turn promising AI pilots into scalable, trustworthy systems.
          </p>
        </Reveal>
        <Reveal delay={180}>
          <div style={{display:'inline-flex', gap:14}}>
            <a className="btn btn-filled" href="mailto:info@stratallianceglobal.com" style={{textDecoration:'none'}}>Start a conversation →</a>
            <a className="btn" href="methodology.html" style={{textDecoration:'none'}}>Read the methodology</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ── Active-section tracker for side progress ─────────────────────
function useActiveSection(ids) {
  const [active, setActive] = useS(0);
  useE(() => {
    const handler = () => {
      // pick the section whose midpoint is closest to viewport midpoint
      const vhMid = window.innerHeight / 2;
      let best = 0;
      let bestDist = Infinity;
      ids.forEach((id, i) => {
        const el = document.getElementById(id);
        if (!el) return;
        const r = el.getBoundingClientRect();
        const mid = (r.top + r.bottom) / 2;
        const d = Math.abs(mid - vhMid);
        if (d < bestDist) { bestDist = d; best = i; }
      });
      setActive(best);
    };
    let raf = 0;
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(() => { handler(); raf = 0; }); };
    window.addEventListener('scroll', onScroll, { passive: true });
    handler();
    return () => window.removeEventListener('scroll', onScroll);
  }, [ids]);
  return active;
}

// ── App ─────────────────────────────────────────────────────────
function App() {
  const scrollY = useScrollY();
  const sections = [
    { id: 'top',         label: 'Top' },
    { id: 'what',        label: 'What' },
    { id: 'sectors',     label: 'Sectors' },
    { id: 'methodology', label: 'How' },
    { id: 'clients',     label: 'Clients' },
    { id: 'insights',    label: 'Insights' },
    { id: 'contact',     label: 'Contact' },
  ];
  const active = useActiveSection(sections.map(s => s.id));

  return (
    <>
      <SiteNav/>
      <SideProgress active={active} sections={sections}/>
      <main id="main-content">
        <HomeHero scrollY={scrollY}/>
        <HomeWhat/>
        <HomeSectors/>
        <HomeMethodology/>
        <HomeClients/>
        <HomeResearch/>
        <CascadeMode
          outcomeLabel="Pilots stall"
          outcomeBlurb="Each gap is fixable on its own. Together they compound — turning promising pilots into stalled investments before they reach production."
          ctaLabel="Read the methodology →"
          ctaHref="methodology.html"
          dangerAccent="#C8323C"
        />
        <HomeCTA/>
        <SiteFooter/>
      </main>
    </>
  );
}

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