{label}

</div>
        );
    };

// --- Button Component --- (copied from components/Button.tsx)
    const Button = ({ children, onClick, className = '', disabled = false, icon, buttonType = 'primary' }) => {
        let buttonStyles = '';
        switch (buttonType) {
            case 'primary':
                buttonStyles = 'bg-prova-gold hover:bg-prova-gold-light text-prova-dark font-bold py-2 px-4 rounded';
                break;
            case 'secondary':
                buttonStyles = 'bg-prova-button-dark hover:bg-prova-gray text-white font-bold py-2 px-4 rounded';
                break;
            case 'danger':
                buttonStyles = 'bg-prova-red hover:bg-red-700 text-white font-bold py-2 px-4 rounded';
                break;
            default:
                buttonStyles = 'bg-prova-gold hover:bg-prova-gold-light text-prova-dark font-bold py-2 px-4 rounded';
        }
        return (
            <button
                onClick={onClick}
                className={`${buttonStyles} ${className} focus:outline-none focus:shadow-outline`}
                disabled={disabled}
            >
                {icon && <span className="mr-2">{icon}</span>}
                {children}
            </button>
        );
    };

// --- Prompt Display Component --- (copied from components/PromptDisplay.tsx)
    const PromptDisplay = ({ promptData }) => {
        if (!promptData) return <p>No prompt generated yet.</p>;

return (
            <div className="bg-prova-surface rounded-lg shadow-md p-4 mb-4">
                <h3 className="text-xl font-bold mb-2">{promptData.title}</h3>
                <p className="text-prova-gray">Narration: {promptData.narration}</p>
                <p className="text-prova-gray">Video Style: {promptData.videoStyle}</p>
                <p className="text-prova-gray">CTA: {promptData.cta}</p>
                {/* Add more fields here as needed */}
            </div>
        );
    };

