// Scenes 6–9: MIT Risk Navigator (compact) · Risk → Law · Workspace · Close
const { useTime, useSprite, Easing, clamp, interpolate } = window;

const INK = '#070D16';
const INK_2 = '#0E1A2B';
const IVORY = '#F5F1E8';
const IVORY_DIM = 'rgba(245,241,232,0.62)';
const IVORY_DIMMER = 'rgba(245,241,232,0.38)';
const WINE = '#DC2626';
const GOLD = '#B79268';
const HAIRLINE = 'rgba(245,241,232,0.12)';
const FG1 = '#0E1A2B';
const FG2 = '#4A5260';
const FG3 = '#7C8494';
const BORDER_LIGHT = 'rgba(14,26,43,0.10)';

function S69_Eyebrow({ children, delay = 0, color = WINE }) {
  const { localTime } = useSprite();
  const t = clamp((localTime - delay) / 0.5, 0, 1);
  return (
    <div style={{
      fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
      letterSpacing: '0.18em', textTransform: 'uppercase', color,
      opacity: t, transform: `translateY(${(1 - t) * 6}px)`,
    }}>{children}</div>
  );
}

function S69_FadeUp({ children, delay = 0, dur = 0.6, y = 14, style = {} }) {
  const { localTime } = useSprite();
  const t = Easing.easeOutQuart(clamp((localTime - delay) / dur, 0, 1));
  return <div style={{ opacity: t, transform: `translateY(${(1 - t) * y}px)`, ...style }}>{children}</div>;
}

