auto-cm-director

import { AbsoluteFill, Sequence, useCurrentFrame, interpolate, spring, useVideoConfig, Img, staticFile } from 'remotion';
import { MacWindow } from '../components/MacWindow';
import { KineticText } from '../components/KineticText';

export const VidnitiveCommercial: React.FC = () => {
    const frame = useCurrentFrame();
    const { fps } = useVideoConfig();

    // Vidnitive Brand Colors (High Contrast Dark Mode)
    const BG_COLOR = '#1e1b4b'; // Indigo 950 (Deep Dark Purple)
    const ACCENT_COLOR = '#c084fc'; // Purple 400 (Bright Lavender for text)
    const TEXT_COLOR = '#ffffff'; // Pure White for maximal readability

    const logoScale = spring({ frame, fps, config: { damping: 12 } });

    return (
        <AbsoluteFill style={{ backgroundColor: BG_COLOR, fontFamily: '"M PLUS Rounded 1c", "Inter", sans-serif' }}>

            {/* Background Pop */}
            <AbsoluteFill style={{
                backgroundImage: `radial-gradient(${ACCENT_COLOR} 1px, transparent 1px)`,
                backgroundSize: '40px 40px',
                opacity: 0.1
            }} />

            {/* Scene 1: Intro */}
            <Sequence from={0} durationInFrames={90}>
                <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{ transform: `scale(${logoScale})` }}>
                        <Img src={staticFile("assets/vidnitive/icon.png")} style={{ width: 250, borderRadius: 50, boxShadow: '0 0 80px rgba(192, 132, 252, 0.4)' }} />
                    </div>
                    <div style={{ marginTop: 40 }}>
                        <KineticText text="Vidnitive" style={{ fontSize: 100, color: ACCENT_COLOR }} delay={5} />
                    </div>
                    <div style={{ marginTop: 20 }}>
                        <KineticText text="My Language Dojo" style={{ fontSize: 40, color: TEXT_COLOR }} delay={15} />
                    </div>
                </AbsoluteFill>
            </Sequence>

            {/* Scene 2: Watch & Learn (Hero Screenshot from Localhost) */}
            <Sequence from={80} durationInFrames={140}>
                <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{
                        transform: `translateY(${interpolate(frame, [80, 110], [500, 0], { extrapolateRight: 'clamp' })}px) rotate(-3deg)`,
                        zIndex: 1
                    }}>
                        <MacWindow title="Vidnitive - Learning Mode" style={{ width: 1000, height: 600, borderRadius: 20, border: '1px solid #4ade80' }}>
                            <Img src={staticFile("assets/vidnitive/new_screenshot.png")} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
                        </MacWindow>
                    </div>

                    <AbsoluteFill style={{ left: 100, top: 200, zIndex: 10 }}>
                        <KineticText
                            text="動画を見るだけ。"
                            style={{ fontSize: 100, textShadow: '0 0 20px black' }}
                            color={ACCENT_COLOR}
                        />
                        <KineticText
                            text="勉強になる。"
                            delay={8}
                            style={{ fontSize: 120, textShadow: '0 0 20px black' }}
                            color={TEXT_COLOR}
                        />
                    </AbsoluteFill>
                </AbsoluteFill>
            </Sequence>

            {/* Scene 3: Dashboard & Stats (Dashboard Header) */}
            <Sequence from={210} durationInFrames={140}>
                <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{
                        transform: `scale(${interpolate(frame, [210, 240], [0.8, 1], { extrapolateRight: 'clamp' })})`,
                    }}>
                        <MacWindow title="Your Progress" style={{ width: 1100, height: 600, borderRadius: 20, border: '1px solid #60a5fa' }}>
                            <Img src={staticFile("assets/vidnitive/screenshot2.png")} style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top' }} />
                        </MacWindow>
                    </div>

                    <AbsoluteFill style={{ right: 100, bottom: 200, alignItems: 'flex-end' }}>
                        <KineticText
                            text="成長が"
                            style={{ fontSize: 100, textShadow: '0 0 20px black' }}
                            color={ACCENT_COLOR}
                        />
                        <KineticText
                            text="見える。"
                            delay={8}
                            style={{ fontSize: 120, textShadow: '0 0 20px black' }}
                            color={TEXT_COLOR}
                        />
                    </AbsoluteFill>
                </AbsoluteFill>
            </Sequence>

            {/* Scene 4: Customization (Settings Screenshot from Localhost) */}
            <Sequence from={340} durationInFrames={140}>
                <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <div style={{
                        transform: `translateY(${interpolate(frame, [340, 370], [200, 0], { extrapolateRight: 'clamp' })}px)`,
                    }}>
                        <MacWindow title="Preference" style={{ width: 800, height: 700, borderRadius: 20, border: '1px solid #f472b6' }}>
                            <Img src={staticFile("assets/vidnitive/screenshot4.png")} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                        </MacWindow>
                    </div>

                    <AbsoluteFill style={{ top: 100, alignItems: 'center' }}>
                        <KineticText
                            text="自分だけの"
                            style={{ fontSize: 80, textShadow: '0 0 20px black' }}
                            color={TEXT_COLOR}
                        />
                        <KineticText
                            text="学習スタイルを。"
                            delay={5}
                            style={{ fontSize: 100, textShadow: '0 0 20px black' }}
                            color={ACCENT_COLOR}
                        />
                    </AbsoluteFill>
                </AbsoluteFill>
            </Sequence>

            {/* Outro */}
            <Sequence from={470} durationInFrames={130}>
                <AbsoluteFill style={{ justifyContent: 'center', alignItems: 'center' }}>
                    <Img src={staticFile("assets/vidnitive/icon.png")} style={{ width: 140, borderRadius: 30, marginBottom: 30 }} />
                    <KineticText text="Vidnitive" style={{ fontSize: 80, color: ACCENT_COLOR }} />
                    <div style={{ marginTop: 40, padding: '20px 60px', backgroundColor: ACCENT_COLOR, borderRadius: 50, color: 'white', fontFamily: 'sans-serif', fontWeight: 'bold' }}>
                        Join the Dojo
                    </div>
                </AbsoluteFill>
            </Sequence>

        </AbsoluteFill>
    );
};