// Scenes 4–5: Jurisdictions (2026 dates) · Framework Crosswalk
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)';

function S45_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 S45_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 4 · Global Jurisdictions — 2026 enforcement timeline
// ─────────────────────────────────────────────────────────────
window.Scene4Jurisdictions = function Scene4Jurisdictions() {
  const { localTime } = useSprite();

  // 6 columns, current 2026 status
  const COLS = [
    {
      flag: 'EU', region: 'European Union',
      laws: [
        { name: 'EU AI Act · GPAI obligations', date: 'live · Aug 2025', live: true },
        { name: 'Annex III high-risk', date: 'Aug 2, 2026' },
        { name: 'Digital Omnibus deferral', date: 'pending trilogue' },
      ],
    },
    {
      flag: 'US', region: 'United States',
      laws: [
        { name: 'Trump AI EO (federal)', date: 'Dec 2025', live: true },
        { name: 'Texas TRAIGA (HB 149)', date: 'live · Jan 2026', live: true },
        { name: 'Illinois HB 3773', date: 'live · Jan 2026', live: true },
        { name: 'Colorado AI Act', date: 'Jun 30, 2026' },
      ],
    },
    {
      flag: 'CA', region: 'California',
      laws: [
        { name: 'AB 2013 · training data', date: 'live · Jan 2026', live: true },
        { name: 'SB 942 · AI Transparency', date: 'live · Jan 2026', live: true },
        { name: 'CPPA ADMT regs', date: 'finalized 2025', live: true },
      ],
    },
    {
      flag: 'NY', region: 'New York · Local',
      laws: [
        { name: 'NYC LL 144 · AEDT audits', date: 'live since 2023', live: true },
        { name: 'DCWP enforcement push', date: '2026' },
        { name: 'NY Education Law 2-d', date: 'live', live: true },
      ],
    },
    {
      flag: 'UK', region: 'United Kingdom',
      laws: [
        { name: 'Sectoral approach', date: 'in force', live: true },
        { name: 'Data (Use & Access) Act', date: 'Jun 2025', live: true },
        { name: 'ICO AI · DPIA guidance', date: 'updating' },
      ],
    },
    {
      flag: '+', region: 'Rest of World',
      laws: [
        { name: 'China · GenAI Measures', date: 'live · 2023', live: true },
        { name: 'Canada AIDA', date: 'stalled' },
        { name: 'Singapore · AI Verify', date: 'live', live: true },
      ],
    },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      padding: '70px 90px', display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
        <div>
          <S45_Eyebrow delay={0}>Live regulatory map · 2026</S45_Eyebrow>
          <S45_FadeUp delay={0.2} style={{ marginTop: 14 }}>
            <div style={{
              fontFamily: '"EB Garamond", Georgia, serif', fontSize: 48,
              color: IVORY, letterSpacing: '-0.02em', lineHeight: 1.06,
            }}>Six regimes. <span style={{ fontStyle: 'italic', color: GOLD }}>One clock.</span></div>
          </S45_FadeUp>
        </div>
        <S45_FadeUp delay={0.4}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#5BA37A' }} />
            <div style={{
              fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
              color: IVORY_DIMMER, letterSpacing: '0.18em', textTransform: 'uppercase',
            }}>green = currently in force</div>
          </div>
        </S45_FadeUp>
      </div>

      <div style={{ marginTop: 44, display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 0, flex: 1, alignItems: 'stretch' }}>
        {COLS.map((c, i) => {
          const colDelay = 0.55 + i * 0.11;
          return (
            <div key={i} style={{
              padding: '18px 16px',
              borderLeft: i === 0 ? 'none' : `1px solid ${HAIRLINE}`,
              display: 'flex', flexDirection: 'column', gap: 16,
            }}>
              <S45_FadeUp delay={colDelay} dur={0.5}>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <div style={{
                    width: 36, height: 22, border: `1px solid ${GOLD}`,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                    color: GOLD, letterSpacing: '0.06em',
                  }}>{c.flag}</div>
                  <div style={{
                    fontFamily: '"EB Garamond", Georgia, serif', fontSize: 18,
                    color: IVORY, lineHeight: 1.15, letterSpacing: '-0.01em',
                  }}>{c.region}</div>
                </div>
              </S45_FadeUp>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
                {c.laws.map((l, j) => {
                  const d = colDelay + 0.25 + j * 0.09;
                  const t = Easing.easeOutCubic(clamp((localTime - d) / 0.45, 0, 1));
                  return (
                    <div key={j} style={{
                      opacity: t, transform: `translateY(${(1 - t) * 8}px)`,
                      borderTop: `1px solid ${HAIRLINE}`,
                      paddingTop: 8,
                      display: 'flex', flexDirection: 'column', gap: 4,
                    }}>
                      <div style={{
                        fontFamily: 'Merriweather, Georgia, serif', fontSize: 12, fontWeight: 500,
                        color: IVORY, lineHeight: 1.3,
                      }}>{l.name}</div>
                      <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                        {l.live && <div style={{ width: 5, height: 5, borderRadius: '50%', background: '#5BA37A' }} />}
                        <div style={{
                          fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
                          color: IVORY_DIMMER, letterSpacing: '0.1em', textTransform: 'uppercase',
                        }}>{l.date}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// Scene 5 · Essential AI Framework Crosswalk
// The four standards every AI program crosswalks first.
// ─────────────────────────────────────────────────────────────
window.Scene5Crosswalk = function Scene5Crosswalk() {
  const { localTime } = useSprite();

  // The essential AI crosswalk: NIST AI RMF, ISO/IEC 42001, EU AI Act high-risk obligations,
  // and MIT AI Risk Repository — anchored on a single concrete control.
  const FRAMEWORKS = [
    {
      name: 'NIST AI RMF 1.0',
      sub: 'Govern · Map · Measure · Manage',
      anchor: 'MEASURE 2.11 · fairness & bias',
      tag: 'US · de facto',
    },
    {
      name: 'ISO/IEC 42001 : 2023',
      sub: 'AI Management System · Annex A',
      anchor: 'A.6.2.4 · AI risk assessment',
      tag: 'Global · certifiable',
    },
    {
      name: 'EU AI Act',
      sub: 'High-risk obligations',
      anchor: 'Art. 9 · risk management system',
      tag: 'EU · enforceable',
    },
    {
      name: 'MIT AI Risk Repository',
      sub: 'Domain × Causal taxonomy',
      anchor: 'Domain 1.1 · Discrimination',
      tag: 'Open · 1,725 risks',
    },
  ];

  return (
    <div style={{
      position: 'absolute', inset: 0, background: INK,
      padding: '70px 110px', display: 'flex', flexDirection: 'column',
    }}>
      <div>
        <S45_Eyebrow delay={0}>Essential AI Crosswalk</S45_Eyebrow>
        <S45_FadeUp delay={0.2} style={{ marginTop: 14 }}>
          <div style={{
            fontFamily: '"EB Garamond", Georgia, serif', fontSize: 44,
            color: IVORY, letterSpacing: '-0.02em', lineHeight: 1.06, maxWidth: 1000,
          }}>The four standards <span style={{ fontStyle: 'italic', color: GOLD }}>every AI program is judged against.</span></div>
        </S45_FadeUp>
      </div>

      {/* Anchor — the shared concept */}
      <S45_FadeUp delay={0.6} dur={0.6} style={{ marginTop: 32 }}>
        <div style={{
          alignSelf: 'center', maxWidth: 820, margin: '0 auto',
          padding: '14px 22px', border: `1px solid ${WINE}`,
          background: 'rgba(220, 38, 38,0.10)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
        }}>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: WINE,
            letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap',
          }}>Risk · Algorithmic Hiring Discrimination</div>
        </div>
      </S45_FadeUp>

      {/* Connector lines */}
      <div style={{ position: 'relative', height: 60, marginTop: 6 }}>
        <svg viewBox="0 0 1000 60" preserveAspectRatio="none"
          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          {[0.2, 0.4, 0.6, 0.8].map((xRatio, i) => {
            const d = 1.0 + i * 0.12;
            const t = Easing.easeInOutCubic(clamp((localTime - d) / 0.5, 0, 1));
            const x2 = xRatio * 1000;
            const path = `M 500 0 Q 500 30, ${x2} 60`;
            return (
              <path key={i} d={path} fill="none" stroke={GOLD} strokeWidth="1"
                strokeDasharray="200" strokeDashoffset={(1 - t) * 200} opacity="0.7" />
            );
          })}
        </svg>
      </div>

      {/* 4 framework cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, flex: 1 }}>
        {FRAMEWORKS.map((f, i) => {
          const d = 1.4 + i * 0.15;
          const t = Easing.easeOutQuart(clamp((localTime - d) / 0.55, 0, 1));
          return (
            <div key={i} style={{
              opacity: t, transform: `translateY(${(1 - t) * 16}px)`,
              padding: '20px 18px',
              border: `1px solid ${HAIRLINE}`,
              background: 'rgba(255,255,255,0.012)',
              display: 'flex', flexDirection: 'column', gap: 12,
              minHeight: 220,
            }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
                  color: GOLD, letterSpacing: '0.14em', textTransform: 'uppercase',
                }}>0{i + 1}</div>
                <div style={{
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 8,
                  color: IVORY_DIMMER, letterSpacing: '0.12em', textTransform: 'uppercase',
                  padding: '2px 6px', border: `1px solid ${HAIRLINE}`,
                }}>{f.tag}</div>
              </div>
              <div style={{
                fontFamily: '"EB Garamond", Georgia, serif', fontSize: 20,
                color: IVORY, lineHeight: 1.12, letterSpacing: '-0.01em',
              }}>{f.name}</div>
              <div style={{
                fontFamily: 'Merriweather, Georgia, serif', fontSize: 11, color: IVORY_DIMMER,
                lineHeight: 1.5,
              }}>{f.sub}</div>
              <div style={{ flex: 1 }} />
              <div style={{ height: 1, background: HAIRLINE }} />
              <div style={{
                fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: IVORY,
                letterSpacing: '0.04em', lineHeight: 1.4,
              }}>{f.anchor}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};