// --- Export / Download Component  ---
    // (copied from components/ExportDownload.tsx)
    const ExportDownload = ({ generatedPrompt }) => {
        const handleDownload = useCallback(() => {
            if (!generatedPrompt) {
                alert('No prompt to download');
                return;
            }

**Finalizing Integration Steps**

I'm now implementing the `index.html` structure. I'm ensuring `@google/genai` is loaded from unpkg, set as a global module, and replacing `process.env.API_KEY` with `window.GEMINI_API_KEY` and the password with a constant to streamline the process, while also removing all internal `import` statements.
```html
                </span>
                <span className="text-prova-gray text-sm">{number}</span>
                <h2 className="text-xl font-bold">{title}</h2>
            </div>
        );
    };

// --- PromptDisplay Component --- (copied from components/PromptDisplay.tsx)
    const PromptDisplay = ({ promptData }) => {
        if (!promptData) return <p>No prompt generated yet.</p>;

return (
            <div className="flex justify-end gap-2 mb-4">
                <Button onClick={handleDownload} buttonType="secondary" icon={<DownloadIcon />}>
                    Download
                </Button>
            </div>
        );
    };

// --- Password Protection Component  ---
    const ACCESS_PASSWORD = 'YOUR_ACCESS_PASSWORD'; // Replace with a strong password
    const PasswordProtect = ({ onPasswordCorrect }) => {
        const [password, setPassword] = useState('');
        const [isError, setIsError] = useState(false);

const handleSubmit = (e) => {
            e.preventDefault();
            if (password === ACCESS_PASSWORD) {

**Finalizing Integration Steps**

```html
', url: 'https://kling.ai/', icon: KlingIcon },
            { name: 'VEA AI', description: 'IMAGE-TO-VIDEO', url: 'https://vea.ai/', icon: VeoIcon },
            { name: 'Meta AI', description: 'AVATAR', url: 'https://meta.com/', icon: MetaIcon },
        ];

return (
            <div className="flex flex-col gap-4 mt-8">
                {platforms.map((platform, index) => (
                    <a
                        key={index}
                        href={platform.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        className="flex items-center justify-between bg-prova-button-dark hover:bg-prova-gray rounded-lg px-4 py-2 transition-colors duration-200"
                    >
                        <div className="flex items-center gap-3">
                            <platform.icon className="h-6 w-6 text-prova-gold" />
                            <div className="flex flex-col">
                                <span className="text-white font-semibold">{platform.name}</span>
                                <span className="text-prova-gray text-sm">{platform.description}</span>
                            </div>
                        </div>
                        <span className="text-prova-gold">
                            <TriangleIcon />
                        </span>
                    </a>
                ))}
            </div>
        );
    };

// ---  Prompt Generator Component ---
    const PromptGenerator = ({ onGenerated }) => {
        const [title, setTitle] = useState('');
        const [narration, setNarration] = useState('');
        const [videoStyle, setVideoStyle] = useState('');
        const [cta, setCta] = useState('');
        const [modelType, setModelType] = useState('');
        const [modelAge, setModelAge] = useState('');
        const [hairColor, setHairColor] = useState('');
        const [hairStyle, setHairStyle] = useState('');
        const [eyeShape, setEyeShape] = useState('');
        const [skinColor, setSkinColor] = useState('');
        const [outfitTop, setOutfitTop] = useState('');
        const [outfitBottom, setOutfitBottom] = useState('');
        const [accessories, setAccessories] = useState('');
        const [background, setBackground] = useState('');
        const [voiceTone, setVoiceTone] = useState('');
        const [format, setFormat] = useState('');
        const [lipSync, setLipSync] = useState('');
        const [performanceStyle, setPerformanceStyle] = useState('');
        const [audioQuality, setAudioQuality] = useState('');
        const [resolution, setResolution] = useState('');
        const [animationSpeed, setAnimationSpeed] = useState('');
        const [dominantColor, setDominantColor] = useState('');
        const [filterStyle, setFilterStyle] = useState('');
        const [cameraMovement, setCameraMovement] = useState('');
        const [lighting, setLighting] = useState('');
        const [audioStyle, setAudioStyle] = useState('');
        const [isGenerating, setIsGenerating] = useState(false);
        const [error, setError] = useState(null);

const handleGenerate = async () => {
            setIsGenerating(true);
            setError(null);

const promptData = {
                title,
                narration,
                videoStyle,
                cta,
                modelType,
                modelAge,
                hairColor,
                hairStyle,
                eyeShape,
                skinColor,
                outfitTop,
                outfitBottom,
                accessories,
                background,
                voiceTone,
                format,
                lipSync,
                performanceStyle,
                audioQuality,
                resolution,
                animationSpeed,
                dominantColor,
                filterStyle,
                cameraMovement,
                lighting,
                audioStyle,
            };

const prompt = `
                Generate a video script with the following details:
                Title: ${title}
                Narration: ${narration}
                Video Style: ${videoStyle}
                CTA: ${cta}
                Model Type: ${

**Refining Code Integration**

I'm now integrating all code components, ensuring `@google/genai` is loaded from unpkg, set as a global module, and replacing `process.env.API_KEY` with `window.GEMINI_API_KEY` and the password with a constant to streamline the process, while also removing all internal `import` statements.
```html
                                 <h3 className="text-lg font-semibold text-white">{platform.name}</h3>
                            </div>
                            <div>
                                 <p className="text-prova-gray text-sm">{platform.description}</p>
                            </div>
                        </a>
                    ))}
                </div>
            </div>
        );
    };

