// ════════════════════════════════════════════════════════════════
// Agentic Forge · Framework Intro · v3 · ~105s
// PITCH-ARC IN VIDEO FORM. 7 beats:
//   1 Hero (0-10)           2 Problem (10-26)
//   3 What it is (26-48)    4 Three engines (48-70)
//   5 What you see (70-95)  6 Two paths (95-106)   7 CTA (106-115)
// ════════════════════════════════════════════════════════════════

// ─── Tokens ──────────────────────────────────────────────────
const C = {
  carbon:'#080c14', charcoal:'#1c1e24', panel:'#13151a', line:'#2a2d35',
  white:'#fff', gray:'#a0a4ab', dim:'#6e7178',
  green:'#00da41', amber:'#f4b400', red:'#ff6b6b', blue:'#5b8def',
};
const F = { sans:"'Geologica', system-ui, sans-serif", mono:"'JetBrains Mono', monospace" };
const ease = t => t<=0?0:t>=1?1:1-Math.pow(1-t,3);
const fade = (time, start, dur=0.6) => Math.max(0, Math.min(1, ease((time-start)/dur)));
const slideUp = (time, start, dur=0.6, dist=8) => (1 - fade(time, start, dur)) * dist;
const gradientStyle = {
  background: 'linear-gradient(135deg, #00E87B 0%, #00da41 50%, #00B35A 100%)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  backgroundClip: 'text',
  textShadow: 'none',
};
// Eyebrow — small uppercase accent label above a heading (web pattern).
// Reference it as the "eyebrow" style.
const eyebrowStyle = {
  fontSize: 18,
  fontWeight: 500,
  color: '#00da41',
  textTransform: 'uppercase',
  letterSpacing: '0.1em',
  marginBottom: 4,
  minHeight: 56,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
};
// Soft palette — muted accents for tinting elements on dark cards.
// Generic color names so the palette is reusable across demos.
const softPalette = {
  slate:      '#dce3e9',
  amber:      '#f0cd6b',
  sky:        '#a5cbf5',
  lavender:   '#cdbeef',
  peach:      '#f7cd96',
  periwinkle: '#bac2e3',
};

// ─── Captions — converted from {t, end} to harness {t, d, text} ──
// The harness <Captions> primitive expects (t = start, d = duration).
const SUBS = [
  { t:0.5,  d:4.5, text:"AI doesn't ship software. Engineering does." },
  { t:5.2,  d:4.8, text:"We built the framework that lets engineering operate AI as a delivery system." },
  { t:13.0, d:5.0, text:"Today's coding agents are smart. But they have no memory. No system." },
  { t:18.5, d:6.5, text:"They write code without knowing what your team has decided." },
  { t:28.0, d:8.0, text:"Agentic Forge is the integration layer connecting your existing tools." },
  { t:36.5, d:9.5, text:"It runs a workforce of twelve specialized agents against your structured data." },
  { t:50.0, d:8.0, text:"A Context Engine. A Governance Engine. A calibration loop." },
  { t:58.5, d:9.5, text:"Three engines that make the framework compound the more your team uses it." },
  { t:71.0, d:7.0, text:"Engineers stay in their IDE. Managers see real signal. Executives ask real questions." },
  { t:85.0, d:8.0, text:"Without information architecture, your engineering organization runs blind." },
  { t:93.5, d:2.5, text:"Agentic Forge is the lens." },
  { t:96.0, d:6.0, text:"See it in action. Engineers, managers, executives, and teams." },
];

// ─── shared chip ─────────────────────────────────────────────
// `time` prop is optional: when omitted the chip reads global stage
// time via useTime(); when passed it lets callers feed a local
// scene-relative t (used by sub-scenes like DiagramScene/PanelEngineer
// that compute their own t off the stage time).
function AFChip({ skill, start = 0, time }) {
  const stageTime = useTime();
  const t = time != null ? time : stageTime;
  const o = fade(t, start, 0.18);
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:8,
      background:C.charcoal, borderLeft:`2px solid ${C.green}`,
      borderRadius:4, padding:'5px 11px',
      fontFamily:F.sans, fontSize:11, fontWeight:500, color:C.gray,
      opacity:o, transform:`translateY(${slideUp(t,start)}px)`,
    }}>
      <span style={{ width:6, height:6, borderRadius:3, background:C.green, flexShrink:0 }} />
      <span>Agentic Forge · {skill}</span>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// BEAT 1 · Hero (0-10s)