// ─────────────────────────────────────────────────────────────
// Scene 6 · MIT AI Risk Navigator — compact, less jargon
// ─────────────────────────────────────────────────────────────
window.Scene6MITNavigator = function Scene6MITNavigator() {
  const { localTime } = useSprite();

  const DOMAINS = [
    { n: 1, name: 'Discrimination & toxicity' },
    { n: 2, name: 'Privacy & security' },
    { n: 3, name: 'Misinformation' },
    { n: 4, name: 'Malicious use' },
    { n: 5, name: 'Human–AI interaction' },
    { n: 6, name: 'Socioeconomic harms' },
    { n: 7, name: 'AI safety & limits' },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      padding: '70px 110px', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <S69_Eyebrow delay={0}>Risk lens</S69_Eyebrow>
          <S69_FadeUp delay={0.2} style={{ marginTop: 14 }}>
            <div style={{
              fontFamily: '"EB Garamond", Georgia, serif', fontSize: 52,
              color: IVORY, letterSpacing: '-0.02em', lineHeight: 1.05,
              maxWidth: 900,
            }}>The MIT AI Risk<br/><span style={{ fontStyle: 'italic', color: GOLD }}>Navigator.</span></div>
          </S69_FadeUp>
        </div>
        <S69_FadeUp delay={0.4}>
          <div style={{ textAlign: 'right' }}>
            <div style={{
              fontFamily: '"EB Garamond", Georgia, serif', fontSize: 56, color: IVORY,
              lineHeight: 1, letterSpacing: '-0.02em',
            }}>1,725</div>
            <div style={{
              fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, color: IVORY_DIMMER,
              letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 6,
            }}>coded risks · 7 domains</div>
          </div>
        </S69_FadeUp>
      </div>

      {/* 7 horizontal domain bars */}
      <div style={{ marginTop: 48, display: 'flex', flexDirection: 'column', gap: 14 }}>
        {DOMAINS.map((d, i) => {
          const delay = 0.6 + i * 0.13;
          const t = Easing.easeOutQuart(clamp((localTime - delay) / 0.5, 0, 1));
          const drawn = Easing.easeInOutCubic(clamp((localTime - delay - 0.15) / 0.7, 0, 1));
          // mock relative count — domain 1 (discrimination) and 2 (privacy) tend to be largest
          const widths = [88, 92, 70, 64, 52, 58, 76];
          const w = widths[i];
          return (
            <div key={i} style={{
              opacity: t, transform: `translateX(${(1 - t) * -10}px)`,
              display: 'grid', gridTemplateColumns: '40px 1fr 240px',
              alignItems: 'center', gap: 20,
              paddingBottom: 10, borderBottom: `1px solid ${HAIRLINE}`,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 12,
                color: GOLD, letterSpacing: '0.12em',
              }}>0{d.n}</div>
              <div style={{
                fontFamily: '"EB Garamond", Georgia, serif', fontSize: 22,
                color: IVORY, lineHeight: 1.2, letterSpacing: '-0.01em',
              }}>{d.name}</div>
              <div style={{ position: 'relative', height: 4, background: 'rgba(255,255,255,0.06)' }}>
                <div style={{
                  position: 'absolute', left: 0, top: 0, bottom: 0,
                  width: `${w * drawn}%`,
                  background: i === 0 ? WINE : GOLD,
                  opacity: i === 0 ? 1 : 0.5,
                }} />
              </div>
            </div>
          );
        })}
      </div>

      <S69_FadeUp delay={2.0} dur={0.6} style={{ marginTop: 24 }}>
        <div style={{
          fontFamily: 'Merriweather, Georgia, serif', fontSize: 13, color: IVORY_DIM,
          maxWidth: 720, lineHeight: 1.55,
        }}>
          Plus a causal taxonomy of <span style={{ color: IVORY }}>who, when, why</span>. Every finding maps to a normalized cell.
        </div>
      </S69_FadeUp>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Scene 7 · Regulatory Web — interconnected network of laws + risks
// Echoes the logo's mesh sphere: laws are nodes; edges show how
// each AI risk hits multiple jurisdictions, and how laws cross-reference.
// ─────────────────────────────────────────────────────────────
window.Scene7Crossmap = function Scene7Crossmap() {
  const { localTime } = useSprite();

  // Network in normalized 0–1000 × 0–560 space.
  // Inner ring = three risk anchors; outer ring = jurisdictional nodes.
  // Cross-edges between outer nodes show that laws reference each other
  // (NIST safe harbor in TRAIGA, GDPR/EU-AI-Act overlap, NYC LL144 ↔ CO AI Act, etc.)
  const RISKS = [
    { id: 'r1', x: 500, y: 200, label: 'Hiring discrimination', sub: 'MIT 1.1' },
    { id: 'r2', x: 380, y: 360, label: 'Privacy & ADM',          sub: 'MIT 2.x' },
    { id: 'r3', x: 620, y: 360, label: 'Transparency',           sub: 'MIT 5.x' },
  ];

  const LAWS = [
    { id: 'eu',     x: 220,  y: 100, region: 'EU',  name: 'EU AI Act · Art. 9–15' },
    { id: 'gdpr',   x: 130,  y: 280, region: 'EU',  name: 'GDPR Art. 22 / 35' },
    { id: 'co',     x: 220,  y: 470, region: 'CO',  name: 'Colorado AI Act' },
    { id: 'tx',     x: 410,  y: 510, region: 'TX',  name: 'TRAIGA · HB 149' },
    { id: 'il',     x: 590,  y: 510, region: 'IL',  name: 'Illinois HB 3773' },
    { id: 'nyc',    x: 780,  y: 470, region: 'NY',  name: 'NYC Local Law 144' },
    { id: 'ca',     x: 870,  y: 280, region: 'CA',  name: 'AB 2013 · SB 942' },
    { id: 'fda',    x: 780,  y: 100, region: 'FDA', name: 'FDA · AI/ML SaMD' },
    { id: 'nist',   x: 500,  y: 60,  region: 'STD', name: 'NIST AI RMF 1.0' },
    { id: 'iso',    x: 500,  y: 540, region: 'STD', name: 'ISO/IEC 42001' },
  ];

  // Edges: risk ↔ law (primary, wine), and law ↔ law cross-reference (gold thin)
  const RISK_EDGES = [
    // r1 hiring discrimination
    ['r1', 'eu'], ['r1', 'co'], ['r1', 'il'], ['r1', 'nyc'], ['r1', 'tx'],
    // r2 privacy / ADM
    ['r2', 'gdpr'], ['r2', 'ca'], ['r2', 'co'], ['r2', 'eu'],
    // r3 transparency
    ['r3', 'ca'], ['r3', 'eu'], ['r3', 'fda'], ['r3', 'nist'],
  ];
  // cross-references between regulations / standards
  const LAW_EDGES = [
    ['nist', 'tx'],     // TRAIGA safe harbor cites NIST
    ['nist', 'iso'],    // crosswalk
    ['iso',  'eu'],     // EU AI Act references harmonised standards
    ['gdpr', 'eu'],
    ['gdpr', 'ca'],
    ['co',   'nyc'],    // similar AEDT scope
    ['nist', 'co'],
    ['fda',  'nist'],
  ];

  const allNodes = {};
  RISKS.forEach(r => allNodes[r.id] = r);
  LAWS.forEach(l => allNodes[l.id] = l);

  // Edge animation: cross-references draw in first (background mesh),
  // then risk-edges stab outward.
  const meshStart = 0.3;
  const meshStagger = 0.05;
  const meshDur = 0.6;

  const riskStart = 1.4;
  const riskStagger = 0.06;
  const riskDur = 0.55;

  // pulse along risk edges (the "live mapping" feel)
  const pulseSpeed = 0.55;

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      padding: '50px 80px 40px', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <S69_Eyebrow delay={0}>Regulatory Web</S69_Eyebrow>
          <S69_FadeUp delay={0.15} style={{ marginTop: 10 }}>
            <div style={{
              fontFamily: '"EB Garamond", Georgia, serif', fontSize: 38,
              color: IVORY, letterSpacing: '-0.02em', lineHeight: 1.06,
              whiteSpace: 'nowrap',
            }}>Every risk, mapped to <span style={{ fontStyle: 'italic', color: GOLD }}>every applicable rule.</span></div>
          </S69_FadeUp>
        </div>
        <S69_FadeUp delay={0.4}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 14, height: 1.5, background: WINE }}/>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: IVORY_DIMMER, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>risk → law</div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div style={{ width: 14, height: 1, background: GOLD, opacity: 0.7 }}/>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: IVORY_DIMMER, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>cross-reference</div>
            </div>
          </div>
        </S69_FadeUp>
      </div>

      <div style={{ position: 'relative', flex: 1, marginTop: 6 }}>
        <svg viewBox="0 0 1000 560" preserveAspectRatio="xMidYMid meet"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          {/* faint outer ring like the logo sphere */}
          <ellipse cx="500" cy="290" rx="420" ry="240" fill="none"
            stroke={GOLD} strokeWidth="0.4" strokeDasharray="2 6" opacity="0.18"/>
          <ellipse cx="500" cy="290" rx="320" ry="180" fill="none"
            stroke={GOLD} strokeWidth="0.4" strokeDasharray="1 5" opacity="0.12"/>

          {/* Cross-reference mesh edges (gold, drawn first) */}
          {LAW_EDGES.map((e, i) => {
            const a = allNodes[e[0]], b = allNodes[e[1]];
            const d = meshStart + i * meshStagger;
            const t = Easing.easeInOutCubic(clamp((localTime - d) / meshDur, 0, 1));
            const len = Math.hypot(b.x - a.x, b.y - a.y);
            return (
              <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                stroke={GOLD} strokeWidth="0.7" opacity={0.55 * t}
                strokeDasharray={len} strokeDashoffset={(1 - t) * len}/>
            );
          })}

          {/* Risk edges (wine, primary) */}
          {RISK_EDGES.map((e, i) => {
            const a = allNodes[e[0]], b = allNodes[e[1]];
            const d = riskStart + i * riskStagger;
            const t = Easing.easeInOutCubic(clamp((localTime - d) / riskDur, 0, 1));
            const len = Math.hypot(b.x - a.x, b.y - a.y);
            return (
              <line key={i} x1={a.x} y1={a.y} x2={b.x} y2={b.y}
                stroke={WINE} strokeWidth="1.1" opacity={0.85 * t}
                strokeDasharray={len} strokeDashoffset={(1 - t) * len}/>
            );
          })}

          {/* Law nodes */}
          {LAWS.map((l, i) => {
            const d = 0.5 + i * 0.07;
            const t = Easing.easeOutQuart(clamp((localTime - d) / 0.5, 0, 1));
            return (
              <g key={l.id} opacity={t} transform={`translate(${l.x}, ${l.y})`}>
                <circle r="6" fill={INK} stroke={GOLD} strokeWidth="1.4"/>
                <circle r="2.4" fill={GOLD}/>
              </g>
            );
          })}

          {/* Risk nodes (larger, central, wine) */}
          {RISKS.map((r, i) => {
            const d = 0.2 + i * 0.12;
            const t = Easing.easeOutQuart(clamp((localTime - d) / 0.6, 0, 1));
            return (
              <g key={r.id} opacity={t} transform={`translate(${r.x}, ${r.y})`}>
                <circle r="14" fill={INK} stroke={WINE} strokeWidth="1.4"/>
                <circle r="6" fill={WINE}/>
              </g>
            );
          })}
        </svg>

        {/* HTML labels positioned over the SVG (% of viewBox) */}
        {LAWS.map((l, i) => {
          const d = 0.5 + i * 0.07 + 0.2;
          const t = Easing.easeOutQuart(clamp((localTime - d) / 0.5, 0, 1));
          // anchor labels left/right of node based on which half they're in
          const onLeft = l.x < 500;
          const xPct = (l.x / 1000) * 100;
          const yPct = (l.y / 560) * 100;
          return (
            <div key={l.id} style={{
              position: 'absolute',
              left: `calc(${xPct}% + ${onLeft ? -14 : 14}px)`,
              top: `${yPct}%`,
              transform: `translate(${onLeft ? '-100%' : '0'}, -50%)`,
              opacity: t,
              display: 'flex', flexDirection: 'column', alignItems: onLeft ? 'flex-end' : 'flex-start',
              gap: 2, pointerEvents: 'none', maxWidth: 180,
            }}>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: GOLD, letterSpacing: '0.12em',
                padding: '2px 6px', border: `1px solid ${GOLD}`,
              }}>{l.region}</div>
              <div style={{
                fontFamily: 'Merriweather, Georgia, serif', fontSize: 12, fontWeight: 500,
                color: IVORY, lineHeight: 1.2,
                textAlign: onLeft ? 'right' : 'left',
                whiteSpace: 'nowrap',
              }}>{l.name}</div>
            </div>
          );
        })}

        {/* Risk labels — placed below each node */}
        {RISKS.map((r, i) => {
          const d = 0.2 + i * 0.12 + 0.3;
          const t = Easing.easeOutQuart(clamp((localTime - d) / 0.5, 0, 1));
          const xPct = (r.x / 1000) * 100;
          const yPct = (r.y / 560) * 100;
          return (
            <div key={r.id} style={{
              position: 'absolute',
              left: `${xPct}%`, top: `calc(${yPct}% + 22px)`,
              transform: 'translateX(-50%)',
              opacity: t,
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2,
              pointerEvents: 'none',
            }}>
              <div style={{
                fontFamily: '"EB Garamond", Georgia, serif', fontSize: 14,
                color: IVORY, letterSpacing: '-0.01em',
                whiteSpace: 'nowrap',
              }}>{r.label}</div>
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: WINE, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>{r.sub}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Scene 7.5 · Due Diligence Findings — risks discovered with citations
// ─────────────────────────────────────────────────────────────
window.Scene75Findings = function Scene75Findings() {
  const { localTime } = useSprite();

  const FINDINGS = [
    {
      sev: 'HIGH',
      title: 'No bias audit on file for AEDT',
      vendor: 'HireVue',
      law: 'NYC LL 144 §20-871',
      cite: 'SOC 2 Type II · §IV.6 (silent on bias testing)',
      action: 'Request 2025 audit ↗',
    },
    {
      sev: 'HIGH',
      title: 'Training data summary missing',
      vendor: 'OpenAI · GPT-5',
      law: 'CA AB 2013 · EU AI Act Art. 53',
      cite: 'GPT-5 System Card · §3.1',
      action: 'Open RFI ↗',
    },
    {
      sev: 'MED',
      title: 'Sub-processor list outdated 11 mo',
      vendor: 'Anthropic',
      law: 'GDPR Art. 28',
      cite: 'DPA · Annex II · last revised Jun 2025',
      action: 'Trigger DPA refresh ↗',
    },
    {
      sev: 'MED',
      title: 'No DPIA for high-risk deployment',
      vendor: 'Glean · Workplace AI',
      law: 'GDPR Art. 35 · ICO guidance',
      cite: 'CAIQ v4 · response §AIS-04 (n/a)',
      action: 'Draft DPIA ↗',
    },
    {
      sev: 'LOW',
      title: 'PCCP not documented for adaptive model',
      vendor: 'Internal · diagnostic AI',
      law: 'FDA Draft Guidance · Jan 2025',
      cite: 'Model card · §4.2',
      action: 'Note for Q3 review',
    },
  ];

  const sevColor = (s) => s === 'HIGH' ? WINE : s === 'MED' ? '#B79268' : '#7C8494';
  const sevBg = (s) => s === 'HIGH' ? 'rgba(220, 38, 38,0.12)' : s === 'MED' ? 'rgba(183,146,104,0.12)' : 'rgba(124,132,148,0.12)';

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      padding: '60px 90px', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
        <div style={{ minWidth: 0 }}>
          <S69_Eyebrow delay={0}>Due Diligence Findings</S69_Eyebrow>
          <S69_FadeUp delay={0.2} style={{ marginTop: 12 }}>
            <div style={{
              fontFamily: '"EB Garamond", Georgia, serif', fontSize: 42,
              color: IVORY, letterSpacing: '-0.02em', lineHeight: 1.08, maxWidth: 760,
            }}>Risks surfaced. <span style={{ fontStyle: 'italic', color: GOLD }}>Sources cited.</span></div>
          </S69_FadeUp>
        </div>
        <S69_FadeUp delay={0.4}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
            {[
              { c: WINE,      n: '7 high' },
              { c: '#B79268', n: '14 med' },
              { c: '#7C8494', n: '23 low' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                <div style={{ width: 7, height: 7, borderRadius: '50%', background: s.c }} />
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                  color: IVORY_DIMMER, letterSpacing: '0.12em', textTransform: 'uppercase',
                }}>{s.n}</div>
              </div>
            ))}
          </div>
        </S69_FadeUp>
      </div>

      {/* Findings table */}
      <div style={{ marginTop: 28, flex: 1, display: 'flex', flexDirection: 'column' }}>
        {/* Header row */}
        <S69_FadeUp delay={0.5} dur={0.5}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '70px 1.4fr 1fr 1fr 1.2fr',
            gap: 16,
            paddingBottom: 10,
            borderBottom: `1px solid ${HAIRLINE}`,
          }}>
            {['Severity', 'Finding', 'Vendor', 'Statute', 'Citation in source'].map((h, i) => (
              <div key={i} style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                color: IVORY_DIMMER, letterSpacing: '0.16em', textTransform: 'uppercase',
              }}>{h}</div>
            ))}
          </div>
        </S69_FadeUp>

        {FINDINGS.map((f, i) => {
          const d = 0.7 + i * 0.28;
          const t = Easing.easeOutQuart(clamp((localTime - d) / 0.5, 0, 1));
          // citation drop animation — small underline draws in after row appears
          const citeT = Easing.easeOutCubic(clamp((localTime - d - 0.3) / 0.4, 0, 1));
          return (
            <div key={i} style={{
              opacity: t, transform: `translateY(${(1 - t) * 10}px)`,
              display: 'grid',
              gridTemplateColumns: '70px 1.4fr 1fr 1fr 1.2fr',
              gap: 16,
              padding: '14px 0',
              borderBottom: `1px solid ${HAIRLINE}`,
              alignItems: 'center',
            }}>
              {/* Severity */}
              <div>
                <div style={{
                  display: 'inline-block',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 9, fontWeight: 600,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: sevColor(f.sev), background: sevBg(f.sev),
                  padding: '4px 8px',
                  border: `1px solid ${sevColor(f.sev)}`,
                }}>{f.sev}</div>
              </div>
              {/* Finding */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                <div style={{
                  fontFamily: 'Merriweather, Georgia, serif', fontSize: 14, fontWeight: 500,
                  color: IVORY, lineHeight: 1.3,
                }}>{f.title}</div>
                <div style={{
                  fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, color: GOLD,
                  letterSpacing: '0.02em',
                }}>{f.action}</div>
              </div>
              {/* Vendor */}
              <div style={{
                fontFamily: 'Merriweather, Georgia, serif', fontSize: 12, color: IVORY,
                lineHeight: 1.3,
              }}>{f.vendor}</div>
              {/* Statute */}
              <div style={{
                fontFamily: 'Merriweather, Georgia, serif', fontSize: 12, color: IVORY_DIM,
                lineHeight: 1.3,
              }}>{f.law}</div>
              {/* Citation — drawn underline mimics "linked to source" */}
              <div style={{ position: 'relative' }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                  color: IVORY_DIM, letterSpacing: '0.04em', lineHeight: 1.35,
                  paddingLeft: 14,
                  position: 'relative',
                }}>
                  {/* small "link" indicator */}
                  <div style={{
                    position: 'absolute', left: 0, top: 4, width: 8, height: 8,
                    borderTop: `1px solid ${GOLD}`, borderLeft: `1px solid ${GOLD}`,
                    opacity: citeT,
                  }} />
                  {f.cite}
                </div>
                {/* draw-in underline */}
                <div style={{
                  marginTop: 4, marginLeft: 14,
                  height: 1, background: GOLD,
                  width: `${citeT * 100}%`, opacity: 0.55,
                }} />
              </div>
            </div>
          );
        })}
      </div>

      {/* Footer note */}
      <S69_FadeUp delay={2.6} dur={0.6} style={{ marginTop: 14 }}>
        <div style={{
          fontFamily: 'Merriweather, Georgia, serif', fontSize: 12, color: IVORY_DIMMER,
          letterSpacing: '0.02em',
        }}>
          Every finding traces back to a clause, control, or system-card section in the Knowledge Vault.
        </div>
      </S69_FadeUp>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Scene 8 · Lenavix Workspace