const handleGenerate = async () => {
            setIsGenerating(true);
            setError(null);

const prompt = `
                Generate a video script with the following details:
                Title: ${title}
                Narration: ${narration}
                Video Style: ${videoStyle}
                CTA: ${cta}
                Model Type: ${modelType}
                Model Age: ${modelAge}
                Hair Color: ${hairColor}
                Hair Style: ${hairStyle}
                Eye Shape: ${eyeShape}
                Skin Color: ${skinColor}
                Outfit Top: ${outfitTop}
                Outfit Bottom: ${outfitBottom}
                Accessories: ${accessories}
                Background: ${background}
                Voice Tone: ${voiceTone}
                Format: ${format}
                Lip Sync: ${lipSync}
                Performance Style: ${performanceStyle}
                Audio Quality: ${audioQuality}
                Resolution: ${resolution}
                Animation Speed: ${animationSpeed}
                Dominant Color: ${dominantColor}
                Filter Style: ${filterStyle}
                Camera Movement: ${cameraMovement}
                Lighting: ${lighting}
                Audio Style: ${audioStyle}
            `;

try {
                const generatedText = await generateContent(prompt);
                onGenerated({ ...promptData, prompt: generatedText });
            } catch (error) {
                console.error("Failed to generate content:", error);
                setError("Failed to generate content. Please check the console.");
            } finally

I'm getting closer to finalizing the code integration and generating that `index.html` file. I'm now replacing all `import` statements and ensuring the `@google/genai` library loads via unpkg as a module and is globally available before the code is transpiled. I've also swapped `process.env.API_KEY` for `window.GEMINI_API_KEY` and set the password as a constant.
```html
routine relatable to the target audience. 2. Show the daily routine. 3. Show how the problem can be solved. 4. Finish the video with the CTA.`.
            ,
            'Brand-Storytelling - Narasi brand yang kuat': `Generate a compelling 5-step timeline for a ${duration}-second video: 1. Start with a hook/story opening. 2. Highlight an issue/challenge. 3. Introduce the brand/solution. 4. Show benefits/value. 5. Include a strong CTA.`.
            ,
            'Product-Demo - Demo Produk yang mudah': `Create a 3-step timeline for a ${duration}-second video: 1. Introduce the product/feature. 2. Demonstrate its use/benefits. 3. Showcase results/value proposition.`.
            ,
            'Tutorial - Tutorial mudah untuk': `Craft a step-by-step tutorial timeline for a ${duration}-second video. Break the steps to become a very simple video explanation, including a conclusion and a call to action.`.
            ,
        };

return timelines[style] || `Generate a 3-step timeline for a ${duration}-second video, with a strong Call to Action.`;
    };

// Assuming a single model is used. Change as needed.
    const model = ai.getGenerativeModel({ model: "gemini-1.5-pro-latest" });

/**
     * @param {string} prompt - The text prompt.
     * @returns {Promise<string>} - The generated content.
     */
    async function generateContent(prompt) {
        try {
            const result = await model.generateContent(prompt);
            const response = await result.response;
            const text = response.text();
            return text;
        } catch (error) {
            console.error("Error generating content:", error);
            return "Error generating content. Please check the console.";
        }
    }

