// ════════════════════════════════════════════════════════════════
// Agentic Forge · Intelligence Surface · v2 · 180s
// Surface: forge.ledgerline.com/intelligence — NL query mode.
// All AF content renders natively in-page. No popups. Burned subtitles.
// ════════════════════════════════════════════════════════════════

const T = window.TOKENS;
const IS = {
  carbon: '#080c14', charcoal: '#1c1e24', charcoalLine: '#2a2d35',
  bgDim: '#0f1218', textWhite: '#fff', textGray: '#a0a4ab', textDim: '#6e7178',
  green: '#00da41', blue: '#3b82f6', red: '#ff6b6b', amber: '#f4b400',
};
const ease = t => t<=0?0:t>=1?1:1-Math.pow(1-t,3);
const fade = (time, start, dur=0.2) => Math.max(0, Math.min(1, ease((time-start)/dur)));
const slideUp = (time, start, dur=0.2, dist=4) => (1 - fade(time, start, dur)) * dist;
// Gradient — display-size emphasized green text. Reference as the "gradient" style.
const gradientStyle = {
  background: 'linear-gradient(135deg, #00E87B 0%, #00da41 50%, #00B35A 100%)',
  WebkitBackgroundClip: 'text',
  WebkitTextFillColor: 'transparent',
  backgroundClip: 'text',
  textShadow: 'none',
};

function AFChip({ skill, start = 0 }) {
  const time = useTime();
  const o = fade(time, start, 0.18);
  return (
    <div style={{
      display:'inline-flex', alignItems:'center', gap:8,
      background: IS.charcoal, borderLeft:`2px solid ${IS.green}`,
      borderRadius:4, padding:'4px 10px',
      fontFamily:T.sans, fontSize:11, fontWeight:500, color:IS.textGray,
      opacity:o, transform:`translateY(${slideUp(time,start)}px)`,
    }}>
      <span style={{ width:6, height:6, borderRadius:3, background:IS.green, flexShrink:0 }} />
      <span>Agentic Forge · {skill}</span>
    </div>
  );
}
function ISCard({ children, accent, start = 0, padding = 22, style }) {
  const time = useTime();
  const o = fade(time, start, 0.22);
  return (
    <div style={{
      position:'relative', background: IS.charcoal, border:`1px solid ${IS.charcoalLine}`,
      borderRadius:12, padding, fontFamily:T.sans, color:IS.textWhite,
      opacity:o, transform:`translateY(${slideUp(time,start)}px)`, overflow:'hidden',
      ...style,
    }}>
      {accent && <div style={{ position:'absolute', left:0, top:0, bottom:0, width:4, background:accent }} />}
      {children}
    </div>
  );
}

