// services.jsx — /services page.
// Structure (driven by the copy doc's "Our Services" + "Foundation" sections):
//   Header                  — page title + intro
//   01 Foundation           — "The Foundation of Every AI Journey"
//   02 Essential 5          — Responsible AI Training: 5-session course
//   03 Engagement stages    — Pilot / Prepare / Practice with full deliverables
//   04 CTA                  — Ready to move from pilot to practice

const { useState: useS_s, useEffect: useE_s, useRef: useR_s } = React;

// ── Hooks (inlined; this file is standalone) ──────────────────────
function useScrollYs() {
  const [y, setY] = useS_s(0);
  useE_s(() => {
    let raf = 0;
    const h = () => { if (raf) return; raf = requestAnimationFrame(() => { setY(window.scrollY); raf = 0; }); };
    window.addEventListener('scroll', h, { passive: true });
    return () => { window.removeEventListener('scroll', h); cancelAnimationFrame(raf); };
  }, []);
  return y;
}

function useInViewS(ref, { threshold = 0.15 } = {}) {
  const [v, setV] = useS_s(false);
  useE_s(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver(([e]) => { if (e.isIntersecting) { setV(true); io.disconnect(); } }, { threshold });
    io.observe(el); return () => io.disconnect();
  }, [ref, threshold]);
  return v;
}

function RevealS({ children, delay = 0, y = 28, style = {} }) {
  const ref = useR_s(null);
  const seen = useInViewS(ref);
  return (
    <div ref={ref} 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}</div>
  );
}

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

// ── Header ────────────────────────────────────────────────────────
// Two-column hero matches methodology page: left column carries the
// eyebrow + 2-line DM Serif headline + intro; right column carries a
// simple animation that conveys what the page is about (here: services
// rising from a foundation slab into three stage pillars).
function SHeader() {
  const [heroTheme, setHeroTheme] = useHeroTheme();
  const themeCfg = HERO_THEME_CONFIG[heroTheme];
  const ht = heroTextColors(heroTheme);

  return (
    <header className="h-hero" style={{
      padding:'160px 64px 80px',
      background:'var(--paper)',
      position:'relative',
      overflow:'hidden',
    }}>
      <HeroVideoBg
        videoSrc="assets/services.mp4"
        tintColor={themeCfg.tintColor}
        tintOpacity={themeCfg.tintOpacity}
        tintBlur={themeCfg.tintBlur}
      />
      <div className="h-hero__toggle"><HeroThemeToggle theme={heroTheme} setTheme={setHeroTheme}/></div>
      <div style={{maxWidth: 1280, margin:'0 auto', position:'relative', zIndex: 2}}>
        <div className="h-hero__grid" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 60, alignItems:'center'}}>
          <div>
            <RevealS>
              <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)'}}/>
                Services
              </div>
            </RevealS>
            <RevealS delay={80}>
              <h1 className="h-hero__title" style={{
                fontFamily:'"DM Serif Display", serif', fontSize: 144, lineHeight: 0.96,
                letterSpacing:'-0.025em', margin: 0, fontWeight: 400, color: ht.ink,
                fontStyle:'normal',
              }}>
                Foundation for <span style={{color:'var(--accent-warm)'}}>Practice</span>
              </h1>
            </RevealS>
            <RevealS delay={160}>
              <p className="h-hero__intro" style={{fontSize: 21, lineHeight: 1.55, color: ht.ink2, margin:'32px 0 0', maxWidth: 660, fontWeight: 500, letterSpacing:'-0.005em'}}>
                Governance frameworks, procurement playbooks, and risk assessments are only as strong as the teams implementing them. Every engagement begins by building that foundation — then continues through the full Pilot → Prepare → Practice journey.
              </p>
            </RevealS>
          </div>

          <div className="h-hero__anim-wrap" style={{display:'contents'}}>
            <ServicesHeaderAnim theme={heroTheme}/>
          </div>
        </div>

        <RevealS delay={240}>
          <div className="h-hero__toc" style={{marginTop: 80, borderTop:`1px solid ${ht.line}`, paddingTop: 24, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0}}>
            {[
              ['#foundation','Foundation'],
              ['#essential', 'Responsible AI Training · The Essential 5'],
              ['#stages',    'Engagement Stages · Pilot → Prepare → Practice'],
            ].map(([h, t], i) => (
              <a key={h} href={h} style={{textDecoration:'none', color: ht.ink2, borderLeft: i ? `1px solid ${ht.line}` : 'none', paddingLeft: i ? 22 : 0, paddingRight: 16}}>
                <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: ht.ink, letterSpacing:'-0.01em'}}>{t}</span>
              </a>
            ))}
          </div>
        </RevealS>
      </div>
    </header>
  );
}