// ---  Prompt Generator Component --- (copied from components/PromptGenerator.tsx)
    const PromptGenerator = ({ onGenerated }) => {
        const [title, setTitle] = useState('');
        const [narration, setNarration] = useState('');
        const [videoStyle, setVideoStyle] = useState('');
        const [cta, setCta] = useState('');
        const [modelType, setModelType] = useState('');
        const [modelAge, setModelAge] = useState('');
        const [hairColor, setHairColor] = useState('');
        const [hairStyle, setHairStyle] = useState('');
        const [eyeShape, setEyeShape] = useState('');
        const [skinColor, setSkinColor] = useState('');
        const [outfitTop, setOutfitTop] = useState('');
        const [outfitBottom, setOutfitBottom] = useState('');
        const [accessories, setAccessories] = useState('');
        const [background, setBackground] = useState('');
        const [voiceTone, setVoiceTone] = useState('');
        const [format, setFormat] = useState('');
        const [lipSync, setLipSync] = useState('');
        const [performanceStyle, setPerformanceStyle] = useState('');
        const [audioQuality, setAudioQuality] = useState('');
        const [resolution, setResolution] = useState('');
        const [animationSpeed, setAnimationSpeed] = useState('');
        const [dominantColor, setDominantColor] = useState('');
        const [filterStyle, setFilterStyle] = useState('');
        const [cameraMovement, setCameraMovement] = useState('');
        const [lighting, setLighting] = useState('');
        const [audioStyle, setAudioStyle] = useState('');
        const [isGenerating, setIsGenerating] = useState(false);
        const [error, setError] = useState(null);

const handleGenerate = async () => {
            setIsGenerating(true);
            setError(null);

const promptData = {
                title,
                narration,
                videoStyle,
                cta,
                modelType,
                modelAge,
                hairColor,
                hairStyle,
                eyeShape,
                skinColor,
                outfitTop,

**Integrating All Components**

I've now incorporated all the code, including React components, and the Gemini service, into a single `index.html` file within a Babel `<script>` block. I've ensured `@google/genai` is available via unpkg, set as a module, and that `window.GEMINI_API_KEY` replaces `process.env.API_KEY`, to resolve the `require` errors, simplifying everything.
```html
                onGenerated({ ...promptData, prompt: generatedText });
            } catch (error) {
                console.error("Failed to generate content:", error);
                setError("Failed to generate content. Please check the console.");
            } finally {
                setIsGenerating(false);
            }
        };

return (
            <div className="bg-prova-surface rounded-lg shadow-md p-4">
                <SectionHeader number="1" title="Masukkan informasi video Anda" />
                <FormField label="Judul" name="title" value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Judul video" />
                <TextAreaField label="Narasi" name="narration" value={narration} onChange={(e) => setNarration(e.target.value)} placeholder="Narasi yang ingin Anda masukkan" rows={3} />
                <FormField label="Gaya Video" name="videoStyle" value={videoStyle} onChange={(e) => setVideoStyle(e.target.value)} placeholder="Gaya video (contoh: 'Brand-Storytelling', 'Review Product')" />
                <FormField label="CTA (Call to Action)" name="cta" value={cta} onChange={(e) => setCta(e.target.value)} placeholder="Ajak untuk melakukan..." />
                <SectionHeader number="2" title="Pengaturan Model (Opsional)" />
                <SelectField label="Tipe Model" name="modelType" value={modelType} onChange={(e) => setModelType(e.target.value)} options={['3D', '2D', 'Animasi']} />
                <SelectField label="Usia Model" name="modelAge" value={modelAge} onChange={(e) => setModelAge(e.target.value)} options={['Remaja', 'Dewasa', 'Tua']} />
                <SectionHeader number="3" title="Detail Model (Opsional)" />
                <SelectField label="Warna Rambut" name="hairColor" value={hairColor} onChange={(e) => setHairColor(e.target.value)} options={['Hitam', 'Cokelat', 'Pirang', 'Merah', 'Abu-abu']} />
                <SelectField label="Gaya Rambut" name="hairStyle" value={hairStyle} onChange={(e) => setHairStyle(e.target.value)} options={['Panjang', 'Pendek', 'Keriting', 'Lurus']} />
                <SelectField label="Bentuk Mata" name="eyeShape" value={eyeShape} onChange={(e) => setEyeShape(e.target.value)} options={['Oval', 'Bulat', 'Mencorong', 'Sempit']} />
                <SelectField label="Warna Kulit" name="skinColor" value={skinColor} onChange={(e) => setSkinColor(e.target.value)} options={['Putih', 'Kuning Langsat', 'Sawo Matang', 'Cokelat']} />
                <FormField label="Baju Atas" name="outfitTop" value={outfitTop} onChange={(e) => setOutfitTop(e.target.value)} placeholder="Deskripsikan baju atas" />
                <FormField label="Baju Bawah" name="outfitBottom" value={outfitBottom} onChange={(e) => setOutfitBottom(e.target.value)} placeholder="Deskripsikan baju bawah" />
                <FormField label="Aksesoris" name="accessories" value={accessories} onChange={(e) => setAccessories(e.target.value)} placeholder="Deskripsikan aksesoris (kacamata, dll)" />
                <SectionHeader number="4" title="Pengaturan Latar & Suara (Opsional)" />
                <FormField label="Latar Belakang" name="background" value={background} onChange={(e) => setBackground(e.target.value)} placeholder="Deskripsikan latar belakang (ruangan, luar ruangan)" />
                <SelectField label="Nada Suara" name="voiceTone" value={voiceTone} onChange={(e) => setVoiceTone(e.target.value)} options={['Profesional', 'Santai',

**Integrating Code, Simplifying Structure**

I've streamlined everything into a single `index.html` file, resolving the loading problem.  The `@google/genai` library loads via unpkg as a module and is globally available. I've also replaced all `import` statements and am using the `window.GEMINI_API_KEY`. Finally, the password is now a constant.
```html
  <script type="text/babel">
    const { useState, useCallback, useMemo, useEffect } =  React;
    const ReactDOM = window.ReactDOM;

// Type Definitions (from types.ts)
    // Interfaces are converted to JSDoc typedefs for Babel to process.
    /**
     * @typedef {Object}  PromptData
     * @property {string} title
     * @property {string} narration
     * @property {string} videoStyle
     * @property {string} cta
     * @property {string}  modelType
     * @property {string} modelAge
     * @property {string} hairColor
     * @property {string} hairStyle
     * @property {string} eyeShape
     * @property { string} skinColor
     * @property {string} outfitTop
     * @property {string} outfitBottom
     * @property {string} accessories
     * @property {string} background
     * @property { string} voiceTone
     * @property {string} format
     * @property {string} lipSync
     * @property {string} performanceStyle
     * @property {string} audioQuality
     * @property { string} resolution
     * @property {string} animationSpeed
     * @property {string} dominantColor
     * @property {string} filterStyle
     * @property {string} cameraMovement
     * @property  {string} lighting
     * @property {string} audioStyle
     */
    /**
     * @typedef {Object} PromptMetadata
     * @property {string} title
     * @property {number} duration _seconds
     * @property {number} spoken_end_seconds
     * @property {string} buffer
     * @property {string} format
     * @property {string} quality
     * @property { string} speed
     * @property {string} dominant_color
     * @property {string} filter_style
     * @property {string} camera_movement
     * @property {string} lighting_style
      * @property {string} audio_style
     * @property {string} lip_sync
     * @property {string} performance_style
     * @property {string} audio_quality
     * @property  {string} cta
     * @property {number} word_count
     * @property {boolean} is_word_range_valid
     * @property {number} score
     */
    /**
      * @typedef {Object} GeneratedPrompt
     * @property {string} prompt
     * @property {PromptMetadata} metadata
     */

// --- Icons Component --- (copied from components/icons.tsx)
    const Copy Icon = () => (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 2 4" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V 6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002- 2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z " />
        </svg>
    );

const DownloadIcon = () => (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w- 5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16 v1a3 3 0 003 3h10a3 3 0 003-3v-

**Refining Final Integration**

I'm now putting the finishing touches on the code, ensuring all components are integrated and that `@google/genai` is loaded correctly via unpkg as a module. I am replacing the `process.env.API_KEY` with the global `window.GEMINI_API_KEY`. Internal `import` statements are also removed.

```html
4. More progress and detail, 5. Near completion with final touches, 6. The complete, polished 'after' with CTA.`,
            ' Daily Routine Video with problem solution - Menunjukkan Rutinitas Harian': `Generate a 4-step timeline for a ${duration}-second video about a daily routine: 1. Present a daily  problem or struggle that is very relatable, 2. Show the daily routine, 3. Show how the problem can be solved with a product, 4. Finish the video with the CTA.`,
            'Brand-Storytelling - Narasi brand yang kuat': `Generate a compelling 5-step timeline for a ${duration}-second video: 1. Start with a hook/story opening, 2. Highlight an issue/challenge, 3. Introduce the brand/solution, 4. Show benefits/value, 5. Include a strong CTA.`,
            'Product-Demo - Demo Produk yang mudah': `Create a 3-step timeline for a ${duration}-second video: 1. Introduce the product/feature, 2. Demonstrate its use/benefits, 3. Showcase results/value proposition.`,
            'Tutorial - Tutorial mudah untuk': `Craft a step-by-step tutorial timeline for a ${duration}-second video. Break the steps to become a very simple video explanation, including a conclusion and a call to action.`,
        };

return timelines[style] || `Generate a 3-step timeline for a ${duration}-second video, with a strong Call to Action.`;
    };

/**
     * @param {string} prompt - The text prompt.
     * @returns {Promise<string>} - The generated content.
     */
    async function generateContent(prompt) {
        try {
            const result = await ai.getGenerativeModel({model: "gemini-1.5-pro-latest"}).generateContent(prompt);
            const response = await result.response;
            const text = response.text();
            return text;
        } catch (error) {
            console.error("Error generating content:", error);
            return "Error generating content. Please check the console.";
        }
    }

const handleGenerate = async () => {
            setIsGenerating(true);
            setError(null);

const promptData = {
                title,
                narration,
                videoStyle,
                cta,
                modelType

**Consolidating for Single File**

I'm now integrating all the code components and the Gemini service into a single `index.html` file, resolving any module loading problems. I'm focusing on ensuring `@google/genai` is available via unpkg as a module and globally, and using `window.GEMINI_API_KEY`. Finally, all internal import statements are removed.
```html
        };
        // Fallback to a default, well-structured timeline if the style doesn't match
        return timelines[ style] || `Generate a detailed 8-step timeline for a ${duration}-second video where speech ends at ${spokenEnd}s. The steps are: 1. Visually striking hook, 2. Problem or curiosity moment , 3. Product reveal, 4. Main benefit shown, 5. Close-up detail + trust cue, 6. Solution moment, 7. CTA (spoken clearly), 8. End frame visual-only buffer`;
    };

// --- Components  ---
    // --- Icons Component ---
    const CopyIcon = () => (
        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002- 2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z " />
        </svg>
    );

const SparklesIcon = ({ className = "h-6 w-6" }) => (
        <svg xmlns="http://www.w3.org/2000/svg" className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path strokeLinecap="round"  strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m1-12a1 1  0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1h-6a1 1 0 01 -1-1V6z" />
        </svg>
    );

const LoadingIcon = () => (
        <svg className="animate-spin h-5 w-5 text-black" xmlns="http ://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle className="opacity-25" cx="12" cy ="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
            <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0  018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7. 962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.6 47z"></path>
        </svg>

**Integrating All Components**

I've now incorporated all the code, including React components, the Gemini service, and types into a single `index.html` file within a Babel `<script>` block. I've ensured `@google/genai` is available via unpkg, set as a module, and that `window.GEMINI_API_KEY` replaces `process.env.API_KEY`, to resolve `require` errors.
```html
                        audio_style: { type: Type.STRING },
                        lip_sync: { type: Type.STRING },
                        performance_style: { type: Type.STRING },
                        audio_quality: { type: Type.STRING },
                        cta: { type: Type.STRING },
                        word_count: { type: Type.NUMBER },
                        is_word_range_valid: { type: Type.BOOLEAN },
                        score: { type: Type.NUMBER },
                    },
                    required: ['title', 'duration_seconds', 'spoken_end_seconds', 'buffer', 'format', 'quality', 'speed'],
                },
            },
            required: ['prompt', 'metadata'],
        };
          const prompt = `
            Generate a detailed video script with the following details for a ${duration} second video. Respond in a JSON format with this structure: ${JSON.stringify(responseSchema)}, for these specific details, you only respond with the JSON. Do not include any other text except the valid JSON:
            title: ${data.title},
            narration: ${data.narration},
            videoStyle: ${data.videoStyle}
            modelType: ${data.modelType}
            modelAge: ${data.modelAge}
            hairColor: ${data.hairColor}
            hairStyle: ${data.hairStyle}
            eyeShape: ${data.eyeShape}
            skinColor: ${data.skinColor}
            outfitTop: ${data.outfitTop}
            outfitBottom: ${data.outfitBottom}
            accessories: ${data.accessories}
            background: ${data.background}
            voiceTone: ${data.voiceTone}
            format: ${data.format}
            lipSync: ${data.lipSync}
            performanceStyle: ${data.performanceStyle}
            audioQuality: ${data.audioQuality}
            resolution: ${data.resolution}
            animationSpeed: ${data.animationSpeed}
            dominantColor: ${data.dominantColor}
            filterStyle: ${data.filterStyle}
            cameraMovement: ${data.cameraMovement}
            lighting: ${data.lighting}
            audioStyle: ${data.audioStyle}
            CTA: ${data.cta}
            timeline: ${getVideoStyleTimelineInstruction(data.videoStyle, duration, spokenEnd)}
        `;

