import { AbsoluteFill, Sequence, interpolate, useCurrentFrame } from "remotion";
import { SceneIntro } from "../components/SceneIntro";
import { SceneLocation } from "../components/SceneLocation";
import { SceneUnits } from "../components/SceneUnits";
import { SceneFeatures, SceneCTA } from "../components/SceneFeaturesCTA";

// Scene durations (at 30fps)
const INTRO     = 60;   // 2s
const LOCATION  = 150;  // 5s — Ken Burns map
const UNITS     = 75;   // 2.5s
const FEATURES  = 75;   // 2.5s
const CTA       = 90;   // 3s
const FADE      = 15;   // crossfade overlap

export const StorageWisePromo: React.FC = () => {
  const frame = useCurrentFrame();

  // Fade between scenes using opacity
  const fadeScene = (start: number, dur: number) =>
    interpolate(frame, [start, start + FADE, start + dur - FADE, start + dur], [0, 1, 1, 0], {
      extrapolateLeft: "clamp", extrapolateRight: "clamp",
    });

  const s1 = 0;
  const s2 = s1 + INTRO   - FADE;
  const s3 = s2 + LOCATION - FADE;
  const s4 = s3 + UNITS   - FADE;
  const s5 = s4 + FEATURES - FADE;

  return (
    <AbsoluteFill style={{ background: "#1a1a2e" }}>
      <Sequence from={s1} durationInFrames={INTRO + FADE}>
        <AbsoluteFill style={{ opacity: fadeScene(s1, INTRO + FADE) }}>
          <SceneIntro />
        </AbsoluteFill>
      </Sequence>
      <Sequence from={s2} durationInFrames={LOCATION + FADE}>
        <AbsoluteFill style={{ opacity: fadeScene(s2, LOCATION + FADE) }}>
          <SceneLocation />
        </AbsoluteFill>
      </Sequence>
      <Sequence from={s3} durationInFrames={UNITS + FADE}>
        <AbsoluteFill style={{ opacity: fadeScene(s3, UNITS + FADE) }}>
          <SceneUnits />
        </AbsoluteFill>
      </Sequence>
      <Sequence from={s4} durationInFrames={FEATURES + FADE}>
        <AbsoluteFill style={{ opacity: fadeScene(s4, FEATURES + FADE) }}>
          <SceneFeatures />
        </AbsoluteFill>
      </Sequence>
      <Sequence from={s5} durationInFrames={CTA}>
        <AbsoluteFill style={{ opacity: fadeScene(s5, CTA) }}>
          <SceneCTA />
        </AbsoluteFill>
      </Sequence>
    </AbsoluteFill>
  );
};