// ── Services header animation ─────────────────────────────────────
// Three pillars (Pilot · Prepare · Practice) rise from a single
// foundation slab. Each pillar contains five short bars — the five
// services we deliver at that stage. Bars fade in stage-by-stage,
// then the whole composition holds and the loop resets.
function ServicesHeaderAnim({ theme = 'light' }) {
  const dark = theme === 'dark';
  const inkColor  = dark ? '#FFFFFF' : 'var(--ink)';
  const ink3Color = dark ? 'rgba(255,255,255,0.78)' : 'var(--ink-3)';
  const gridStroke = dark ? 'rgba(255,255,255,0.18)' : 'rgba(14,84,170,0.06)';
  const slabOpacity = dark ? 1 : 0.85;
  return (
    <div className="h-hero__anim-wrap" style={{position:'relative', display:'flex', justifyContent:'center', alignItems:'center', height: 420}}>
      <style>{`
        @keyframes svc-slab {
          0%   { transform: scaleX(0); opacity: 0; }
          15%  { transform: scaleX(1); opacity: 1; }
          100% { transform: scaleX(1); opacity: 1; }
        }
        @keyframes svc-bar {
          0%   { opacity: 0; transform: translateY(8px); }
          100% { opacity: 1; transform: translateY(0); }
        }
        @keyframes svc-pillar-tick {
          0%, 100% { opacity: 0.4; }
          50%      { opacity: 1; }
        }
        @keyframes svc-cap {
          0%, 100% { stroke-dashoffset: 0; }
          50%      { stroke-dashoffset: -8; }
        }
      `}</style>
      <svg viewBox="0 0 510 420" width="100%" height="420" aria-hidden="true" preserveAspectRatio="xMidYMid meet" style={{maxWidth: 540, overflow:'visible'}}>
        <defs>
          <pattern id="svc-grid" width="22" height="22" patternUnits="userSpaceOnUse">
            <path d="M 22 0 L 0 0 0 22" fill="none" stroke={gridStroke} strokeWidth="0.5"/>
          </pattern>
        </defs>

        {/* Soft grid backdrop behind the foundation */}
        <rect x="40" y="80" width="430" height="240" fill="url(#svc-grid)" opacity="0.7"/>

        {/* Top caption */}
        <text x="255" y="34" textAnchor="middle"
          style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.28em', fill: ink3Color}}>
          THE FOUNDATION FIRST
        </text>

        {/* Top connecting rule across all three pillars */}
        <line x1="80" y1="78" x2="430" y2="78"
          stroke="var(--accent-warm)" strokeWidth={dark ? 1.3 : 1} opacity={dark ? 0.65 : 0.35}
          strokeDasharray="3 4"
          style={{animation:'svc-cap 4s linear infinite'}}/>

        {/* Three pillars. Each column gets ~140px room so labels
            never collide. Bars stack from top down. */}
        {[
          {x:110, code:'01', name:'PILOT'},
          {x:255, code:'02', name:'PREPARE'},
          {x:400, code:'03', name:'PRACTICE'},
        ].map((p, i) => (
          <g key={p.name}>
            {/* Stage label group at the top */}
            <text x={p.x} y={62} textAnchor="middle"
              style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.22em', fill: ink3Color}}>
              STAGE {p.code}
            </text>
            <text x={p.x} y={96} textAnchor="middle"
              style={{fontFamily:'Inter, system-ui', fontSize: 16, letterSpacing:'-0.018em', fill: inkColor, fontWeight: 700}}>
              {p.name}
            </text>

            {/* Five service bars — stagger entrance per pillar so the
                composition feels like it's being built. */}
            {[0,1,2,3,4].map((j) => {
              const y = 122 + j * 30;
              const delay = i * 0.5 + j * 0.18;
              return (
                <g key={j}>
                  <line
                    x1={p.x - 48} y1={y} x2={p.x + 48} y2={y}
                    stroke="var(--accent-warm)" strokeWidth={dark ? 2.6 : 2}
                    strokeLinecap="round"
                    style={{
                      animation:`svc-bar 1s cubic-bezier(.2,.7,.2,1) ${delay}s both`,
                      transformOrigin: `${p.x}px ${y}px`,
                    }}
                  />
                  {/* Tiny tick mark to the right */}
                  <circle cx={p.x + 56} cy={y} r="2" fill="var(--accent-warm)"
                    style={{
                      animation:`svc-bar 1s cubic-bezier(.2,.7,.2,1) ${delay + 0.12}s both`,
                    }}/>
                </g>
              );
            })}

            {/* Service count badge */}
            <text x={p.x} y={282} textAnchor="middle"
              style={{
                fontFamily:'JetBrains Mono', fontSize: 9,
                letterSpacing:'0.2em', fill: ink3Color,
                animation:'svc-pillar-tick 3s ease-in-out infinite',
                animationDelay: `${i * 0.4}s`,
              }}>
              5 SERVICES
            </text>
          </g>
        ))}

        {/* Foundation slab — draws in left-to-right on load, then sits
            as the visual anchor */}
        <rect x="50" y="320" width="410" height="3"
          fill={inkColor} opacity={slabOpacity}
          style={{
            animation:'svc-slab 1.4s cubic-bezier(.2,.7,.2,1) 0s both',
            transformOrigin: '50px 320px',
          }}/>
        <line x1="50" y1="328" x2="460" y2="328"
          stroke={inkColor} strokeWidth="0.5" opacity={dark ? 0.4 : 0.25}
          style={{
            animation:'svc-slab 1.4s cubic-bezier(.2,.7,.2,1) 0.1s both',
            transformOrigin: '50px 328px',
          }}/>

        {/* Foundation label */}
        <text x="50" y="360"
          style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.22em', fill: inkColor, fontWeight: 600}}>
          FOUNDATION
        </text>
        <text x="50" y="378"
          style={{fontFamily:'JetBrains Mono', fontSize: 9, letterSpacing:'0.18em', fill: ink3Color}}>
          RESPONSIBLE AI TRAINING · THE ESSENTIAL 5
        </text>
        <text x="460" y="360" textAnchor="end"
          style={{fontFamily:'JetBrains Mono', fontSize: 10, letterSpacing:'0.22em', fill:'var(--accent-warm)', fontWeight: 600}}>
          00
        </text>
      </svg>
    </div>
  );
}