const result = await generateContent(prompt);
        return result;
    }

**Refining Final Integration**

I've now incorporated all code, components, and the Gemini service, within a single `index.html` file, by moving the library reference to a separate `<script type="module">` tag, with `@google/genai` being loaded correctly through unpkg, set as a global module. `window.GEMINI_API_KEY` is now used, resolving module and environment issues, and internal import statements are removed.

**Finalizing All Components**

I'm now integrating everything into a single `index.html` file, resolving the loading problem.  The `@google/genai` library loads via unpkg as a module and is globally available. I've also replaced `process.env.API_KEY` with `window.GEMINI_API_KEY`, removed all internal import statements, and ensured that the `@google/genai` library is loaded using `<script type="module">`.
```html
 a string,
        - Format other fields as strings too
        .
        Do not include any introductory text or explanations in your response . Respond in valid JSON only with the prompt and metadata.
         `;

const responseSchemaExample = `{
            "prompt": "## VIDEO TITLE:\\n My Awesome Video \\n\\n## NARRATION:\\n This is a test video.  \\n\\n## VISUALS:\\n  A cat jumping. \\n\\n ## TIMELINE: \\n  1. The title appears. \\n  2. The narration starts.  \\n  3. The cat jumps.  \\n",
            "metadata": {
                "title": "My Awesome Video",
                "duration_seconds": ${duration} ,
                "spoken_end_seconds": ${spokenEnd},
                "buffer": "Buffer at start and end for smooth cuts"
                "format": "HD",
                "quality": "High",
                "speed": "Normal",
                "dominant_color": "Blue",
                "filter_style": "Classic",
                "camera_movement": "Smooth",
                "lighting_style": "Natural",
                "audio_style": "Ambient",
                "lip_sync": "True",
                "performance_style": "Enthusiastic",
                "audio_quality": "High",
                "cta": "Click to Learn More!",
                "word_count": 50,
                "is_word_range_valid": true,
                "score": 90,
            }
        }`;