function BrowserShell({ url, children }) {
  return (
    <div style={{ position:'absolute', inset:0, background:'#0a0d12', display:'flex', flexDirection:'column' }}>
      <div style={{ height:42, background:'#14171d', borderBottom:'1px solid #1e2128', display:'flex', alignItems:'center', padding:'0 14px', gap:14, flexShrink:0 }}>
        <div style={{ display:'flex', gap:8 }}>
          <div style={{ width:12, height:12, borderRadius:6, background:'#ff5f57' }} />
          <div style={{ width:12, height:12, borderRadius:6, background:'#febc2e' }} />
          <div style={{ width:12, height:12, borderRadius:6, background:'#28c840' }} />
        </div>
        <div style={{ flex:1, display:'flex', justifyContent:'center' }}>
          <div style={{ background:'#0a0d12', border:'1px solid #1e2128', borderRadius:6, padding:'5px 14px', fontSize:12, color:IS.textGray, fontFamily:T.mono, minWidth:480, textAlign:'center' }}>
            <span style={{ color:IS.textDim }}>🔒 </span>{url}
          </div>
        </div>
        <div style={{ width:60 }} />
      </div>
      {children}
    </div>
  );
}
function ForgeShell({ url, children }) {
  return (
    <BrowserShell url={url}>
      <div style={{ flex:1, display:'flex', minHeight:0, background:IS.carbon }}>
        <RailSidebar />
        <div style={{ flex:1, display:'flex', flexDirection:'column', minWidth:0 }}>
          <TopBar />
          <div style={{ flex:1, overflow:'hidden', position:'relative' }}>{children}</div>
        </div>
      </div>
    </BrowserShell>
  );
}
function TopBar() {
  return (
    <div style={{ height:54, background:IS.bgDim, borderBottom:`1px solid ${IS.charcoalLine}`, display:'flex', alignItems:'center', padding:'0 28px', gap:24, flexShrink:0 }}>
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        <span style={{ width:9, height:9, borderRadius:5, background:IS.green }} />
        <span style={{ fontFamily:T.sans, fontWeight:500, fontSize:15, color:IS.textWhite, letterSpacing:'-0.01em' }}>Agentic Forge</span>
      </div>
      <div style={{ display:'flex', gap:4, marginLeft:14 }}>
        <Tab name="platform" active />
        <Tab name="compliance-suite" />
      </div>
      <div style={{ marginLeft:'auto', display:'flex', alignItems:'center', gap:14 }}>
        <span style={{ fontSize:12, color:IS.textGray, fontFamily:T.mono }}>Mon · Apr 14</span>
        <div style={{ width:30, height:30, borderRadius:15, background:'#5a3b6b', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13, fontWeight:500 }}>A</div>
      </div>
    </div>
  );
}
function Tab({ name, active }) {
  return (
    <div style={{
      padding:'5px 12px', borderRadius:6, fontSize:13,
      background: active ? IS.charcoal : 'transparent',
      color: active ? IS.textWhite : IS.textGray,
      border: active ? `1px solid ${IS.charcoalLine}` : '1px solid transparent',
      fontWeight: active ? 500 : 400,
    }}>{name}</div>
  );
}
function RailSidebar() {
  const items = ['dashboard','calibration','governance','skills','admin','integrations','intel'];
  return (
    <div style={{ width:48, background:IS.bgDim, borderRight:`1px solid ${IS.charcoalLine}`, flexShrink:0, padding:'12px 0', display:'flex', flexDirection:'column', alignItems:'center', gap:14 }}>
      {items.map((k, i) => {
        const active = k === 'intel';
        return (
          <div key={i} style={{
            width:32, height:32, display:'flex', alignItems:'center', justifyContent:'center',
            color: active ? IS.green : IS.textDim,
            borderLeft: active ? `2px solid ${IS.green}` : '2px solid transparent',
            marginLeft: -2, paddingLeft: 2,
          }}>
            <RailIcon name={k} />
          </div>
        );
      })}
    </div>
  );
}
function RailIcon({ name }) {
  const c='currentColor', sw=1.5, s=16;
  switch(name) {
    case 'intel': return <svg width={s} height={s} viewBox="0 0 16 16" fill="none"><path d="M3 4h10v6H6l-3 3V4z" stroke={c} strokeWidth={sw} strokeLinejoin="round"/></svg>;
    case 'dashboard': return <svg width={s} height={s} viewBox="0 0 16 16" fill="none"><rect x="2" y="2" width="5" height="5" stroke={c} strokeWidth={sw}/><rect x="9" y="2" width="5" height="5" stroke={c} strokeWidth={sw}/><rect x="2" y="9" width="5" height="5" stroke={c} strokeWidth={sw}/><rect x="9" y="9" width="5" height="5" stroke={c} strokeWidth={sw}/></svg>;
    case 'calibration': return <svg width={s} height={s} viewBox="0 0 16 16" fill="none"><path d="M2 13L6 9L9 11L14 4" stroke={c} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round"/></svg>;
    case 'governance': return <svg width={s} height={s} viewBox="0 0 16 16" fill="none"><path d="M8 2L2 4v4c0 3.5 2.5 6 6 6s6-2.5 6-6V4L8 2z" stroke={c} strokeWidth={sw}/></svg>;
    case 'skills': return <svg width={s} height={s} viewBox="0 0 16 16" fill="none"><circle cx="8" cy="6" r="2" stroke={c} strokeWidth={sw}/><path d="M3 14c0-2.5 2.2-4 5-4s5 1.5 5 4" stroke={c} strokeWidth={sw}/></svg>;
    case 'admin': return <svg width={s} height={s} viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="2" stroke={c} strokeWidth={sw}/><circle cx="8" cy="8" r="6" stroke={c} strokeWidth={sw}/></svg>;
    case 'integrations': return <svg width={s} height={s} viewBox="0 0 16 16" fill="none"><circle cx="4" cy="8" r="2" stroke={c} strokeWidth={sw}/><circle cx="12" cy="4" r="2" stroke={c} strokeWidth={sw}/><circle cx="12" cy="12" r="2" stroke={c} strokeWidth={sw}/></svg>;
  }
}