// ── 01 · Foundation (dark) ────────────────────────────────────────
function SFoundation() {
  return (
    <section id="foundation" data-theme="dark" style={{padding:'140px 64px', background:'var(--ink)', color:'var(--paper)'}}>
      <div style={{maxWidth: 1100, margin:'0 auto'}}>
        <RevealS>
          <div className="sect-label" style={{color:'rgba(255,255,255,0.7)'}}>
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>01</span><span>Foundation</span>
          </div>
        </RevealS>
        <RevealS delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 52, lineHeight: 1.04, margin:'24px 0 32px', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 1020}}>
            Before any organization can govern, procure, or deploy AI with public confidence — its people need a shared foundation of knowledge.
          </h2>
        </RevealS>
        <RevealS delay={140}>
          <p style={{fontSize: 18, lineHeight: 1.65, color:'rgba(255,255,255,0.86)', margin: 0, maxWidth: 880}}>
            Governance frameworks, procurement playbooks, and risk assessments are only as strong as the teams implementing them. Without that foundation, even the best tools and strategies fall short.
          </p>
        </RevealS>
        <RevealS delay={200}>
          <p style={{fontSize: 18, lineHeight: 1.65, color:'rgba(255,255,255,0.72)', margin:'18px 0 0', maxWidth: 880}}>
            That is why every StratAlliance Global client engagement begins here.
          </p>
        </RevealS>
      </div>
    </section>
  );
}

