import React from 'react';
import { AbsoluteFill, Sequence } from 'remotion';
import { Scene01Intro } from './scenes/Scene01Intro';
import { Scene02Problem } from './scenes/Scene02Problem';
import { Scene03Magic } from './scenes/Scene03Magic';
import { Scene04Features } from './scenes/Scene04Features';
import { Scene05Social } from './scenes/Scene05Social';
import { Scene06CTA } from './scenes/Scene06CTA';
import { Background } from './components/Background';
import { FontLoader } from './components/FontLoader';

// 35 seconds @ 30fps = 1050 frames
// Scene timing:
//   0   – 215  (7.2s): Intro / Hero
//   210 – 405  (6.5s): The Problem
//   390 – 605  (7.2s): The Magic (AI scanning)
//   600 – 815  (7.2s): Features showcase
//   810 – 965  (5.2s): Social proof
//   960 – 1050 (3s)  : CTA

export const MarketingVideo: React.FC = () => {
  return (
    <AbsoluteFill style={{ background: '#F6F9FF', fontFamily: "'Hanken Grotesk', sans-serif" }}>
      {/* Preload Google Fonts for pixel-perfect rendering */}
      <FontLoader />

      {/* Global background grid always present */}
      <Background />

      <Sequence from={0} durationInFrames={215}>
        <Scene01Intro />
      </Sequence>

      <Sequence from={210} durationInFrames={195}>
        <Scene02Problem />
      </Sequence>

      <Sequence from={390} durationInFrames={215}>
        <Scene03Magic />
      </Sequence>

      <Sequence from={600} durationInFrames={215}>
        <Scene04Features />
      </Sequence>

      <Sequence from={810} durationInFrames={155}>
        <Scene05Social />
      </Sequence>

      <Sequence from={960} durationInFrames={90}>
        <Scene06CTA />
      </Sequence>
    </AbsoluteFill>
  );
};