// ─── Subtitles ────────────────────────────────────────────────
const SUBS = [
  { t: 0.5, end: 6.0,    text: "Alex is the CTO at Ledgerline." },
  { t: 6.2, end: 11.0,   text: "She runs her monthly review in fifteen minutes." },
  { t: 25.0, end: 30.0,  text: "She's typing the question she actually has," },
  { t: 30.2, end: 36.5,  text: "not picking from a menu of pre-built reports." },
  { t: 38.5, end: 44.0,  text: "The framework didn't run a SQL query." },
  { t: 44.2, end: 51.0,  text: "It synthesized the answer from four named agents — and shows her which ones." },
  { t: 83.0, end: 89.0,  text: "She asks a comparison. Platform versus compliance-suite." },
  { t: 89.2, end: 96.5,  text: "The framework knew what comparison meant because both projects share the same structure." },
  { t: 128.0, end: 133.5, text: "She drills into the blocked decision." },
  { t: 133.7, end: 139.5, text: "Twenty-one days. Three stories. Thirty-one thousand dollars per week." },
  { t: 139.7, end: 146.0, text: "Made visible because the framework knew the dependencies." },
  { t: 168.5, end: 174.0, text: "The data is real because the people generating it" },
  { t: 174.2, end: 179.0, text: "didn't have to instrument themselves to make it." },
];
function Subtitles() {
  const time = useTime();
  const active = SUBS.find(s => time >= s.t && time <= s.end);
  if (!active) return null;
  const words = active.text.split(' ');
  const lines = [];
  let cur = '';
  for (const w of words) {
    const next = cur ? cur + ' ' + w : w;
    if (next.length > 42) { lines.push(cur); cur = w; } else cur = next;
  }
  if (cur) lines.push(cur);
  return (
    <div style={{ position:'absolute', left:0, right:0, bottom:80, display:'flex', justifyContent:'center', pointerEvents:'none', zIndex:50 }}>
      <div style={{ background:'rgba(28, 30, 36, 0.78)', borderRadius:4, padding:'8px 14px', maxWidth:'70%' }}>
        {lines.map((l, i) => (
          <div key={i} style={{ fontFamily:T.sans, fontWeight:500, fontSize:22, color:'#fff', textAlign:'center', lineHeight:1.35 }}>{l}</div>
        ))}
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
// SCENE 1 — Open & ask (0-38s)
// ════════════════════════════════════════════════════════════════
function Scene1() {
  const time = useTime();
  const typeStart = 11;
  const sendT = 25;
  const fullQ = "what's the trajectory on technical debt this month";
  const typed = (() => {
    if (time < typeStart) return '';
    const elapsed = time - typeStart;
    const cps = 4.0;
    const n = Math.min(fullQ.length, Math.floor(elapsed * cps));
    return fullQ.slice(0, n);
  })();
  const submitted = time > sendT;
  const transition = time > 32;

  return (
    <ForgeShell url="forge.ledgerline.com/intelligence">
      <div style={{ position:'absolute', inset:0, background:IS.carbon, display:'flex', flexDirection:'column' }}>
        {/* persistent small input top after submit */}
        {transition && (
          <div style={{ padding:'18px 36px', borderBottom:`1px solid ${IS.charcoalLine}`, opacity: fade(time, 32, 0.4) }}>
            <div style={{ fontSize:20, color:IS.textWhite, fontWeight:500, marginBottom:14, letterSpacing:'-0.01em' }}>
              What's the trajectory on technical debt this month?
            </div>
            <div style={{ display:'inline-flex', alignItems:'center', gap:10, background:IS.charcoal, border:`1px solid ${IS.charcoalLine}`, borderRadius:6, padding:'8px 12px', minWidth:480, fontSize:13, color:IS.textDim }}>
              <span>Ask another…</span>
              <span style={{ marginLeft:'auto', color:IS.textDim }}>⌕</span>
            </div>
          </div>
        )}

        {/* Hero entry state */}
        {!transition && (
          <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', padding:'0 36px' }}>
            <div style={{ fontSize:32, fontWeight:500, color:IS.textWhite, marginBottom:32, letterSpacing:'-0.01em' }}>Ask the system.</div>

            <div style={{
              width:720, maxWidth:'90%', background:IS.charcoal,
              border: `${time >= typeStart ? 1.5 : 1}px solid ${time >= typeStart ? IS.blue : IS.charcoalLine}`,
              borderRadius:8, padding:'18px 20px', fontFamily:T.sans, fontSize:16,
              color: typed ? IS.textWhite : IS.textDim, minHeight:64, display:'flex', alignItems:'center',
            }}>
              {typed || 'What would you like to know?'}
              {time >= typeStart && !submitted && Math.floor(time*2)%2===0 && (
                <span style={{ display:'inline-block', width:2, height:18, background:IS.green, marginLeft:1 }} />
              )}
            </div>

            {!submitted && (
              <div style={{ display:'flex', gap:10, marginTop:20, flexWrap:'wrap', justifyContent:'center', maxWidth:720, opacity: typed ? 0.4 : 1, transition:'opacity 0.3s' }}>
                {['trajectory on technical debt','decisions blocking us','calibration trends','governance health'].map((s, i) => (
                  <div key={i} style={{
                    background:IS.charcoal, border:`1px solid ${IS.charcoalLine}`, borderLeft:`2px solid ${IS.green}`,
                    borderRadius:4, padding:'5px 10px', fontSize:12, color:IS.textGray, fontWeight:500,
                  }}>{s}</div>
                ))}
              </div>
            )}

            {submitted && time < 32 && (
              <div style={{ marginTop:32, display:'flex', flexDirection:'column', alignItems:'center', gap:10 }}>
                <div style={{ display:'flex', gap:6 }}>
                  {[0,1,2].map(i => (
                    <div key={i} style={{ width:7, height:7, borderRadius:4, background:IS.green,
                      opacity: 0.3 + 0.7 * (0.5 + 0.5 * Math.sin(time*5 - i*0.7)) }} />
                  ))}
                </div>
                <div style={{ fontSize:14, color:IS.textGray }}>synthesizing across 4 sources…</div>
              </div>
            )}
          </div>
        )}
      </div>
    </ForgeShell>
  );
}

// ════════════════════════════════════════════════════════════════
// SCENE 2 — Multi-source synthesis (38-83s)
// ════════════════════════════════════════════════════════════════
function Scene2({ sceneStart = 38 }) {
  const time = useTime();
  const chipT = sceneStart + 1;
  const ansT = sceneStart + 2.5;
  const sourcesHeaderT = sceneStart + 14;
  const s1 = sceneStart + 15;
  const s2 = sceneStart + 15.2;
  const s3 = sceneStart + 15.4;
  const s4 = sceneStart + 15.6;

  return (
    <ForgeShell url="forge.ledgerline.com/intelligence">
      <PersistentQuestion question="What's the trajectory on technical debt this month?" />
      <div style={{ padding:'24px 36px 32px', overflow:'auto', height:'calc(100% - 88px)' }}>
        <AFChip skill="synthesizing across 4 sources" start={chipT} />
        <div style={{ height:14 }} />

        <ISCard start={ansT} padding={26} style={{ marginBottom:20, maxWidth:960 }}>
          <div style={{ fontSize:16, color:IS.textWhite, fontWeight:500, marginBottom:6 }}>Technical debt trajectory · last 30 days</div>
          <div style={{ height:1, background:IS.charcoalLine, margin:'10px 0 18px' }} />

          <div style={{ fontSize:14, color:IS.textWhite, marginBottom:14 }}>Investment balance has drifted:</div>
          <div style={{ display:'flex', flexDirection:'column', gap:14, marginBottom:18 }}>
            <BarRow label="features" pct={78} target={60} positive={false} note="over target" />
            <BarRow label="debt" pct={9} target={25} positive={false} note="under target" negative />
            <BarRow label="infrastructure" pct={13} target={15} positive={true} note="near target" />
          </div>

          <div style={{ height:1, background:IS.charcoalLine, margin:'4px 0 16px' }} />

          <div style={{ fontSize:14, color:IS.textWhite, lineHeight:1.65, marginBottom:14 }}>
            Debt allocation went from <span style={{ fontWeight:500 }}>22% to 9%</span> over 4 weeks. Two events explain the drift:
          </div>
          <ul style={{ margin:0, paddingLeft:0, listStyle:'none', display:'flex', flexDirection:'column', gap:14 }}>
            <li>
              <div style={{ fontSize:14, color:IS.textWhite, fontWeight:500, marginBottom:3 }}>· Churn-reduction priority surge (week 1)</div>
              <div style={{ fontSize:13, color:IS.textGray, paddingLeft:14, lineHeight:1.55 }}>Q2 retention initiative consumed planned debt-allocation capacity</div>
            </li>
            <li>
              <div style={{ fontSize:14, color:IS.textWhite, fontWeight:500, marginBottom:3 }}>· SOC2 deadline pressure (week 4)</div>
              <div style={{ fontSize:13, color:IS.textGray, paddingLeft:14, lineHeight:1.55 }}>Compliance work crowded out platform debt remediation</div>
            </li>
          </ul>
        </ISCard>

        <div style={{ maxWidth:960 }}>
          <div style={{ fontSize:14, color:IS.textWhite, fontWeight:500, marginBottom:12, opacity: fade(time, sourcesHeaderT, 0.3) }}>Sources used in this answer</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:12 }}>
            <SourceCard start={s1} agent="Strategy Engineer" skill="investment-balance-analysis" supplied="% allocations vs targets" />
            <SourceCard start={s2} agent="Calibration Engineer" skill="delivery-velocity-analysis" supplied="velocity, story counts, ratios" />
            <SourceCard start={s3} agent="Decision graph" skill="blocked-items-analysis" supplied="blocking-cost correlation" />
            <SourceCard start={s4} agent="Governance Engine" skill="rule-fire-analysis" supplied="rule fires per week, waiver patterns" />
          </div>
        </div>
      </div>
    </ForgeShell>
  );
}