// ─────────────────────────────────────────────────────────────
window.Scene8Workspace = function Scene8Workspace() {
  const { localTime } = useSprite();

  const MATTERS = [
    { id: 'AI-2410', vendor: 'Anthropic Claude · Sonnet',  domain: 'Privacy & security', status: 'MAPPED' },
    { id: 'AI-2411', vendor: 'OpenAI · GPT-5',              domain: 'Privacy & security', status: 'MAPPED' },
    { id: 'AI-2412', vendor: 'HireVue · AEDT',              domain: 'Discrimination',     status: 'REVIEW' },
    { id: 'AI-2413', vendor: 'Gong · Conversation AI',      domain: 'Privacy & security', status: 'MAPPED' },
    { id: 'AI-2414', vendor: 'Glean · Workplace AI',        domain: 'Privacy & security', status: 'MAPPED' },
  ];

  const SELECTED = 2;

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{
        height: 56, padding: '0 28px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        borderBottom: `1px solid ${HAIRLINE}`, background: INK_2,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{
            fontFamily: '"EB Garamond", Georgia, serif',
            fontSize: 18, color: IVORY, letterSpacing: '0.04em',
          }}>Lenavix</div>
          <div style={{ width: 1, height: 16, background: HAIRLINE }} />
          <div style={{
            fontFamily: 'Merriweather, Georgia, serif', fontSize: 12,
            color: IVORY_DIM, letterSpacing: '0.04em',
          }}>AI Vendor Diligence</div>
        </div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
          color: IVORY_DIMMER, letterSpacing: '0.16em', textTransform: 'uppercase',
        }}>workspace · live</div>
      </div>

      <div style={{ flex: 1, background: '#F5F1E8', display: 'grid', gridTemplateColumns: '420px 1fr' }}>
        {/* LEFT: matter list */}
        <div style={{
          borderRight: `1px solid ${BORDER_LIGHT}`,
          padding: '24px 0', display: 'flex', flexDirection: 'column',
          background: '#FAF7F1',
        }}>
          <div style={{ padding: '0 24px 16px' }}>
            <div style={{
              fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
              letterSpacing: '0.16em', textTransform: 'uppercase', color: WINE,
            }}>AI Vendor Matters · 47</div>
          </div>
          {MATTERS.map((m, i) => {
            const d = 0.3 + i * 0.12;
            const t = Easing.easeOutQuart(clamp((localTime - d) / 0.5, 0, 1));
            const sel = i === SELECTED;
            const statusFlip = clamp((localTime - 2.4 - i * 0.12) / 0.3, 0, 1);
            return (
              <div key={i} style={{
                opacity: t, transform: `translateX(${(1 - t) * -10}px)`,
                padding: '14px 24px',
                background: sel ? '#FFFFFF' : 'transparent',
                borderLeft: sel ? `2px solid ${WINE}` : '2px solid transparent',
                borderTop: i === 0 ? `1px solid ${BORDER_LIGHT}` : 'none',
                borderBottom: `1px solid ${BORDER_LIGHT}`,
                display: 'flex', flexDirection: 'column', gap: 6,
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    color: FG3, letterSpacing: '0.1em',
                  }}>{m.id}</div>
                  <div style={{
                    fontFamily: 'Merriweather, Georgia, serif', fontSize: 9, fontWeight: 600,
                    letterSpacing: '0.14em', textTransform: 'uppercase',
                    padding: '3px 8px', borderRadius: 3,
                    background: m.status === 'MAPPED' ? '#D9E8DC' : '#F3E6C5',
                    color: m.status === 'MAPPED' ? '#2A6041' : '#7A5A15',
                    opacity: statusFlip,
                  }}>{m.status}</div>
                </div>
                <div style={{
                  fontFamily: 'Merriweather, Georgia, serif', fontSize: 14, fontWeight: 500,
                  color: FG1, lineHeight: 1.3,
                }}>{m.vendor}</div>
                <div style={{
                  fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, color: FG2,
                }}>Domain · {m.domain}</div>
              </div>
            );
          })}
        </div>

        {/* RIGHT: detail */}
        <div style={{ padding: '32px 40px', display: 'flex', flexDirection: 'column', gap: 22 }}>
          <S69_FadeUp delay={1.0} dur={0.6} y={10}>
            <div>
              <div style={{
                fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.16em', textTransform: 'uppercase', color: WINE,
              }}>Matter AI-2412 · Auto-mapped</div>
              <div style={{
                marginTop: 8,
                fontFamily: '"EB Garamond", Georgia, serif', fontSize: 36,
                color: FG1, lineHeight: 1.08, letterSpacing: '-0.02em',
              }}>HireVue · pre-employment AI</div>
            </div>
          </S69_FadeUp>

          <S69_FadeUp delay={1.4} dur={0.6}>
            <div style={{
              border: `1px solid ${BORDER_LIGHT}`, background: '#FFFFFF',
              padding: '18px 22px',
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
            }}>
              {[
                { k: 'MIT Domain', v: '1.1 Discrimination' },
                { k: 'Frameworks', v: 'NIST · ISO 42001' },
                { k: 'Status',     v: 'In counsel review' },
              ].map((r, i) => (
                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                  <div style={{
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    color: FG3, letterSpacing: '0.14em', textTransform: 'uppercase',
                  }}>{r.k}</div>
                  <div style={{
                    fontFamily: 'Merriweather, Georgia, serif', fontSize: 14, fontWeight: 500, color: FG1,
                  }}>{r.v}</div>
                </div>
              ))}
            </div>
          </S69_FadeUp>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 4 }}>
            <S69_FadeUp delay={1.8}>
              <div style={{
                fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
                letterSpacing: '0.16em', textTransform: 'uppercase', color: FG3,
              }}>Applicable laws · auto-mapped</div>
            </S69_FadeUp>

            {[
              { reg: 'EU',  law: 'EU AI Act · Annex III §4',            note: 'high-risk · employment',          critical: true },
              { reg: 'CO',  law: 'Colorado AI Act',                      note: 'effective Jun 30, 2026' },
              { reg: 'NY',  law: 'NYC Local Law 144',                    note: 'AEDT bias audit · annual' },
              { reg: 'IL',  law: 'Illinois HB 3773',                     note: 'AI in employment · notice' },
              { reg: 'TX',  law: 'TRAIGA · HB 149',                      note: 'NIST RMF safe harbor' },
            ].map((r, i) => {
              const d = 2.0 + i * 0.18;
              const t = Easing.easeOutCubic(clamp((localTime - d) / 0.5, 0, 1));
              return (
                <div key={i} style={{
                  opacity: t, transform: `translateY(${(1 - t) * 10}px)`,
                  border: `1px solid ${BORDER_LIGHT}`, background: '#FFFFFF',
                  padding: '12px 18px',
                  display: 'flex', alignItems: 'center', gap: 16,
                }}>
                  <div style={{
                    width: 32, height: 22, border: `1px solid ${GOLD}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    color: '#7A5A15', letterSpacing: '0.06em',
                  }}>{r.reg}</div>
                  <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
                    <div style={{
                      fontFamily: 'Merriweather, Georgia, serif', fontSize: 13, fontWeight: 500, color: FG1,
                    }}>{r.law}</div>
                    <div style={{
                      fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, color: FG2,
                    }}>{r.note}</div>
                  </div>
                  {r.critical && (
                    <div style={{
                      fontFamily: 'Merriweather, Georgia, serif', fontSize: 9, fontWeight: 600,
                      letterSpacing: '0.14em', textTransform: 'uppercase',
                      padding: '3px 8px', borderRadius: 3,
                      background: '#F4D9D6', color: '#9B2520',
                    }}>Critical</div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Scene 9 · Close
// ─────────────────────────────────────────────────────────────
window.Scene9Close = function Scene9Close() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse at 50% 50%, #15243B 0%, ${INK} 75%)`,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column', gap: 28,
    }}>
      <S69_FadeUp delay={0.05} dur={0.8}>
        <img src="assets/lenavix-logo.png" alt="Lenavix" style={{
          width: 84, height: 84, objectFit: 'contain',
          filter: 'drop-shadow(0 0 28px rgba(183,146,104,0.25))',
        }}/>
      </S69_FadeUp>

      <S69_FadeUp delay={0.25} dur={0.7}>
        <div style={{
          fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.32em', textTransform: 'uppercase', color: IVORY_DIMMER,
          paddingLeft: '0.32em',
        }}>Lenavix</div>
      </S69_FadeUp>

      <S69_FadeUp delay={0.4} dur={0.9}>
        <div style={{
          fontFamily: '"EB Garamond", Georgia, serif', fontSize: 68,
          color: IVORY, lineHeight: 1.05, letterSpacing: '-0.02em',
          textAlign: 'center', maxWidth: 1000,
        }}>
          Always <span style={{ fontStyle: 'italic', color: GOLD }}>audit-ready.</span><br/>
          Across every jurisdiction.
        </div>
      </S69_FadeUp>

      <S69_FadeUp delay={1.0}>
        <div style={{ width: 240, height: 1, background: 'rgba(183,146,104,0.4)' }} />
      </S69_FadeUp>

      <S69_FadeUp delay={1.2}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          color: IVORY_DIMMER, letterSpacing: '0.18em', textTransform: 'uppercase',
          paddingLeft: '0.18em',
        }}>lenavix.com</div>
      </S69_FadeUp>
    </div>
  );
};