// Main app: assembles all scenes into a Stage timeline.

const SCENES = [
  // [start, end] in seconds
  { start:   0, end:  10, render: (s) => <Scene01_Hook    start={s.start} end={s.end} /> }, // Hook
  { start:  10, end:  32, render: (s) => <Scene02_Spot    start={s.start} end={s.end} /> }, // Spot
  { start:  32, end:  52, render: (s) => <Scene03_Question start={s.start} end={s.end} /> }, // Question
  { start:  52, end:  78, render: (s) => <Scene04_ChipEV  start={s.start} end={s.end} /> }, // Chip EV
  { start:  78, end: 104, render: (s) => <Scene05_ICM     start={s.start} end={s.end} /> }, // ICM
  { start: 104, end: 128, render: (s) => <Scene06_Error   start={s.start} end={s.end} /> }, // Error
  { start: 128, end: 158, render: (s) => <Scene07_Solver  start={s.start} end={s.end} /> }, // Solver
  { start: 158, end: 188, render: (s) => <Scene08_Table   start={s.start} end={s.end} /> }, // Table
  { start: 188, end: 210, render: (s) => <Scene09_Final   start={s.start} end={s.end} /> }, // Final
  { start: 210, end: 232, render: (s) => <Scene10_CTA     start={s.start} end={s.end} /> }, // CTA
];

const TOTAL_DURATION = 232;

function App() {
  return (
    <Stage
      width={1920}
      height={1080}
      duration={TOTAL_DURATION}
      background="#07100B"
      loop
      autoplay
      persistKey="apg_video"
    >
      {SCENES.map((sc, i) => (
        <React.Fragment key={i}>{sc.render(sc)}</React.Fragment>
      ))}
    </Stage>
  );
}

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