// ── 02 · Essential 5 (light) ──────────────────────────────────────
function SEssential() {
  const outcomes = [
    { k:'Apply Responsible AI Principles', d:'Understand and implement key responsible AI concepts across everyday decisions and workflows.' },
    { k:'Mitigate Risks',                  d:'Identify potential AI risks early and apply standard mitigation approaches before they become organizational liabilities.' },
    { k:'Govern AI Effectively',           d:'Oversee and ensure the responsible management of AI systems across the full deployment lifecycle.' },
    { k:'Manage Ambiguity',                d:'Navigate uncertainty and complexity with confidence when working in high-stakes, fast-moving AI environments.' },
    { k:'Lead with Accountability',        d:'Make AI decisions you can defend to users, employees, boards, and regulators alike.' },
  ];

  return (
    <section id="essential" data-theme="light" style={{padding:'140px 64px', background:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <div className="h-svc-essential" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 80, alignItems:'flex-start'}}>
          <div className="h-svc-essential__intro" style={{position:'sticky', top: 110}}>
            <RevealS>
              <div className="sect-label">
                <span style={{color:'var(--accent-warm)', fontWeight:700}}>02</span><span>Responsible AI Training</span>
              </div>
            </RevealS>
            <RevealS delay={80}>
              <h2 style={{fontFamily:'Inter, system-ui', fontSize: 56, lineHeight: 1.0, margin:'24px 0 24px', letterSpacing:'-0.04em', fontWeight: 800}}>
                The Essential 5
              </h2>
            </RevealS>
            <RevealS delay={140}>
              <div className="f-mono" style={{fontSize:11, color:'var(--ink-3)', letterSpacing:'0.18em', textTransform:'uppercase', marginBottom: 14}}>5-session course · in-person or remote</div>
            </RevealS>
            <RevealS delay={180}>
              <p style={{fontSize: 17, lineHeight: 1.6, color:'var(--ink-2)', margin:'0 0 24px', maxWidth: 480}}>
                This is not a compliance checkbox or a one-size-fits-all overview. It is a practical, hands-on training program designed to give your team the knowledge, judgment, and confidence to lead AI initiatives responsibly from day one.
              </p>
            </RevealS>
            <RevealS delay={240}>
              <p style={{fontSize: 15, lineHeight: 1.6, color:'var(--ink-3)', margin:'0 0 32px', maxWidth: 480}}>
                Whether you are a procurement officer evaluating AI vendors, a policy lead navigating regulatory obligation, or an executive overseeing AI deployment, this course meets you where you are and equips you for what comes next.
              </p>
            </RevealS>
            <RevealS delay={300}>
              <a className="btn btn-filled" href="mailto:info@stratallianceglobal.com?subject=Essential%205%20training" style={{textDecoration:'none'}}>Enroll your team →</a>
            </RevealS>
          </div>

          <div>
            <RevealS>
              <div className="f-mono" style={{fontSize:10.5, color:'var(--accent-warm)', letterSpacing:'0.18em', textTransform:'uppercase', marginBottom: 16}}>By the end your team will be equipped to:</div>
            </RevealS>
            <div style={{display:'flex', flexDirection:'column', gap: 0}}>
              {outcomes.map((o, i) => (
                <RevealS key={o.k} delay={i * 90}>
                  <div style={{
                    display:'grid', gridTemplateColumns:'64px 1fr', gap: 18,
                    padding:'28px 0',
                    borderTop:'1px solid var(--line)',
                    borderBottom: i === outcomes.length - 1 ? '1px solid var(--line)' : 'none',
                  }}>
                    <div className="f-mono" style={{fontSize:13, color:'var(--accent-warm)', letterSpacing:'0.18em', fontWeight: 600, paddingTop: 6}}>0{i+1}</div>
                    <div>
                      <h3 style={{fontFamily:'Inter, system-ui', fontSize: 24, lineHeight: 1.18, margin: 0, fontWeight: 700, letterSpacing:'-0.022em'}}>{o.k}</h3>
                      <p style={{fontSize: 15, lineHeight: 1.6, color:'var(--ink-2)', margin:'10px 0 0', maxWidth: 540}}>{o.d}</p>
                    </div>
                  </div>
                </RevealS>
              ))}
            </div>

            <RevealS delay={420} style={{marginTop: 28}}>
              <div style={{padding:'22px 24px', background:'var(--paper-2)', borderRadius: 8, borderLeft: '3px solid var(--accent-warm)'}}>
                <p style={{margin: 0, fontSize: 16, lineHeight: 1.55, color:'var(--ink)', fontWeight: 500, letterSpacing:'-0.005em'}}>
                  These skills are the hallmark of where your AI procurement journey begins — the foundation upon which every governance framework, procurement strategy, and deployment decision we build together will rest.
                </p>
              </div>
            </RevealS>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── 03 · Engagement stages (dark) ─────────────────────────────────
function SStages() {
  const stages = [
    {
      n:'01', code:'PILOT', 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', code:'PREPARE', 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', code:'PRACTICE', 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',
      ],
    },
  ];

  return (
    <section id="stages" data-theme="dark" style={{padding:'140px 64px', background:'var(--ink)', color:'var(--paper)'}}>
      <div style={{maxWidth: 1280, margin:'0 auto'}}>
        <RevealS>
          <div className="sect-label" style={{color:'rgba(255,255,255,0.7)'}}>
            <span style={{color:'var(--accent-warm)', fontWeight:700}}>03</span><span>Engagement stages · Pilot → Prepare → Practice</span>
          </div>
        </RevealS>
        <RevealS delay={80}>
          <h2 style={{fontFamily:'Inter, system-ui', fontSize: 52, lineHeight: 1.04, margin:'24px 0 12px', letterSpacing:'-0.035em', fontWeight: 800, maxWidth: 980}}>
            Three stages. One system.
          </h2>
        </RevealS>
        <RevealS delay={140}>
          <p style={{fontSize: 17, lineHeight: 1.6, color:'rgba(255,255,255,0.72)', margin:'0 0 56px', maxWidth: 720}}>
            After the Foundation, every engagement moves through the same three stages — connecting procurement decisions to AI governance from day one, then carrying both forward into operations.
          </p>
        </RevealS>

        <div style={{display:'grid', gridTemplateColumns:'1fr', gap: 0}}>
          {stages.map((s, i) => (
            <RevealS key={s.n} delay={i * 100}>
              <div className="h-svc-stages-row" style={{
                display:'grid', gridTemplateColumns:'100px 1fr 1.4fr', gap: 40,
                padding:'48px 0',
                borderTop:'1px solid rgba(255,255,255,0.16)',
                borderBottom: i === stages.length - 1 ? '1px solid rgba(255,255,255,0.16)' : 'none',
                alignItems:'flex-start',
              }}>
                <div>
                  <span className="h-svc-stages-num" style={{fontFamily:'Inter, system-ui', fontSize: 72, lineHeight: 0.9, color:'var(--accent-warm)', letterSpacing:'-0.04em', fontWeight: 800}}>{s.n}</span>
                </div>
                <div>
                  <div className="f-mono" style={{fontSize:11, color:'var(--accent-warm)', letterSpacing:'0.18em'}}>{s.code}</div>
                  <h3 style={{fontFamily:'Inter, system-ui', fontSize: 36, lineHeight: 1.08, margin:'12px 0 16px', fontWeight: 700, letterSpacing:'-0.03em'}}>{s.name}</h3>
                  <p style={{fontSize: 16, lineHeight: 1.55, color:'rgba(255,255,255,0.72)', margin: 0}}>{s.sub}</p>
                </div>
                <div>
                  <div className="f-mono" style={{fontSize:10.5, color:'rgba(255,255,255,0.5)', letterSpacing:'0.18em', textTransform:'uppercase', marginBottom: 14}}>What we deliver</div>
                  <ul style={{listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10}}>
                    {s.items.map((it) => (
                      <li key={it} style={{display:'flex', gap: 12, alignItems:'baseline'}}>
                        <span style={{width: 5, height: 5, background:'var(--accent-warm)', borderRadius:'50%', display:'inline-block', flex:'0 0 5px', marginTop: 8}}/>
                        <span style={{fontSize: 15, lineHeight: 1.5, color:'rgba(255,255,255,0.9)'}}>{it}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </RevealS>
          ))}
        </div>

        <RevealS delay={400}>
          <div style={{marginTop: 56, display:'flex', justifyContent:'space-between', alignItems:'center', flexWrap:'wrap', gap: 18}}>
            <span className="f-mono" style={{fontSize:11, color:'rgba(255,255,255,0.55)', letterSpacing:'0.18em'}}>WANT THE FULL METHODOLOGY?</span>
            <a className="btn" href="methodology.html" style={{textDecoration:'none', borderColor:'var(--accent-warm)', color:'var(--accent-warm)'}}>Read Pilot to Practice →</a>
          </div>
        </RevealS>
      </div>
    </section>
  );
}

// ── CTA + footer (light) ──────────────────────────────────────────
function SCTA() {
  return (
    <section id="contact" 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.35}}>
        {[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'}}>
        <RevealS>
          <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)'}}/>
            Where every engagement begins
          </div>
        </RevealS>
        <RevealS delay={60}>
          <h2 style={{fontFamily:'"DM Serif Display", serif', fontSize: 88, lineHeight: 0.98, margin:'0 auto 24px', letterSpacing:'-0.025em', fontWeight: 400}}>
            Build the foundation your team will rely on.
          </h2>
        </RevealS>
        <RevealS delay={100}>
          <p style={{maxWidth: 760, margin:'18px auto 40px', color:'var(--ink-2)', fontSize: 18, lineHeight: 1.55}}>
            Start with the Essential 5 — a five-session, hands-on Responsible AI training that gives your team the knowledge, judgment, and confidence to lead AI initiatives from day one.
          </p>
        </RevealS>
        <RevealS delay={180}>
          <div style={{display:'inline-flex', gap:14, flexWrap:'wrap', justifyContent:'center'}}>
            <a className="btn btn-filled" href="mailto:info@stratallianceglobal.com?subject=Essential%205%20enrollment" style={{textDecoration:'none'}}>Enroll your team →</a>
            <a className="btn" href="methodology.html" style={{textDecoration:'none'}}>Read the methodology</a>
          </div>
        </RevealS>
      </div>
    </section>
  );
}

// ── App ───────────────────────────────────────────────────────────
function ServicesApp() {
  const scrollY = useScrollYs();
  return (
    <>
      <SiteNav/>
      <main id="main-content">
        <SHeader/>
        <SFoundation/>
        <SEssential/>
        <SStages/>
        <SCTA/>
        <SiteFooter/>
      </main>
    </>
  );
}

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