import { AbsoluteFill, Sequence, useVideoConfig } from "remotion";
import { COLORS } from "./styles";
import { Scene1Hook } from "./scenes/Scene1Hook";
import { Scene2Problem } from "./scenes/Scene2Problem";
import { Scene3Solution } from "./scenes/Scene3Solution";
import { Scene4Architecture } from "./scenes/Scene4Architecture";
import { Scene5Benefits } from "./scenes/Scene5Benefits";
import { Scene6CTA } from "./scenes/Scene6CTA";

export const SquareMCPLinkedIn = () => {
  const { fps } = useVideoConfig();

  return (
    <AbsoluteFill style={{ background: COLORS.bg }}>
      {/* Scene 1: Hook (0–4s) */}
      <Sequence durationInFrames={4 * fps}>
        <Scene1Hook />
      </Sequence>

      {/* Scene 2: Problem (4–14s) */}
      <Sequence from={4 * fps} durationInFrames={10 * fps}>
        <Scene2Problem />
      </Sequence>

      {/* Scene 3: Solution intro (14–22s) */}
      <Sequence from={14 * fps} durationInFrames={8 * fps}>
        <Scene3Solution />
      </Sequence>

      {/* Scene 4: Architecture (22–55s) */}
      <Sequence from={22 * fps} durationInFrames={33 * fps}>
        <Scene4Architecture />
      </Sequence>

      {/* Scene 5: Benefits (55–75s) */}
      <Sequence from={55 * fps} durationInFrames={20 * fps}>
        <Scene5Benefits />
      </Sequence>

      {/* Scene 6: CTA (75–90s) */}
      <Sequence from={75 * fps} durationInFrames={15 * fps}>
        <Scene6CTA />
      </Sequence>
    </AbsoluteFill>
  );
};