// ════════════════════════════════════════════════════════════════
function Beat1() {
  const time = useTime();
  const t1 = time < 9 ? fade(time, 1.2, 0.7) : 1 - fade(time, 9.6, 0.4);
  const t2 = time < 9 ? fade(time, 4.5, 0.7) : 1 - fade(time, 9.6, 0.4);
  return (
    <div style={{ position:'absolute', inset:0, background:'url(/assets/images/bg_hero.jpg) center/cover no-repeat', display:'flex', alignItems:'center', justifyContent:'center' }}>
      <div style={{ position:'relative', textAlign:'center', fontFamily:F.sans, color:C.white, padding:'0 80px', maxWidth:1500, textShadow:'0 2px 12px rgba(0,0,0,0.7)' }}>
        <div style={{ fontSize:72, fontWeight:500, lineHeight:1.25, opacity:t1, transform:`translateY(${(1-t1)*10}px)`, letterSpacing:'-0.005em' }}>
          <span style={{ fontWeight:300 }}>AI doesn't ship software.</span><br/>
          <span style={gradientStyle}>Engineering does.</span>
        </div>
        <div style={{ marginTop:38, fontSize:24, fontWeight:100, color:C.white, lineHeight:1.55, opacity:t2, transform:`translateY(${(1-t2)*8}px)`, maxWidth:980, marginLeft:'auto', marginRight:'auto' }}>
          We built the framework that lets engineering organizations<br/>operate AI as a delivery system, not as a productivity tool.
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// BEAT 2 · Problem (10-26s)
// ════════════════════════════════════════════════════════════════
function Beat2() {
  const time = useTime();
  const exitO = time < 25.4 ? 1 : 1 - fade(time, 25.4, 0.4);
  const o1 = fade(time, 12.0, 0.6);
  const o2 = fade(time, 14.6, 0.6);
  const o3 = fade(time, 17.2, 0.6);
  const oS = fade(time, 19.8, 0.7);
  return (
    <div style={{ position:'absolute', inset:0, background:'url(/assets/images/bg_hero.jpg) center/cover no-repeat', display:'flex', alignItems:'center', justifyContent:'center', fontFamily:F.sans, opacity:exitO }}>
      <div style={{ textAlign:'center', maxWidth:1300, padding:'0 80px', textShadow:'0 2px 12px rgba(0,0,0,0.7)' }}>
        <div style={{ fontSize:50, color:C.white, fontWeight:300, lineHeight:1.45, opacity:o1, transform:`translateY(${(1-o1)*8}px)` }}>
          Today's coding agents are smart.
        </div>
        <div style={{ fontSize:50, color:C.white, fontWeight:500, lineHeight:1.45, marginTop:14, opacity:o2, transform:`translateY(${(1-o2)*8}px)` }}>
          But they have <span style={gradientStyle}>no memory.</span>
        </div>
        <div style={{ fontSize:50, color:C.white, fontWeight:500, lineHeight:1.45, marginTop:14, opacity:o3, transform:`translateY(${(1-o3)*8}px)` }}>
          <span style={gradientStyle}>No system.</span>
        </div>
        <div style={{ marginTop:42, fontSize:24, fontWeight:100, color:C.white, lineHeight:1.6, opacity:oS, transform:`translateY(${(1-oS)*8}px)`, maxWidth:880, marginLeft:'auto', marginRight:'auto' }}>
          They write code without knowing what your team has decided,<br/>
          what's already in your codebase, or what's actually ready to ship.
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// BEAT 3 · What it is (26-48s) — title + diagram + evidence cut
// ════════════════════════════════════════════════════════════════
function Beat3() {
  const time = useTime();
  const t = time - 26;
  const headO = fade(time, 26.6, 0.6);
  const bgO = fade(time, 26.0, 0.6);
  const headExit = time < 47.6 ? 1 : 1 - fade(time, 47.6, 0.4);

  const showDiagram = t >= 3.5 && t < 12;
  const showEvidence = t >= 12 && t < 20;

  return (
    <div style={{ position:'absolute', inset:0, background:C.carbon, fontFamily:F.sans }}>
      <div style={{ position:'absolute', inset:0, background:'url(/assets/images/bg_arcs.jpg) center/cover no-repeat', opacity:bgO }} />
      <div style={{ position:'absolute', top:90, left:0, right:0, textAlign:'center', opacity:headO * headExit, transform:`translateY(${(1-headO)*8}px)`, textShadow:'0 2px 12px rgba(0,0,0,0.7)' }}>
        <div style={{ fontSize:50, color:C.white, fontWeight:500, letterSpacing:'-0.005em' }}>
          Agentic Forge is the <span style={gradientStyle}>integration layer</span>.
        </div>
        <div style={{ marginTop:14, fontSize:24, fontWeight:100, color:C.white }}>Not a tool. Not a platform. A framework.</div>
      </div>

      {showDiagram && <DiagramScene t={t - 3.5} />}
      {showEvidence && <EvidenceCutB3 t={t - 12} />}
    </div>
  );
}

function DiagramScene({ t }) {
  const o = (start, dur=0.8) => Math.max(0, Math.min(1, (t - start) / dur));
  const tools = [
    { name:'GitHub',     color:softPalette.slate      },
    { name:'Slack',      color:softPalette.amber      },
    { name:'Jira',       color:softPalette.sky        },
    { name:'Snyk',       color:softPalette.lavender   },
    { name:'CodeRabbit', color:softPalette.peach      },
    { name:'Linear',     color:softPalette.periwinkle },
  ];
  const agents = ['Code Archaeologist','Strategy Engineer','Decision Architect','Specification Engineer','System Architect','Software Developer','Code Reviewer','Test Strategist','Codebase Sentinel','Security Auditor','DevOps Engineer','Calibration Engineer'];

  return (
    <div style={{ position:'absolute', top:280, left:160, right:160, bottom:80, fontFamily:F.sans }}>
      <div style={{ display:'flex', justifyContent:'center', gap:14, marginBottom:16 }}>
        {tools.map((tool, i) => {
          const op = o(0 + i*0.06, 0.5);
          return (
            <div key={i} style={{
              flex:1, maxWidth:230, padding:'14px 16px', background:'#0D1321', border:'1px solid rgba(250, 250, 250, 0.1)',
              borderRadius:6, overflow:'hidden', boxShadow:'0 8px 32px rgba(0,0,0,0.3)', opacity:op, transform:`translateY(${(1-op)*-6}px)`,
            }}>
              <div style={{ fontSize:14, color:C.dim, letterSpacing:'0.06em', marginBottom:4 }}>TOOL</div>
              <div style={{ fontSize:17, color:tool.color, fontWeight:500 }}>{tool.name}</div>
            </div>
          );
        })}
      </div>

      <svg width="100%" height="20" viewBox="0 0 1600 20" preserveAspectRatio="none" style={{ display:'block', opacity: o(0.5, 0.6) }}>
        {tools.map((_, i) => {
          const x = (i + 0.5) * (1600 / tools.length);
          return <line key={i} x1={x} y1="0" x2={x} y2="20" stroke="rgba(255,255,255,0.3)" strokeWidth="1" />;
        })}
      </svg>

      <div style={{
        background:'#0D1321', border:`1px solid ${C.green}`, borderRadius:6,
        padding:'56px 40px 64px', overflow:'hidden', boxShadow:'0 8px 32px rgba(0,0,0,0.3)', position:'relative', opacity: o(1.0, 0.7), transform:`translateY(${(1-o(1.0,0.7))*-6}px)`,
      }}>
        <div style={{ display:'flex', alignItems:'center', gap:12, marginBottom:24 }}>
          <span style={{ fontSize:14, color:C.green, letterSpacing:'0.16em', fontWeight:600 }}>AGENTIC FORGE · INTEGRATION LAYER</span>
          <span style={{ marginLeft:'auto', fontSize:14, color:C.gray }}>12 agents · 10 layers · 54 skills</span>
        </div>
        <div style={{ display:'flex', flexWrap:'wrap', gap:'10px 16px' }}>
          {agents.map((a, i) => {
            const op = o(2.5 + i*0.06, 0.4);
            return (
              <React.Fragment key={i}>
                {i === 9 && <div style={{ flexBasis:'100%', height:0 }} />}
                <div style={{ display:'flex', alignItems:'center', gap:7, fontSize:15, color:C.gray, opacity:op }}>
                  <span style={{ width:7, height:7, borderRadius:4, background:C.green, flexShrink:0 }} />
                  <span>{a}</span>
                </div>
              </React.Fragment>
            );
          })}
        </div>
      </div>

      <svg width="100%" height="20" viewBox="0 0 1600 20" preserveAspectRatio="none" style={{ display:'block', opacity: o(4.5, 0.6) }}>
        {[0.2,0.4,0.6,0.8].map((p, i) => (
          <line key={i} x1={p*1600} y1="0" x2={p*1600} y2="20" stroke="rgba(255,255,255,0.3)" strokeWidth="1" />
        ))}
      </svg>

      <div style={{
        display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:14, marginTop:16,
        opacity: o(5.0, 0.7), transform:`translateY(${(1-o(5.0,0.7))*6}px)`,
      }}>
        {[
          { label:'Decision graph', n:'38' },
          { label:'Pattern catalog', n:'47' },
          { label:'Calibration', n:'142' },
          { label:'Demand intake', n:'214' },
        ].map((d, i) => (
          <div key={i} style={{ background:'#0D1321', border:'1px solid rgba(250, 250, 250, 0.1)', borderRadius:6, padding:'28px 40px 32px', overflow:'hidden', boxShadow:'0 8px 32px rgba(0,0,0,0.3)' }}>
            <div style={{ fontSize:13, color:C.dim, letterSpacing:'0.05em', marginBottom:10 }}>STRUCTURED DATA</div>
            <div style={{ display:'flex', alignItems:'baseline', gap:10 }}>
              <span style={{ fontSize:24, color:C.green, fontWeight:400 }}>{d.n}</span>
              <span style={{ fontSize:17, color:C.white }}>{d.label}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function EvidenceCutB3({ t }) {
  const o = Math.max(0, Math.min(1, t / 0.5));
  return (
    <div style={{ position:'absolute', inset:0, background:'#1e1e1e', opacity:o, fontFamily:F.sans, display:'flex' }}>
      <div style={{ width:48, background:'#181818', borderRight:'1px solid #2b2b2b', flexShrink:0 }} />
      <div style={{ flex:1, display:'flex' }}>
        <div style={{ flex:1, position:'relative' }}>
          <div style={{ height:30, background:'#3c3c3c', display:'flex', alignItems:'center', padding:'0 14px', fontFamily:F.mono, fontSize:12, color:'#fff' }}>
            <span style={{ color:'#519aba' }}>◦</span>&nbsp;src/services/billing/validation.ts
          </div>
          <div style={{ padding:'14px 22px', fontFamily:F.mono, fontSize:13, color:'#d4d4d4', lineHeight:1.7 }}>
            <div><span style={{ color:'#6a9955' }}>// Bootstrap validation for billing service</span></div>
            <div><span style={{ color:'#c586c0' }}>export class</span> <span style={{ color:'#4ec9b0' }}>BillingValidator</span> {'{'}</div>
            <div>&nbsp;&nbsp;<span style={{ color:'#dcdcaa' }}>validate</span>(charge: <span style={{ color:'#4ec9b0' }}>Charge</span>): <span style={{ color:'#4ec9b0' }}>ValidationResult</span> {'{'}</div>
            <div>&nbsp;&nbsp;&nbsp;&nbsp;<span style={{ color:'#6a9955' }}>// …</span></div>
            <div>&nbsp;&nbsp;{'}'}</div>
            <div>{'}'}</div>
          </div>
        </div>
        <div style={{ width:560, background:'#1f1f1f', borderLeft:'1px solid #2b2b2b', display:'flex', flexDirection:'column' }}>
          <div style={{ height:36, background:'#181818', borderBottom:'1px solid #2b2b2b', display:'flex', alignItems:'center', padding:'0 14px', gap:10 }}>
            <span style={{ width:18, height:18, borderRadius:9, background:'#444', display:'flex', alignItems:'center', justifyContent:'center', fontSize:11 }}>✦</span>
            <span style={{ fontSize:13, color:'#fff', fontWeight:500 }}>GitHub Copilot</span>
          </div>
          <div style={{ padding:'14px 16px', borderBottom:'1px solid #2b2b2b' }}>
            <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:4 }}>
              <div style={{ width:18, height:18, borderRadius:9, background:'#5b5f66', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:10, fontWeight:500 }}>P</div>
              <span style={{ fontSize:12, color:'#fff', fontWeight:500 }}>You</span>
            </div>
            <div style={{ paddingLeft:25, fontSize:13, color:'#cccccc' }}>service-layer or controller-layer validation?</div>
          </div>
          <div style={{ padding:'16px 16px' }}>
            <AFChip skill="pattern-recommendation" start={0} time={t} />
            <div style={{ marginTop:12, fontSize:13, color:'#cccccc', lineHeight:1.6 }}>
              <div style={{ marginBottom:10 }}>Service-layer validation: <span style={{ color:C.green, fontFamily:F.mono }}>32/35 modules</span> in this codebase.</div>
              <div style={{ marginBottom:10 }}>Controller-layer: <span style={{ color:C.amber, fontFamily:F.mono }}>3/35 (refactor candidates)</span></div>
              <div style={{ background:'#252526', border:'1px solid #2b2b2b', borderRadius:4, padding:'10px 12px', fontSize:13, color:'#fff' }}>
                Recommend: <span style={{ color:C.green, fontWeight:500 }}>service-layer</span>.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// BEAT 4 · Three engines (48-70s)
// ════════════════════════════════════════════════════════════════
function Beat4() {
  const time = useTime();
  const t = time - 48;
  const exit = time < 69.6 ? 1 : 1 - fade(time, 69.6, 0.4);

  const o1 = fade(time, 48.4, 0.6);
  const o2 = fade(time, 50.0, 0.6);
  const o3 = fade(time, 51.6, 0.6);
  const descO = fade(time, 53.6, 0.7);
  const showCards = t >= 9.5;

  return (
    <div style={{ position:'absolute', inset:0, background:'url(/assets/images/bg_arcs.jpg) center/cover no-repeat', fontFamily:F.sans, opacity:exit, display:'flex', flexDirection:'column' }}>
      <div style={{ paddingTop:90, textAlign:'center' }}>
        <div style={eyebrowStyle}>WHAT MAKES IT COMPOUND</div>
        <div style={{ fontSize:46, color:C.white, fontWeight:500, lineHeight:1.4, opacity:o1, transform:`translateY(${(1-o1)*8}px)` }}>A Context Engine.</div>
        <div style={{ fontSize:46, color:C.white, fontWeight:500, lineHeight:1.4, marginTop:8, opacity:o2, transform:`translateY(${(1-o2)*8}px)` }}>A Governance Engine.</div>
        <div style={{ fontSize:46, color:C.white, fontWeight:500, lineHeight:1.4, marginTop:8, opacity:o3, transform:`translateY(${(1-o3)*8}px)` }}>A calibration loop.</div>
      </div>

      {!showCards && (
        <div style={{ position:'absolute', left:0, right:0, top:560, textAlign:'center', padding:'0 80px', opacity:descO, transform:`translateY(${(1-descO)*8}px)` }}>
          <div style={{ fontSize:24, fontWeight:100, color:C.white, lineHeight:1.7, maxWidth:1100, margin:'0 auto', textShadow:'0 2px 12px rgba(0,0,0,0.7)' }}>
            Context captures every decision, dependency, and pattern.<br/>
            Governance catches issues continuously — not at deployment.<br/>
            Calibration gets better the more your team uses it.
          </div>
        </div>
      )}

      {showCards && <ThreeEngineCards t={t - 9.5} />}
    </div>
  );
}

function ThreeEngineCards({ t }) {
  const o = (s, d=0.5) => Math.max(0, Math.min(1, (t - s) / d));
  const cards = [
    { title:'Context Engine',    sub:'every decision · every dependency · every pattern', metric:'38',   metricLabel:'decisions · 47 patterns · 62 connections',          foot:'cited 47× this quarter',                color:'#00E87B' },
    { title:'Governance Engine', sub:'continuous · not at deployment',                    metric:'47',   metricLabel:'rules fired this week · 3 violations · 1 bypass remediated', foot:'caught at the edge — not at release', color:'#C59DF8' },
    { title:'Calibration loop',  sub:'gets better the more your team uses it',           metric:'±18%', metricLabel:'estimate accuracy · from ±62% · 142 stories',     foot:'re-tunes after every shipped story',     color:'#63EAFF' },
  ];
  return (
    <div style={{ position:'absolute', left:0, right:0, top:540, padding:'0 100px' }}>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:22 }}>
        {cards.map((c, i) => {
          const op = o(0.2 + i*0.25, 0.6);
          return (
            <div key={i} style={{
              position:'relative', background:'#0D1321', border:'1px solid rgba(250, 250, 250, 0.1)', borderRadius:6,
              padding:'56px 40px 64px', overflow:'hidden', boxShadow:'0 8px 32px rgba(0,0,0,0.3)', opacity:op, transform:`translateY(${(1-op)*10}px)`,
            }}>
              <div style={{ position:'absolute', left:0, top:0, bottom:0, width:3, background:c.color }} />
              <div style={{ fontFamily:F.sans, fontSize:18, color:c.color, letterSpacing:'0.16em', fontWeight:600, marginBottom:10 }}>0{i+1}</div>
              <div style={{ fontSize:25, color:C.white, fontWeight:500, marginBottom:6 }}>{c.title}</div>
              <div style={{ fontSize:16, color:C.gray, marginBottom:18 }}>{c.sub}</div>
              <div style={{ fontSize:44, color:c.color, fontWeight:300, lineHeight:1 }}>{c.metric}</div>
              <div style={{ fontSize:15, color:C.gray, marginTop:6, lineHeight:1.5 }}>{c.metricLabel}</div>
              <div style={{ borderTop:`1px solid ${C.line}`, marginTop:14, paddingTop:10, fontSize:14, color:C.dim }}>{c.foot}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// BEAT 5 · What you see + how it lands (70-95s)
// ════════════════════════════════════════════════════════════════
function Beat5() {
  const time = useTime();
  const t = time - 70;
  const exit = time < 94.6 ? 1 : 1 - fade(time, 94.6, 0.4);
  const oH1 = fade(time, 70.4, 0.6);
  const oH2 = fade(time, 71.0, 0.6);
  const oH3 = fade(time, 71.6, 0.6);
  const showGrid = t >= 4.0;
  const showLine = t >= 18.0;

  return (
    <div style={{ position:'absolute', inset:0, background:'url(/assets/images/bg_arcs.jpg) center/cover no-repeat', fontFamily:F.sans, opacity:exit }}>
      {!showGrid && (
        <div style={{ position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center' }}>
          <div style={{ textAlign:'center', textShadow:'0 2px 12px rgba(0,0,0,0.7)' }}>
            <div style={{ fontSize:42, color:C.white, fontWeight:500, lineHeight:1.5, opacity:oH1, transform:`translateY(${(1-oH1)*8}px)` }}>Engineers stay in their IDE.</div>
            <div style={{ fontSize:42, color:C.white, fontWeight:500, lineHeight:1.5, marginTop:14, opacity:oH2, transform:`translateY(${(1-oH2)*8}px)` }}>Managers see real signal.</div>
            <div style={{ fontSize:42, color:C.white, fontWeight:500, lineHeight:1.5, marginTop:14, opacity:oH3, transform:`translateY(${(1-oH3)*8}px)` }}>Executives ask real questions.</div>
          </div>
        </div>
      )}
      {showGrid && <EvidenceGrid t={t - 4} showLine={showLine} />}
    </div>
  );
}

function EvidenceGrid({ t, showLine }) {
  const o = (s, d=0.6) => Math.max(0, Math.min(1, (t - s) / d));
  const lineO = showLine ? 1 : 0;
  return (
    <div style={{ position:'absolute', inset:0, padding:'80px 60px 40px', display:'flex', flexDirection:'column' }}>
      <div style={{ textAlign:'center', marginBottom:28, opacity:o(0, 0.5) }}>
        <div style={eyebrowStyle}>THREE AUDIENCES · ONE FRAMEWORK</div>
        <div style={{ fontSize:32, color:C.white, fontWeight:500 }}>Engineers stay. Managers see. Executives ask.</div>
      </div>
      <div style={{ flex:1, display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:22, position:'relative' }}>
        <PanelEngineer t={t} startReveal={0.4} />
        <PanelManager  t={t} startReveal={0.7} />
        <PanelExec     t={t} startReveal={1.0} />

        {showLine && (
          <div style={{ position:'absolute', left:0, right:0, top:'42%', display:'flex', justifyContent:'center', pointerEvents:'none' }}>
            <div style={{
              background:'url(/assets/images/bg_arcs.jpg) center/cover no-repeat', border:`1px solid ${C.green}`, borderRadius:6,
              padding:'56px 40px 64px', overflow:'hidden', textAlign:'center', maxWidth:980,
              opacity:lineO, transform:`scale(${0.96 + lineO*0.04})`,
              boxShadow:'0 30px 80px rgba(0,0,0,0.6)',
            }}>
              <div style={{ fontSize:30, color:C.white, fontWeight:300, lineHeight:1.4 }}>
                Without information architecture, your engineering organization runs blind.
              </div>
              <div style={{ fontSize:32, fontWeight:500, marginTop:10, ...gradientStyle }}>Agentic Forge is the lens.</div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function PanelShell({ label, color, sub, op, children }) {
  return (
    <div style={{ background:C.charcoal, border:`1px solid ${C.line}`, borderRadius:10, padding:'18px 18px', display:'flex', flexDirection:'column', minHeight:0, opacity:op, transform:`translateY(${(1-op)*10}px)` }}>
      <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:10 }}>
        <span style={{ width:8, height:8, borderRadius:4, background:color }} />
        <span style={{ fontFamily:F.mono, fontSize:11, color:color, letterSpacing:'0.14em', fontWeight:600 }}>{label}</span>
        <span style={{ marginLeft:'auto', fontSize:10, color:C.dim, fontFamily:F.mono }}>{sub}</span>
      </div>
      <div style={{ flex:1, minHeight:0, display:'flex', flexDirection:'column' }}>{children}</div>
    </div>
  );
}

function PanelEngineer({ t, startReveal }) {
  const op = Math.max(0, Math.min(1, (t - startReveal) / 0.6));
  return (
    <PanelShell label="ENGINEER · IDE" color={C.green} sub="Copilot Chat" op={op}>
      <div style={{ background:'#1e1e1e', borderRadius:6, padding:14, flex:1, display:'flex', flexDirection:'column', gap:10 }}>
        <div style={{ fontSize:11, color:'#858585', fontFamily:F.mono }}>src/services/payment/retry.ts</div>
        <div style={{ background:'#252526', borderRadius:4, padding:'10px 12px', fontSize:12, color:'#cccccc' }}>
          What context exists for STORY-041?
        </div>
        <AFChip skill="context-loaded" start={startReveal + 0.3} time={t} />
        <div style={{ background:'#181818', border:`1px solid ${C.line}`, borderRadius:4, padding:'12px 14px', fontSize:13, color:'#fff', lineHeight:1.55 }}>
          <div style={{ fontFamily:F.mono, fontSize:11, color:C.gray, marginBottom:8 }}>STORY-041 · payment-service</div>
          <div style={{ display:'flex', flexDirection:'column', gap:6, fontSize:12 }}>
            <div>· <span style={{ color:C.gray }}>4 acceptance criteria</span></div>
            <div>· <span style={{ color:C.gray }}>3 decisions linked</span></div>
            <div>· <span style={{ color:C.gray }}>repository pattern (32/35 services)</span></div>
            <div>· <span style={{ color:C.gray }}>12 tests on touched modules</span></div>
          </div>
        </div>
      </div>
    </PanelShell>
  );
}

function PanelManager({ t, startReveal }) {
  const op = Math.max(0, Math.min(1, (t - startReveal) / 0.6));
  return (
    <PanelShell label="MANAGER · DASHBOARD" color={C.amber} sub="intelligence surface" op={op}>
      <div style={{ background:'#0e1116', borderRadius:6, padding:14, flex:1, display:'flex', flexDirection:'column', gap:10 }}>
        <div style={{ fontSize:11, color:C.gray, fontFamily:F.mono, letterSpacing:'0.06em' }}>GOVERNANCE-HEALTH · THIS WEEK</div>
        <AFChip skill="governance-health" start={startReveal + 0.3} time={t} />
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          <div style={{ background:C.charcoal, border:`1px solid ${C.line}`, borderRadius:4, padding:'10px 12px' }}>
            <div style={{ fontSize:24, color:C.white, fontWeight:300 }}>47</div>
            <div style={{ fontSize:11, color:C.gray, marginTop:4 }}>rules fired</div>
          </div>
          <div style={{ background:C.charcoal, border:`1px solid ${C.line}`, borderRadius:4, padding:'10px 12px' }}>
            <div style={{ fontSize:24, color:C.amber, fontWeight:300 }}>3</div>
            <div style={{ fontSize:11, color:C.gray, marginTop:4 }}>violations</div>
          </div>
        </div>
        <div style={{ background:C.charcoal, border:`1px solid ${C.amber}`, borderRadius:4, padding:'10px 12px' }}>
          <div style={{ fontSize:11, color:C.amber, fontFamily:F.mono, marginBottom:4 }}>1 BYPASS DETECTED · REMEDIATED</div>
          <div style={{ fontSize:12, color:C.white }}>STORY-082 · evidence collector</div>
        </div>
      </div>
    </PanelShell>
  );
}

function PanelExec({ t, startReveal }) {
  const op = Math.max(0, Math.min(1, (t - startReveal) / 0.6));
  const q = '"what\'s blocking us"';
  const typeStart = startReveal + 0.6;
  const n = Math.max(0, Math.min(q.length, Math.floor((t - typeStart) * 18)));
  return (
    <PanelShell label="EXECUTIVE · NL QUERY" color={C.blue} sub="intelligence surface" op={op}>
      <div style={{ background:'#0e1116', borderRadius:6, padding:14, flex:1, display:'flex', flexDirection:'column', gap:10 }}>
        <div style={{ background:C.charcoal, border:`1px solid ${C.line}`, borderRadius:4, padding:'12px 14px', fontFamily:F.sans, fontSize:18, color:C.white }}>
          {q.slice(0, n)}
          {n < q.length && <span style={{ background:C.green, display:'inline-block', width:7, height:18, verticalAlign:'middle' }} />}
        </div>
        <AFChip skill="synthesis" start={startReveal + 2.5} time={t} />
        <div style={{ background:C.charcoal, border:`1px solid ${C.line}`, borderLeft:`3px solid ${C.blue}`, borderRadius:4, padding:'12px 14px', fontSize:13, color:'#fff', lineHeight:1.6 }}>
          <div><span style={{ color:C.gray }}>3 decisions pending.</span></div>
          <div style={{ marginTop:6 }}>Cumulative cost: <span style={{ color:C.amber, fontWeight:500 }}>$480K</span></div>
          <div style={{ marginTop:6 }}>Top blocker: <span style={{ color:C.green }}>DECISION-019</span> <span style={{ color:C.gray }}>(caching) · 73 days</span></div>
        </div>
      </div>
    </PanelShell>
  );
}

// ════════════════════════════════════════════════════════════════
// BEAT 6 · Two paths (95-106s)
// ════════════════════════════════════════════════════════════════
function Beat6() {
  const time = useTime();
  const exit = time < 105.6 ? 1 : 1 - fade(time, 105.6, 0.4);
  const oH = fade(time, 95.4, 0.6);
  const oA = fade(time, 96.6, 0.6);
  const oB = fade(time, 97.2, 0.6);
  return (
    <div style={{ position:'absolute', inset:0, background:C.carbon, fontFamily:F.sans, opacity:exit, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
      <div style={{ fontSize:48, color:C.white, fontWeight:500, marginBottom:48, opacity:oH, transform:`translateY(${(1-oH)*8}px)` }}>
        Two paths. <span style={{ color:C.green }}>One framework.</span>
      </div>
      <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 380px)', gap:40 }}>
        <PathCard op={oA} tag="PATH 01" tagColor={C.green}
          title="Hire Quantivex to deliver"
          body="Outcome-based engagement. We operate Agentic Forge on your behalf." />
        <PathCard op={oB} tag="PATH 02" tagColor={C.blue}
          title="License Agentic Forge directly"
          body="Founding cohort program. For mature teams that operate it themselves." />
      </div>
    </div>
  );
}

function PathCard({ op, tag, tagColor, title, body }) {
  return (
    <div style={{
      background:C.charcoal, border:`1px solid ${C.line}`, borderRadius:12, padding:'26px 28px',
      opacity:op, transform:`translateY(${(1-op)*10}px)`, position:'relative',
    }}>
      <div style={{ position:'absolute', left:0, top:0, bottom:0, width:3, background:tagColor }} />
      <div style={{ fontFamily:F.mono, fontSize:11, color:tagColor, letterSpacing:'0.16em', fontWeight:600, marginBottom:14 }}>{tag}</div>
      <div style={{ fontSize:22, color:C.white, fontWeight:500, marginBottom:14, lineHeight:1.35 }}>{title}</div>
      <div style={{ fontSize:14, color:C.gray, lineHeight:1.6 }}>{body}</div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// BEAT 7 · Closing CTA (106-115s)
// Note: in the App composition this beat is sprited at 95-104 — the
// original timestamps inside (95.4, 96.4, 98, 102.5) match that.
// ════════════════════════════════════════════════════════════════
function Beat7() {
  const time = useTime();
  const oH = fade(time, 95.4, 0.6);
  const oCTA = fade(time, 96.4, 0.6);
  const oWM = fade(time, 98.0, 0.5);
  const bgO = fade(time, 95.0, 0.6);
  const fadeOut = time < 102.5 ? 1 : 1 - fade(time, 102.5, 1.0);
  return (
    <div style={{ position:'absolute', inset:0, background:C.carbon, fontFamily:F.sans, opacity:fadeOut, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center' }}>
      <div style={{ position:'absolute', inset:0, background:'url(/assets/images/bg_hero.jpg) center/cover no-repeat', opacity:bgO }} />
      <div style={{ position:'relative', fontSize:54, color:C.white, fontWeight:500, marginBottom:42, opacity:oH, transform:`translateY(${(1-oH)*8}px)`, textShadow:'0 2px 12px rgba(0,0,0,0.7)' }}>
        See it in <span style={gradientStyle}>action</span>.
      </div>
      <div style={{ position:'relative', background:'#0D1321', border:'1px solid rgba(250, 250, 250, 0.1)', borderRadius:6, padding:'28px 40px 32px', overflow:'hidden', boxShadow:'0 8px 32px rgba(0,0,0,0.3)', display:'flex', alignItems:'center', gap:20, opacity:oCTA, transform:`translateY(${(1-oCTA)*8}px)` }}>
        <span style={{ fontSize:22, color:C.white, fontWeight:500 }}>Engineers</span>
        <span style={{ color:C.green, fontSize:22 }}>·</span>
        <span style={{ fontSize:22, color:C.white, fontWeight:500 }}>Managers</span>
        <span style={{ color:C.green, fontSize:22 }}>·</span>
        <span style={{ fontSize:22, color:C.white, fontWeight:500 }}>Executives</span>
        <span style={{ color:C.green, fontSize:22 }}>·</span>
        <span style={{ fontSize:22, color:C.white, fontWeight:500 }}>Teams</span>
      </div>
      <div style={{ position:'relative', marginTop:60, display:'flex', flexDirection:'column', alignItems:'center', gap:24, opacity:oWM }}>
        <span style={{ fontSize:19, fontWeight:500, ...gradientStyle }}>Agentic Forge</span>
        <img src="/assets/logo.svg" alt="Quantivex" style={{ height:28, display:'block' }} />
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// APP — 104s total (matches the original Stage duration={104})
// ════════════════════════════════════════════════════════════════
function App() {
  return (
    <DemoStage duration={104} captions={SUBS}>
      <Sprite start={0}   end={10.5}><Beat1 /></Sprite>
      <Sprite start={10}  end={26.5}><Beat2 /></Sprite>
      <Sprite start={26}  end={48.5}><Beat3 /></Sprite>
      <Sprite start={48}  end={70.5}><Beat4 /></Sprite>
      <Sprite start={70}  end={95.5}><Beat5 /></Sprite>
      <Sprite start={95}  end={104} ><Beat7 /></Sprite>
    </DemoStage>
  );
}

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