function PersistentQuestion({ question }) {
  return (
    <div style={{ padding:'18px 36px', borderBottom:`1px solid ${IS.charcoalLine}` }}>
      <div style={{ fontSize:20, color:IS.textWhite, fontWeight:500, marginBottom:12, letterSpacing:'-0.01em' }}>{question}</div>
      <div style={{ display:'inline-flex', alignItems:'center', gap:10, background:IS.charcoal, border:`1px solid ${IS.charcoalLine}`, borderRadius:6, padding:'7px 12px', minWidth:480, fontSize:13, color:IS.textDim }}>
        <span>Ask another…</span>
        <span style={{ marginLeft:'auto' }}>⌕</span>
      </div>
    </div>
  );
}

function BarRow({ label, pct, target, note, negative }) {
  return (
    <div>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5, fontSize:13 }}>
        <span style={{ color:IS.textWhite }}>{label}</span>
        <span style={{ color:IS.textWhite, fontFamily:T.mono }}>{pct}% <span style={{ color:IS.textGray }}>(target {target}%)</span></span>
      </div>
      <div style={{ position:'relative', height:6, background:'#2a2d35', borderRadius:3 }}>
        <div style={{ position:'absolute', left:0, top:0, bottom:0, width:`${pct}%`, background: negative ? IS.red : IS.green, borderRadius:3 }} />
        <div style={{ position:'absolute', left:`${target}%`, top:-2, bottom:-2, width:1, background:IS.textWhite }} />
      </div>
      <div style={{ marginTop:4, fontSize:11, color: negative ? IS.red : IS.textGray, fontStyle:'italic' }}>{note}</div>
    </div>
  );
}
function SourceCard({ agent, skill, supplied, start }) {
  return (
    <ISCard start={start} padding={14} style={{}}>
      <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:8 }}>
        <span style={{ width:6, height:6, borderRadius:3, background:IS.green }} />
        <span style={{ fontSize:13, color:IS.textWhite, fontWeight:500 }}>{agent}</span>
      </div>
      <div style={{ fontSize:11, fontFamily:T.mono, color:IS.textGray, marginBottom:10, lineHeight:1.4 }}>{skill}</div>
      <div style={{ height:1, background:IS.charcoalLine, marginBottom:10 }} />
      <div style={{ fontSize:11, color:IS.textDim, marginBottom:3 }}>— supplied</div>
      <div style={{ fontSize:12, color:IS.textGray, lineHeight:1.45 }}>{supplied}</div>
    </ISCard>
  );
}

