// Main video orchestrator — wires scenes into a Stage timeline.
// Total duration: 60 seconds.
//
// Scene timing:
//   0  – 5    Scene 1  Problem
//   5  – 10   Scene 2  Intro (incoming call)
//  10  – 25   Scene 3  Magic (15s)
//  25  – 38   Scene 4  Funny human (13s)
//  38  – 50   Scene 5  Emotional (12s)
//  50  – 60   Scene 6  Logo reveal (10s)

function HuggiePromo() {
  const time = useTime();
  const embedMode = new URLSearchParams(window.location.search).get('embed') === '1';
  // 1s-resolution timestamp for comment context
  const ts = Math.floor(time);

  return (
    <div data-screen-label={`Huggie Promo · ${String(Math.floor(ts/60)).padStart(2,'0')}:${String(ts%60).padStart(2,'0')}`}
         style={{ position: 'absolute', inset: 0 }}>

      <Sprite start={0} end={5.0}>
        <Scene1Problem />
      </Sprite>

      <Sprite start={5.0} end={10.0}>
        <Scene2Intro />
      </Sprite>

      <Sprite start={10.0} end={25.0}>
        <Scene3Magic />
      </Sprite>

      <Sprite start={25.0} end={38.0}>
        <Scene4Funny />
      </Sprite>

      <Sprite start={38.0} end={50.0}>
        <Scene5Emotional />
      </Sprite>

      <Sprite start={50.0} end={60.0}>
        <Scene6Logo />
      </Sprite>

      {/* Subtle scene markers in corner */}
      {!embedMode && <SceneMarker time={time} />}
    </div>
  );
}

// Tiny scene-name overlay so user knows where we are when commenting.
function SceneMarker({ time }) {
  const scenes = [
    { start: 0,  end: 5,  name: '01 · the problem' },
    { start: 5,  end: 10, name: '02 · incoming' },
    { start: 10, end: 25, name: '03 · the magic' },
    { start: 25, end: 38, name: '04 · human moment' },
    { start: 38, end: 50, name: '05 · connection' },
    { start: 50, end: 60, name: '06 · huggie' },
  ];
  const s = scenes.find(s => time >= s.start && time < s.end) || scenes[scenes.length - 1];
  return (
    <div style={{
      position: 'absolute', left: 32, bottom: 28,
      fontFamily: fontMono, fontSize: 16, color: V.ink3,
      letterSpacing: 3, textTransform: 'uppercase',
      mixBlendMode: 'multiply',
      pointerEvents: 'none',
    }}>
      {s.name}
    </div>
  );
}

function App() {
  return (
    <Stage width={1920} height={1080} duration={60} background={V.paper2}>
      <HuggieAudioController />
      <HuggiePromo />
    </Stage>
  );
}

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