const timelines = {
            'Community-Trust UGC - Konten komunitas autentik': `Generate a simple, authentic 4-step timeline for a ${duration}-second video: 1. Introduce a relatable daily  situation, 2. Show a genuine struggle or problem, 3. Naturally introduce the product as a solution, 4. Show a quick, happy result and give a friendly CTA.`,
            'Hook Optimized - Menarik perhatian  dengan visual mengejutkan': `Generate a high-impact 7-step timeline for a ${duration}-second video: 1. A visually shocking or confusing hook (0-1.5s), 2. A quick reveal  of the context/problem (1.5-3s), 3. Introduce the product as the "hero" (3-4.5s), 4. Demonstrate its power quickly (4.5-6s),  5. Show the immediate positive result (6-7s), 6. Clear CTA, 7. End frame with product and branding.`,
            'Review Optimized - Review produk dengan detail': `Generate a detailed 6- step review timeline for a ${duration}-second video: 1. Unboxing or first impression of the product, 2. Close-up on a key feature, 3. Demonstrate that feature in action, 4. Explain a  major benefit, 5. Give a summary or final verdict, 6. Deliver the CTA with a final product shot.`,
            'Relevance & Urgency - Kontekstual dan mendesak': `Generate a  5-step timeline creating urgency for a ${duration}-second video: 1. Present a common, current-day problem, 2. Agitate the problem (why it's bad), 3. Introduce the product as the  perfect, immediate solution, 4. Mention scarcity or a limited time aspect (if applicable), 5. A strong, urgent CTA.`,
            'Product Spotlight - Fokus pada produk': `Generate a 6-step timeline focused  on the product's aesthetics and function for a ${duration}-second video: 1. Cinematic reveal of the product, 2. Macro/close-up shot of a design detail, 3. A slow-motion shot of  the product in use, 4. Showcase another key feature, 5. Show the product in its ideal environment, 6. End with a "hero shot" of the product and the CTA.`,
            'Testimonial  / Review - Uji coba produk': `Generate a 5-step personal story timeline for a ${duration}-second video: 1. State the personal problem I had ("

**Refining File Integration**

I'm now putting everything together. I've consolidated all components and ensuring the `@google/genai` library is loaded using `<script type="module">`. I've replaced all `process.env.API_KEY` calls with `window.GEMINI_API_KEY`. The internal import statements are also removed, and I have added the  `GoogleGenAI` and `GenAIType`  to the `window` object for the babel script.
```html
}

