// Nav, Hero, MarketPressure, SystemOverview, Timeline, Proof, License, CTA, Footer.

/* ============ NAV ============ */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const tabs = [
    { id: 'pressure',     label: 'Pressure' },
    { id: 'system',       label: 'The System' },
    { id: 'ladder',       label: 'Performance Ladder' },
    { id: 'capabilities', label: 'Capabilities' },
    { id: 'matrix',       label: 'Practice' },
    { id: 'dashboard',    label: 'Dashboard' },
    { id: 'proof',        label: 'Proof' },
    { id: 'license',      label: 'License' },
  ];

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.scrollY - 80;
    window.scrollTo({ top, behavior: 'smooth' });
  }

  return (
    <div className="nav-shell" style={scrolled ? { top: 14 } : null}>
      <div className="nav-bar">
        <div className="nav-logo">
          <img src="assets/ambiz-new-logo.png" alt="AMBIZ"/>
          <span className="nav-pill">BESPOKE WEALTH</span>
        </div>
        <div className="nav-links">
          {tabs.map(t => (
            <a key={t.id} className="nav-link" onClick={() => scrollTo(t.id)}>{t.label}</a>
          ))}
        </div>
        <a className="nav-cta" onClick={() => scrollTo('cta')}>
          Start a Conversation
          <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M6.4 18L5 16.6L14.6 7H6V5h12v12h-2V8.4z"/></svg>
        </a>
      </div>
    </div>
  );
}

/* ============ HERO ============ */
function Hero({ variant }) {
  // Three variants per the user's "explore options" hero choice — toggle via tweak.
  if (variant === 'command') return <HeroCommand/>;
  if (variant === 'cinematic') return <HeroCinematic/>;
  return <HeroEditorial/>;
}

function HeroEditorial() {
  return (
    <section className="section hero" style={{paddingBottom:60}}>
      <div className="hero-bg"></div>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="hero-pill">
              <span className="dot"></span>
              LICENSE-READY ADVISORY READINESS OS
            </div>
            <h1 className="headline-xl">
              Standardize wealth advisory excellence across
              <span className="text-grad"> every client conversation.</span>
            </h1>
            <p className="lede hero-sub">
              Bespoke Wealth Advisory is a license-ready advisory readiness operating system — powered by the AMBIZ Performance Ladder. End-to-end, ready to license today.
            </p>
            <div className="hero-ctas">
              <a className="btn-primary" onClick={() => document.getElementById('cta').scrollIntoView({behavior:'smooth'})}>
                Start a Conversation
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6.4 18L5 16.6L14.6 7H6V5h12v12h-2V8.4z"/></svg>
              </a>
              <a className="btn-ghost" onClick={() => document.getElementById('ladder').scrollIntoView({behavior:'smooth'})}>
                See the Performance Ladder
              </a>
            </div>
            <div className="hero-meta">
              <div>
                <div className="hero-meta-num">95<span style={{fontSize:'0.55em', opacity:0.6}}>%</span></div>
                <div className="hero-meta-lbl">Participant satisfaction</div>
              </div>
              <div>
                <div className="hero-meta-num">+8.3</div>
                <div className="hero-meta-lbl">Avg. score uplift</div>
              </div>
              <div>
                <div className="hero-meta-num">6</div>
                <div className="hero-meta-lbl">Ladder rungs · 8 capabilities</div>
              </div>
            </div>
          </div>

          {/* Right visual — floating capability tiles + miniature ladder preview */}
          <HeroVisual/>
        </div>
      </div>
    </section>
  );
}