// ════════════════════════════════════════════════════════════════
// SCENE 3 — Comparison (83-128s)
// ════════════════════════════════════════════════════════════════
function Scene3({ sceneStart = 83 }) {
  const time = useTime();
  const chipT = sceneStart + 6;
  const titleT = sceneStart + 6.5;
  const lT = sceneStart + 8;
  const rT = sceneStart + 8.2;
  const interpT = sceneStart + 22;
  const showTyping = time < sceneStart + 5.5;

  // typing in persistent input
  const fullQ = 'how does platform compare to compliance-suite on decision velocity';
  const typeStart = sceneStart + 0.5;
  const typed = (() => {
    if (time < typeStart) return '';
    const elapsed = time - typeStart;
    const n = Math.min(fullQ.length, Math.floor(elapsed * 17));
    return fullQ.slice(0, n);
  })();

  return (
    <ForgeShell url="forge.ledgerline.com/intelligence">
      <div style={{ padding:'18px 36px', borderBottom:`1px solid ${IS.charcoalLine}` }}>
        <div style={{ fontSize:20, color:IS.textWhite, fontWeight:500, marginBottom:12, opacity: showTyping ? 0.4 : 1 }}>
          {showTyping ? "What's the trajectory on technical debt this month?" : 'How does platform compare to compliance-suite on decision velocity?'}
        </div>
        <div style={{ display:'inline-flex', alignItems:'center', gap:10, background:IS.charcoal, border:`1.5px solid ${showTyping ? IS.blue : IS.charcoalLine}`, borderRadius:6, padding:'7px 12px', minWidth:560, fontSize:13, color: typed ? IS.textWhite : IS.textDim }}>
          <span>{typed || 'Ask another…'}</span>
          {showTyping && Math.floor(time*2)%2===0 && <span style={{ width:1.5, height:14, background:IS.green }} />}
          <span style={{ marginLeft:'auto', color:IS.textDim }}>⌕</span>
        </div>
      </div>

      <div style={{ padding:'24px 36px 32px', overflow:'auto', height:'calc(100% - 88px)' }}>
        {time > chipT - 0.3 && (
          <>
            <AFChip skill="cross-project comparison" start={chipT} />
            <div style={{ height:14 }} />
            <div style={{ fontSize:18, color:IS.textWhite, fontWeight:500, marginBottom:18, opacity: fade(time, titleT, 0.3) }}>
              Decision velocity · platform vs compliance-suite · last 30 days
            </div>

            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:24, maxWidth:960 }}>
              <ProjectCol start={lT} project="platform" archetype="legacy modernization" rows={[
                ['Decisions recorded this month', '12'],
                ['Avg time to decision', '3.2 days'],
                ['Currently blocked', { val: '2', color: IS.amber, sub: ['DECISION-019 · 21d', 'DECISION-024 · 4d'] }],
                ['Cost of delay', { val: '$31K/week', color: IS.red }],
              ]} />
              <ProjectCol start={rT} project="compliance-suite" archetype="greenfield" rows={[
                ['Decisions recorded this month', '8'],
                ['Avg time to decision', '1.4 days'],
                ['Currently blocked', '0'],
                ['Cost of delay', { val: '$0', color: IS.green }],
              ]} />
            </div>

            <div style={{ height:18 }} />

            <ISCard start={interpT} accent={IS.blue} padding={20} style={{ maxWidth:960 }}>
              <div style={{ fontSize:14, color:IS.textWhite, fontWeight:500, marginBottom:10 }}>Why the difference</div>
              <div style={{ height:1, background:IS.charcoalLine, marginBottom:14 }} />
              <div style={{ fontSize:14, color:IS.textWhite, lineHeight:1.65, marginBottom:12 }}>
                Compliance-suite is greenfield; platform is legacy modernization. Greenfield decisions have fewer existing constraints to navigate.
              </div>
              <div style={{ fontSize:14, color:IS.textWhite, lineHeight:1.65, marginBottom:12 }}>
                The platform team's blocked decisions both involve cross-team dependencies (caching strategy, vendor selection). These would block any team, AI-augmented or not.
              </div>
              <div style={{ fontSize:14, color:IS.textWhite, lineHeight:1.65 }}>
                <span style={{ color:IS.textGray }}>The framework's value here: </span>surfacing the cumulative cost so leadership knows when to escalate.
              </div>
            </ISCard>
          </>
        )}
      </div>
    </ForgeShell>
  );
}
function ProjectCol({ project, archetype, rows, start }) {
  return (
    <ISCard start={start} padding={20}>
      <div style={{ fontSize:15, color:IS.textWhite, fontWeight:500 }}>{project}</div>
      <div style={{ fontSize:12, color:IS.textGray, marginBottom:12 }}>{archetype}</div>
      <div style={{ height:1, background:IS.charcoalLine, marginBottom:14 }} />
      <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
        {rows.map(([label, val], i) => {
          const v = typeof val === 'string' ? { val } : val;
          return (
            <div key={i}>
              <div style={{ fontSize:12, color:IS.textGray, marginBottom:3 }}>{label}</div>
              <div style={{ fontSize:18, color: v.color || IS.textWhite, fontWeight:500, letterSpacing:'-0.01em' }}>{v.val}</div>
              {v.sub && v.sub.map((s, j) => (
                <div key={j} style={{ fontSize:11, color:IS.textGray, fontFamily:T.mono, marginTop:2 }}>{s}</div>
              ))}
            </div>
          );
        })}
      </div>
    </ISCard>
  );
}

