// video-app.jsx — composes the 5 scenes into the timeline.
const VIDEO_DURATION = 25;

// Always start from the beginning on (re)load — this is a brand film, not a resumable session.
try { localStorage.setItem('markvid:t', '0'); } catch (e) {}

function ScreenLabel() {
  const t = window.useTime();
  const sec = Math.floor(t);
  React.useEffect(() => {
    const root = document.querySelector('[data-video-root]');
    if (root) root.dataset.screenLabel = `t=${sec}s`;
  }, [sec]);
  return null;
}

function MarkVideo() {
  const { Stage, VC } = window;
  return (
    <Stage width={1920} height={1080} duration={VIDEO_DURATION}
      background={VC.bg} loop={false} autoplay={true} persistKey="markvid">
      <ScreenLabel />
      <SceneLaut start={0} end={5.0} />
      <SceneLeise start={4.6} end={10.0} />
      <SceneKraftvoll start={10.0} end={14.6} />
      <SceneRuhiger start={14.2} end={18.8} />
      <SceneOutro start={18.5} end={25.0} />
    </Stage>
  );
}

ReactDOM.createRoot(document.getElementById('video-root')).render(<MarkVideo />);