function HeroVisual() {
  // Apple-style bento preview of the page's biggest moves.
  return (
    <div style={{position:'relative', height: 560}}>
      {/* Mini ladder card */}
      <div style={{
        position:'absolute', top: 30, left: 0,
        width: 240, padding: '20px',
        background: '#050a14', color: '#fff',
        borderRadius: 20,
        boxShadow: '0 30px 60px rgba(5,10,20,0.30)',
        animation: 'heroFloat1 7.2s ease-in-out infinite',
        willChange: 'transform',
      }}>
        <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.18em', color:'var(--y-500)', textTransform:'uppercase', marginBottom:14}}>
          Performance Ladder
        </div>
        {window.LADDER.slice().reverse().map((r, i, arr) => (
          <div key={r.id} style={{
            display:'flex', alignItems:'center', gap:10,
            padding: '6px 0',
            opacity: 1 - i*0.12,
          }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6,
              background: i === 0 ? 'linear-gradient(135deg, #0D903A, #1A549F)' : 'rgba(255,255,255,0.06)',
              fontSize: 9, fontWeight: 700, display:'grid', placeItems:'center',
              color: i === 0 ? '#fff' : 'rgba(255,255,255,0.55)',
            }}>{arr.length - i}</div>
            <div style={{fontSize:12, fontWeight:600}}>{r.title}</div>
          </div>
        ))}
      </div>

      {/* Mini stat tile */}
      <div style={{
        position:'absolute', top: 0, right: 20,
        width: 200, padding: '24px 22px',
        background: 'linear-gradient(135deg, #057430 0%, #164A97 100%)',
        color:'#fff',
        borderRadius: 20,
        boxShadow: '0 30px 60px rgba(13,144,58,0.30)',
        animation: 'heroFloat2 5.6s ease-in-out infinite',
        willChange: 'transform',
      }}>
        <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.18em', textTransform:'uppercase', opacity:0.7}}>Cohort Readiness</div>
        <div style={{fontSize:48, fontWeight:700, lineHeight:1, marginTop:6, letterSpacing:'-0.03em', animation:'heroStatPulse 3.2s ease-in-out infinite'}}>78<span style={{fontSize:'0.4em', opacity:0.7}}>%</span></div>
        <div style={{fontSize:11, opacity:0.8, marginTop:8}}>▲ +6.2 this week</div>
        <div style={{
          height: 6, background: 'rgba(255,255,255,0.18)', borderRadius: 999, marginTop: 14, overflow:'hidden',
        }}>
          <div style={{height:'100%', width:'78%', background:'#fff', borderRadius:999}}></div>
        </div>
      </div>

      {/* Mini wheel mini */}
      <div style={{
        position:'absolute', top: 230, right: 0,
        width: 240, padding: 16,
        background: '#fff',
        borderRadius: 20,
        boxShadow: '0 30px 60px rgba(15,23,42,0.12)',
        border: '1px solid rgba(15,23,42,0.04)',
        animation: 'heroFloat3 8.8s ease-in-out infinite',
        willChange: 'transform',
      }}>
        <div style={{fontSize:10, fontWeight:700, letterSpacing:'0.18em', color:'var(--ambiz-text-dim)', textTransform:'uppercase', marginBottom:12}}>
          Capability Map
        </div>
        <MiniWheel/>
      </div>

      {/* Mini quote */}
      <div style={{
        position:'absolute', bottom: 0, left: 60,
        width: 260, padding: '18px 20px',
        background: '#fff',
        borderRadius: 16,
        boxShadow: '0 20px 50px rgba(15,23,42,0.10)',
        border: '1px solid rgba(15,23,42,0.04)',
        animation: 'heroFloat4 6.4s ease-in-out infinite',
        willChange: 'transform',
      }}>
        <div style={{fontFamily:'var(--font-serif)', fontStyle:'italic', fontSize:14, lineHeight:1.45, color:'var(--ambiz-text)'}}>
          “Roleplay made me realise where my talk-track was weak — slides could not have caught it.”
        </div>
        <div style={{fontSize:11, fontWeight:600, color:'var(--ambiz-accent-1)', marginTop:10, letterSpacing:'0.04em'}}>
          Cohort Participant
        </div>
      </div>
    </div>
  );
}

function MiniWheel() {
  const cx = 100, cy = 100, rOut = 80, rIn = 30;
  const N = 8;
  function wedge(i) {
    const start = i * (360/N);
    const end = (i+1) * (360/N) - 1.5;
    const a1 = (start - 90) * Math.PI / 180;
    const a2 = (end   - 90) * Math.PI / 180;
    const x1o = cx + rOut * Math.cos(a1);
    const y1o = cy + rOut * Math.sin(a1);
    const x2o = cx + rOut * Math.cos(a2);
    const y2o = cy + rOut * Math.sin(a2);
    const x1i = cx + rIn * Math.cos(a2);
    const y1i = cy + rIn * Math.sin(a2);
    const x2i = cx + rIn * Math.cos(a1);
    const y2i = cy + rIn * Math.sin(a1);
    return `M ${x1o} ${y1o} A ${rOut} ${rOut} 0 0 1 ${x2o} ${y2o} L ${x1i} ${y1i} A ${rIn} ${rIn} 0 0 0 ${x2i} ${y2i} Z`;
  }
  return (
    <svg viewBox="0 0 200 200" style={{display:'block', width:'100%'}}>
      {window.CAPABILITIES.map((c, i) => (
        <path key={c.id} d={wedge(i)} fill={c.color} opacity={0.18 + (i/N)*0.5}/>
      ))}
      <circle cx={cx} cy={cy} r={rIn - 4} fill="#fafbfc" stroke="rgba(0,0,0,0.06)"/>
      <text x={cx} y={cy+4} textAnchor="middle" fontSize="10" fontWeight="700" fill="#0f172a">Standard</text>
    </svg>
  );
}

