// video.jsx
// Mount the full Terracode partnership video.
// Portrait 1080x1920, 72 seconds, 5 scenes.

const DURATION = 54.0;

function TimestampLabel() {
  // Update root data-screen-label every second for commenting context.
  const time = useTime();
  const sec = Math.floor(time);
  React.useEffect(() => {
    const root = document.getElementById('video-root');
    if (root) {
      const m = Math.floor(sec / 60);
      const s = sec % 60;
      const stamp = `${m}:${String(s).padStart(2, '0')}`;
      // Identify scene
      let scene = '';
      if (sec < 6) scene = '01 Hook';
      else if (sec < 17) scene = '02 Pain';
      else if (sec < 32) scene = '03 Solution';
      else if (sec < 44) scene = '04 Packages';
      else scene = '05 CTA';
      root.setAttribute('data-screen-label', `${stamp} · ${scene}`);
    }
  }, [sec]);
  return null;
}

function TerracodeVideo() {
  return (
    <div id="video-root" data-screen-label="0:00 · 01 Hook" style={{ position: 'absolute', inset: 0 }}>
      <Stage
        width={W}
        height={H}
        duration={DURATION}
        background={T.ink}
        persistKey="terracode-reveal-v3"
        autoplay={true}
        loop={true}
      >
        <TimestampLabel />
        <Scene1Hook />
        <Scene2Pain />
        <Scene3Solution />
        <Scene4Packages />
        <Scene5CTA />
      </Stage>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<TerracodeVideo />);