import React from "react";
import {
  AbsoluteFill,
  Sequence,
  Audio,
  staticFile,
} from "remotion";
import { scenes, getSceneFrameOffsets, FPS } from "../storyboard";
import { SceneView } from "../components/SceneView";

export const NodeBenchDemo: React.FC = () => {
  const offsets = getSceneFrameOffsets();

  return (
    <AbsoluteFill style={{ backgroundColor: "#151413" }}>
      {offsets.map((offset, i) => {
        const scene = scenes[i];
        const audioFile = `audio/${scene.id}.mp3`;

        return (
          <Sequence
            key={scene.id}
            from={offset.from}
            durationInFrames={offset.durationFrames}
            name={scene.title}
          >
            <SceneView
              scene={scene}
              durationFrames={offset.durationFrames}
              sceneIndex={i}
              totalScenes={scenes.length}
            />
            {/* TTS narration — generated by generate-tts.py */}
            <Audio src={staticFile(audioFile)} volume={0.9} />
          </Sequence>
        );
      })}
    </AbsoluteFill>
  );
};