// ════════════════════════════════════════════════════════════════
// SCENE 4 — Decision graph drill-down (128-168s)
// ════════════════════════════════════════════════════════════════
function Scene4({ sceneStart = 128 }) {
  const time = useTime();
  const graphT = sceneStart + 5;
  const sideT = sceneStart + 7;
  return (
    <ForgeShell url="forge.ledgerline.com/intelligence/decision/DECISION-019">
      <div style={{ padding:'18px 36px', borderBottom:`1px solid ${IS.charcoalLine}` }}>
        <div style={{ fontSize:13, color:IS.textGray, marginBottom:6 }}>
          <span style={{ color:IS.textGray }}>Intelligence</span>
          <span style={{ margin:'0 8px', color:IS.textDim }}>›</span>
          <span style={{ fontFamily:T.mono, color:IS.textWhite }}>DECISION-019</span>
        </div>
        <div style={{ fontSize:22, color:IS.textWhite, fontWeight:500, letterSpacing:'-0.01em' }}>DECISION-019 · caching strategy</div>
      </div>

      <div style={{ padding:'24px 36px 32px', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap:24, height:'calc(100% - 95px)', overflow:'auto' }}>
        <div style={{ opacity: fade(time, graphT, 0.4), transform:`translateY(${slideUp(time, graphT, 0.4, 8)}px)` }}>
          <ISCard start={graphT - 0.1} padding={20} style={{ height:520 }}>
            <DecisionGraph />
            <div style={{ marginTop:18 }}>
              <div style={{ fontSize:12, color:IS.textGray, marginBottom:8 }}>21 days pending</div>
              <div style={{ display:'flex', gap:2, flexWrap:'wrap' }}>
                {Array.from({length:21}).map((_, i) => (
                  <div key={i} style={{ width:14, height:8, borderRadius:1.5, background: i >= 16 ? IS.red : '#3a3d45' }} />
                ))}
              </div>
            </div>
          </ISCard>
        </div>

        <ISCard start={sideT} accent={IS.green} padding={22}>
          <div style={{ fontSize:15, color:IS.textWhite, fontWeight:500 }}>DECISION-019 · caching strategy</div>
          <div style={{ height:1, background:IS.charcoalLine, margin:'12px 0 16px' }} />

          <div style={{ display:'flex', flexDirection:'column', gap:10, marginBottom:18 }}>
            <KV k="Pending" v="21 days" />
            <KV k="Blocking" v="3 stories" />
            <KV k="Cumulative cost" v={<span style={{ color:IS.red, fontWeight:500 }}>$31K/week</span>} />
            <KV k="Total cost to date" v={<span style={{ color:IS.red, fontWeight:500, fontSize:16 }}>$93K <span style={{ fontSize:12, color:IS.textGray, fontWeight:400 }}>(3 weeks × $31K)</span></span>} />
          </div>

          <div style={{ height:1, background:IS.charcoalLine, marginBottom:16 }} />

          <div style={{ fontSize:12, color:IS.textGray, marginBottom:8 }}>Owner</div>
          <div style={{ fontSize:14, color:IS.textWhite, fontFamily:T.mono, marginBottom:14 }}>USER-priya</div>

          <div style={{ display:'flex', flexDirection:'column', gap:6, marginBottom:14, fontSize:12, color:IS.textGray }}>
            <div>Assigned <span style={{ color:IS.textWhite }}>14 days ago</span></div>
            <div>Last activity <span style={{ color:IS.textWhite }}>4 days ago</span></div>
          </div>

          <div style={{ background:IS.bgDim, border:`1px solid ${IS.charcoalLine}`, borderRadius:6, padding:'10px 12px', fontSize:13, color:IS.textGray, lineHeight:1.55, marginBottom:18 }}>
            Carlos commented: <span style={{ color:IS.textWhite, fontStyle:'italic' }}>"memcached vs redis comparison ready, can we decide?"</span>
          </div>

          <div style={{ fontSize:13, color:IS.textWhite, fontWeight:500, marginBottom:10 }}>Suggested actions</div>
          <ul style={{ margin:0, paddingLeft:18, fontSize:13, color:IS.textWhite, lineHeight:1.7 }}>
            <li>Force a recommendation now <span style={{ color:IS.textGray }}>(BullMQ side has a viable interim cache)</span></li>
            <li>Accept temporary memory cache, defer strategic caching to Q3</li>
            <li>Escalate to architecture review</li>
          </ul>
        </ISCard>
      </div>
    </ForgeShell>
  );
}