function HeroCommand() {
  // Living command-center hero — headline + live mini-dashboard preview
  return (
    <section className="section hero" style={{paddingBottom:60, background:'linear-gradient(180deg, #fafbfc, #fff)'}}>
      <div className="wrap">
        <div className="hero-grid">
          <div>
            <div className="hero-pill"><span className="dot"></span>ADVISORY READINESS · LIVE</div>
            <h1 className="headline-xl">
              An <span className="text-grad">advisory command center</span> for every client conversation.
            </h1>
            <p className="lede hero-sub">
              Bespoke Wealth Advisory turns capability into a measurable, manageable system — built on the AMBIZ Performance Ladder.
            </p>
            <div className="hero-ctas">
              <a className="btn-primary" onClick={() => document.getElementById('cta').scrollIntoView({behavior:'smooth'})}>Start a Conversation</a>
              <a className="btn-ghost" onClick={() => document.getElementById('dashboard').scrollIntoView({behavior:'smooth'})}>See the Dashboard →</a>
            </div>
          </div>
          <CommandPreview/>
        </div>
      </div>
    </section>
  );
}

function CommandPreview() {
  // Mini dashboard tile with ticking values
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setTick(v => v+1), 1600);
    return () => clearInterval(t);
  }, []);
  const ready = 76 + (tick % 4);
  return (
    <div style={{
      background:'#0c1424', color:'#fff',
      borderRadius:24, padding:24,
      border: '1px solid rgba(255,255,255,0.06)',
      boxShadow:'0 40px 80px rgba(15,23,42,0.25)',
    }}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'center', marginBottom:18}}>
        <div>
          <div style={{fontSize:10, letterSpacing:'0.16em', textTransform:'uppercase', opacity:0.55, fontWeight:700}}>Cohort 2026-A</div>
          <div style={{fontSize:14, fontWeight:600, marginTop:2}}>Wealth Advisory · Week 6</div>
        </div>
        <span style={{fontSize:10, padding:'4px 10px', borderRadius:999, background:'rgba(13,144,58,0.20)', color:'#0FE872', fontWeight:700}}>● LIVE</span>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:12}}>
        <div style={{padding:14, background:'rgba(255,255,255,0.04)', borderRadius:12, border:'1px solid rgba(255,255,255,0.06)'}}>
          <div style={{fontSize:10, opacity:0.6, fontWeight:700}}>READINESS</div>
          <div style={{fontSize:36, fontWeight:700, marginTop:4, letterSpacing:'-0.02em'}}>{ready}<span style={{fontSize:'0.5em', opacity:0.6}}>%</span></div>
          <div style={{fontSize:11, color:'#0FE872', marginTop:4}}>▲ +6.2 wk</div>
        </div>
        <div style={{padding:14, background:'rgba(255,255,255,0.04)', borderRadius:12, border:'1px solid rgba(255,255,255,0.06)'}}>
          <div style={{fontSize:10, opacity:0.6, fontWeight:700}}>AVG RUNG</div>
          <div style={{fontSize:36, fontWeight:700, marginTop:4, letterSpacing:'-0.02em'}}>4.6<span style={{fontSize:'0.5em', opacity:0.6}}>/6</span></div>
          <div style={{fontSize:11, color:'#0FE872', marginTop:4}}>▲ +0.8 wk</div>
        </div>
      </div>
      <div style={{marginTop:14, padding:14, background:'rgba(255,255,255,0.04)', borderRadius:12, border:'1px solid rgba(255,255,255,0.06)'}}>
        <div style={{fontSize:10, opacity:0.6, fontWeight:700, marginBottom:8}}>LADDER PROGRESS</div>
        {[
          ['Pre-Read',100],['Case',96],['Sim',88],['Mimic',74],['Shadow',62],['Supervise',48],['Indep',31]
        ].map(([l,p]) => (
          <div key={l} style={{display:'grid', gridTemplateColumns:'70px 1fr 30px', gap:8, alignItems:'center', padding:'4px 0'}}>
            <div style={{fontSize:11, opacity:0.85}}>{l}</div>
            <div style={{height:5, background:'rgba(255,255,255,0.08)', borderRadius:999, overflow:'hidden'}}>
              <div style={{height:'100%', width:p+'%', background:'linear-gradient(90deg, #0D903A, #246BB2)', borderRadius:999}}></div>
            </div>
            <div style={{fontSize:10, fontWeight:700, textAlign:'right'}}>{p}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function HeroCinematic() {
  return (
    <section className="section hero" style={{paddingBottom:60}}>
      <div style={{
        position:'absolute', inset:0,
        background:'radial-gradient(ellipse at 80% 30%, rgba(13,144,58,0.10), transparent 50%), radial-gradient(ellipse at 20% 70%, rgba(26,84,159,0.08), transparent 50%)',
        pointerEvents:'none',
      }}></div>
      <div className="wrap" style={{position:'relative'}}>
        <div className="hero-pill" style={{margin:'0 auto 40px', display:'flex'}}>
          <span className="dot"></span>
          LICENSE-READY ADVISORY READINESS OS
        </div>
        <h1 className="headline-xl" style={{textAlign:'center', maxWidth:1080, margin:'0 auto'}}>
          Standardize wealth advisory excellence across
          <span className="text-grad"> every client conversation.</span>
        </h1>
        <p className="lede" style={{textAlign:'center', margin:'32px auto 0', maxWidth:680}}>
          A license-ready operating system that turns advisory capability from training event into a measurable, manageable system.
        </p>
        <div className="hero-ctas" style={{justifyContent:'center', marginTop:40}}>
          <a className="btn-primary" onClick={() => document.getElementById('cta').scrollIntoView({behavior:'smooth'})}>Start a Conversation</a>
          <a className="btn-ghost" onClick={() => document.getElementById('ladder').scrollIntoView({behavior:'smooth'})}>See the Performance Ladder</a>
        </div>

        <div style={{
          display:'grid',
          gridTemplateColumns:'repeat(4, 1fr)',
          gap:16,
          marginTop:80,
        }}>
          {[
            ['Performance Ladder','6 rungs · staged practice','#0D903A'],
            ['Capability Map','8 advisory domains','#1A549F'],
            ['Practice Matrix','Drills × cases · rubrics','#246BB2'],
            ['Dashboard & Reports','Track readiness live','#057430'],
          ].map(([t,s,c]) => (
            <div key={t} style={{
              padding:'22px 20px',
              background:'#fff',
              border:'1px solid rgba(15,23,42,0.06)',
              borderRadius:18,
              boxShadow:'0 10px 30px rgba(15,23,42,0.04)',
            }}>
              <div style={{width:32, height:4, background:c, borderRadius:999, marginBottom:14}}></div>
              <div style={{fontSize:15, fontWeight:700, letterSpacing:'-0.01em'}}>{t}</div>
              <div style={{fontSize:12, color:'var(--ambiz-text-dim)', marginTop:4}}>{s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ MARKET PRESSURE ============ */
function MarketPressure() {
  return (
    <section className="section pressure-section" id="pressure" style={{paddingTop:80}}>
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow-strong">02 · MARKET PRESSURE</p>
          <h2 className="headline-lg">
            The opportunity is growing.<br/>
            <span style={{color:'var(--ambiz-text-dim)'}}>So is the speed of competition.</span>
          </h2>
          <p className="lede" style={{marginTop:20}}>
            Indonesia's financial market is expanding fast and global wealth is rising. If financial institutions cannot upgrade frontline capability quickly, growth will not slow — it will shift to faster players.
          </p>
        </div>

        <div className="bento">
          {/* AUM big card — gradient with animated orbs */}
          <div className="bento-card bento-card--grad" style={{gridColumn:'span 7', gridRow:'span 2'}}>
            <div className="bento-aum-orb bento-aum-orb--a"></div>
            <div className="bento-aum-orb bento-aum-orb--b"></div>
            <div className="bento-aum-orb bento-aum-orb--c"></div>
            <div style={{position:'relative', zIndex:2, display:'flex', flexDirection:'column', height:'100%'}}>
              <div className="bento-label" style={{color:'rgba(255,255,255,0.7)'}}>
                <span className="bento-live-dot"></span>
                Indonesia Wealth Opportunity Pool
              </div>
              <div className="bento-stat" style={{lineHeight:0.9, marginTop:'auto'}}>
                <span style={{fontSize:'0.42em', fontWeight:600, opacity:0.7, letterSpacing:'0.04em', display:'block', marginBottom:8}}>Rp</span>
                841<span className="unit" style={{fontSize:'0.45em'}}>T</span>
              </div>
              <div className="bento-body" style={{color:'rgba(255,255,255,0.85)', marginTop:18, maxWidth:520}}>
                Investment AUM has reached IDR 841.37T. The pool is growing fast, clients are raising the bar. Advisors who explain clearly and recommend appropriately will win.
              </div>
              <div className="bento-aum-spark">
                {[14,22,18,28,24,38,32,46,42,58,52,68,62,76,72,86].map((h,i) => (
                  <div key={i} className="bento-spark-bar" style={{height: h+'%'}}></div>
                ))}
                <div className="bento-spark-meta">
                  <span style={{color:'#0FE872', fontWeight:700}}>▲ +14.6%</span>
                  <span style={{opacity:0.55}}>YoY · 2024 → 2026</span>
                </div>
              </div>
            </div>
          </div>

          {/* IMAGE — real client conversation */}
          <div className="bento-card bento-card--photo" style={{gridColumn:'span 5', gridRow:'span 2', padding:0}}>
            <image-slot
              id="pressure-photo"
              shape="rounded"
              radius="22"
              fit="cover"
              src="/programs/bespoke-wealth-advisory/assets/wealth_advisor_conversation.png"
              placeholder="Drop client / advisor photo"
              style={{position:'absolute', inset:0, width:'100%', height:'100%'}}
            ></image-slot>
            <div className="bento-photo-tint"></div>
            <div className="bento-photo-grain"></div>
            <div className="bento-photo-content">
              <div className="bento-photo-chip">
                <span className="bento-live-dot bento-live-dot--green"></span>
                INDONESIA · 2026
              </div>
              <div className="bento-photo-headline">
                Every conversation<br/>is a moment of trust.
              </div>
              <div className="bento-photo-sub">
                Half a million frontline advisors. Every call moves a client closer to — or further from — better outcomes.
              </div>
            </div>
            {/* corner ornaments */}
            <svg className="bento-photo-corner" viewBox="0 0 40 40">
              <path d="M0,0 L40,0 L40,4 L4,4 L4,40 L0,40 Z" fill="rgba(255,186,0,0.85)"/>
            </svg>
          </div>

          {/* New investors — green vibrant */}
          <div className="bento-card bento-card--vibrant bento-card--green" style={{gridColumn:'span 3'}}>
            <div className="bento-vib-mesh"></div>
            <div className="bento-label" style={{color:'#057430'}}>New investors</div>
            <div className="bento-stat" style={{fontSize:'clamp(34px, 3.6vw, 50px)', color:'#057430'}}>
              31,099
              <span className="bento-stat-trend">▲</span>
            </div>
            <div className="bento-body" style={{fontSize:12, marginTop:8}}>A wave of new investors entering the system — many still learning.</div>
          </div>

          {/* Literacy gap — blue */}
          <div className="bento-card bento-card--vibrant bento-card--blue" style={{gridColumn:'span 3'}}>
            <div className="bento-vib-mesh"></div>
            <div className="bento-label" style={{color:'#1A549F'}}>Financial literacy gap</div>
            <div className="bento-stat" style={{fontSize:'clamp(34px, 3.6vw, 50px)', color:'#1A549F'}}>9.6<span className="unit">%</span></div>
            <div className="bento-body" style={{fontSize:12, marginTop:8}}>Millions use products without fully understanding them. Advisory quality becomes critical.</div>
          </div>

          {/* Frontline workforce — yellow */}
          <div className="bento-card bento-card--vibrant bento-card--yellow" style={{gridColumn:'span 3'}}>
            <div className="bento-vib-mesh"></div>
            <div className="bento-label" style={{color:'#8C6100'}}>Frontline workforce</div>
            <div className="bento-stat" style={{fontSize:'clamp(34px, 3.6vw, 50px)', color:'#1f1303'}}>507,965</div>
            <div className="bento-body" style={{fontSize:12, marginTop:8}}>Half a million frontline professionals shaping customer decisions daily.</div>
          </div>

          {/* Complaints — dark with warning accent */}
          <div className="bento-card bento-card--dark" style={{gridColumn:'span 3'}}>
            <div className="bento-vib-mesh bento-vib-mesh--dark"></div>
            <div className="bento-label" style={{color:'rgba(255,186,0,0.9)'}}>Formal consumer complaints</div>
            <div className="bento-stat" style={{fontSize:'clamp(34px, 3.6vw, 50px)', color:'var(--y-400)'}}>22.2<span className="unit">%</span></div>
            <div className="bento-body" style={{fontSize:12, marginTop:8, opacity:0.85}}>Operational conduct risk is not theoretical. Each case carries cost, attention, and reputational exposure.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ SYSTEM OVERVIEW ============ */
function SystemOverview() {
  const pillars = [
    {
      key: 'ladder',
      num: '01',
      label: 'AMBIZ PERFORMANCE LADDER',
      title: 'Staged practice, rung by rung.',
      body: 'A learning progression — Case · Simulation · Mimicking · Shadow · Supervise · Independent — that adds realism and pressure rung by rung, until advisors are ready to handle real clients on their own.',
      tint: 'linear-gradient(155deg, rgba(13,144,58,0.70) 0%, rgba(7,76,42,0.85) 100%)',
      accent: '#0FE872',
      slot: 'os-pillar-ladder',
      image: '/programs/bespoke-wealth-advisory/assets/bwa_pillar_ladder.png',
      ladder: ['Case','Sim','Mimic','Shadow','Supervise','Independent'],
    },
    {
      key: 'standard',
      num: '02',
      label: 'STANDARD OF EXCELLENCE',
      title: 'A shared definition of "good".',
      body: 'A shared competency framework with anchors that define what good looks like in observable behaviours — supported by rubrics that score consistently across teams and regions.',
      tint: 'linear-gradient(155deg, rgba(35,107,178,0.70) 0%, rgba(22,74,151,0.85) 100%)',
      accent: '#7CC5FF',
      slot: 'os-pillar-standard',
      image: '/programs/bespoke-wealth-advisory/assets/bwa_pillar_standard.png',
    },
    {
      key: 'scale',
      num: '03',
      label: 'SCALE & CONTROL',
      title: 'Run it at scale, with control.',
      body: 'The operational layer that makes the system easy to run at scale: tools, dashboards, reporting, content banks, and governance routines (calibration, sampling, reviews).',
      tint: 'linear-gradient(155deg, rgba(15,18,34,0.60) 0%, rgba(20,25,45,0.85) 100%)',
      accent: '#FFBA00',
      slot: 'os-pillar-scale',
      image: '/programs/bespoke-wealth-advisory/assets/bwa_pillar_scale.png',
    },
  ];

  return (
    <section className="os-section" id="system">
      <div className="wrap" style={{position:'relative', zIndex:3}}>
        <div className="section-head">
          <p className="eyebrow-strong">03 · THE OPERATING SYSTEM</p>
          <h2 className="headline-lg" style={{color:'#fff'}}>
            Three structural pillars.<br/>
            <span style={{color:'rgba(255,255,255,0.55)'}}>One ready-to-license system.</span>
          </h2>
          <p className="lede" style={{marginTop:20, color:'rgba(255,255,255,0.72)'}}>
            Capability is not only developed, it is <em>defined, measured, and sustained at scale</em> — so advisory impact stays consistent across teams and regions.
          </p>
        </div>
      </div>

      <div className="os-slabs">
        {pillars.map((p, i) => (
          <div key={p.key} className={"os-slab os-slab--" + p.key} style={{'--accent': p.accent}}>
            <div className="os-slab-image">
              <image-slot
                id={p.slot}
                shape="rect"
                fit="cover"
                src={p.image}
                placeholder={"Drop image · " + p.label}
                style={{position:'absolute', inset:0, width:'100%', height:'100%'}}
              ></image-slot>
            </div>
            <div className="os-slab-tint" style={{background: p.tint}}></div>
            <div className="os-slab-grain"></div>

            <div className="os-slab-content">
              <div className="os-slab-num">
                {p.num} <span style={{ opacity: 0.6, letterSpacing: '0.08em', marginLeft: 8 }}>· {p.label}</span>
              </div>
              <h3 className="os-slab-title">{p.title}</h3>
              <p className="os-slab-body">{p.body}</p>

              {p.ladder && (
                <div className="os-slab-rungs">
                  {p.ladder.map((rung, k) => (
                    <div key={rung} className="os-slab-rung" style={{'--i': k}}>
                      <div className="os-slab-rung-num">0{k+1}</div>
                      <div className="os-slab-rung-name">{rung}</div>
                    </div>
                  ))}
                </div>
              )}

              {p.key === 'standard' && (
                <div className="os-slab-rubric">
                  {[
                    { lvl: 'L1', txt: 'Aware'},
                    { lvl: 'L2', txt: 'Applies'},
                    { lvl: 'L3', txt: 'Coaches'},
                    { lvl: 'L4', txt: 'Sets the bar'},
                  ].map((r, k) => (
                    <div key={r.lvl} className="os-slab-rubric-row">
                      <span className="os-slab-rubric-lvl">{r.lvl}</span>
                      <span className="os-slab-rubric-txt">{r.txt}</span>
                      <span className="os-slab-rubric-bar"><span style={{width:(k+1)*25 + '%'}}></span></span>
                    </div>
                  ))}
                </div>
              )}

              {p.key === 'scale' && (
                <div className="os-slab-ops">
                  {[
                    ['Playbook', '◰'],
                    ['Dashboards','▦'],
                    ['Rubric Bank','✦'],
                    ['Calibration','◎'],
                    ['Reporting','▤'],
                    ['Governance','◇'],
                  ].map(([t, g]) => (
                    <div key={t} className="os-slab-op">
                      <span className="os-slab-op-glyph">{g}</span>
                      <span className="os-slab-op-name">{t}</span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        ))}
      </div>

      <div className="wrap" style={{position:'relative', zIndex:3, marginTop:64, textAlign:'center'}}>
        <div className="os-synthesis">
          <span>Together →</span>
          <strong>Consistent advisory impact across teams and regions.</strong>
        </div>
      </div>
    </section>
  );
}

/* ============ TIMELINE ============ */
function Timeline() {
  return (
    <section className="section timeline-section" id="timeline">
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow-strong">08 · TIMELINE</p>
          <h2 className="headline-lg">
            Front-loaded for speed.<br/>
            <span style={{color:'var(--ambiz-text-dim)'}}>Back-loaded for quality.</span>
          </h2>
          <p className="lede" style={{marginTop:20}}>
            Days for fundamentals and practice. Six weeks anchored by real client delivery with review. Built on best-practice learning effectiveness.
          </p>
        </div>

        <div className="timeline-track">
          <div className="timeline-bar">
            <div className="timeline-bar-front"></div>
            <div className="timeline-bar-back"></div>
          </div>
          <div className="timeline-stops">
            {window.TIMELINE.map((t, i) => (
              <div key={t.rung} className="timeline-stop">
                <div className="timeline-stop-rung">{t.rung}</div>
                <div className="timeline-stop-dur">{t.dur}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="timeline-zones">
          <div className="timeline-zone timeline-zone--front">
            <div className="timeline-zone-tag">Days 1–8 · Front</div>
            <div className="timeline-zone-title">Foundations & timed practice</div>
            <div className="timeline-zone-body">Short modules, written cases, simulations. Move fast through pre-read and judgement-building drills.</div>
          </div>
          <div className="timeline-zone timeline-zone--mid">
            <div className="timeline-zone-tag">Days 9–10 · Bridge</div>
            <div className="timeline-zone-title">Talk-track rehearsal</div>
            <div className="timeline-zone-body">Mimicking — roleplay with clear client personas and emotional realism, on the way to live work.</div>
          </div>
          <div className="timeline-zone timeline-zone--back">
            <div className="timeline-zone-tag">Weeks 3–8 · Back</div>
            <div className="timeline-zone-title">Real client delivery, reviewed</div>
            <div className="timeline-zone-body">Shadow real calls. Supervised live sessions. Independent cases logged with manager review. Quality compounds.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ PROOF ============ */
function Proof() {
  const targets = { sat: 95, rel: 98, ba: 8.33, rp: 3.70 };
  const [v, setV] = React.useState({ sat: 0, rel: 0, ba: 0, rp: 0 });

  React.useEffect(() => {
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        const start = performance.now();
        const dur = 1600;
        function frame(now) {
          const t = Math.min(1, (now - start) / dur);
          const ease = 1 - Math.pow(1 - t, 3);
          setV({
            sat: Math.round(targets.sat * ease),
            rel: Math.round(targets.rel * ease),
            ba: +(targets.ba * ease).toFixed(2),
            rp: +(targets.rp * ease).toFixed(2),
          });
          if (t < 1) requestAnimationFrame(frame);
        }
        requestAnimationFrame(frame);
        obs.disconnect();
      }
    }, { threshold: 0.3 });
    const el = document.getElementById('proof-anchor');
    if (el) obs.observe(el);
    return () => obs.disconnect();
  }, []);

  // Duplicate quotes for the seamless marquee
  const quotesLoop = [...window.QUOTES, ...window.QUOTES];

  return (
    <section className="section proof-section" id="proof">
      <div className="wrap" id="proof-anchor">
        <div className="section-head">
          <p className="eyebrow-strong">09 · PROOF</p>
          <h2 className="headline-lg">
            Historical results.<br/>
            <span style={{color:'var(--ambiz-text-dim)'}}>The program lands — and learning sticks.</span>
          </h2>
          <p className="lede" style={{marginTop:20}}>
            Run on a previous cohort: high engagement, high relevancy, measurable score improvement across written reasoning and roleplay.
          </p>
        </div>

        <div className="proof-grid">
          <div className="proof-nums">
            <div className="proof-num-card">
              <div className="proof-num">{v.sat}<span style={{fontSize:'0.4em', WebkitTextFillColor:'currentColor', background:'none', color:'var(--ambiz-text-dim)', marginLeft:6}}>%</span></div>
              <div className="proof-num-lbl">Participant Satisfaction</div>
              <div className="proof-num-sub">96% highly satisfied · 4% satisfied · 0% not satisfied</div>
            </div>
            <div className="proof-num-card">
              <div className="proof-num">{v.rel}<span style={{fontSize:'0.4em', WebkitTextFillColor:'currentColor', background:'none', color:'var(--ambiz-text-dim)', marginLeft:6}}>%</span></div>
              <div className="proof-num-lbl">Relevancy</div>
              <div className="proof-num-sub">98% highly relevant · 2% relevant · 0% irrelevant</div>
            </div>
            <div className="proof-num-card">
              <div className="proof-num">+{v.ba.toFixed(2)}</div>
              <div className="proof-num-lbl">Business Article Recap</div>
              <div className="proof-num-sub">Avg. score increase · 72% of participants improved</div>
            </div>
            <div className="proof-num-card">
              <div className="proof-num">+{v.rp.toFixed(2)}</div>
              <div className="proof-num-lbl">Roleplay Score</div>
              <div className="proof-num-sub">Avg. score increase · 61% of participants improved</div>
            </div>
          </div>

          {/* Scrolling quotes */}
          <div className="proof-quotes">
            <div className="proof-quotes-track">
              {quotesLoop.map((q, i) => (
                <div key={i} className="proof-quote-card">
                  <div className="proof-quote-text">"{q.text}"</div>
                  <div className="proof-quote-attrib">— {q.who}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============ LICENSE PACKAGE ============ */
function LicensePackage() {
  return (
    <section className="section license-section" id="license">
      <div className="wrap">
        <div className="section-head">
          <p className="eyebrow-strong">10 · LICENSE PACKAGE</p>
          <h2 className="headline-lg">
            Everything you need to run the system.
          </h2>
          <p className="lede" style={{marginTop:20}}>
            Ten deliverables across the talent, mentor, and people-and-culture audiences — from playbook to platform support.
          </p>
        </div>

        <div className="license-table">
          <div className="license-row license-row--head">
            <div className="license-cell">Deliverable</div>
            <div className="license-cell">Description</div>
            <div className="license-cell" style={{textAlign:'center'}}>Talent</div>
            <div className="license-cell" style={{textAlign:'center'}}>Mentor / Buddy</div>
            <div className="license-cell" style={{textAlign:'center'}}>People & Culture</div>
          </div>
          {window.DELIVERABLES.map(d => (
            <div className="license-row" key={d.name}>
              <div className="license-cell license-name">{d.name}</div>
              <div className="license-cell license-desc">{d.desc}</div>
              {d.flags.map((f, i) => (
                <div key={i} className="license-cell license-check">
                  {f ? (
                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
                      <circle cx="12" cy="12" r="10" fill="rgba(13,144,58,0.10)"/>
                      <path d="M8 12.5l3 3 5-6" stroke="#0D903A" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round" fill="none"/>
                    </svg>
                  ) : (
                    <span style={{color:'rgba(15,23,42,0.18)', fontSize:18}}>—</span>
                  )}
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ CTA ============ */
function CtaSection() {
  return (
    <section className="section cta-section" id="cta">
      <div className="wrap">
        <div className="cta-grid">
          <div>
            <p className="eyebrow-strong" style={{color:'var(--y-500)'}}><span style={{background:'var(--y-500)'}}></span>READY TO LICENSE TODAY</p>
            <h2 className="cta-headline">
              Install the advisory readiness operating system in your institution.
            </h2>
            <p className="cta-sub">
              From playbook to dashboard, AMBIZ turns advisory learning into measurable client readiness — so quality is built before it ever reaches the conversation.
            </p>
            <div className="cta-actions">
              <a className="btn-primary">
                Start a Conversation
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M6.4 18L5 16.6L14.6 7H6V5h12v12h-2V8.4z"/></svg>
              </a>
              <a className="btn-ghost">Download the Brief</a>
            </div>
          </div>

          <div className="cta-aside">
            <div style={{fontSize:11, fontWeight:700, letterSpacing:'0.18em', textTransform:'uppercase', color:'var(--y-500)', marginBottom:8}}>The License Package</div>
            <div style={{fontSize:20, fontWeight:700, lineHeight:1.2, marginBottom:16}}>End-to-end. Ready to run.</div>
            {[
              'Program playbook, materials, and assessments',
              'Individual & master learning dashboards',
              'Pre/post assessment + result workshop',
              'Master dashboard training for People & Culture',
              'Ongoing technical support',
            ].map(item => (
              <div key={item} className="cta-aside-row">
                <span className="cta-aside-check">
                  <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                </span>
                <span className="cta-aside-text">{item}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}


Object.assign(window, {
  Nav, Hero, MarketPressure, SystemOverview, Timeline, Proof, LicensePackage, CtaSection
});