// app.jsx — Main app: composes all scenes into one Stage.

function App() {
  return (
    <React.Fragment>
      {/* autoplay: try true on desktop, but if AudioContext can't auto-resume
          (mobile browsers always, Safari desktop sometimes) we pause via
          AutoplayGate below so video and audio start together on first tap. */}
      <Stage width={1920} height={1080} duration={TOTAL} background="#000" persistKey="gumen-intro" autoplay={true} loop={false}>
      {/* Scene 0: brand opener */}
      <SceneIntro />

      {/* Scene 1: product title — centered title card (unchanged) */}
      <SceneProductTitle />

      {/* Scene 2: general layout diagram */}
      <SceneOverview />

      {/* Scene 3: loading video — 1.3× playback to fit 2-min total. */}
      <SceneExitWithPhoto
        idx={3}
        videoSrc="assets/04-loading.mp4"
        photoSrc="assets/04b-loading-billets.jpeg"
        chapter="02"
        title="Billet Loading"
        subtitle="Entry Conveyor · Aluminium Feed"
        hudLabel="02 / BILLET LOADING"
        photoStart={17.3}
        crossfade={1.2}
        videoPosition="50% 25%"
        photoPosition="50% 85%"
        videoPlaybackRate={1.3}
      />

      {/* Scene 4: entry stacker */}
      <PhotoScene
        idx={4}
        src="assets/05-entry-stacker.jpg"
        chapter="03"
        title="Entry Stacker"
        subtitle="Automated Feed Module"
        kbScale={1.08}
        focus="50% 45%"
        hudLabel="03 / ENTRY STACKER"
      />

      {/* Scene 5: billet & stacker */}
      <PhotoScene
        idx={5}
        src="assets/06-billet-stacker.jpg"
        chapter="03"
        title="Stacking in Progress"
        subtitle="Aluminium Billet Batch · Ø 5″ – 10″"
        kbScale={1.10}
        focus="60% 50%"
        hudLabel="03 / STACKING"
      />

      {/* Scene 6: control panel with nameplate spec card */}
      <SceneControl />

      {/* Scene 7: UT unit 3D render */}
      <SceneUTUnit />

      {/* Scene 8: A-Scan software */}
      <SceneAScan />

      {/* Scene 9: HMI status page */}
      <SceneHMIStatus />

      {/* Scene 10: UT op panel */}
      <SceneUTPanel />

      {/* Scene 11: destacker video — 1.5× × 1.3× = ~2.0× playback */}
      <VideoScene
        idx={11}
        src="assets/15-destacker.mp4"
        chapter="09"
        title="Destacking"
        subtitle="Gripper · Automated Release"
        hudLabel="09 / DESTACKING"
        playbackRate={2.0}
      />

      {/* Scene 12: exit conveyor video → ends on installed UT unit photo */}
      <SceneExitWithPhoto
        idx={12}
        videoSrc="assets/16-exit-conveyor-ultrasonic.mp4"
        photoSrc="assets/10-ut-unit-installed.jpeg"
        chapter="10"
        title="Exit & Ultrasonic"
        subtitle="In-line Test · GMN UBI-10 Inspection System"
        hudLabel="10 / EXIT & UT"
        photoStart={13.1}
        crossfade={1.2}
        videoPlaybackRate={1.3}
      />

      {/* Scene 13: weight & packing */}
      <SceneWeightPacking />

      {/* Scene 14: outro */}
      <SceneOutro />

      {/* Music — drop assets/music.mp3 to enable, control via top-right button */}
      <MusicPlayer src="assets/music.mp3" />

      {/* When playhead reaches the end, reset to 0 and pause (no auto-loop) */}
      <LoopAndWait />

      {/* Tap-to-toggle play/pause overlay (YouTube-style) + fullscreen button */}
      <TapToToggle />
      <FullscreenButton />
    </Stage>
    </React.Fragment>
  );
}

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