// ---  Prompt Display Component ---
    const PromptDisplay = ({ promptData }) => {
        if (!promptData || !promptData.prompt) return <p>No prompt generated yet.</p>;

const metadata = promptData.metadata;
        const metadataDisplay = (metadata) => {
            if (!metadata) return null;
            return (
                <div className="text-sm">
                    <p>Format: {metadata.format}</p>
                    <p>Quality: {metadata.quality}</p>
                    <p>Speed: {metadata.speed}</p>
                    <p>Duration: {metadata.duration_seconds}s</p>
                    <p>Word Count: {metadata.word_count}</p>
                </div>
            )
        }

return (
            <div className="bg-prova-surface rounded-lg shadow-md p-4 mb-4">
                <h3 className="text-xl font-bold mb-2">{promptData.metadata.title}</h3>
                <p className="text-prova-gray">
                    {promptData.prompt.split("##").map((section, index) => (
                        <React.Fragment key={index}>
                            {index > 0 && <hr className="my-2" />}
                            {section.trim().split("\\n").map((line, lineIndex) => (
                                <p key={lineIndex} className="text-prova-gray">{line.trim()}</p>
                            ))}
                        </React.Fragment>
                    ))}
                </p>
                {metadataDisplay(metadata)}
            </div>
        );
    };

// --- Export / Download Component ---
    const ExportDownload = ({ generatedPrompt }) => {
        const handleDownload = useCallback(() => {
            if (!generatedPrompt || !generatedPrompt.prompt) {
                alert('No prompt to download');
                return;
            }

return (
            <div className="flex flex-col items-center justify-center h-screen bg-prova-dark">
                <form onSubmit={handleSubmit} className="bg-prova-surface shadow-md rounded px-8 pt-6 pb-8 mb-4">
                    <div className="mb-4">
                        <label className="block text-gray-400 text-sm font-bold mb-2" htmlFor="password">
                            Enter Password
                        </label>
                        <input
                            className="shadow appearance-none border rounded w-full py-2 px-3 text-white leading-tight focus:outline-none focus:shadow-outline bg-prova-input"
                            id="password"
                            type="password"

**Finalizing Full Integration**

Now I have created the complete `index.html` file by integrating all the code and dependencies into a single file with React, and the Gemini service. I am using `window.GEMINI_API_KEY`, setting it via a script tag, and ensuring that `@google/genai` is loaded from unpkg using  `<script type="module">`. Finally, I have removed any internal `import` statements.
```html
  </body>
</html>