function KV({ k, v }) {
  return (
    <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:14 }}>
      <span style={{ fontSize:13, color:IS.textGray }}>{k}</span>
      <span style={{ fontSize:14, color:IS.textWhite }}>{v}</span>
    </div>
  );
}

function DecisionGraph() {
  const time = useTime();
  const pulse = 0.6 + 0.4 * (0.5 + 0.5 * Math.sin(time * 4));
  // Layout: center DECISION-019 node, 2 upstream above-left, 3 downstream below
  return (
    <svg width="100%" height="380" viewBox="0 0 520 380" style={{ overflow:'visible' }}>
      {/* edges */}
      <line x1="120" y1="80"  x2="260" y2="180" stroke="#a0a4ab" strokeWidth="1" opacity="0.6" />
      <line x1="380" y1="80"  x2="260" y2="180" stroke="#a0a4ab" strokeWidth="1" opacity="0.6" />
      <line x1="260" y1="180" x2="100" y2="320" stroke="#a0a4ab" strokeWidth="1" opacity="0.6" />
      <line x1="260" y1="180" x2="260" y2="320" stroke="#a0a4ab" strokeWidth="1" opacity="0.6" />
      <line x1="260" y1="180" x2="420" y2="320" stroke="#a0a4ab" strokeWidth="1" opacity="0.6" />

      {/* upstream nodes */}
      <g transform="translate(80, 60)"><GraphNode label="STORY-044" w={80} small /></g>
      <g transform="translate(340, 60)"><GraphNode label="REQ-022" w={80} small /></g>

      {/* center decision */}
      <g transform="translate(195, 162)"><GraphNode label="DECISION-019" w={130} center /></g>

      {/* downstream blocked */}
      <g transform="translate(60, 300)" opacity={pulse}><GraphNode label="STORY-044" w={80} blocked /></g>
      <g transform="translate(220, 300)" opacity={pulse}><GraphNode label="STORY-058" w={80} blocked /></g>
      <g transform="translate(380, 300)" opacity={pulse}><GraphNode label="STORY-061" w={80} blocked /></g>
    </svg>
  );
}
function GraphNode({ label, w, center, small, blocked }) {
  const h = center ? 36 : 28;
  return (
    <g>
      <rect width={w} height={h} rx="6"
        fill={blocked ? 'rgba(255,107,107,0.6)' : '#1c1e24'}
        stroke={center ? '#ff6b6b' : (blocked ? '#ff6b6b' : '#2a2d35')}
        strokeWidth={center ? 1.2 : 1} />
      <text x={w/2} y={h/2 + 4} textAnchor="middle"
        fill={blocked ? '#fff' : '#fff'}
        fontSize={center ? 13 : 11} fontFamily="JetBrains Mono, monospace" fontWeight={center ? 500 : 400}>
        {label}
      </text>
    </g>
  );
}

