import React from 'react';
import { TransitionSeries, linearTiming } from '@remotion/transitions';
import { fade } from '@remotion/transitions/fade';
import { slide } from '@remotion/transitions/slide';
import { wipe } from '@remotion/transitions/wipe';
import { Scene1Hook } from './scenes/Scene1Hook';
import { Scene2Problem } from './scenes/Scene2Problem';
import { Scene3LogoReveal } from './scenes/Scene3LogoReveal';
import { Scene4MultiChannel } from './scenes/Scene4MultiChannel';
import { Scene5McpTools } from './scenes/Scene5McpTools';
import { Scene6ProductTour } from './scenes/Scene6ProductTour';
import { Scene7PowerFeatures } from './scenes/Scene7PowerFeatures';
import { Scene8Architecture } from './scenes/Scene8Architecture';
import { Scene9Pricing } from './scenes/Scene9Pricing';
import { Scene10Cta } from './scenes/Scene10Cta';

/*
 Scene durations (frames @ 30fps):
  1. Hook:           150   (5.0s)
  2. Problem:        180   (6.0s)
  3. Logo Reveal:    120   (4.0s)
  4. Multi-Channel:  240   (8.0s)
  5. MCP Tools:      300  (10.0s)
  6. Product Tour:   420  (14.0s)
  7. Power Features: 420  (14.0s)
  8. Architecture:   200   (6.7s)
  9. Pricing:        180   (6.0s)
 10. CTA:            150   (5.0s)

 Transitions (overlapping):
  1→2: fade 15f
  2→3: wipe 20f
  3→4: slide-right 20f
  4→5: fade 15f
  5→6: slide-bottom 20f
  6→7: fade 15f
  7→8: wipe 15f
  8→9: slide-right 15f
  9→10: fade 20f

 Total transitions: 15+20+20+15+20+15+15+15+20 = 155f overlap
 Sum of scenes: 2360f
 Total duration: 2360 - 155 = 2205f (73.5s)
*/

export const OpenClawPromo: React.FC = () => {
  return (
    <div style={{ width: 1920, height: 1080, background: '#0a0b10' }}>
      <TransitionSeries>
        {/* Scene 1: Hook */}
        <TransitionSeries.Sequence durationInFrames={150}>
          <Scene1Hook />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 15 })}
        />

        {/* Scene 2: Problem */}
        <TransitionSeries.Sequence durationInFrames={180}>
          <Scene2Problem />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={wipe({ direction: 'from-left' })}
          timing={linearTiming({ durationInFrames: 20 })}
        />

        {/* Scene 3: Logo Reveal */}
        <TransitionSeries.Sequence durationInFrames={120}>
          <Scene3LogoReveal />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={slide({ direction: 'from-right' })}
          timing={linearTiming({ durationInFrames: 20 })}
        />

        {/* Scene 4: Multi-Channel */}
        <TransitionSeries.Sequence durationInFrames={240}>
          <Scene4MultiChannel />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 15 })}
        />

        {/* Scene 5: MCP Tools */}
        <TransitionSeries.Sequence durationInFrames={300}>
          <Scene5McpTools />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={slide({ direction: 'from-bottom' })}
          timing={linearTiming({ durationInFrames: 20 })}
        />

        {/* Scene 6: Product Tour */}
        <TransitionSeries.Sequence durationInFrames={420}>
          <Scene6ProductTour />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 15 })}
        />

        {/* Scene 7: Power Features */}
        <TransitionSeries.Sequence durationInFrames={420}>
          <Scene7PowerFeatures />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={wipe({ direction: 'from-left' })}
          timing={linearTiming({ durationInFrames: 15 })}
        />

        {/* Scene 8: Architecture */}
        <TransitionSeries.Sequence durationInFrames={200}>
          <Scene8Architecture />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={slide({ direction: 'from-right' })}
          timing={linearTiming({ durationInFrames: 15 })}
        />

        {/* Scene 9: Pricing */}
        <TransitionSeries.Sequence durationInFrames={180}>
          <Scene9Pricing />
        </TransitionSeries.Sequence>

        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 20 })}
        />

        {/* Scene 10: CTA */}
        <TransitionSeries.Sequence durationInFrames={150}>
          <Scene10Cta />
        </TransitionSeries.Sequence>
      </TransitionSeries>
    </div>
  );
};
