// video.jsx — top-level composition + mount

const TOTAL = 100;

function TimeLabel() {
  // Stamp the root with the current second so comments include timestamp.
  const t = useTime();
  React.useEffect(() => {
    const root = document.getElementById('root');
    if (!root) return;
    const sec = Math.floor(t);
    const stamp = String(sec).padStart(2, '0') + 's';
    if (root.getAttribute('data-screen-label') !== stamp) {
      root.setAttribute('data-screen-label', stamp);
    }
  }, [Math.floor(t)]);
  return null;
}

// Top-left brand bug — restrained gold mark + wordmark.
function HUD() {
  const t = useTime();
  return (
    <React.Fragment>
      <div style={{
        position: 'absolute', left: 60, top: 56,
        display: 'flex', alignItems: 'center', gap: 14,
        zIndex: 70, pointerEvents: 'none',
      }}>
        <HexMark size={26} />
        <span style={{
          fontFamily: FF.display,
          fontSize: 15, fontWeight: 600, color: OR.gold,
          letterSpacing: '0.26em', textTransform: 'uppercase',
        }}>Obsidian Ridge</span>
      </div>

      <div style={{
        position: 'absolute', right: 60, top: 56,
        fontFamily: FF.mono,
        fontSize: 12, color: OR.inkFaint, letterSpacing: '0.24em',
        zIndex: 70, textAlign: 'right',
      }}>
        <div style={{ color: OR.gold, opacity: 0.7 }}>The Phishing Report</div>
        <div style={{ marginTop: 4, color: OR.inkDim, fontVariantNumeric: 'tabular-nums' }}>
          Vol. I &nbsp;·&nbsp; {String(Math.floor(t)).padStart(3, '0')} / {TOTAL}
        </div>
      </div>
    </React.Fragment>
  );
}

// Brief flash on hard cuts to break monotony between scenes.
function CutFlash() {
  const t = useTime();
  const cuts = [10.0, 23.0, 44.0, 60.0, 70.0, 82.0, 94.0];
  let intensity = 0;
  for (const c of cuts) {
    const d = t - c;
    if (d >= 0 && d < 0.18) {
      intensity = Math.max(intensity, 1 - d / 0.18);
    }
  }
  if (intensity <= 0) return null;
  return (
    <div style={{
      position: 'absolute', inset: 0, zIndex: 75,
      background: OR.gold,
      opacity: intensity * 0.10,
      pointerEvents: 'none',
      mixBlendMode: 'screen',
    }} />
  );
}

function Video() {
  return (
    <Stage
      width={1920}
      height={1080}
      duration={TOTAL}
      background={OR.bg}
      persistKey="obsidian-phish-video"
    >
      <TimeLabel />

      <Scene1Hook />
      <Scene2AIEmail />
      <Scene3Arup />
      <Scene4Vectors />
      <Scene5OneIn3 />
      <Scene6Fix />
      <Scene7Inside />
      <Scene8CTA />

      <CutFlash />
      <HUD />
      <FilmTexture />
    </Stage>
  );
}

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