// ════════════════════════════════════════════════════════════════
// SCENE 5 — Closing card (168-180s)
// ════════════════════════════════════════════════════════════════
function Scene5({ sceneStart = 168 }) {
  const time = useTime();
  const a = fade(time, sceneStart + 0.3, 0.7);
  const b = fade(time, sceneStart + 1.8, 0.7);
  const c = fade(time, sceneStart + 3.0, 0.7);
  const bgO = fade(time, sceneStart, 0.6);
  return (
    <div style={{ position:'absolute', inset:0, background:IS.carbon, color:IS.textWhite, fontFamily:T.sans, display:'flex', alignItems:'center', justifyContent:'center', textAlign:'center' }}>
      <div style={{ position:'absolute', inset:0, background:'url(/assets/images/bg_hero.jpg) center/cover no-repeat', opacity:bgO }} />
      <div style={{ position:'relative', display:'flex', flexDirection:'column', alignItems:'center', gap:50, textShadow:'0 2px 12px rgba(0,0,0,0.7)' }}>
        <div style={{ fontSize:28, fontWeight:300, color:IS.textWhite, lineHeight:1.55, opacity:a, transform:`translateY(${(1-a)*8}px)` }}>
          Alex asked four questions.<br/>
          She got four real answers.<br/>
          She didn't write a SQL query.<br/>
          She didn't open a BI tool.
        </div>
        <div style={{ fontSize:28, fontWeight:300, color:IS.textWhite, lineHeight:1.5, opacity:b, transform:`translateY(${(1-b)*8}px)` }}>
          <span style={{ ...gradientStyle, fontWeight:500 }}>The data is real</span> because the people<br/>
          generating it didn't have to<br/>
          instrument themselves to make it.
        </div>
      </div>
      <div style={{ position:'absolute', bottom:80, left:0, right:0, display:'flex', flexDirection:'column', alignItems:'center', gap:24, opacity:c }}>
        <span style={{ fontSize:19, fontWeight:500, ...gradientStyle }}>Agentic Forge</span>
        <img src="/assets/logo.svg" alt="Quantivex" style={{ height:28, display:'block' }} />
      </div>
    </div>
  );
}

// ════════════════════════════════════════════════════════════════
function App() {
  return (
    <DemoStage duration={180} captions={[]}>
      <Sprite start={0}    end={38} ><Scene1 /></Sprite>
      <Sprite start={38}   end={83} ><Scene2 sceneStart={38} /></Sprite>
      <Sprite start={83}   end={128}><Scene3 sceneStart={83} /></Sprite>
      <Sprite start={128}  end={168}><Scene4 sceneStart={128} /></Sprite>
      <Sprite start={168}  end={180}><Scene5 sceneStart={168} /></Sprite>
      {/* <Subtitles /> — disabled: no voiceover. Re-enable when audio lands. */}
    </DemoStage>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);