Upload 25 files

.env.local

@@ -0,0 +1 @@
+GEMINI_API_KEY=PLACEHOLDER_API_KEY

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

App.tsx

@@ -0,0 +1,230 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import type { Session } from '@supabase/gotrue-js';
+import { Header } from '@/components/Header';
+import { PromptForm } from '@/components/PromptForm'; // Reimagined as CreationPanel
+import { SqlViewer } from '@/components/SqlViewer'; // Reimagined as PreviewCanvas
+import { GuideModal } from '@/components/GuideModal';
+import { generateImage, generateAdCopy, generateFeatureDescriptions } from '@/services/geminiService';
+import { supabase } from '@/services/supabaseClient';
+import type { GenerateOptions, AdCopy, BrandConcept, PriceData, FeatureDetails } from '@/types';
+import { RateLimitError } from '@/lib/errors';
+import { compositionPresets } from '@/lib/compositions';
+
+
+const App: React.FC = () => {
+    const [session, setSession] = useState<Session | null>(null);
+    const [cooldownUntil, setCooldownUntil] = useState<Date | null>(null);
+    
+    // Generation state
+    const [generatedImagesB64, setGeneratedImagesB64] = useState<string[] | null>(null);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // Post content state (for display and marketing tools)
+    const [textOverlay, setTextOverlay] = useState<string>('');
+    const [compositionId, setCompositionId] = useState<string>('random');
+    const [textPosition, setTextPosition] = useState<GenerateOptions['textPosition']>('center');
+    const [subtitleOutline, setSubtitleOutline] = useState<GenerateOptions['subtitleOutline']>('auto');
+    const [artStylesForFont, setArtStylesForFont] = useState<string[]>([]);
+    
+    // Context for marketing tools
+    const [currentBasePrompt, setCurrentBasePrompt] = useState<string>('');
+    const [currentTheme, setCurrentTheme] = useState<string>('');
+    const [brandData, setBrandData] = useState<GenerateOptions['brandData']>({ name: '', slogan: '', weight: 25 });
+    const [priceData, setPriceData] = useState<PriceData>({ text: '', modelText: '', style: 'circle', position: 'none', color: 'red'});
+    const [featureDetails, setFeatureDetails] = useState<FeatureDetails[] | null>(null);
+
+
+    // Marketing suite state
+    const [adCopy, setAdCopy] = useState<AdCopy | null>(null);
+    const [isAdCopyLoading, setIsAdCopyLoading] = useState<boolean>(false);
+    const [adCopyError, setAdCopyError] = useState<string | null>(null);
+    
+    // Modal state
+    const [isGuideOpen, setIsGuideOpen] = useState(false);
+
+    const isAuthEnabled = !!supabase;
+
+    const triggerCooldown = useCallback((durationMs: number = 60000) => {
+        setCooldownUntil(new Date(Date.now() + durationMs));
+    }, []);
+
+    useEffect(() => {
+        if (supabase) {
+            // Supabase v2: onAuthStateChange handles the initial session check and any subsequent changes.
+            const { data: authListener } = supabase.auth.onAuthStateChange((_event, session) => {
+                setSession(session);
+            });
+
+            return () => {
+                // Cleanup subscription on component unmount
+                authListener.subscription?.unsubscribe();
+            };
+        }
+    }, []);
+
+    const handleLogin = async () => {
+        if (!supabase) {
+            setError("A funcionalidade de login está desabilitada pois a configuração do serviço está ausente.");
+            console.warn("Login attempt failed: Supabase client is not initialized.");
+            return;
+        }
+        // Supabase v2: use signInWithOAuth
+        const { error } = await supabase.auth.signInWithOAuth({ provider: 'google' });
+        if (error) {
+            console.error('Error logging in with Google:', error);
+            setError('Falha ao fazer login com o Google.');
+        }
+    };
+
+    const handleLogout = async () => {
+        if (supabase) {
+            await supabase.auth.signOut();
+        }
+    };
+
+    const handleGenerate = useCallback(async (options: GenerateOptions) => {
+        setIsLoading(true);
+        setError(null);
+        setGeneratedImagesB64(null);
+        setTextOverlay('');
+        setAdCopy(null); // Reset ads on new generation
+        setAdCopyError(null); // Also reset ad error
+        setFeatureDetails(null); // Reset feature details
+
+        // BUG FIX: Resolve 'random' composition ID to a specific one to prevent layout shifts on re-render.
+        let finalCompositionId = options.compositionId;
+        if (options.compositionId === 'random') {
+            const availablePresets = compositionPresets.filter(p => p.id !== 'random');
+            if (availablePresets.length > 0) {
+                const randomPreset = availablePresets[Math.floor(Math.random() * availablePresets.length)];
+                finalCompositionId = randomPreset.id;
+            } else {
+                finalCompositionId = 'impacto-light'; // Fallback if all presets are somehow filtered out
+            }
+        }
+
+        // Persist UI state from options
+        setCompositionId(finalCompositionId);
+        setTextPosition(options.textPosition);
+        setSubtitleOutline(options.subtitleOutline);
+        setArtStylesForFont(options.artStyles);
+        setCurrentBasePrompt(options.basePrompt);
+        setCurrentTheme(options.theme);
+        setBrandData(options.brandData);
+        setPriceData(options.priceData);
+
+        try {
+            if (!process.env.API_KEY) {
+                throw new Error("A variável de ambiente API_KEY não foi definida.");
+            }
+
+            if (options.scenario === 'isometric_details' && options.concept) {
+                // Special dual-call flow for detailed isometric view
+                const concept = options.concept;
+                 setTextOverlay(options.textOverlay);
+                
+                const [imageResults, descriptionResults] = await Promise.all([
+                    generateImage(options.imagePrompt, options.negativeImagePrompt, 1),
+                    generateFeatureDescriptions(options.basePrompt, concept)
+                ]);
+
+                setGeneratedImagesB64(imageResults);
+                setFeatureDetails(descriptionResults);
+
+            } else {
+                // Standard single-call flow
+                const safeNumberOfImages = Math.max(1, Math.min(options.numberOfImages, 4));
+                const imageResults = await generateImage(options.imagePrompt, options.negativeImagePrompt, safeNumberOfImages);
+                setGeneratedImagesB64(imageResults);
+                setTextOverlay(options.textOverlay);
+            }
+        } catch (e) {
+            if (e instanceof RateLimitError) {
+                triggerCooldown();
+            }
+            // The service now provides a complete, user-friendly message.
+            setError((e as Error).message);
+            console.error(e);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [triggerCooldown]);
+
+    const handleGenerateAds = useCallback(async () => {
+        if (!currentBasePrompt || !textOverlay) return;
+
+        setIsAdCopyLoading(true);
+        setAdCopy(null);
+        setAdCopyError(null);
+        try {
+            const result = await generateAdCopy(currentBasePrompt, textOverlay, currentTheme, brandData);
+            setAdCopy(result);
+        } catch (e) {
+             if (e instanceof RateLimitError) {
+                triggerCooldown();
+            }
+            // The service now provides a complete, user-friendly message.
+            setAdCopyError((e as Error).message);
+            console.error("Failed to generate ad copy:", e);
+        } finally {
+            setIsAdCopyLoading(false);
+        }
+    }, [currentBasePrompt, textOverlay, currentTheme, brandData, triggerCooldown]);
+
+    return (
+        <div className="min-h-screen bg-gray-100 text-gray-800 font-sans flex flex-col">
+            <Header 
+                session={session} 
+                onLogin={handleLogin} 
+                onLogout={handleLogout} 
+                isAuthEnabled={isAuthEnabled}
+                onOpenGuide={() => setIsGuideOpen(true)}
+            />
+            <div className="flex-grow container mx-auto p-4 sm:p-6 md:p-8">
+                <main className="flex flex-col lg:flex-row gap-8 h-full">
+                    <div className="lg:w-2/5 flex flex-col">
+                        <PromptForm
+                            onGenerate={handleGenerate} 
+                            isLoading={isLoading} 
+                            cooldownUntil={cooldownUntil}
+                            onCooldown={triggerCooldown}
+                        />
+                    </div>
+                    <div className="lg:w-3/5 flex flex-col">
+                         <SqlViewer 
+                            imagesB64={generatedImagesB64} 
+                            textOverlay={textOverlay} 
+                            compositionId={compositionId} 
+                            textPosition={textPosition} 
+                            subtitleOutline={subtitleOutline}
+                            artStyles={artStylesForFont} 
+                            isLoading={isLoading} 
+                            error={error}
+                            adCopy={adCopy}
+                            isAdCopyLoading={isAdCopyLoading}
+                            adCopyError={adCopyError}
+                            onGenerateAds={handleGenerateAds}
+                            brandData={brandData}
+                            priceData={priceData}
+                            featureDetails={featureDetails}
+                            // Setters for editing
+                            setTextOverlay={setTextOverlay}
+                            setCompositionId={setCompositionId}
+                            setTextPosition={setTextPosition}
+                            setSubtitleOutline={setSubtitleOutline}
+                            setPriceData={setPriceData}
+                            setFeatureDetails={setFeatureDetails}
+                         />
+                    </div>
+                </main>
+            </div>
+            <footer className="text-center p-4 text-gray-500 border-t border-gray-200">
+                <p>Powered by Gemini, React, and Supabase</p>
+            </footer>
+            <GuideModal isOpen={isGuideOpen} onClose={() => setIsGuideOpen(false)} />
+        </div>
+    );
+};
+
+export default App;

README.md

@@ -1,10 +1,14 @@
----
-title: Instasaas
-emoji: 🦀
-colorFrom: pink
-colorTo: green
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

components/GuideModal.tsx

@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { ClipboardIcon, CheckIcon, BookOpenIcon } from '@/components/icons';
+import { masterPromptText } from '@/lib/styles';
+
+interface GuideModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+export const GuideModal: React.FC<GuideModalProps> = ({ isOpen, onClose }) => {
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = () => {
+        navigator.clipboard.writeText(masterPromptText);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div 
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 flex items-center justify-center p-4"
+            onClick={onClose}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="guide-title"
+        >
+            <div 
+                className="bg-white rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] flex flex-col"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <header className="flex items-center justify-between p-4 border-b border-gray-200 sticky top-0 bg-white rounded-t-xl z-10">
+                    <div className="flex items-center gap-3">
+                        <BookOpenIcon className="w-6 h-6 text-purple-600"/>
+                        <h2 id="guide-title" className="text-xl font-bold text-gray-800">
+                           Guia de Prototipagem no AI Studio
+                        </h2>
+                    </div>
+                    <button 
+                        onClick={onClose} 
+                        className="p-1 rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-purple-500"
+                        aria-label="Fechar"
+                    >
+                        <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12"></path></svg>
+                    </button>
+                </header>
+
+                <main className="p-6 text-gray-600 overflow-y-auto space-y-6">
+                    <div>
+                        <h3 className="text-lg font-semibold text-gray-800 mb-2">Instruções</h3>
+                        <ol className="list-decimal list-inside space-y-2">
+                            <li>Acesse o Google AI Studio em <a href="https://aistudio.google.com" target="_blank" rel="noopener noreferrer" className="text-purple-600 hover:underline font-medium">aistudio.google.com</a>.</li>
+                            <li>No menu, crie um novo "Freeform prompt".</li>
+                            <li>Copie o "Prompt Mestre" abaixo e cole na área de texto principal.</li>
+                            <li>Na área de chat, inicie a conversa com sua ideia para o post.</li>
+                            <li>Analise o resultado: a IA irá gerar a imagem e o conteúdo em JSON.</li>
+                        </ol>
+                    </div>
+
+                    <div>
+                        <div className="flex justify-between items-center mb-2">
+                            <h3 className="text-lg font-semibold text-gray-800">📝 Prompt Mestre para o AI Studio</h3>
+                             <button
+                                onClick={handleCopy}
+                                className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium bg-gray-100 text-gray-700 rounded-md border border-gray-300 hover:bg-gray-200 transition-colors"
+                            >
+                                {copied ? (
+                                    <>
+                                        <CheckIcon className="w-4 h-4 text-green-600"/> 
+                                        <span>Copiado!</span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <ClipboardIcon className="w-4 h-4"/>
+                                        <span>Copiar</span>
+                                    </>
+                                )}
+                            </button>
+                        </div>
+                        <pre className="bg-gray-50 p-4 rounded-lg border border-gray-200 text-sm text-gray-800 whitespace-pre-wrap break-words max-h-60 overflow-y-auto">
+                            <code>{masterPromptText}</code>
+                        </pre>
+                    </div>
+
+                    <div>
+                        <h3 className="text-lg font-semibold text-gray-800 mb-2">🚀 Exemplo de Uso</h3>
+                        <p className="mb-2">Depois de colar o prompt, use o campo de chat para enviar sua solicitação. Por exemplo:</p>
+                        <pre className="bg-gray-900 text-white p-4 rounded-lg text-sm whitespace-pre-wrap break-words">
+                            <code>
+                                Vamos criar um post.<br/><br/>
+                                - <b>Descrição da Imagem:</b> "Um gato estiloso usando óculos de sol e uma jaqueta de couro, sentado em um café em Paris."<br/>
+                                - <b>Estilos da Imagem:</b> "Fotorrealista (70%), Cinematico (30%)"<br/>
+                                - <b>Estilo do Conteúdo:</b> "Descolado e Engraçado"
+                            </code>
+                        </pre>
+                    </div>
+                </main>
+            </div>
+        </div>
+    );
+};

components/Header.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import type { Session } from '@supabase/gotrue-js';
+import { LogoIcon, GoogleIcon, LogoutIcon, BookOpenIcon } from '@/components/icons';
+
+interface HeaderProps {
+    session: Session | null;
+    onLogin: () => void;
+    onLogout: () => void;
+    isAuthEnabled: boolean;
+    onOpenGuide: () => void;
+}
+
+export const Header: React.FC<HeaderProps> = ({ session, onLogin, onLogout, isAuthEnabled, onOpenGuide }) => {
+    const userName = session?.user?.user_metadata?.full_name || session?.user?.email;
+
+    const renderAuthButton = () => {
+        if (!isAuthEnabled) {
+            return (
+                <div className="relative group">
+                    <button
+                        disabled
+                        className="flex items-center justify-center gap-2 px-4 py-2 bg-gray-200 text-gray-500 font-medium rounded-lg border border-gray-300 cursor-not-allowed"
+                        aria-label="Login indisponível"
+                    >
+                        <GoogleIcon className="w-5 h-5" />
+                        <span>Login Indisponível</span>
+                    </button>
+                    <div className="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                        Configuração ausente
+                    </div>
+                </div>
+            );
+        }
+
+        if (session) {
+            return (
+                <>
+                    <span className="text-sm text-gray-600 hidden sm:block">Olá, {userName}</span>
+                    <button
+                        onClick={onLogout}
+                        className="flex items-center gap-2 p-2 text-sm font-medium text-gray-600 hover:text-purple-600 transition-colors rounded-md"
+                        aria-label="Logout"
+                    >
+                        <LogoutIcon className="w-5 h-5" />
+                        <span className="hidden sm:inline">Sair</span>
+                    </button>
+                </>
+            );
+        }
+
+        return (
+            <button
+                onClick={onLogin}
+                className="flex items-center justify-center gap-2 px-4 py-2 bg-white text-gray-700 font-medium rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors duration-200 shadow-sm"
+                aria-label="Login com Google"
+            >
+                <GoogleIcon className="w-5 h-5" />
+                <span>Login com Google</span>
+            </button>
+        );
+    };
+
+    return (
+        <header className="bg-white/80 backdrop-blur-sm sticky top-0 z-20 border-b border-gray-200">
+            <div className="container mx-auto px-4 sm:px-6 md:px-8">
+                <div className="flex items-center justify-between h-16">
+                    <div className="flex items-center gap-3">
+                        <LogoIcon className="w-8 h-8 text-purple-600" />
+                        <h1 className="text-xl md:text-2xl font-bold text-gray-800 tracking-tight">
+                            Insta<span className="text-purple-600">Style</span>
+                        </h1>
+                    </div>
+                    <div className="flex items-center gap-4">
+                        <button
+                            onClick={onOpenGuide}
+                            className="flex items-center gap-2 p-2 text-sm font-medium text-gray-600 hover:text-purple-600 transition-colors rounded-md"
+                            aria-label="Abrir Guia de Prototipagem"
+                        >
+                            <BookOpenIcon className="w-5 h-5"/>
+                            <span className="hidden sm:inline">Guia</span>
+                        </button>
+                        <div className="h-6 w-px bg-gray-200" aria-hidden="true"></div>
+                        {renderAuthButton()}
+                    </div>
+                </div>
+            </div>
+        </header>
+    );
+};

components/HistorySidebar.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+// This component is a legacy artifact and is not used in the current application.
+// Its content has been cleared to resolve a build error and remove dead code.
+
+export const HistorySidebar: React.FC = () => {
+    return null;
+};

components/PromptForm.tsx

@@ -0,0 +1,610 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import { SparklesIcon, LoaderIcon, PlusIcon, XIcon, MegaphoneIcon, ChevronLeftIcon, ChevronRightIcon, AlertTriangleIcon, ProductIcon, UsersIcon, FamilyIcon, LayersIcon, DetailedViewIcon, PosterIcon, BlueprintIcon } from '@/components/icons';
+import { artStyles, professionalThemes } from '@/lib/styles';
+import { generateProductConcepts, analyzeAdTrends, generateSlogan, generateDesignConcepts } from '@/services/geminiService';
+import type { BrandConcept, MixedStyle, RegionalityData, TextPosition, AdTrendAnalysis, SubtitleOutlineStyle, BrandData, PriceData, PriceTagStyleId, PriceTagPosition, PriceTagColor, GenerateOptions } from '@/types';
+import { RateLimitError } from '@/lib/errors';
+
+interface CreationPanelProps {
+    onGenerate: (options: GenerateOptions) => void;
+    isLoading: boolean;
+    cooldownUntil: Date | null;
+    onCooldown: () => void;
+}
+
+const rebalancePercentages = (styles: Omit<MixedStyle, 'percentage'>[]): MixedStyle[] => {
+    const count = styles.length;
+    if (count === 0) return [];
+    
+    const basePercentage = Math.floor(100 / count);
+    let remainder = 100 % count;
+    
+    return styles.map((style, i) => {
+        const percentage = basePercentage + (remainder > 0 ? 1 : 0);
+        if(remainder > 0) remainder--;
+        return { ...style, percentage };
+    });
+};
+
+export const PromptForm = ({ onGenerate, isLoading, cooldownUntil, onCooldown }: CreationPanelProps): React.JSX.Element => {
+    const [basePrompt, setBasePrompt] = useState<string>('');
+    const [textOverlay, setTextOverlay] = useState<string>('');
+    const [mixedStyles, setMixedStyles] = useState<MixedStyle[]>([]);
+    const [styleToAdd, setStyleToAdd] = useState<string>(artStyles[0]);
+    
+    const [regionality, setRegionality] = useState<RegionalityData>({
+        country: '',
+        city: '',
+        neighborhood: '',
+        weight: 25,
+    });
+    
+    const [brandName, setBrandName] = useState('');
+    const [brandSlogan, setBrandSlogan] = useState('');
+    const [brandWeight, setBrandWeight] = useState(25);
+    const [isSloganLoading, setIsSloganLoading] = useState(false);
+    const [sloganError, setSloganError] = useState<string | null>(null);
+    
+    // Price Tag State
+    const [priceText, setPriceText] = useState('');
+    const [priceModelText, setPriceModelText] = useState('');
+    const [priceStyle, setPriceStyle] = useState<PriceTagStyleId>('circle');
+    const [pricePosition, setPricePosition] = useState<PriceTagPosition>('none');
+    const [priceColor, setPriceColor] = useState<PriceTagColor>('red');
+
+    const [selectedTheme, setSelectedTheme] = useState<string>(professionalThemes[0]);
+    
+    // Ad Trend Analysis State
+    const [adTrendAnalysis, setAdTrendAnalysis] = useState<AdTrendAnalysis | null>(null);
+    const [isAdTrendLoading, setIsAdTrendLoading] = useState(false);
+    const [adTrendError, setAdTrendError] = useState<string | null>(null);
+
+    // New Brand Concept State
+    const [brandConcepts, setBrandConcepts] = useState<BrandConcept[] | null>(null);
+    const [isConceptLoading, setIsConceptLoading] = useState<boolean>(false);
+    const [conceptError, setConceptError] = useState<string | null>(null);
+    const [carouselOptionsVisible, setCarouselOptionsVisible] = useState<{ [key: number]: boolean }>({});
+    
+    // Cooldown state
+    const [countdown, setCountdown] = useState(0);
+
+    const isInteractionDisabled = isLoading || countdown > 0 || isAdTrendLoading || isSloganLoading || isConceptLoading;
+
+    const isProductConceptTheme = useMemo(() => ['Nova Marca de:', 'Nova Loja de:'].some(keyword => selectedTheme.startsWith(keyword)), [selectedTheme]);
+    const isDesignConceptTheme = useMemo(() => selectedTheme.startsWith('Design de Interiores'), [selectedTheme]);
+    const isConceptGeneratorVisible = isProductConceptTheme || isDesignConceptTheme;
+
+
+    useEffect(() => {
+        if (!cooldownUntil) {
+            setCountdown(0);
+            return;
+        }
+
+        const intervalId = setInterval(() => {
+            const now = Date.now();
+            const remaining = Math.ceil((cooldownUntil.getTime() - now) / 1000);
+            if (remaining > 0) {
+                setCountdown(remaining);
+            } else {
+                setCountdown(0);
+                clearInterval(intervalId);
+            }
+        }, 1000);
+
+        // Set initial value
+        const now = Date.now();
+        const remaining = Math.ceil((cooldownUntil.getTime() - now) / 1000);
+        setCountdown(remaining > 0 ? remaining : 0);
+
+        return () => clearInterval(intervalId);
+    }, [cooldownUntil]);
+
+    const handleAnalyzeTrends = async () => {
+        if (!selectedTheme.trim() || isInteractionDisabled) return;
+
+        setIsAdTrendLoading(true);
+        setAdTrendError(null);
+        setAdTrendAnalysis(null);
+        try {
+            const currentBrandData: BrandData = { name: brandName, slogan: brandSlogan, weight: brandWeight };
+            const result = await analyzeAdTrends(selectedTheme, regionality, currentBrandData);
+            setAdTrendAnalysis(result);
+        } catch (e) {
+            if (e instanceof RateLimitError) {
+                onCooldown();
+            }
+            setAdTrendError((e as Error).message);
+        } finally {
+            setIsAdTrendLoading(false);
+        }
+    };
+
+    const handleGenerateSlogan = async () => {
+        if (!brandName.trim() || !selectedTheme.trim() || isInteractionDisabled) {
+            setSloganError("Preencha o nome da marca e selecione um tema profissional.");
+            return;
+        }
+        setIsSloganLoading(true);
+        setSloganError(null);
+        try {
+            const result = await generateSlogan(brandName, selectedTheme);
+            setBrandSlogan(result.slogan);
+        } catch (e) {
+            if (e instanceof RateLimitError) {
+                onCooldown();
+            }
+            setSloganError((e as Error).message);
+        } finally {
+            setIsSloganLoading(false);
+        }
+    };
+
+    const availableStyles = useMemo(() => {
+        const selectedNames = new Set(mixedStyles.map(s => s.name));
+        return artStyles.filter(s => !selectedNames.has(s));
+    }, [mixedStyles]);
+
+    const handleAddStyle = () => {
+        if (styleToAdd && mixedStyles.length < 3 && !mixedStyles.some(s => s.name === styleToAdd)) {
+            const newStyles = [...mixedStyles, { name: styleToAdd, percentage: 0 }];
+            setMixedStyles(rebalancePercentages(newStyles));
+            if(availableStyles.length > 1) {
+                const nextStyle = availableStyles.find(s => s !== styleToAdd) || '';
+                setStyleToAdd(nextStyle);
+            } else {
+                setStyleToAdd('');
+            }
+        }
+    };
+
+    const handleRemoveStyle = (indexToRemove: number) => {
+        const newStyles = mixedStyles.filter((_, i) => i !== indexToRemove);
+        setMixedStyles(rebalancePercentages(newStyles));
+    };
+
+    const handleSliderChange = (indexToUpdate: number, newPercentageValue: number) => {
+        let styles = [...mixedStyles];
+        if (styles.length <= 1) {
+            setMixedStyles([{...styles[0], percentage: 100}]);
+            return;
+        }
+        
+        const oldValue = styles[indexToUpdate].percentage;
+        
+        styles[indexToUpdate].percentage = newPercentageValue;
+        
+        let otherTotal = 100 - oldValue;
+        let newOtherTotal = 100 - newPercentageValue;
+
+        if (otherTotal > 0) {
+            for(let i = 0; i < styles.length; i++) {
+                if (i !== indexToUpdate) {
+                    styles[i].percentage = styles[i].percentage * (newOtherTotal / otherTotal);
+                }
+            }
+        } else {
+            const share = newOtherTotal / (styles.length - 1);
+            for(let i = 0; i < styles.length; i++) {
+                if (i !== indexToUpdate) {
+                    styles[i].percentage = share;
+                }
+            }
+        }
+
+        let finalStyles = styles.map(s => ({...s, percentage: Math.round(s.percentage)}));
+        let roundedTotal = finalStyles.reduce((sum, s) => sum + s.percentage, 0);
+        
+        let diffToDistribute = 100 - roundedTotal;
+        if(diffToDistribute !== 0 && finalStyles.length > 0) {
+            // Distribute difference to the largest slice that is not the one being updated
+            let targetIndex = -1;
+            let maxPercent = -1;
+            for (let i = 0; i < finalStyles.length; i++) {
+                if (i !== indexToUpdate && finalStyles[i].percentage > maxPercent) {
+                    maxPercent = finalStyles[i].percentage;
+                    targetIndex = i;
+                }
+            }
+            if(targetIndex !== -1) finalStyles[targetIndex].percentage += diffToDistribute;
+            else finalStyles[0].percentage += diffToDistribute;
+        }
+
+        setMixedStyles(finalStyles);
+    };
+    
+    const handleRegionalityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setRegionality(prev => ({
+            ...prev,
+            [name]: name === 'weight' ? parseInt(value, 10) : value,
+        }));
+    };
+
+    const handleUseAdConcept = (headline: string, primaryText: string) => {
+        const firstLineOfPrimary = primaryText.split('\n')[0] || '';
+        setTextOverlay(`${headline}\n${firstLineOfPrimary}`);
+    }
+
+    const handleGenerateConcepts = async () => {
+        if (!basePrompt.trim() || isInteractionDisabled) return;
+        setIsConceptLoading(true);
+        setConceptError(null);
+        setBrandConcepts(null);
+        try {
+            let concepts;
+            if (isProductConceptTheme) {
+                const productType = selectedTheme.split(': ').pop()?.split('(')[0].trim() || 'produto';
+                concepts = await generateProductConcepts(basePrompt, productType);
+            } else if (isDesignConceptTheme) {
+                const designType = selectedTheme.split(': ').pop() || '';
+                concepts = await generateDesignConcepts(basePrompt, designType);
+            } else {
+                return;
+            }
+            setBrandConcepts(concepts);
+            setCarouselOptionsVisible({});
+        } catch (e) {
+            if (e instanceof RateLimitError) {
+                onCooldown();
+            }
+            setConceptError((e as Error).message);
+            console.error(e);
+        } finally {
+            setIsConceptLoading(false);
+        }
+    };
+    
+    const handleToggleCarouselOptions = (conceptIndex: number) => {
+        setCarouselOptionsVisible(prev => ({...prev, [conceptIndex]: !prev[conceptIndex]}));
+    };
+    
+    const handleGenerateFromConcept = (concept: BrandConcept, scenario: 'product' | 'couple' | 'family' | 'isometric_details' | 'poster' | 'executive_project') => {
+        const styleKeywords = mixedStyles.map(s => `${s.name} (${s.percentage}%)`);
+        let finalPrompt = '';
+        let textForOverlay = `${concept.name}\n${concept.philosophy}`;
+        let negativePrompt = '';
+
+        if (isProductConceptTheme) {
+            const productType = selectedTheme.split(': ').pop()?.split('(')[0].trim() || 'produto';
+            const baseConceptPrompt = `**Conceito do Produto (${productType}):**\n- **Nome:** ${concept.name}\n- **Filosofia:** "${concept.philosophy}"\n- **Design:** ${concept.visualStyle}\n- **Estilos Adicionais:** ${styleKeywords.join(', ')}.`;
+            negativePrompt = "logotipos, logos, marcas comerciais, texto, palavras, imitação, plágio";
+
+            switch(scenario) {
+                case 'product':
+                    finalPrompt = `Fotografia de produto de alta qualidade para e-commerce. ${baseConceptPrompt}\n**Diretivas Visuais:** Foco absoluto no produto (${productType}) isolado, em um fundo neutro de estúdio (branco ou cinza claro). Iluminação profissional que realça texturas e a forma do produto. Ângulo de 3/4. Imagem limpa e premium para catálogo.`;
+                    textForOverlay = `${concept.name}`;
+                    break;
+                case 'couple':
+                     finalPrompt = `Fotografia de lifestyle com um casal estiloso. ${baseConceptPrompt}\n**Diretivas Visuais:** Um casal jovem interagindo autenticamente em um ambiente urbano. **O produto (${productType}) DEVE estar em evidência**, sendo usado ou interagindo com ele de forma natural. A composição guia o olhar para o produto. Estética natural, momento espontâneo.`;
+                    break;
+                case 'family':
+                     finalPrompt = `Fotografia de lifestyle com uma família moderna. ${baseConceptPrompt}\n**Diretivas Visuais:** Uma família feliz em um momento de lazer (parque, passeio). **O produto (${productType}) DEVE estar em evidência**, sendo usado por um ou mais membros, mostrando conforto e estilo para o dia a dia. Estética vibrante, clara e cheia de vida. Posicionar o produto como a escolha da família.`;
+                    textForOverlay = `${concept.name}\nPara toda a família`;
+                    break;
+                case 'isometric_details':
+                    finalPrompt = `Criação de arte técnica e de marketing de alta qualidade. ${baseConceptPrompt}\n**Diretivas Visuais:** Gere UMA ÚNICA imagem no formato de um diagrama isométrico que mostra o produto (${productType}) de forma detalhada. A imagem NÃO deve ter texto. Em vez de texto, use 4 SETAS ou LINHAS DE CHAMADA (callouts) que apontam de características importantes do produto para os 4 cantos da imagem (canto superior esquerdo, superior direito, inferior esquerdo, inferior direito), deixando essas áreas livres para anotações posteriores. A estética deve ser limpa, técnica, mas estilizada para se alinhar ao conceito da marca. Fundo branco ou de cor neutra.`;
+                    textForOverlay = concept.name;
+                    negativePrompt = "pessoas, paisagens, cenários complexos, desordem, texto, palavras, logos, marcas comerciais, plágio";
+                    break;
+                 case 'poster':
+                    finalPrompt = `Criação de um cartaz de marketing ou mood board de alta qualidade. ${baseConceptPrompt}\n**Diretivas Visuais:** Gere UMA ÚNICA imagem que seja um pôster ou cartaz. O layout deve ser uma composição limpa e moderna com MÚLTIPLAS imagens de lifestyle menores no estilo "photo dump" ou "trend", mostrando o produto (${productType}) em diferentes contextos autênticos. A estética deve ser de revista de design, com espaço negativo para texto.`;
+                    textForOverlay = `${concept.name}`;
+                    negativePrompt = "imagem única, uma foto só, desordem, texto, palavras, logos";
+                    break;
+                case 'executive_project':
+                    finalPrompt = `Criação de uma folha de projeto técnico (blueprint) de alta qualidade. ${baseConceptPrompt}\n**Diretivas Visuais:** Gere UMA ÚNICA imagem que funciona como uma folha de desenho técnico. O layout deve conter as seguintes vistas do produto (${productType}): uma VISTA ISOMÉTRICA grande e proeminente, e quatro vistas ortográficas menores e alinhadas: VISTA DE TOPO, VISTA FRONTAL, VISTA LATERAL e VISTA DE COSTAS. A estética deve ser limpa, minimalista e profissional, como um desenho de engenharia ou patente, com linhas finas e precisas sobre um fundo branco. A imagem deve ser totalmente livre de textos, números ou dimensões.`;
+                    textForOverlay = concept.name;
+                    negativePrompt = "texto, palavras, números, dimensões, logos, marcas, pessoas, paisagens, cenários complexos, desordem, cores vibrantes, sombras, fotorrealismo";
+                    break;
+            }
+        } else { // Interior Design Theme
+            const designType = selectedTheme.split(': ').pop() || '';
+            const baseConceptPrompt = `**Conceito de Design para ${designType}:**\n- **Nome:** ${concept.name}\n- **Filosofia:** "${concept.philosophy}"\n- **Estilo Visual e Materiais:** ${concept.visualStyle}\n- **Estilos Adicionais:** ${styleKeywords.join(', ')}.`;
+            negativePrompt = "desordem, bagunça, má qualidade de renderização, deformado, irrealista, feio, desfocado";
+
+            switch(scenario) {
+                case 'product':
+                    finalPrompt = `Renderização 3D fotorrealista e cinematográfica de um(a) ${designType} com base no conceito a seguir. ${baseConceptPrompt}\n**Diretivas Visuais:** Foco absoluto no móvel/ambiente. Apresentar em um cenário de estúdio minimalista ou com um fundo sutil que complemente o design. Iluminação profissional que destaca materiais, texturas e formas. Qualidade de imagem de revista de arquitetura de luxo.`;
+                    textForOverlay = `${concept.name}`;
+                    break;
+                case 'couple':
+                     finalPrompt = `Fotografia de lifestyle fotorrealista. ${baseConceptPrompt}\n**Diretivas Visuais:** Um casal interagindo de forma autêntica e elegante no ambiente projetado (${designType}). Ex: cozinhando juntos, relaxando na sala. A arquitetura e o design do mobiliário são o pano de fundo aspiracional. A atmosfera é de conforto, sofisticação e felicidade. Luz natural invasora.`;
+                    break;
+                case 'family':
+                     finalPrompt = `Fotografia de lifestyle fotorrealista e calorosa. ${baseConceptPrompt}\n**Diretivas Visuais:** Uma família interagindo em um momento feliz e descontraído no ambiente projetado (${designType}). Ex: pais e filhos lendo na sala, preparando uma refeição na cozinha. A cena deve transmitir a funcionalidade e a beleza do espaço no dia a dia. O design serve como um lar acolhedor.`;
+                    textForOverlay = `${concept.name}\nPara toda a família`;
+                    break;
+                case 'isometric_details':
+                     finalPrompt = `Renderização 3D fotorrealista técnica de um(a) ${designType}. ${baseConceptPrompt}\n**Diretivas Visuais:** Gere UMA ÚNICA imagem no formato de uma planta isométrica ou vista de corte (cutaway view) do ambiente (${designType}). A imagem NÃO deve ter texto. Em vez de texto, use 4 SETAS ou LINHAS DE CHAMADA (callouts) para destacar 4 áreas ou detalhes de design chave (ex: um móvel, fluxo de layout, um material) para os 4 cantos da imagem. A estética deve ser limpa e informativa, como de uma revista de arquitetura.`;
+                    textForOverlay = concept.name;
+                    negativePrompt = "desordem, má qualidade de renderização, deformado, irrealista, feio, desfocado, texto, palavras";
+                    break;
+                case 'poster':
+                    finalPrompt = `Criação de um cartaz de marketing ou mood board de design de interiores. ${baseConceptPrompt}\n**Diretivas Visuais:** Gere UMA ÚNICA imagem que seja um pôster ou um mood board. O layout deve conter MÚLTIPLAS imagens menores mostrando diferentes ângulos, detalhes e texturas do ambiente (${designType}). A composição deve ser limpa, profissional, como em uma revista de arquitetura, com espaço negativo para texto.`;
+                    textForOverlay = `${concept.name}`;
+                    negativePrompt = "uma foto só, desordem, texto, palavras";
+                    break;
+                case 'executive_project':
+                    finalPrompt = `Criação de uma folha de projeto de arquitetura de alta qualidade. ${baseConceptPrompt}\n**Diretivas Visuais:** Gere UMA ÚNICA imagem que funciona como uma prancha de apresentação de arquitetura. O layout deve conter as seguintes vistas do ambiente (${designType}): uma VISTA ISOMÉTRICA grande e renderizada de forma limpa, e quatro vistas técnicas menores e alinhadas: PLANTA BAIXA, ELEVAÇÃO FRONTAL, ELEVAÇÃO LATERAL e uma VISTA DE CORTE (cross-section) revelando o interior. A estética deve ser de uma revista de arquitetura de ponta: minimalista, profissional, com linhas finas e precisas sobre um fundo branco. A imagem deve ser totalmente livre de textos, cotas ou anota��ões.`;
+                    textForOverlay = concept.name;
+                    negativePrompt = "texto, palavras, cotas, números, anotações, logos, pessoas, desordem, bagunça, cores excessivas, renderização de má qualidade";
+                    break;
+            }
+        }
+        
+         const options: GenerateOptions = {
+            basePrompt,
+            imagePrompt: finalPrompt,
+            textOverlay: textForOverlay,
+            compositionId: 'impacto-light',
+            textPosition: scenario === 'isometric_details' ? 'top-right' : 'center',
+            subtitleOutline: 'auto',
+            artStyles: styleKeywords,
+            theme: selectedTheme,
+            brandData: { name: brandName, slogan: brandSlogan, weight: brandWeight },
+            priceData: { text: priceText, modelText: priceModelText, style: priceStyle, position: pricePosition, color: priceColor },
+            negativeImagePrompt: negativePrompt,
+            numberOfImages: 1,
+            scenario,
+            concept
+        };
+        onGenerate(options);
+    };
+
+    const handleGenerateCarousel = (concept: BrandConcept, type: 'cta' | 'educational' | 'trend') => {
+        const styleKeywords = mixedStyles.map(s => `${s.name} (${s.percentage}%)`);
+        let finalPrompt = '';
+        const numberOfImagesToGenerate = 4; // API LIMIT: Max is 4
+        let negativePrompt = '';
+        let scenario: GenerateOptions['scenario'];
+
+        if (isProductConceptTheme) {
+            const productType = selectedTheme.split(': ').pop()?.split('(')[0].trim() || 'produto';
+            const baseConceptPrompt = `**Conceito Base do Produto (${productType}):**\n- **Nome:** ${concept.name}\n- **Filosofia:** "${concept.philosophy}"\n- **Design:** ${concept.visualStyle}\n- **Estilos Adicionais:** ${styleKeywords.join(', ')}.`;
+            negativePrompt = "logotipos, logos, marcas, texto, palavras, imitação, plágio";
+
+            switch (type) {
+                case 'cta':
+                    scenario = 'carousel_cta';
+                    finalPrompt = `Gere um carrossel de ${numberOfImagesToGenerate} imagens de anúncio de alta conversão. ${baseConceptPrompt}\n**Diretriz:** Cada imagem deve ser uma variação de um 'hero shot' do produto (${productType}), com foco em criar desejo imediato. Imagem 1: Produto em close-up extremo, mostrando um detalhe de material premium. Imagem 2: Produto em um ângulo de 3/4 dinâmico com iluminação de estúdio dramática. Imagem 3: O produto flutuando em um fundo de cor vibrante. Imagem 4: O produto em movimento ou em uso, com um leve desfoque para indicar ação. O produto é o herói absoluto em todas as ${numberOfImagesToGenerate} imagens.`;
+                    break;
+                case 'educational':
+                    scenario = 'carousel_educational';
+                    finalPrompt = `Gere um carrossel de ${numberOfImagesToGenerate} imagens educativas. ${baseConceptPrompt}\n**Diretriz:** Cada imagem deve destacar um detalhe técnico ou de design diferente do produto (${productType}). Use um estilo limpo, quase diagramático. Imagem 1: Close na textura de um material inovador. Imagem 2: Close em uma característica tecnológica. Imagem 3: Close em um detalhe de design único. Imagem 4: Uma visão explodida dos componentes chave, mostrando como eles se encaixam.`;
+                    break;
+                case 'trend':
+                    scenario = 'carousel_trend';
+                    finalPrompt = `Gere um carrossel de ${numberOfImagesToGenerate} imagens de lifestyle no estilo 'photo dump' para redes sociais. ${baseConceptPrompt}\n**Diretriz:** Capture o produto (${productType}) em contextos autênticos e da moda, com estética de filme granulado. Imagem 1: 'Fit check' ou 'setup check' em um espelho, com o look/ambiente completo em foco. Imagem 2: Close no produto em uso, em um local interessante. Imagem 3: 'Unboxing' estético em uma superfície bem composta. Imagem 4: O produto como parte de um 'flat lay' com objetos que complementam seu universo.`;
+                    break;
+            }
+        } else { // Interior Design Theme
+            const designType = selectedTheme.split(': ').pop() || '';
+            const baseConceptPrompt = `**Conceito de Design para ${designType}:**\n- **Nome:** ${concept.name}\n- **Filosofia:** "${concept.philosophy}"\n- **Estilo Visual e Materiais:** ${concept.visualStyle}\n- **Estilos Adicionais:** ${styleKeywords.join(', ')}.`;
+            negativePrompt = "desordem, bagunça, má qualidade de renderização, deformado, irrealista, feio, desfocado, texto, palavras";
+
+            switch (type) {
+                case 'cta':
+                    scenario = 'carousel_cta';
+                    finalPrompt = `Gere um carrossel fotorrealista de ${numberOfImagesToGenerate} imagens de anúncio para um(a) ${designType}. ${baseConceptPrompt}\n**Diretriz:** Foco em desejo e luxo. Imagem 1: Ângulo amplo mostrando o ambiente completo. Imagem 2: Close-up em um detalhe de material nobre (ex: veio de mármore, textura da madeira). Imagem 3: Close-up em uma solução de design inteligente (ex: gaveta oculta, sistema de iluminação). Imagem 4: O ambiente visto de uma perspectiva humana, como se o espectador estivesse prestes a entrar.`;
+                    break;
+                case 'educational':
+                    scenario = 'carousel_educational';
+                    finalPrompt = `Gere um carrossel fotorrealista de ${numberOfImagesToGenerate} imagens educativas sobre um(a) ${designType}. ${baseConceptPrompt}\n**Diretriz:** Foco em funcionalidade e inovação. Imagem 1: Visão geral do design. Imagem 2: Detalhe mostrando a durabilidade ou facilidade de limpeza de um material. Imagem 3: Detalhe mostrando a capacidade de armazenamento ou organização. Imagem 4: Detalhe mostrando a ergonomia ou o conforto do design em uso.`;
+                    break;
+                case 'trend':
+                    scenario = 'carousel_trend';
+                    finalPrompt = `Gere um carrossel de ${numberOfImagesToGenerate} imagens de lifestyle para redes sociais, com estética 'clean' e orgânica, para um(a) ${designType}. ${baseConceptPrompt}\n**Diretriz:** Capture momentos autênticos no espaço. Imagem 1: Mãos preparando um café na bancada da cozinha. Imagem 2: Um livro e uma manta sobre uma poltrona na sala. Imagem 3: Um canto do ambiente com uma planta e luz natural. Imagem 4: Detalhe da organização de um armário ou closet. O ambiente é o protagonista silencioso.`;
+                    break;
+            }
+        }
+
+        const options: GenerateOptions = {
+            basePrompt,
+            imagePrompt: finalPrompt,
+            textOverlay: "",
+            compositionId: 'impacto-light',
+            textPosition: 'center',
+            subtitleOutline: 'auto',
+            artStyles: styleKeywords,
+            theme: selectedTheme,
+            brandData: { name: concept.name, slogan: concept.philosophy, weight: 100 },
+            priceData: { text: '', modelText: '', style: 'circle', position: 'none', color: 'red' },
+            negativeImagePrompt: negativePrompt,
+            numberOfImages: numberOfImagesToGenerate,
+            scenario,
+            concept,
+        };
+        onGenerate(options);
+    };
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault();
+        if (isInteractionDisabled || !basePrompt.trim()) return;
+
+        const artStyleKeywords = mixedStyles.map(style => `${style.name} (${style.percentage}%)`);
+        
+        let imagePrompt = `${basePrompt}, tema: ${selectedTheme}.`;
+        if (artStyleKeywords.length > 0) {
+            imagePrompt += ` Estilos visuais: ${artStyleKeywords.join(', ')}.`;
+        }
+        
+        const regionalityKeywords = [regionality.country, regionality.city, regionality.neighborhood].filter(Boolean).join(', ');
+        if (regionalityKeywords && regionality.weight > 10) {
+            imagePrompt += ` Influência regional de ${regionalityKeywords} (${regionality.weight}%).`;
+        }
+         if (brandName && brandWeight > 10) {
+            imagePrompt += ` Associado à marca ${brandName} (${brandWeight}%).`;
+        }
+
+        const options: GenerateOptions = {
+            basePrompt,
+            imagePrompt,
+            textOverlay,
+            compositionId: 'random',
+            textPosition: 'center',
+            subtitleOutline: 'auto',
+            artStyles: artStyleKeywords,
+            theme: selectedTheme,
+            brandData: { name: brandName, slogan: brandSlogan, weight: brandWeight },
+            priceData: { text: priceText, modelText: priceModelText, style: priceStyle, position: pricePosition, color: priceColor },
+            numberOfImages: 1
+        };
+
+        onGenerate(options);
+    };
+    
+    return (
+        <form onSubmit={handleSubmit} className="bg-white p-4 sm:p-6 rounded-lg shadow-md border border-gray-200 flex flex-col h-full overflow-y-auto">
+            <div className="space-y-4 flex-grow">
+                <h2 className="text-xl font-bold text-gray-800 tracking-tight">Painel de Criação</h2>
+                
+                {/* --- SEÇÃO 1: IDEIA CENTRAL --- */}
+                <div className="space-y-3">
+                    <label htmlFor="basePrompt" className="block text-sm font-bold text-gray-700">1. Qual é a sua ideia?</label>
+                    <textarea 
+                        id="basePrompt"
+                        value={basePrompt} 
+                        onChange={(e) => setBasePrompt(e.target.value)} 
+                        placeholder="Ex: um tênis futurista para corrida noturna, uma cozinha com ilha central em estilo industrial..." 
+                        className="w-full h-20 p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-shadow duration-200"
+                        required
+                    />
+                </div>
+
+                {/* --- SEÇÃO 2: TEMA PROFISSIONAL --- */}
+                <div className="space-y-3">
+                    <label htmlFor="selectedTheme" className="block text-sm font-bold text-gray-700">2. Qual é o seu nicho profissional?</label>
+                    <select 
+                        id="selectedTheme" 
+                        value={selectedTheme} 
+                        onChange={(e) => setSelectedTheme(e.target.value)} 
+                        className="w-full p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none"
+                    >
+                        {professionalThemes.map(theme => <option key={theme} value={theme}>{theme}</option>)}
+                    </select>
+                </div>
+                
+                 {/* --- SEÇÃO 3: ESTILOS VISUAIS --- */}
+                 <div className="space-y-3">
+                    <label className="block text-sm font-bold text-gray-700">3. Misture até 3 estilos visuais</label>
+                    {mixedStyles.map((style, i) => (
+                        <div key={i} className="flex items-center gap-2">
+                            <span className="text-sm font-medium text-gray-600 w-1/3 truncate" title={style.name}>{style.name}</span>
+                            <input
+                                type="range"
+                                min="0"
+                                max="100"
+                                value={style.percentage}
+                                onChange={(e) => handleSliderChange(i, parseInt(e.target.value, 10))}
+                                className="w-2/3 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-purple-600"
+                                disabled={isInteractionDisabled}
+                            />
+                            <span className="text-sm font-semibold w-12 text-right">{style.percentage}%</span>
+                            <button type="button" onClick={() => handleRemoveStyle(i)} className="p-1 text-gray-400 hover:text-red-500" disabled={isInteractionDisabled}>
+                                <XIcon className="w-4 h-4"/>
+                            </button>
+                        </div>
+                    ))}
+                    {mixedStyles.length < 3 && (
+                        <div className="flex items-center gap-2">
+                            <select value={styleToAdd} onChange={(e) => setStyleToAdd(e.target.value)} className="w-full p-2 bg-gray-50 rounded-md border border-gray-300 text-sm" disabled={!availableStyles.length || isInteractionDisabled}>
+                                {availableStyles.map(s => <option key={s} value={s}>{s}</option>)}
+                            </select>
+                            <button type="button" onClick={handleAddStyle} className="flex-shrink-0 p-2 bg-purple-100 text-purple-600 rounded-md hover:bg-purple-200 disabled:opacity-50" disabled={!styleToAdd || isInteractionDisabled}>
+                                <PlusIcon className="w-5 h-5"/>
+                            </button>
+                        </div>
+                    )}
+                 </div>
+
+                 {/* --- SEÇÃO 4: TEXTO DA ARTE --- */}
+                 <div className="space-y-3">
+                     <label htmlFor="textOverlay" className="block text-sm font-bold text-gray-700">4. Texto para a Imagem (opcional)</label>
+                     <textarea 
+                        id="textOverlay"
+                        value={textOverlay} 
+                        onChange={(e) => setTextOverlay(e.target.value)} 
+                        placeholder="Título (primeira linha)&#10;Subtítulo (opcional)" 
+                        className="w-full h-20 p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-shadow duration-200"
+                        maxLength={280}
+                    />
+                 </div>
+                 
+                 {/* --- FERRAMENTAS DE IA --- */}
+                 {isConceptGeneratorVisible && (
+                    <div className="p-3 bg-purple-50 border border-purple-200 rounded-lg space-y-3">
+                        <h3 className="font-bold text-purple-800">{isProductConceptTheme ? 'Protótipo de Nova Marca' : 'Laboratório de Conceitos de Design'}</h3>
+                        <p className="text-sm text-purple-700">Use a sua ideia do passo 1 para gerar conceitos completos e depois gerar a imagem.</p>
+                        <button type="button" onClick={handleGenerateConcepts} disabled={isInteractionDisabled || !basePrompt.trim()} className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-700 transition-colors disabled:bg-purple-300">
+                           {isConceptLoading ? <LoaderIcon className="animate-spin w-5 h-5"/> : <SparklesIcon className="w-5 h-5"/>}
+                           <span>{isProductConceptTheme ? 'Gerar Conceitos de Marca' : 'Gerar Conceitos de Design'}</span>
+                        </button>
+                        {conceptError && <p className="text-xs text-red-600 text-center">{conceptError}</p>}
+                        {brandConcepts && (
+                            <div className="space-y-4 pt-2">
+                                {brandConcepts.map((concept, i) => (
+                                    <div key={i} className="p-3 bg-white rounded-md border border-purple-200 space-y-3">
+                                        <div>
+                                            <h4 className="font-bold text-gray-800">{concept.name}</h4>
+                                            <p className="text-xs text-gray-500 italic">"{concept.philosophy}"</p>
+                                            <p className="text-sm text-gray-700 mt-1">{concept.visualStyle}</p>
+                                        </div>
+                                        
+                                        <div className="grid grid-cols-3 gap-2 text-xs">
+                                            <button type="button" onClick={() => handleGenerateFromConcept(concept, 'product')} disabled={isInteractionDisabled} className="flex items-center justify-center gap-1.5 px-2 py-2 bg-green-500 text-white font-semibold rounded-md hover:bg-green-600 transition-colors disabled:bg-green-300">
+                                                <ProductIcon className="w-4 h-4" /><span>Produto</span>
+                                            </button>
+                                            <button type="button" onClick={() => handleGenerateFromConcept(concept, 'couple')} disabled={isInteractionDisabled} className="flex items-center justify-center gap-1.5 px-2 py-2 bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-600 transition-colors disabled:bg-blue-300">
+                                                <UsersIcon className="w-4 h-4" /><span>Casal</span>
+                                            </button>
+                                            <button type="button" onClick={() => handleGenerateFromConcept(concept, 'family')} disabled={isInteractionDisabled} className="flex items-center justify-center gap-1.5 px-2 py-2 bg-orange-500 text-white font-semibold rounded-md hover:bg-orange-600 transition-colors disabled:bg-orange-300">
+                                                <FamilyIcon className="w-4 h-4" /><span>Família</span>
+                                            </button>
+                                            <button type="button" onClick={() => handleGenerateFromConcept(concept, 'isometric_details')} disabled={isInteractionDisabled} className="flex items-center justify-center gap-1.5 px-2 py-2 bg-teal-500 text-white font-semibold rounded-md hover:bg-teal-600 transition-colors disabled:bg-teal-300">
+                                                <DetailedViewIcon className="w-4 h-4" /><span>Detalhes</span>
+                                            </button>
+                                            <button type="button" onClick={() => handleGenerateFromConcept(concept, 'executive_project')} disabled={isInteractionDisabled} className="flex items-center justify-center gap-1.5 px-2 py-2 bg-gray-700 text-white font-semibold rounded-md hover:bg-gray-800 transition-colors disabled:bg-gray-400">
+                                                <BlueprintIcon className="w-4 h-4" /><span>Executivo</span>
+                                            </button>
+                                            <button type="button" onClick={() => handleGenerateFromConcept(concept, 'poster')} disabled={isInteractionDisabled} className="flex items-center justify-center gap-1.5 px-2 py-2 bg-indigo-500 text-white font-semibold rounded-md hover:bg-indigo-600 transition-colors disabled:bg-indigo-300">
+                                                <PosterIcon className="w-4 h-4" /><span>Cartaz</span>
+                                            </button>
+                                            <button type="button" onClick={() => handleToggleCarouselOptions(i)} disabled={isInteractionDisabled} className={`col-span-3 flex items-center justify-center gap-1.5 px-2 py-2 font-semibold rounded-md border-2 transition-colors disabled:opacity-50 ${carouselOptionsVisible[i] ? 'bg-purple-500 text-white border-purple-500' : 'bg-transparent text-gray-600 border-gray-400 hover:bg-gray-100'}`}>
+                                                <LayersIcon className="w-4 h-4" /><span>Gerar Carrossel</span>
+                                            </button>
+                                        </div>
+
+                                        {carouselOptionsVisible[i] && (
+                                            <div className="pt-2">
+                                                <div className="p-3 bg-purple-100/50 rounded-lg border border-purple-200">
+                                                    <h5 className="text-xs font-bold text-center text-purple-800 mb-2">Gerar Carrossel de 4 Imagens</h5>
+                                                    <div className="grid grid-cols-3 gap-2 text-xs">
+                                                        <button onClick={() => handleGenerateCarousel(concept, 'cta')} disabled={isInteractionDisabled} className="px-2 py-1.5 bg-purple-600 text-white font-semibold rounded hover:bg-purple-700 disabled:bg-purple-300">CTA</button>
+                                                        <button onClick={() => handleGenerateCarousel(concept, 'educational')} disabled={isInteractionDisabled} className="px-2 py-1.5 bg-purple-600 text-white font-semibold rounded hover:bg-purple-700 disabled:bg-purple-300">Educativo</button>
+                                                        <button onClick={() => handleGenerateCarousel(concept, 'trend')} disabled={isInteractionDisabled} className="px-2 py-1.5 bg-purple-600 text-white font-semibold rounded hover:bg-purple-700 disabled:bg-purple-300">Trend</button>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                 )}
+            </div>
+
+            <div className="flex-shrink-0 pt-4 border-t border-gray-200">
+                <button type="submit" disabled={isInteractionDisabled || !basePrompt.trim()} className="w-full flex items-center justify-center gap-2 px-4 py-3 bg-purple-600 text-white text-lg font-bold rounded-lg hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transition-all duration-200 disabled:bg-purple-300 disabled:cursor-not-allowed">
+                    {isLoading ? (
+                        <LoaderIcon className="w-6 h-6 animate-spin" />
+                    ) : (
+                        <SparklesIcon className="w-6 h-6" />
+                    )}
+                    <span>{countdown > 0 ? `Aguarde (${countdown}s)` : 'Gerar Arte Principal'}</span>
+                </button>
+            </div>
+        </form>
+    );
+};

components/SqlViewer.tsx

@@ -0,0 +1,1273 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { AlertTriangleIcon, DownloadIcon, ImageIcon, PublishIcon, SparklesIcon, LoaderIcon, ClipboardIcon, CheckIcon, LightbulbIcon, GoogleIcon, EditIcon, MegaphoneIcon, TagIcon, ChevronLeftIcon, ChevronRightIcon, TextQuoteIcon } from '@/components/icons';
+import { compositionPresets } from '@/lib/compositions';
+import type { TextPosition, AdCopy, SubtitleOutlineStyle, CompositionPreset, BrandData, PriceData, FeatureDetails } from '@/types';
+import { positionOptions, subtitleOutlineOptions, priceColorOptions, pricePositionOptions, priceStyleOptions } from '@/lib/options';
+
+
+interface ImageCanvasProps {
+    imagesB64: string[] | null;
+    textOverlay: string;
+    compositionId: string;
+    textPosition: TextPosition;
+    subtitleOutline: SubtitleOutlineStyle;
+    artStyles: string[];
+    isLoading: boolean;
+    error: string | null;
+    adCopy: AdCopy | null;
+    isAdCopyLoading: boolean;
+    adCopyError: string | null;
+    onGenerateAds: () => void;
+    brandData: BrandData;
+    priceData: PriceData;
+    featureDetails: FeatureDetails[] | null;
+    // Setters for editing
+    setTextOverlay: (value: string) => void;
+    setCompositionId: (value: string) => void;
+    setTextPosition: (value: TextPosition) => void;
+    setSubtitleOutline: (value: SubtitleOutlineStyle) => void;
+    setPriceData: (value: React.SetStateAction<PriceData>) => void;
+    setFeatureDetails: (value: React.SetStateAction<FeatureDetails[] | null>) => void;
+}
+
+const CANVAS_SIZE = 1080; // For Instagram post resolution
+
+// --- COLOR HELPER FUNCTIONS ---
+type RGB = { r: number; g: number; b: number; };
+
+// Heavily simplified color quantization
+const getProminentColors = (image: HTMLImageElement, count = 5): RGB[] => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
+    if (!ctx) return [{ r: 255, g: 255, b: 255 }, {r: 0, g: 0, b: 0}];
+    
+    const scale = Math.min(100 / image.width, 100 / image.height);
+    canvas.width = image.width * scale;
+    canvas.height = image.height * scale;
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    
+    const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+    const colorCounts: { [key: string]: { color: RGB; count: number } } = {};
+    
+    // Bucket colors to reduce dimensionality (8x8x8 cube)
+    for (let i = 0; i < data.length; i += 4) {
+        if(data[i+3] < 128) continue; // Skip transparent/semi-transparent pixels
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const key = `${Math.round(r/32)}_${Math.round(g/32)}_${Math.round(b/32)}`;
+        if (!colorCounts[key]) {
+            colorCounts[key] = { color: { r, g, b }, count: 0 };
+        }
+        colorCounts[key].count++;
+    }
+
+    const sortedColors = Object.values(colorCounts).sort((a, b) => b.count - a.count);
+    return sortedColors.slice(0, count).map(c => c.color);
+}
+
+
+const rgbToHsl = ({r,g,b}: RGB): [number, number, number] => {
+    r /= 255; g /= 255; b /= 255;
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h = 0, s = 0, l = (max + min) / 2;
+    if (max !== min) {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+        }
+        h /= 6;
+    }
+    return [h, s, l];
+};
+
+const getPalette = (image: HTMLImageElement, paletteType: string) => {
+    const prominentColors = getProminentColors(image);
+    const sortedByLuminance = [...prominentColors].sort((a, b) => {
+        const lumA = 0.2126 * a.r + 0.7152 * a.g + 0.0722 * a.b;
+        const lumB = 0.2126 * b.r + 0.7152 * b.g + 0.0722 * b.b;
+        return lumB - lumA;
+    });
+
+    const darkest = sortedByLuminance[sortedByLuminance.length - 1] || {r:0, g:0, b:0};
+    const lightest = sortedByLuminance[0] || {r:255, g:255, b:255};
+    
+    const palette = { fill1: '#FFFFFF', fill2: '#E0E0E0', stroke: '#000000' };
+
+    switch(paletteType) {
+        case 'light':
+            palette.fill1 = `rgb(${lightest.r}, ${lightest.g}, ${lightest.b})`;
+            palette.fill2 = `rgba(${(lightest.r + 200)/2}, ${(lightest.g + 200)/2}, ${(lightest.b + 200)/2}, 1)`;
+            palette.stroke = `rgb(${darkest.r}, ${darkest.g}, ${darkest.b})`;
+            break;
+        case 'dark':
+            palette.fill1 = `rgb(${darkest.r}, ${darkest.g}, ${darkest.b})`;
+            palette.fill2 = `rgba(${(darkest.r + 50)/2}, ${(darkest.g + 50)/2}, ${(darkest.b + 50)/2}, 1)`;
+            palette.stroke = `rgb(${lightest.r}, ${lightest.g}, ${lightest.b})`;
+            break;
+        case 'complementary': {
+            const primary = prominentColors[0] || {r:128, g:128, b:128};
+            const [h, s, l] = rgbToHsl(primary);
+            const compH = (h + 0.5) % 1;
+            const compRgb = hslToRgb(compH, s, Math.max(0.5, l));
+            palette.fill1 = `rgb(${primary.r}, ${primary.g}, ${primary.b})`;
+            palette.fill2 = `rgb(${compRgb.r}, ${compRgb.g}, ${compRgb.b})`;
+            palette.stroke = `rgb(${lightest.r}, ${lightest.g}, ${lightest.b})`;
+            break;
+        }
+        case 'analogous': {
+            const primary = prominentColors[0] || {r:128, g:128, b:128};
+            const secondary = prominentColors[1] || primary;
+            palette.fill1 = `rgb(${primary.r}, ${primary.g}, ${primary.b})`;
+            palette.fill2 = `rgb(${secondary.r}, ${secondary.g}, ${secondary.b})`;
+            palette.stroke = `rgb(${lightest.r}, ${lightest.g}, ${lightest.b})`;
+            break;
+        }
+        default:
+             palette.fill1 = `rgb(${lightest.r}, ${lightest.g}, ${lightest.b})`;
+             palette.stroke = `rgb(${darkest.r}, ${darkest.g}, ${darkest.b})`;
+    }
+
+    // Ensure sufficient contrast for stroke
+    const fillLum = 0.2126 * parseInt(palette.fill1.slice(1,3), 16) + 0.7152 * parseInt(palette.fill1.slice(3,5), 16) + 0.0722 * parseInt(palette.fill1.slice(5,7), 16);
+    const strokeLum = 0.2126 * parseInt(palette.stroke.slice(1,3), 16) + 0.7152 * parseInt(palette.stroke.slice(3,5), 16) + 0.0722 * parseInt(palette.stroke.slice(5,7), 16);
+    if(Math.abs(fillLum - strokeLum) < 50) {
+        palette.stroke = strokeLum > 128 ? '#000000' : '#FFFFFF';
+    }
+
+    return palette;
+}
+const hslToRgb = (h: number, s: number, l: number): RGB => {
+    let r, g, b;
+    if (s === 0) { r = g = b = l; } 
+    else {
+        const hue2rgb = (p: number, q: number, t: number) => {
+            if (t < 0) t += 1;
+            if (t > 1) t -= 1;
+            if (t < 1/6) return p + (q - p) * 6 * t;
+            if (t < 1/2) return q;
+            if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+            return p;
+        }
+        const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+        const p = 2 * l - q;
+        r = hue2rgb(p, q, h + 1/3);
+        g = hue2rgb(p, q, h);
+        b = hue2rgb(p, q, h - 1/3);
+    }
+    return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+};
+
+// --- FONT HELPER ---
+const FONT_MAP: { [key: string]: { titleFont: string; subtitleFont: string } } = {
+    'default': { titleFont: "'Anton', sans-serif", subtitleFont: "'Poppins', sans-serif" },
+    'Comic-book': { titleFont: "'Bangers', cursive", subtitleFont: "'Poppins', sans-serif" },
+    'Meme': { titleFont: "'Bangers', cursive", subtitleFont: "'Poppins', sans-serif" },
+    'Lobster': { titleFont: "'Lobster', cursive", subtitleFont: "'Poppins', sans-serif" },
+    'Playfair Display': { titleFont: "'Playfair Display', serif", subtitleFont: "'Poppins', sans-serif" },
+    'Old Money': { titleFont: "'Playfair Display', serif", subtitleFont: "'Poppins', sans-serif" },
+    'Art Déco': { titleFont: "'Playfair Display', serif", subtitleFont: "'Poppins', sans-serif" },
+    'Bauhaus': { titleFont: "'Poppins', sans-serif", subtitleFont: "'Poppins', sans-serif" },
+    'Minimalista': { titleFont: "'Poppins', sans-serif", subtitleFont: "'Poppins', sans-serif" },
+};
+
+const getFontForStyle = (styles: string[]): { titleFont: string; subtitleFont: string } => {
+    if (!styles || styles.length === 0) return FONT_MAP['default'];
+    for (const style of styles) {
+        for (const key in FONT_MAP) {
+            if (style.includes(key)) {
+                return FONT_MAP[key];
+            }
+        }
+    }
+    return FONT_MAP['default'];
+};
+// --- END FONT HELPER ---
+
+
+const getWrappedLines = (ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] => {
+    const lines: string[] = [];
+    if (!text) return lines;
+    
+    const paragraphs = text.split('\n');
+    paragraphs.forEach(paragraph => {
+      const words = paragraph.split(' ');
+      let currentLine = '';
+      for (const word of words) {
+          const testLine = currentLine ? `${currentLine} ${word}` : word;
+          if (ctx.measureText(testLine).width > maxWidth && currentLine) {
+              lines.push(currentLine);
+              currentLine = word;
+          } else {
+              currentLine = testLine;
+          }
+      }
+      if (currentLine) {
+          lines.push(currentLine);
+      }
+    });
+    return lines;
+};
+
+const drawPriceTag = (ctx: CanvasRenderingContext2D, priceData: PriceData) => {
+    if (!priceData || (!priceData.text.trim() && !priceData.modelText.trim()) || priceData.position === 'none') {
+        return;
+    }
+    
+    ctx.save();
+    
+    const colorOption = priceColorOptions.find(c => c.id === priceData.color) || priceColorOptions[0];
+    ctx.fillStyle = colorOption.hex;
+    ctx.strokeStyle = 'white';
+    ctx.lineWidth = 6;
+    
+    const priceText = priceData.text.trim();
+    const modelText = priceData.modelText.trim();
+    
+    const priceFontSize = CANVAS_SIZE * 0.06;
+    const modelFontSize = CANVAS_SIZE * 0.035;
+
+    ctx.font = `900 ${priceFontSize}px 'Poppins', sans-serif`;
+    const priceMetrics = ctx.measureText(priceText);
+    
+    ctx.font = `500 ${modelFontSize}px 'Poppins', sans-serif`;
+    const modelMetrics = ctx.measureText(modelText);
+
+    const textWidth = Math.max(priceMetrics.width, modelMetrics.width);
+    const priceHeight = priceText ? priceFontSize : 0;
+    const modelHeight = modelText ? modelFontSize : 0;
+    const verticalPadding = priceFontSize * 0.1;
+    const totalTextHeight = priceHeight + modelHeight + (priceText && modelText ? verticalPadding : 0);
+    
+    const horizontalPadding = priceFontSize * 0.5;
+    const verticalPaddingForShape = priceFontSize * 0.4;
+    
+    let tagWidth, tagHeight;
+    
+    if (priceData.style === 'circle' || priceData.style === 'burst') {
+        const diameter = Math.max(textWidth, totalTextHeight) + horizontalPadding * 2;
+        tagWidth = diameter;
+        tagHeight = diameter;
+    } else { // 'tag'
+        tagWidth = textWidth + horizontalPadding * 2;
+        tagHeight = totalTextHeight + verticalPaddingForShape * 2;
+    }
+
+    const radius = tagWidth / 2;
+    const margin = CANVAS_SIZE * 0.05;
+    let x = 0, y = 0; // Center of the tag
+
+    switch(priceData.position) {
+        case 'top-left': 
+            x = margin + tagWidth / 2;
+            y = margin + tagHeight / 2;
+            break;
+        case 'top-right': 
+            x = CANVAS_SIZE - margin - tagWidth / 2;
+            y = margin + tagHeight / 2;
+            break;
+        case 'bottom-left':
+            x = margin + tagWidth / 2;
+            y = CANVAS_SIZE - margin - tagHeight / 2;
+            break;
+        case 'bottom-right':
+            x = CANVAS_SIZE - margin - tagHeight / 2;
+            y = CANVAS_SIZE - margin - tagHeight / 2;
+            break;
+    }
+
+    // Draw shape
+    ctx.beginPath();
+    switch(priceData.style) {
+        case 'circle':
+            ctx.arc(x, y, radius, 0, Math.PI * 2);
+            break;
+        case 'tag':
+            ctx.rect(x - tagWidth/2, y - tagHeight/2, tagWidth, tagHeight);
+            break;
+        case 'burst':
+            const points = 12;
+            const inset = 0.7;
+            ctx.translate(x, y);
+            ctx.moveTo(0, 0 - radius);
+            for (let i = 0; i < points; i++) {
+                ctx.rotate(Math.PI / points);
+                ctx.lineTo(0, 0 - (radius * inset));
+                ctx.rotate(Math.PI / points);
+                ctx.lineTo(0, 0 - radius);
+            }
+            ctx.translate(-x, -y);
+            break;
+    }
+    ctx.closePath();
+    ctx.stroke();
+    ctx.fill();
+
+    // Draw text
+    ctx.fillStyle = 'white';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    
+    if (priceText && modelText) {
+        const priceY = y - (totalTextHeight / 2) + (priceHeight / 2);
+        const modelY = priceY + (priceHeight / 2) + verticalPadding + (modelHeight / 2);
+        
+        ctx.font = `900 ${priceFontSize}px 'Poppins', sans-serif`;
+        ctx.fillText(priceText, x, priceY);
+
+        ctx.font = `500 ${modelFontSize}px 'Poppins', sans-serif`;
+        ctx.fillText(modelText, x, modelY);
+
+    } else {
+        // Only one line of text
+        const singleText = priceText || modelText;
+        const singleFontSize = priceText ? priceFontSize : modelFontSize;
+        const fontWeight = priceText ? '900' : '500';
+        
+        ctx.font = `${fontWeight} ${singleFontSize}px 'Poppins', sans-serif`;
+        ctx.fillText(singleText, x, y);
+    }
+
+    ctx.restore();
+}
+
+const drawFeatureDetails = (ctx: CanvasRenderingContext2D, details: FeatureDetails[]) => {
+    if (!details || details.length === 0) return;
+
+    ctx.save();
+
+    const cornerPositions = [
+        { x: CANVAS_SIZE * 0.05, y: CANVAS_SIZE * 0.05, align: 'left' as const, baseline: 'top' as const },
+        { x: CANVAS_SIZE * 0.95, y: CANVAS_SIZE * 0.05, align: 'right' as const, baseline: 'top' as const },
+        { x: CANVAS_SIZE * 0.95, y: CANVAS_SIZE * 0.95, align: 'right' as const, baseline: 'bottom' as const },
+        { x: CANVAS_SIZE * 0.05, y: CANVAS_SIZE * 0.95, align: 'left' as const, baseline: 'bottom' as const },
+    ];
+
+    const maxWidth = CANVAS_SIZE * 0.4;
+    
+    details.slice(0, 4).forEach((detail, index) => {
+        const pos = cornerPositions[index];
+        if (!pos) return;
+
+        ctx.textAlign = pos.align;
+        ctx.textBaseline = pos.baseline;
+        
+        const titleFontSize = CANVAS_SIZE * 0.025;
+        const descFontSize = CANVAS_SIZE * 0.02;
+        const lineHeight = 1.25;
+
+        // Get wrapped lines for both title and description
+        ctx.font = `700 ${titleFontSize}px 'Poppins', sans-serif`;
+        const titleLines = getWrappedLines(ctx, detail.title, maxWidth);
+        
+        ctx.font = `400 ${descFontSize}px 'Poppins', sans-serif`;
+        const descLines = getWrappedLines(ctx, detail.description, maxWidth);
+        
+        // Calculate block dimensions
+        const blockWidth = Math.max(
+            ...titleLines.map(line => ctx.measureText(line).width),
+            ...descLines.map(line => ctx.measureText(line).width)
+        );
+        const titleHeight = titleLines.length * titleFontSize;
+        const descHeight = descLines.length * descFontSize * lineHeight;
+        const spacing = titleFontSize * 0.25;
+        const totalTextHeight = titleHeight + spacing + descHeight;
+        
+        const padding = titleFontSize * 0.75;
+        const boxWidth = blockWidth + padding * 2;
+        const boxHeight = totalTextHeight + padding * 2;
+
+        let boxX = pos.align === 'left' ? pos.x : pos.x - boxWidth;
+        let boxY = pos.baseline === 'top' ? pos.y : pos.y - boxHeight;
+
+        // Draw the semi-transparent box
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.65)';
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(boxX, boxY, boxWidth, boxHeight, [8]);
+        ctx.fill();
+        ctx.stroke();
+        
+        // Draw the text
+        ctx.fillStyle = '#FFFFFF';
+        let currentY = boxY + padding;
+        
+        // Draw title
+        ctx.font = `700 ${titleFontSize}px 'Poppins', sans-serif`;
+        titleLines.forEach(line => {
+            const lineX = pos.align === 'left' ? boxX + padding : boxX + boxWidth - padding;
+            ctx.fillText(line, lineX, currentY);
+            currentY += titleFontSize;
+        });
+        
+        currentY += spacing;
+
+        // Draw description
+        ctx.font = `400 ${descFontSize}px 'Poppins', sans-serif`;
+        ctx.fillStyle = '#E0E0E0';
+        descLines.forEach(line => {
+            const lineX = pos.align === 'left' ? boxX + padding : boxX + boxWidth - padding;
+            ctx.fillText(line, lineX, currentY);
+            currentY += descFontSize * lineHeight;
+        });
+    });
+
+    ctx.restore();
+};
+
+const drawCanvas = (
+    ctx: CanvasRenderingContext2D,
+    image: HTMLImageElement,
+    text: string,
+    compositionId: string,
+    textPosition: TextPosition,
+    subtitleOutline: SubtitleOutlineStyle,
+    artStyles: string[],
+    brandData: BrandData,
+    priceData: PriceData,
+    featureDetails: FeatureDetails[] | null,
+) => {
+    ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+    ctx.drawImage(image, 0, 0, CANVAS_SIZE, CANVAS_SIZE);
+
+    const isIsometricDetailsView = featureDetails && featureDetails.length > 0;
+    const palette = getPalette(image, 'light'); // Use a default palette for brand name
+
+    if (isIsometricDetailsView && text.trim()) {
+        // Special drawing logic for the product name in "Details" view
+        ctx.save();
+        const productName = text.split('\n')[0].toUpperCase();
+        const titleSize = CANVAS_SIZE * 0.03; // A bit larger for a title
+        ctx.font = `700 ${titleSize}px 'Poppins', sans-serif`;
+
+        const textPalette = getPalette(image, 'dark');
+        ctx.fillStyle = textPalette.fill1;
+        ctx.strokeStyle = textPalette.stroke;
+        ctx.lineWidth = titleSize * 0.1;
+        ctx.lineJoin = 'round';
+        
+        ctx.shadowColor = 'rgba(0, 0, 0, 0.6)';
+        ctx.shadowBlur = 4;
+        ctx.shadowOffsetX = 2;
+        ctx.shadowOffsetY = 2;
+
+        const margin = CANVAS_SIZE * 0.05;
+        const x = CANVAS_SIZE / 2;
+        const y = margin;
+
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'top';
+        
+        ctx.strokeText(productName, x, y);
+        ctx.fillText(productName, x, y);
+        ctx.restore();
+
+    } else if (text.trim()) {
+        // Existing logic for all other text drawing
+        let selectedPreset = compositionPresets.find(p => p.id === compositionId);
+        if (!selectedPreset || compositionId === 'random') {
+            const availablePresets = compositionPresets.filter(p => p.id !== 'random');
+            selectedPreset = availablePresets[Math.floor(Math.random() * availablePresets.length)];
+        }
+        const preset = selectedPreset.config;
+        const margin = CANVAS_SIZE * 0.07;
+        
+        const textPalette = getPalette(image, preset.style.palette);
+        const { titleFont, subtitleFont } = getFontForStyle(artStyles);
+
+        const textLines = text.split('\n');
+        const titleText = (textLines[0] || '').toUpperCase();
+        const subtitleText = preset.subtitle ? textLines.slice(1).join('\n') : '';
+
+        const maxTextWidth = (textPosition === 'left' || textPosition === 'right') 
+            ? CANVAS_SIZE * 0.4 
+            : CANVAS_SIZE * 0.8;
+
+        // --- Robust Font Size Calculation ---
+        let optimalSize = 10;
+        const maxTextHeight = CANVAS_SIZE * 0.8;
+        for (let currentSize = 250; currentSize >= 10; currentSize -= 5) {
+            // Check width constraints first for both title and subtitle
+            ctx.font = `900 ${currentSize}px ${titleFont}`;
+            const titleLinesForWidthCheck = getWrappedLines(ctx, titleText, maxTextWidth);
+            const isTitleWidthOk = titleLinesForWidthCheck.every(line => ctx.measureText(line).width <= maxTextWidth);
+
+            ctx.font = `500 ${currentSize * 0.4}px ${subtitleFont}`;
+            const subtitleLinesForWidthCheck = getWrappedLines(ctx, subtitleText, maxTextWidth);
+            const isSubtitleWidthOk = subtitleLinesForWidthCheck.every(line => ctx.measureText(line).width <= maxTextWidth);
+
+            if (!isTitleWidthOk || !isSubtitleWidthOk) {
+                continue; // Font size too large for width, try smaller
+            }
+
+            // If width is OK, check height
+            const titleHeight = titleLinesForWidthCheck.length * currentSize * 1.1;
+            const subtitleHeight = subtitleText ? subtitleLinesForWidthCheck.length * (currentSize * 0.4) * 1.2 : 0;
+            const totalHeight = titleHeight + (subtitleHeight > 0 ? subtitleHeight + (currentSize * 0.2) : 0);
+
+            if (totalHeight <= maxTextHeight) {
+                optimalSize = currentSize; // This size fits both width and height
+                break;
+            }
+        }
+        // --- End Font Size Calculation ---
+        
+        ctx.save();
+        
+        const titleSize = optimalSize;
+        const subtitleSize = optimalSize * 0.4;
+        
+        if (preset.rotation) {
+            const angle = (Math.random() * 4 - 2) * (Math.PI / 180);
+            ctx.translate(CANVAS_SIZE / 2, CANVAS_SIZE / 2);
+            ctx.rotate(angle);
+            ctx.translate(-CANVAS_SIZE / 2, -CANVAS_SIZE / 2);
+        }
+        
+        ctx.font = `900 ${titleSize}px ${titleFont}`;
+        const titleLines = getWrappedLines(ctx, titleText, maxTextWidth);
+        const titleBlockHeight = titleLines.length * titleSize * 1.1;
+        
+        ctx.font = `500 ${subtitleSize}px ${subtitleFont}`;
+        const subtitleLines = getWrappedLines(ctx, subtitleText, maxTextWidth);
+        const subtitleBlockHeight = subtitleText ? subtitleLines.length * subtitleSize * 1.2 : 0;
+        
+        const totalBlockHeight = titleBlockHeight + (subtitleBlockHeight > 0 ? subtitleBlockHeight + (titleSize * 0.2) : 0);
+
+        let startX = 0, startY = 0;
+        ctx.textBaseline = 'top';
+
+        switch (textPosition) {
+            case 'top':
+                startX = CANVAS_SIZE / 2;
+                startY = margin;
+                ctx.textAlign = 'center';
+                break;
+            case 'top-right':
+                startX = CANVAS_SIZE - margin;
+                startY = margin;
+                ctx.textAlign = 'right';
+                // Offset to avoid overlap with feature detail box in the same corner
+                if (featureDetails && featureDetails.length > 0) {
+                    startY += CANVAS_SIZE * 0.15;
+                }
+                break;
+            case 'bottom':
+                startX = CANVAS_SIZE / 2;
+                startY = CANVAS_SIZE - margin - totalBlockHeight;
+                ctx.textAlign = 'center';
+                break;
+            case 'left':
+                startX = margin;
+                startY = (CANVAS_SIZE / 2) - (totalBlockHeight / 2);
+                ctx.textAlign = 'left';
+                break;
+            case 'right':
+                startX = CANVAS_SIZE - margin;
+                startY = (CANVAS_SIZE / 2) - (totalBlockHeight / 2);
+                ctx.textAlign = 'right';
+                break;
+            case 'center':
+            default:
+                startX = CANVAS_SIZE / 2;
+                startY = (CANVAS_SIZE / 2) - (totalBlockHeight / 2);
+                ctx.textAlign = 'center';
+                break;
+        }
+
+
+        let currentY = startY;
+
+        // Draw Title
+        ctx.font = `900 ${titleSize}px ${titleFont}`;
+        titleLines.forEach(line => {
+            const textMetrics = ctx.measureText(line);
+            let xPos = startX;
+            if(ctx.textAlign === 'left') xPos = startX;
+            if(ctx.textAlign === 'center') xPos = startX - textMetrics.width / 2;
+            if(ctx.textAlign === 'right') xPos = startX - textMetrics.width;
+
+            const drawX = ctx.textAlign === 'center' ? startX : startX;
+
+            if (preset.style.background) {
+                ctx.fillStyle = preset.style.background.color;
+                const blockPadding = titleSize * (preset.style.background.padding || 0.1);
+                ctx.fillRect(
+                    xPos - blockPadding, 
+                    currentY - blockPadding, 
+                    textMetrics.width + blockPadding * 2, 
+                    titleSize * 1.1 + blockPadding * 2
+                );
+            }
+
+            if (preset.style.name === 'gradient-on-block') {
+                const gradient = ctx.createLinearGradient(xPos, currentY, xPos + textMetrics.width, currentY);
+                gradient.addColorStop(0, textPalette.fill1);
+                gradient.addColorStop(1, textPalette.fill2);
+                ctx.fillStyle = gradient;
+            } else {
+                ctx.fillStyle = textPalette.fill1;
+            }
+            ctx.strokeStyle = textPalette.stroke;
+            if (preset.style.forcedStroke) {
+                ctx.strokeStyle = preset.style.forcedStroke;
+            }
+            
+            if (preset.style.name === 'gradient-on-block') {
+                ctx.lineWidth = titleSize * 0.04;
+            } else {
+                ctx.lineWidth = titleSize * 0.05;
+            }
+
+            const needsFill = ['fill', 'fill-stroke', 'gradient-on-block', 'vertical'].includes(preset.style.name);
+            const needsStroke = ['stroke', 'fill-stroke', 'gradient-on-block'].includes(preset.style.name);
+
+            if (needsFill) {
+                 ctx.fillText(line, drawX, currentY);
+            }
+            if (needsStroke) {
+                ctx.strokeText(line, drawX, currentY);
+            }
+            currentY += titleSize * 1.1;
+        });
+
+        // Draw Subtitle
+        if (subtitleText) {
+            currentY += titleSize * 0.2;
+            ctx.font = `500 ${subtitleSize}px ${subtitleFont}`;
+            
+            ctx.shadowColor = 'transparent';
+            ctx.shadowBlur = 0;
+            ctx.shadowOffsetX = 0;
+            ctx.shadowOffsetY = 0;
+            ctx.strokeStyle = 'transparent';
+            ctx.lineWidth = 0;
+            ctx.fillStyle = textPalette.fill1;
+            ctx.lineJoin = 'round';
+
+            switch (subtitleOutline) {
+                case 'white':
+                    ctx.strokeStyle = 'white';
+                    ctx.lineWidth = subtitleSize * 0.2;
+                    ctx.fillStyle = textPalette.stroke;
+                    break;
+                case 'black':
+                    ctx.strokeStyle = 'black';
+                    ctx.lineWidth = subtitleSize * 0.2;
+                    ctx.fillStyle = textPalette.fill1;
+                    break;
+                case 'soft_shadow':
+                    ctx.shadowColor = 'rgba(0, 0, 0, 0.7)';
+                    ctx.shadowBlur = subtitleSize * 0.1;
+                    ctx.shadowOffsetX = subtitleSize * 0.05;
+                    ctx.shadowOffsetY = subtitleSize * 0.05;
+                    ctx.fillStyle = textPalette.fill1;
+                    break;
+                case 'transparent_box':
+                    ctx.fillStyle = textPalette.fill1;
+                    break;
+                case 'auto':
+                default:
+                    ctx.fillStyle = textPalette.fill1;
+                    ctx.strokeStyle = textPalette.stroke;
+                    ctx.lineWidth = subtitleSize * 0.15;
+                    break;
+            }
+
+            subtitleLines.forEach(line => {
+                const drawX = ctx.textAlign === 'center' ? startX : startX;
+                if (subtitleOutline === 'transparent_box') {
+                    const textMetrics = ctx.measureText(line);
+                    const textWidth = textMetrics.width;
+                    const textHeight = subtitleSize;
+                    const padding = subtitleSize * 0.25;
+                    
+                    let boxX;
+                    switch (ctx.textAlign) {
+                        case 'left': boxX = startX; break;
+                        case 'right': boxX = startX - textWidth; break;
+                        default: boxX = startX - textWidth / 2; break;
+                    }
+                    
+                    const boxRgb = textPalette.stroke.match(/\d+/g)?.map(Number) || [0, 0, 0];
+                    ctx.fillStyle = `rgba(${boxRgb[0]}, ${boxRgb[1]}, ${boxRgb[2]}, 0.6)`;
+                    
+                    ctx.fillRect(boxX - padding, currentY - (padding / 2), textWidth + (padding * 2), textHeight + padding);
+                    
+                    ctx.fillStyle = textPalette.fill1;
+                    ctx.fillText(line, drawX, currentY);
+
+                } else if (subtitleOutline === 'soft_shadow') {
+                    ctx.fillText(line, drawX, currentY);
+                } else {
+                    ctx.strokeText(line, drawX, currentY);
+                    ctx.fillText(line, drawX, currentY);
+                }
+                currentY += subtitleSize * 1.2;
+            });
+        }
+        
+        ctx.restore();
+    }
+    
+    // Draw Feature Details
+    drawFeatureDetails(ctx, featureDetails || []);
+
+    // Draw Price Tag
+    drawPriceTag(ctx, priceData);
+
+    // Draw brand name watermark
+    if (brandData && brandData.name.trim()) {
+        ctx.save();
+        const brandName = brandData.name.trim();
+        const brandSize = CANVAS_SIZE * 0.02;
+        ctx.font = `600 ${brandSize}px 'Poppins', sans-serif`;
+        
+        // Use a semi-transparent version of the stroke color from the main palette
+        const brandColor = palette.stroke.startsWith('#') 
+            ? `${palette.stroke}B3` // Append 70% opacity in hex
+            : `rgba(0,0,0,0.7)`; // Default fallback
+
+        ctx.fillStyle = brandColor;
+        ctx.textAlign = 'right';
+        ctx.textBaseline = 'bottom';
+
+        const brandMargin = CANVAS_SIZE * 0.03;
+        ctx.fillText(brandName, CANVAS_SIZE - brandMargin, CANVAS_SIZE - brandMargin);
+        
+        ctx.restore();
+    }
+};
+
+const CopyButton: React.FC<{textToCopy: string}> = ({ textToCopy }) => {
+    const [copied, setCopied] = useState(false);
+    const handleCopy = () => {
+        navigator.clipboard.writeText(textToCopy);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    };
+    return (
+        <button
+            onClick={handleCopy}
+            className="p-1.5 rounded-md text-gray-400 hover:bg-gray-200 hover:text-gray-600 transition-colors"
+            aria-label={copied ? "Copiado!" : "Copiar"}
+        >
+            {copied ? <CheckIcon className="w-4 h-4 text-green-600" /> : <ClipboardIcon className="w-4 h-4" />}
+        </button>
+    );
+};
+
+const MarketingSuite: React.FC<Pick<ImageCanvasProps, 'adCopy' | 'isAdCopyLoading' | 'onGenerateAds' | 'adCopyError'>> = ({ adCopy, isAdCopyLoading, onGenerateAds, adCopyError }) => {
+    if (isAdCopyLoading) {
+        return (
+            <div className="text-center p-8">
+                <LoaderIcon className="w-8 h-8 mx-auto animate-spin text-purple-600"/>
+                <p className="mt-2 text-sm text-gray-500 font-medium">Gerando textos de marketing...</p>
+            </div>
+        );
+    }
+
+    if (adCopyError) {
+        // Check for rate limit by looking for the specific phrase from our custom error.
+        const isRateLimitError = adCopyError.includes("excedeu sua cota");
+
+        if (isRateLimitError) {
+            return (
+                 <div className="text-center p-6 bg-yellow-50 rounded-lg border border-yellow-200">
+                    <AlertTriangleIcon className="w-8 h-8 mx-auto text-yellow-500 mb-3" />
+                    <h4 className="font-semibold text-yellow-900">Limite Atingido</h4>
+                    <p className="mt-1 text-sm text-yellow-800 max-w-sm mx-auto">{adCopyError}</p>
+                    <p className="text-xs text-yellow-700 mt-2">Aguarde o contador no botão principal zerar para tentar novamente.</p>
+                </div>
+            );
+        }
+
+        return (
+            <div className="text-center p-6 bg-red-50 rounded-lg border border-red-200">
+                <AlertTriangleIcon className="w-8 h-8 mx-auto text-red-500 mb-3" />
+                <h4 className="font-semibold text-red-700">Erro ao Gerar Anúncios</h4>
+                <p className="mt-1 text-sm text-red-600 max-w-sm mx-auto">{adCopyError}</p>
+                <button
+                    onClick={onGenerateAds}
+                    className="mt-4 flex items-center justify-center gap-2 px-6 py-2.5 bg-purple-600 text-white font-bold rounded-lg hover:bg-purple-700 transition-colors duration-200"
+                >
+                    <SparklesIcon className="w-5 h-5" />
+                    <span>Tentar Novamente</span>
+                </button>
+            </div>
+        );
+    }
+    
+    if (adCopy) {
+        return (
+            <div className="space-y-6">
+                <div className="p-4 bg-purple-50 border border-purple-200 rounded-lg">
+                    <h4 className="flex items-center gap-2 font-semibold text-purple-800 text-base">
+                        <LightbulbIcon className="w-5 h-5"/>
+                        Dica de Estratégia
+                    </h4>
+                    <p className="mt-2 text-sm text-purple-700">{adCopy.strategyTip}</p>
+                </div>
+
+                <div className="space-y-4">
+                    <h4 className="font-semibold text-gray-700 text-base">Google Ads</h4>
+                    <div className="space-y-2 text-sm">
+                        {adCopy.google.headlines.map((text, i) => (
+                            <div key={i} className="flex items-center justify-between gap-2 p-2 bg-gray-100 rounded-md">
+                                <span className="text-gray-800"><span className="font-bold text-gray-500">T{i+1}:</span> {text}</span>
+                                <CopyButton textToCopy={text} />
+                            </div>
+                        ))}
+                        {adCopy.google.descriptions.map((text, i) => (
+                             <div key={i} className="flex items-start justify-between gap-2 p-2 bg-gray-100 rounded-md">
+                                <p className="text-gray-800"><span className="font-bold text-gray-500">D{i+1}:</span> {text}</p>
+                                <CopyButton textToCopy={text} />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                 <div className="space-y-4">
+                    <h4 className="font-semibold text-gray-700 text-base">Facebook Ads</h4>
+                    <div className="space-y-2 text-sm">
+                        <div className="flex items-start justify-between gap-2 p-2 bg-gray-100 rounded-md">
+                            <p className="text-gray-800 whitespace-pre-wrap"><span className="font-bold text-gray-500">Texto Principal:</span><br/>{adCopy.facebook.primaryText}</p>
+                            <CopyButton textToCopy={adCopy.facebook.primaryText} />
+                        </div>
+                         <div className="flex items-center justify-between gap-2 p-2 bg-gray-100 rounded-md">
+                            <span className="text-gray-800"><span className="font-bold text-gray-500">Título:</span> {adCopy.facebook.headline}</span>
+                            <CopyButton textToCopy={adCopy.facebook.headline} />
+                        </div>
+                         <div className="flex items-center justify-between gap-2 p-2 bg-gray-100 rounded-md">
+                            <span className="text-gray-800"><span className="font-bold text-gray-500">Descrição:</span> {adCopy.facebook.description}</span>
+                            <CopyButton textToCopy={adCopy.facebook.description} />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+
+    return (
+        <div className="text-center p-8">
+            <h3 className="text-lg font-bold text-gray-700">Transforme sua Arte em Anúncios</h3>
+            <p className="mt-2 text-sm text-gray-500 max-w-sm mx-auto">Gere textos de marketing para Google e Facebook baseados na sua criação, otimizados para conversão.</p>
+            <button
+                onClick={onGenerateAds}
+                className="mt-4 flex items-center justify-center gap-2 px-6 py-2.5 bg-purple-600 text-white font-bold rounded-lg hover:bg-purple-700 transition-colors duration-200"
+            >
+                <SparklesIcon className="w-5 h-5" />
+                <span>Gerar Anúncios</span>
+            </button>
+        </div>
+    )
+};
+
+const FeatureDetailEditor: React.FC<{
+    details: FeatureDetails[] | null;
+    setDetails: (value: React.SetStateAction<FeatureDetails[] | null>) => void;
+}> = ({ details, setDetails }) => {
+    if (!details) return null;
+
+    const handleDetailChange = (index: number, field: keyof FeatureDetails, value: string) => {
+        setDetails(currentDetails => {
+            if (!currentDetails) return null;
+            const newDetails = [...currentDetails];
+            newDetails[index] = { ...newDetails[index], [field]: value };
+            return newDetails;
+        });
+    };
+
+    return (
+        <div className="space-y-4">
+            <div className="flex items-center gap-2">
+                <TextQuoteIcon className="w-5 h-5 text-gray-600" />
+                <h3 className="text-base font-semibold text-gray-800">Detalhes do Produto</h3>
+            </div>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {details.map((detail, index) => (
+                    <div key={index} className="space-y-2">
+                        <input
+                            type="text"
+                            value={detail.title}
+                            onChange={(e) => handleDetailChange(index, 'title', e.target.value)}
+                            placeholder={`Título do Detalhe ${index + 1}`}
+                            className="w-full p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none text-sm font-semibold"
+                        />
+                        <textarea
+                            value={detail.description}
+                            onChange={(e) => handleDetailChange(index, 'description', e.target.value)}
+                            placeholder={`Descrição do detalhe ${index + 1}...`}
+                            className="w-full h-20 p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none text-sm resize-none"
+                            rows={3}
+                        />
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+const EditingPanel: React.FC<Pick<ImageCanvasProps, 'textOverlay' | 'compositionId' | 'textPosition' | 'subtitleOutline' | 'priceData' | 'featureDetails' | 'setTextOverlay' | 'setCompositionId' | 'setTextPosition' | 'setSubtitleOutline' | 'setPriceData' | 'setFeatureDetails' >> = (props) => {
+    const { textOverlay, compositionId, textPosition, subtitleOutline, priceData, featureDetails, setTextOverlay, setCompositionId, setTextPosition, setSubtitleOutline, setPriceData, setFeatureDetails } = props;
+    
+    // If feature details are present, show the specialized editor. Otherwise, show the standard editor.
+    if (featureDetails) {
+        return <FeatureDetailEditor details={featureDetails} setDetails={setFeatureDetails} />;
+    }
+
+    return (
+        <div className="space-y-6">
+            <div>
+                <label htmlFor="text-editor-overlay" className="block text-sm font-medium text-gray-700 mb-1">Texto da Arte</label>
+                <div className="relative">
+                    <textarea 
+                        id="text-editor-overlay"
+                        value={textOverlay} 
+                        onChange={(e) => setTextOverlay(e.target.value)} 
+                        placeholder="Título (primeira linha)&#10;Subtítulo (linhas seguintes)" 
+                        className="w-full h-24 p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none transition-shadow duration-200 resize-none text-gray-800 placeholder-gray-400"
+                        maxLength={280}
+                    />
+                    <span className="absolute bottom-2 right-3 text-xs text-gray-400">{textOverlay.length} / 280</span>
+                </div>
+            </div>
+
+            <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Estilo do Texto</label>
+                <div className="grid grid-cols-3 sm:grid-cols-5 gap-2">
+                    {compositionPresets.map(preset => (
+                        <button
+                            key={preset.id}
+                            type="button"
+                            onClick={() => setCompositionId(preset.id)}
+                            className={`flex flex-col items-center justify-center p-2 rounded-lg border-2 transition-all duration-200 ${compositionId === preset.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 bg-white hover:border-gray-300'}`}
+                            title={preset.name}
+                        >
+                            <preset.icon className={`w-10 h-10 mb-1 ${compositionId === preset.id ? 'text-purple-600' : 'text-gray-500'}`} />
+                            <span className={`text-xs text-center font-medium ${compositionId === preset.id ? 'text-purple-700' : 'text-gray-500'}`}>{preset.name}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            <div>
+                 <label className="block text-sm font-medium text-gray-700 mb-2">Posição do Texto</label>
+                 <div className="grid grid-cols-5 gap-2">
+                    {positionOptions.map(option => (
+                        <button
+                            key={option.id}
+                            type="button"
+                            onClick={() => setTextPosition(option.id)}
+                            className={`flex flex-col items-center justify-center p-2 rounded-lg border-2 transition-all duration-200 ${textPosition === option.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 bg-white hover:border-gray-300'}`}
+                            title={option.name}
+                            aria-label={`Posicionar texto: ${option.name}`}
+                        >
+                            <option.icon className={`w-8 h-8 mb-1 ${textPosition === option.id ? 'text-purple-600' : 'text-gray-400'}`} />
+                            <span className={`text-xs font-medium ${textPosition === option.id ? 'text-purple-700' : 'text-gray-500'}`}>{option.name}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            <div>
+                <label className="block text-sm font-medium text-gray-700 mb-2">Estilo do Subtítulo</label>
+                <div className="grid grid-cols-5 gap-2">
+                    {subtitleOutlineOptions.map(option => (
+                        <button
+                            key={option.id}
+                            type="button"
+                            onClick={() => setSubtitleOutline(option.id)}
+                            className={`flex flex-col items-center justify-center p-2 rounded-lg border-2 transition-all duration-200 ${subtitleOutline === option.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 bg-white hover:border-gray-300'}`}
+                            title={option.name}
+                            aria-label={`Estilo do subtítulo: ${option.name}`}
+                        >
+                            <option.icon className={`w-8 h-8 mb-1 ${subtitleOutline === option.id ? 'text-purple-600' : 'text-gray-500'}`} />
+                            <span className={`text-xs text-center font-medium ${subtitleOutline === option.id ? 'text-purple-700' : 'text-gray-500'}`}>{option.name}</span>
+                        </button>
+                    ))}
+                </div>
+            </div>
+            
+            <div className="pt-4 border-t border-gray-200">
+                <label className="block text-sm font-medium text-gray-700 mb-1 flex items-center gap-2">
+                    <TagIcon className="w-4 h-4" />
+                    Etiqueta de Preço
+                </label>
+                 <div className="space-y-4 mt-2">
+                    <input name="priceText" value={priceData.text} onChange={(e) => setPriceData(p => ({ ...p, text: e.target.value }))} placeholder="Ex: R$ 99,90" className="w-full p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none" />
+                    <input name="modelText" value={priceData.modelText} onChange={(e) => setPriceData(p => ({ ...p, modelText: e.target.value }))} placeholder="Modelo do produto/serviço" className="w-full p-2 bg-gray-50 rounded-md border border-gray-300 focus:ring-2 focus:ring-purple-500 focus:outline-none" />
+                    <div>
+                        <label className="text-xs text-gray-500 mb-2 block">Estilo da Etiqueta</label>
+                        <div className="grid grid-cols-3 gap-2">
+                            {priceStyleOptions.map(option => (
+                                <button key={option.id} type="button" onClick={() => setPriceData(p => ({ ...p, style: option.id }))} className={`flex flex-col items-center justify-center p-2 rounded-lg border-2 transition-all duration-200 ${priceData.style === option.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 bg-white hover:border-gray-300'}`} title={option.name}>
+                                    <option.icon className={`w-8 h-8 mb-1 ${priceData.style === option.id ? 'text-purple-600' : 'text-gray-500'}`} />
+                                    <span className={`text-xs font-medium ${priceData.style === option.id ? 'text-purple-700' : 'text-gray-500'}`}>{option.name}</span>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                     <div>
+                        <label className="text-xs text-gray-500 mb-2 block">Cor</label>
+                        <div className="grid grid-cols-4 gap-2">
+                            {priceColorOptions.map(option => (
+                                <button key={option.id} type="button" onClick={() => setPriceData(p => ({ ...p, color: option.id }))} className={`flex items-center justify-center p-2 rounded-lg border-2 transition-all duration-200 ${priceData.color === option.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 bg-white hover:border-gray-300'}`} title={option.name}>
+                                    <span className="w-6 h-6 rounded-full border border-gray-300" style={{ backgroundColor: option.hex }}></span>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                     <div>
+                        <label className="text-xs text-gray-500 mb-2 block">Posição</label>
+                        <div className="grid grid-cols-5 gap-2">
+                            {pricePositionOptions.map(option => (
+                                <button key={option.id} type="button" onClick={() => setPriceData(p => ({ ...p, position: option.id }))} className={`flex flex-col items-center justify-center p-2 rounded-lg border-2 transition-all duration-200 ${priceData.position === option.id ? 'border-purple-500 bg-purple-50' : 'border-gray-200 bg-white hover:border-gray-300'}`} title={option.name}>
+                                    <option.icon className={`w-8 h-8 mb-1 ${priceData.position === option.id ? 'text-purple-600' : 'text-gray-400'}`} />
+                                    <span className={`text-xs font-medium ${priceData.position === option.id ? 'text-purple-700' : 'text-gray-500'}`}>{option.name}</span>
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const SqlViewer: React.FC<ImageCanvasProps> = (props) => {
+    const { imagesB64, textOverlay, compositionId, textPosition, subtitleOutline, artStyles, isLoading, error, adCopy, isAdCopyLoading, onGenerateAds, adCopyError, brandData, priceData, featureDetails, setTextOverlay, setCompositionId, setTextPosition, setSubtitleOutline, setPriceData, setFeatureDetails } = props;
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [activeTab, setActiveTab] = useState<'edit' | 'marketing'>('edit');
+    const [activeImageIndex, setActiveImageIndex] = useState(0);
+
+    // Reset index when image set changes
+    useEffect(() => {
+        setActiveImageIndex(0);
+    }, [imagesB64]);
+    
+    // When feature details are loaded, switch to the edit tab automatically
+    useEffect(() => {
+        if (featureDetails) {
+            setActiveTab('edit');
+        }
+    }, [featureDetails]);
+
+    const currentImageB64 = imagesB64 ? imagesB64[activeImageIndex] : null;
+    
+    useEffect(() => {
+        if (currentImageB64 && canvasRef.current) {
+            const canvas = canvasRef.current;
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return;
+
+            const image = new Image();
+            image.crossOrigin = 'anonymous'; // Important for reading pixel data
+            image.src = `data:image/jpeg;base64,${currentImageB64}`;
+            image.onload = () => {
+                drawCanvas(ctx, image, textOverlay, compositionId, textPosition, subtitleOutline, artStyles, brandData, priceData, featureDetails);
+            };
+            image.onerror = () => {
+                console.error("Failed to load the generated image.");
+            }
+        }
+    }, [currentImageB64, textOverlay, compositionId, textPosition, subtitleOutline, artStyles, brandData, priceData, featureDetails]);
+
+    const handleDownload = () => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+        const link = document.createElement('a');
+        const fileName = `instastyle-post-${activeImageIndex + 1}.jpg`;
+        link.download = fileName;
+        link.href = canvas.toDataURL('image/jpeg', 0.9);
+        link.click();
+    };
+
+    const renderContent = () => {
+        if (isLoading) {
+            return (
+                 <div className="flex items-center justify-center h-full text-gray-500">
+                    <div className="text-center">
+                        <div className="w-12 h-12 border-4 border-dashed rounded-full animate-spin border-purple-500 mx-auto"></div>
+                        <p className="mt-4 text-lg font-medium">Gerando sua arte...</p>
+                        <p className="text-sm">Isso pode levar alguns segundos.</p>
+                    </div>
+                </div>
+            )
+        }
+
+        if (error) {
+            // Check for rate limit by looking for the specific phrase from our custom error.
+            const isRateLimitError = error.includes("excedeu sua cota");
+
+            if (isRateLimitError) {
+                 return (
+                    <div className="flex items-center justify-center h-full text-yellow-800">
+                        <div className="text-center bg-yellow-50 p-6 rounded-lg border border-yellow-200 max-w-md">
+                            <AlertTriangleIcon className="w-12 h-12 mx-auto mb-4 text-yellow-500"/>
+                            <h3 className="font-semibold text-lg text-yellow-900">Limite de Requisições Atingido</h3>
+                            <p className="text-sm text-yellow-800 mt-2">{error}</p>
+                            <p className="text-xs text-yellow-700 mt-3">
+                                Aguarde o contador no botão de geração zerar para tentar novamente.
+                            </p>
+                        </div>
+                    </div>
+                );
+            }
+            
+            return (
+                 <div className="flex items-center justify-center h-full text-red-600">
+                    <div className="text-center bg-red-50 p-6 rounded-lg border border-red-200 max-w-md">
+                        <AlertTriangleIcon className="w-12 h-12 mx-auto mb-4 text-red-500"/>
+                        <p className="font-semibold text-red-700">Ocorreu um Erro</p>
+                        <p className="text-sm text-red-600 mt-2">{error}</p>
+                    </div>
+                </div>
+            )
+        }
+
+        if (imagesB64 && imagesB64.length > 0) {
+            const isCarousel = imagesB64.length > 1;
+            return (
+                <div className="relative h-full w-full flex flex-col items-center justify-center gap-4">
+                    <div className="relative w-full max-w-[500px]">
+                        <canvas
+                            ref={canvasRef}
+                            width={CANVAS_SIZE}
+                            height={CANVAS_SIZE}
+                            className="w-full h-auto aspect-square object-contain rounded-lg bg-gray-50 border border-gray-200 shadow-md"
+                        />
+                         {isCarousel && (
+                            <>
+                                <button
+                                    onClick={() => setActiveImageIndex(i => Math.max(0, i - 1))}
+                                    disabled={activeImageIndex === 0}
+                                    className="absolute top-1/2 -translate-y-1/2 -left-4 z-10 p-2 bg-white/80 hover:bg-white rounded-full shadow-lg border border-gray-200 transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+                                    aria-label="Imagem anterior"
+                                >
+                                    <ChevronLeftIcon className="w-6 h-6 text-gray-800" />
+                                </button>
+                                <button
+                                    onClick={() => setActiveImageIndex(i => Math.min(imagesB64.length - 1, i + 1))}
+                                    disabled={activeImageIndex === imagesB64.length - 1}
+                                    className="absolute top-1/2 -translate-y-1/2 -right-4 z-10 p-2 bg-white/80 hover:bg-white rounded-full shadow-lg border border-gray-200 transition-all disabled:opacity-30 disabled:cursor-not-allowed"
+                                    aria-label="Próxima imagem"
+                                >
+                                    <ChevronRightIcon className="w-6 h-6 text-gray-800" />
+                                </button>
+                            </>
+                        )}
+                    </div>
+
+                    {isCarousel && (
+                        <div className="flex justify-center items-center gap-2">
+                            {imagesB64.map((_, index) => (
+                                <button
+                                    key={index}
+                                    onClick={() => setActiveImageIndex(index)}
+                                    className={`w-2.5 h-2.5 rounded-full transition-colors ${activeImageIndex === index ? 'bg-purple-600' : 'bg-gray-300 hover:bg-gray-400'}`}
+                                    aria-label={`Ir para imagem ${index + 1}`}
+                                />
+                            ))}
+                        </div>
+                    )}
+
+
+                    <div className="flex items-center gap-3">
+                         <button
+                            onClick={handleDownload}
+                            className="flex items-center justify-center gap-2 px-5 py-2.5 bg-purple-600 text-white font-bold rounded-lg hover:bg-purple-700 transition-colors duration-200"
+                            aria-label="Baixar arte gerada"
+                        >
+                            <DownloadIcon className="w-5 h-5" />
+                            <span>Baixar {isCarousel ? `(${activeImageIndex + 1}/${imagesB64.length})` : ''}</span>
+                        </button>
+                         <div className="relative group">
+                            <button
+                                disabled
+                                className="flex items-center justify-center gap-2 px-5 py-2.5 bg-gray-300 text-gray-500 font-bold rounded-lg cursor-not-allowed"
+                                aria-label="Publicar no Instagram (em breve)"
+                            >
+                                <PublishIcon className="w-5 h-5" />
+                                <span>Publicar</span>
+                            </button>
+                             <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
+                                Em breve!
+                            </div>
+                        </div>
+                    </div>
+                    <div className="w-full max-w-2xl mt-4 p-4 sm:p-6 bg-white rounded-lg border border-gray-200 shadow-sm">
+                        <div className="border-b border-gray-200 mb-4">
+                            <nav className="-mb-px flex gap-6" aria-label="Tabs">
+                                <button
+                                    onClick={() => setActiveTab('edit')}
+                                    className={`flex items-center gap-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors ${
+                                        activeTab === 'edit'
+                                        ? 'border-purple-500 text-purple-600'
+                                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                    }`}
+                                >
+                                    <EditIcon className="w-5 h-5" />
+                                    Editar Arte
+                                </button>
+                                <button
+                                    onClick={() => setActiveTab('marketing')}
+                                    className={`flex items-center gap-2 py-3 px-1 border-b-2 font-medium text-sm transition-colors ${
+                                        activeTab === 'marketing'
+                                        ? 'border-purple-500 text-purple-600'
+                                        : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                                    }`}
+                                >
+                                    <MegaphoneIcon className="w-5 h-5" />
+                                    Marketing
+                                </button>
+                            </nav>
+                        </div>
+                        
+                        {activeTab === 'edit' && (
+                            <EditingPanel 
+                                textOverlay={textOverlay}
+                                compositionId={compositionId}
+                                textPosition={textPosition}
+                                subtitleOutline={subtitleOutline}
+                                priceData={priceData}
+                                featureDetails={featureDetails}
+                                setTextOverlay={setTextOverlay}
+                                setCompositionId={setCompositionId}
+                                setTextPosition={setTextPosition}
+                                setSubtitleOutline={setSubtitleOutline}
+                                setPriceData={setPriceData}
+                                setFeatureDetails={setFeatureDetails}
+                            />
+                        )}
+
+                        {activeTab === 'marketing' && (
+                             <MarketingSuite adCopy={adCopy} isAdCopyLoading={isAdCopyLoading} adCopyError={adCopyError} onGenerateAds={onGenerateAds} />
+                        )}
+
+                    </div>
+                </div>
+            );
+        }
+
+        return (
+            <div className="flex items-center justify-center h-full text-gray-400">
+                <div className="text-center p-4">
+                     <ImageIcon className="w-16 h-16 mx-auto mb-4" />
+                    <p className="font-bold text-lg text-gray-600">Sua arte aparecerá aqui</p>
+                    <p className="text-sm">Preencha o painel ao lado para começar.</p>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="h-full bg-gray-50 rounded-lg p-4 flex flex-col items-center justify-center flex-grow min-h-[500px] lg:min-h-0 overflow-y-auto">
+            {renderContent()}
+        </div>
+    );
+};

components/icons.tsx

@@ -0,0 +1,432 @@
+import React from 'react';
+
+// A helper type for component props
+type IconProps = React.SVGProps<SVGSVGElement>;
+
+export const LogoIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect>
+    <circle cx="8.5" cy="8.5" r="1.5"></circle>
+    <path d="M21 15l-5-5L5 21"></path>
+  </svg>
+);
+
+export const DownloadIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+        <polyline points="7 10 12 15 17 10"></polyline>
+        <line x1="12" y1="15" x2="12" y2="3"></line>
+    </svg>
+);
+
+export const SparklesIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="m12 3-1.9 5.8-5.8 1.9 5.8 1.9 1.9 5.8 1.9-5.8 5.8-1.9-5.8-1.9z"></path>
+  </svg>
+);
+
+export const LoaderIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M21 12a9 9 0 1 1-6.219-8.56"></path>
+  </svg>
+);
+
+export const AlertTriangleIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <path d="m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"></path>
+      <path d="M12 9v4"></path>
+      <path d="M12 17h.01"></path>
+    </svg>
+);
+
+export const GoogleIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" {...props}>
+    <path d="M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.19,4.73C14.03,4.73 15.69,5.36 16.95,6.55L19.05,4.44C17.22,2.77 15,2 12.19,2C6.92,2 2.71,6.6 2.71,12C2.71,17.4 6.92,22 12.19,22C17.6,22 21.7,18.35 21.7,12.33C21.7,11.77 21.52,11.44 21.35,11.1Z" />
+  </svg>
+);
+
+export const LogoutIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
+    <polyline points="16 17 21 12 16 7"></polyline>
+    <line x1="21" y1="12" x2="9" y2="12"></line>
+  </svg>
+);
+
+export const PublishIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"></path>
+    <polyline points="16 6 12 2 8 6"></polyline>
+    <line x1="12" y1="2" x2="12" y2="15"></line>
+  </svg>
+);
+
+export const ImageIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+        <circle cx="9" cy="9" r="2" />
+        <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+    </svg>
+);
+
+export const BookOpenIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+    <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+  </svg>
+);
+
+export const ClipboardIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <rect width="8" height="4" x="8" y="2" rx="1" ry="1"></rect>
+    <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+  </svg>
+);
+
+export const CheckIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polyline points="20 6 9 17 4 12"></polyline>
+  </svg>
+);
+
+export const PlusIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <line x1="12" y1="5" x2="12" y2="19"></line>
+    <line x1="5" y1="12" x2="19" y2="12"></line>
+  </svg>
+);
+
+export const XIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <line x1="18" y1="6" x2="6" y2="18"></line>
+    <line x1="6" y1="6" x2="18" y2="18"></line>
+  </svg>
+);
+
+export const MegaphoneIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="m3 11 18-5v12L3 14v-3z"></path>
+    <path d="M11.6 16.8a3 3 0 1 1-5.8-1.6"></path>
+  </svg>
+);
+
+export const GlobeIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <circle cx="12" cy="12" r="10"></circle>
+    <line x1="2" y1="12" x2="22" y2="12"></line>
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+  </svg>
+);
+
+export const TagIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M12 2H2v10l9.29 9.29a1 1 0 0 0 1.42 0l9.29-9.29L12 2z"></path>
+    <path d="M7 7h.01"></path>
+  </svg>
+);
+
+export const ProductIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+        <path d="m3.27 6.96 8.73 5.05 8.73-5.05" />
+        <path d="M12 22.08V12" />
+    </svg>
+);
+
+export const UsersIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
+    <circle cx="9" cy="7" r="4"></circle>
+    <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
+    <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+  </svg>
+);
+
+export const FamilyIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
+        <circle cx="9" cy="7" r="4"></circle>
+        <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
+        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+        <path d="M19.5 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path>
+        <path d="M22 21v-1a2 2 0 0 0-2-2h-1"></path>
+    </svg>
+);
+
+export const LayersIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <polygon points="12 2 2 7 12 12 22 7 12 2"></polygon>
+        <polyline points="2 17 12 22 22 17"></polyline>
+        <polyline points="2 12 12 17 22 12"></polyline>
+    </svg>
+);
+
+export const DetailedViewIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="3" y="3" width="7" height="7" rx="1"></rect>
+        <rect x="14" y="3" width="7" height="7" rx="1"></rect>
+        <rect x="14" y="14" width="7" height="7" rx="1"></rect>
+        <rect x="3" y="14" width="7" height="7" rx="1"></rect>
+    </svg>
+);
+
+export const PosterIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+        <rect x="7" y="7" width="5" height="5" rx="1"></rect>
+        <path d="M14 7h3v10h-3z"></path>
+        <rect x="7" y="14" width="5" height="3" rx="1"></rect>
+    </svg>
+);
+
+export const BlueprintIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
+      <path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
+      <path d="M12 11h4"></path>
+      <path d="M12 16h4"></path>
+      <path d="M8 11h.01"></path>
+      <path d="M8 16h.01"></path>
+    </svg>
+);
+
+export const ChevronLeftIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polyline points="15 18 9 12 15 6"></polyline>
+  </svg>
+);
+
+export const ChevronRightIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polyline points="9 18 15 12 9 6"></polyline>
+  </svg>
+);
+
+
+// --- Layout Icons ---
+export const LayoutRandomIcon: React.FC<IconProps> = (props) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M15.1629 5.83709C15.9014 6.57556 16.5291 7.42444 17.0454 8.38444M6.95462 15.6156C7.47089 16.5756 8.09861 17.4244 8.83709 18.1629" strokeOpacity="0.7"/>
+    <path d="M19 10C19 12.1667 18.1667 14.8333 16.5 17" strokeOpacity="0.7"/>
+    <path d="M5 14C5 11.8333 5.83333 9.16667 7.5 7" strokeOpacity="0.7"/>
+    <path d="M17 5L19 5L19 7"/>
+    <path d="M7 19L5 19L5 17"/>
+    <path d="M10 5L14 5" strokeOpacity="0.7"/>
+    <path d="M10 19L14 19" strokeOpacity="0.7"/>
+    <path d="M5 10L5 14" strokeOpacity="0.7"/>
+    <path d="M19 10L19 14" strokeOpacity="0.7"/>
+  </svg>
+);
+
+export const LayoutImpactoIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="#7C3AED" fillOpacity="0.2"/>
+        <text x="12" y="15" fontFamily="Arial, sans-serif" fontSize="8" fontWeight="bold" textAnchor="middle" stroke="white" strokeWidth="0.8" fill="black">Aa</text>
+    </svg>
+);
+
+export const LayoutDegradeIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="#7C3AED" fillOpacity="0.2"/>
+        <rect x="5" y="9" width="14" height="6" rx="1" fill="black" fillOpacity="0.3"/>
+        <defs>
+            <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#A78BFA"/>
+                <stop offset="100%" stopColor="#F472B6"/>
+            </linearGradient>
+        </defs>
+        <text x="12" y="15" fontFamily="Arial, sans-serif" fontSize="8" fontWeight="bold" textAnchor="middle" fill="url(#grad1)">Aa</text>
+    </svg>
+);
+
+export const LayoutContornoIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="#7C3AED" fillOpacity="0.2"/>
+        <text x="12" y="15" fontFamily="Arial, sans-serif" fontSize="8" fontWeight="bold" textAnchor="middle" stroke="white" strokeWidth="0.5" fill="none">Aa</text>
+    </svg>
+);
+
+export const LayoutLegivelIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="#7C3AED" fillOpacity="0.2"/>
+        <rect x="5" y="9" width="14" height="6" rx="1" fill="black" fillOpacity="0.5"/>
+        <text x="12" y="15" fontFamily="Arial, sans-serif" fontSize="8" fontWeight="bold" textAnchor="middle" fill="white">Aa</text>
+    </svg>
+);
+
+export const LayoutVerticalIcon: React.FC<IconProps> = (props) => (
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <rect x="3" y="3" width="18" height="18" rx="2" fill="#7C3AED" fillOpacity="0.2"/>
+    <text x="8" y="17" fontFamily="Arial, sans-serif" fontSize="8" fontWeight="bold" transform="rotate(-90 8 12)" fill="white">Aa</text>
+  </svg>
+);
+
+// --- NEW Position Icons ---
+export const PositionCenterIcon: React.FC<IconProps> = (props) => {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+            <rect x="7" y="9" width="10" height="6" rx="1" fill="currentColor" />
+        </svg>
+    );
+};
+
+export const PositionTopIcon: React.FC<IconProps> = (props) => {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+            <rect x="7" y="5" width="10" height="6" rx="1" fill="currentColor" />
+        </svg>
+    );
+};
+
+export const PositionBottomIcon: React.FC<IconProps> = (props) => {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+            <rect x="7" y="13" width="10" height="6" rx="1" fill="currentColor" />
+        </svg>
+    );
+};
+
+export const PositionLeftIcon: React.FC<IconProps> = (props) => {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+            <rect x="5" y="7" width="6" height="10" rx="1" fill="currentColor" />
+        </svg>
+    );
+};
+
+export const PositionRightIcon: React.FC<IconProps> = (props) => {
+    return (
+        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+            <rect x="13" y="7" width="6" height="10" rx="1" fill="currentColor" />
+        </svg>
+    );
+};
+
+export const TrendingUpIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+        <polyline points="17 6 23 6 23 12"></polyline>
+    </svg>
+);
+
+export const LightbulbIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M15.09 16.05A6.47 6.47 0 0 1 9 12.46a6.47 6.47 0 0 1 6.09-3.59"></path>
+        <path d="M12 2a7 7 0 0 0-7 7c0 2.35 1.12 4.45 2.86 5.74"></path>
+        <path d="M12 21a2 2 0 0 1-2-2v-1a2 2 0 0 1 2-2h0a2 2 0 0 1 2 2v1a2 2 0 0 1-2 2Z"></path>
+    </svg>
+);
+
+export const OutlineBlackIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor" fillOpacity="0.2"/>
+        <text x="12" y="15.5" fontFamily="Arial, sans-serif" fontSize="9" fontWeight="bold" textAnchor="middle" stroke="black" strokeWidth="1.2" strokeLinejoin="round" fill="white">Aa</text>
+    </svg>
+);
+
+export const OutlineWhiteIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor" fillOpacity="0.2"/>
+        <text x="12" y="15.5" fontFamily="Arial, sans-serif" fontSize="9" fontWeight="bold" textAnchor="middle" stroke="white" strokeWidth="1.2" strokeLinejoin="round" fill="black">Aa</text>
+    </svg>
+);
+
+export const OutlineShadowIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <defs>
+            <filter id="icon_shadow_filter" x="-20%" y="-20%" width="140%" height="140%">
+                <feOffset dx="0.5" dy="0.5" in="SourceAlpha" result="off"/>
+                <feGaussianBlur in="off" stdDeviation="0.5" result="blur"/>
+                <feFlood floodColor="black" floodOpacity="0.7" result="color"/>
+                <feComposite in="color" in2="blur" operator="in" result="shadow"/>
+                <feMerge>
+                    <feMergeNode in="shadow"/>
+                    <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+            </filter>
+        </defs>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor" fillOpacity="0.2"/>
+        <text x="12" y="15.5" fontFamily="Arial, sans-serif" fontSize="9" fontWeight="bold" textAnchor="middle" fill="white" filter="url(#icon_shadow_filter)">Aa</text>
+    </svg>
+);
+
+export const OutlineBoxIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor" fillOpacity="0.2"/>
+        <rect x="5" y="10" width="14" height="7" rx="1.5" fill="black" fillOpacity="0.5" />
+        <text x="12" y="15.5" fontFamily="Arial, sans-serif" fontSize="7" fontWeight="bold" textAnchor="middle" fill="white">Aa</text>
+    </svg>
+);
+
+export const EditIcon: React.FC<IconProps> = (props) => (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+    </svg>
+);
+
+export const TextQuoteIcon: React.FC<IconProps> = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <path d="M17 6H3"></path>
+    <path d="M21 12H3"></path>
+    <path d="M15 18H3"></path>
+  </svg>
+);
+
+
+// --- Price Tag Icons ---
+export const PriceTagCircleIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle cx="12" cy="12" r="9" fill="currentColor" fillOpacity="0.8"/>
+        <text x="12" y="14" textAnchor="middle" fontSize="6" fontWeight="bold" fill="white">R$</text>
+    </svg>
+);
+export const PriceTagRectIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="4" y="8" width="16" height="8" rx="2" fill="currentColor" fillOpacity="0.8"/>
+        <text x="12" y="14" textAnchor="middle" fontSize="6" fontWeight="bold" fill="white">R$</text>
+    </svg>
+);
+export const PriceTagBurstIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <path d="M12 2.5l1.9 4.3 4.8.7-3.5 3.4.8 4.8-4.3-2.3-4.3 2.3.8-4.8-3.5-3.4 4.8-.7L12 2.5z" fill="currentColor" fillOpacity="0.8" transform="scale(1.2) translate(-2, -2)"/>
+        <text x="12" y="14" textAnchor="middle" fontSize="5" fontWeight="bold" fill="white">R$</text>
+    </svg>
+);
+
+export const PositionTopLeftIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+        <circle cx="7" cy="7" r="4" fill="currentColor"/>
+    </svg>
+);
+export const PositionTopRightIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+        <circle cx="17" cy="7" r="4" fill="currentColor"/>
+    </svg>
+);
+export const PositionBottomLeftIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+        <circle cx="7" cy="17" r="4" fill="currentColor"/>
+    </svg>
+);
+export const PositionBottomRightIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3" strokeDasharray="3 3"/>
+        <circle cx="17" cy="17" r="4" fill="currentColor"/>
+    </svg>
+);
+export const XCircleIcon: React.FC<IconProps> = (props) => (
+    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="1.5" strokeOpacity="0.3"/>
+        <line x1="8" y1="8" x2="16" y2="16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+        <line x1="16" y1="8" x2="8" y2="16" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
+    </svg>
+);

index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>InstaStyle - Crie Posts com IA</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Anton&family=Bangers&family=Lobster&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:wght@400;500;700;900&display=swap" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        font-family: 'Poppins', sans-serif;
+      }
+      /* Base scrollbar styles */
+      ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+      }
+      ::-webkit-scrollbar-track {
+        background: #e5e7eb; /* bg-gray-200 */
+      }
+      ::-webkit-scrollbar-thumb {
+        background: #9ca3af; /* bg-gray-400 */
+        border-radius: 4px;
+      }
+      ::-webkit-scrollbar-thumb:hover {
+        background: #6b7280; /* bg-gray-500 */
+      }
+    </style>
+  <script type="importmap">
+{
+  "imports": {
+    "react/": "https://esm.sh/react@^19.1.0/",
+    "react": "https://esm.sh/react@^19.1.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.1.0/",
+    "@supabase/supabase-js": "https://esm.sh/@supabase/supabase-js@^2.50.5",
+    "@google/genai": "https://esm.sh/@google/genai@^1.9.0",
+    "@supabase/gotrue-js": "https://esm.sh/@supabase/gotrue-js@^2.71.1"
+  }
+}
+</script>
+<script src="/config.js"></script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

index.tsx

@@ -0,0 +1,16 @@
+
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

lib/compositions.ts

@@ -0,0 +1,129 @@
+import type { CompositionPreset } from '@/types';
+import { 
+    LayoutRandomIcon,
+    LayoutImpactoIcon,
+    LayoutDegradeIcon,
+    LayoutContornoIcon,
+    LayoutLegivelIcon,
+    LayoutVerticalIcon,
+    OutlineWhiteIcon
+} from '@/components/icons';
+
+export const compositionPresets: CompositionPreset[] = [
+    {
+        id: 'random',
+        name: 'Aleatório',
+        icon: LayoutRandomIcon,
+        config: { // Config is a placeholder, logic is handled in the component
+            style: { name: 'fill-stroke', palette: 'light' }, 
+            rotation: true, 
+            subtitle: true 
+        }
+    },
+    {
+        id: 'impacto-light',
+        name: 'Impacto (Claro)',
+        icon: LayoutImpactoIcon,
+        config: {
+            style: { name: 'fill-stroke', palette: 'light' },
+            rotation: true,
+            subtitle: true
+        }
+    },
+    {
+        id: 'impacto-dark',
+        name: 'Impacto (Escuro)',
+        icon: LayoutImpactoIcon,
+        config: {
+            style: { name: 'fill-stroke', palette: 'dark' },
+            rotation: true,
+            subtitle: true
+        }
+    },
+    {
+        id: 'impacto-vibrant',
+        name: 'Impacto (Vibrante)',
+        icon: LayoutImpactoIcon,
+        config: {
+            style: { name: 'fill-stroke', palette: 'complementary' },
+            rotation: true,
+            subtitle: true
+        }
+    },
+    {
+        id: 'impacto-contorno-branco',
+        name: 'Impacto (Contorno Branco)',
+        icon: OutlineWhiteIcon,
+        config: {
+            style: {
+                name: 'fill-stroke',
+                palette: 'dark',
+                forcedStroke: 'white',
+            },
+            rotation: true,
+            subtitle: true
+        }
+    },
+    {
+        id: 'legivel-light',
+        name: 'Legível (Fundo Escuro)',
+        icon: LayoutLegivelIcon,
+        config: {
+            style: {
+                name: 'fill',
+                palette: 'light',
+                background: { color: 'rgba(0, 0, 0, 0.5)', padding: 0.2 }
+            },
+            rotation: false,
+            subtitle: true
+        }
+    },
+    {
+        id: 'legivel-dark',
+        name: 'Legível (Fundo Claro)',
+        icon: LayoutLegivelIcon,
+        config: {
+            style: {
+                name: 'fill',
+                palette: 'dark',
+                background: { color: 'rgba(255, 255, 255, 0.6)', padding: 0.2 }
+            },
+            rotation: false,
+            subtitle: true
+        }
+    },
+    {
+        id: 'degrade',
+        name: 'Degradê',
+        icon: LayoutDegradeIcon,
+        config: {
+            style: {
+                name: 'gradient-on-block',
+                palette: 'complementary',
+                background: { color: 'rgba(0, 0, 0, 0.4)', padding: 0.15 }
+            },
+            rotation: false,
+            subtitle: true
+        }
+    },
+    {
+        id: 'contorno',
+        name: 'Contorno',
+        icon: LayoutContornoIcon,
+        config: {
+            style: { name: 'stroke', palette: 'light' },
+            rotation: false,
+            subtitle: true
+        }
+    },
+    {
+        id: 'vertical',
+        name: 'Vertical',
+        icon: LayoutVerticalIcon,
+        config: {
+            style: { name: 'vertical', palette: 'light' },
+            rotation: false,
+            subtitle: false
+        }
+    },
+];

lib/ctas.ts

@@ -0,0 +1,3 @@
+// This file is reserved for Call-to-Action (CTA) related constants or functions.
+// It is currently not in use but is kept for future development.
+export {};

lib/errors.ts

@@ -0,0 +1,9 @@
+/**
+ * Custom error for API rate limiting (429 errors).
+ */
+export class RateLimitError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'RateLimitError';
+  }
+}

lib/options.ts

@@ -0,0 +1,45 @@
+import type { TextPosition, SubtitleOutlineStyle, PriceTagStyleId, PriceTagPosition, PriceTagColor } from '@/types';
+import { 
+    PositionCenterIcon, PositionTopIcon, PositionBottomIcon, PositionLeftIcon, PositionRightIcon,
+    SparklesIcon, OutlineWhiteIcon, OutlineBlackIcon, OutlineShadowIcon, OutlineBoxIcon,
+    PriceTagCircleIcon, PriceTagRectIcon, PriceTagBurstIcon,
+    PositionTopLeftIcon, PositionTopRightIcon, PositionBottomLeftIcon, PositionBottomRightIcon, XCircleIcon
+} from '@/components/icons';
+
+export const positionOptions: { id: TextPosition; name: string; icon: React.FC<React.SVGProps<SVGSVGElement>> }[] = [
+    { id: 'left', name: 'Esquerda', icon: PositionLeftIcon },
+    { id: 'center', name: 'Centro', icon: PositionCenterIcon },
+    { id: 'right', name: 'Direita', icon: PositionRightIcon },
+    { id: 'top', name: 'Topo', icon: PositionTopIcon },
+    { id: 'bottom', name: 'Base', icon: PositionBottomIcon },
+];
+
+export const subtitleOutlineOptions: { id: SubtitleOutlineStyle; name: string; icon: React.FC<React.SVGProps<SVGSVGElement>> }[] = [
+    { id: 'auto', name: 'Automático', icon: SparklesIcon },
+    { id: 'white', name: 'Contorno Branco', icon: OutlineWhiteIcon },
+    { id: 'black', name: 'Contorno Preto', icon: OutlineBlackIcon },
+    { id: 'soft_shadow', name: 'Sombra Suave', icon: OutlineShadowIcon },
+    { id: 'transparent_box', name: 'Caixa de Fundo', icon: OutlineBoxIcon },
+];
+
+// --- Price Tag Options ---
+export const priceStyleOptions: { id: PriceTagStyleId; name: string; icon: React.FC<React.SVGProps<SVGSVGElement>> }[] = [
+    { id: 'circle', name: 'Círculo', icon: PriceTagCircleIcon },
+    { id: 'tag', name: 'Tag', icon: PriceTagRectIcon },
+    { id: 'burst', name: 'Explosão', icon: PriceTagBurstIcon },
+];
+
+export const pricePositionOptions: { id: PriceTagPosition; name: string; icon: React.FC<React.SVGProps<SVGSVGElement>> }[] = [
+    { id: 'none', name: 'Nenhum', icon: XCircleIcon },
+    { id: 'top-left', name: 'Sup. Esquerdo', icon: PositionTopLeftIcon },
+    { id: 'top-right', name: 'Sup. Direito', icon: PositionTopRightIcon },
+    { id: 'bottom-left', name: 'Inf. Esquerdo', icon: PositionBottomLeftIcon },
+    { id: 'bottom-right', name: 'Inf. Direito', icon: PositionBottomRightIcon },
+];
+
+export const priceColorOptions: { id: PriceTagColor; name: string; hex: string }[] = [
+    { id: 'red', name: 'Vermelho', hex: '#ef4444' }, // red-500
+    { id: 'yellow', name: 'Amarelo', hex: '#f59e0b' }, // amber-500
+    { id: 'blue', name: 'Azul', hex: '#3b82f6' }, // blue-500
+    { id: 'black', name: 'Preto', hex: '#1f2937' }, // gray-800
+];

lib/styles.ts

@@ -0,0 +1,220 @@
+// Separating styles into visual art styles and professional themes for targeted AI prompting.
+
+export const artStyles = [
+    '007 Golden Eye', '007 Pierce Brosnan', '007 Roger Moore', '007 Sean Connery', '007 Solace', 
+    '3d-model', 'Andy Warhol', 'Art Déco (1925)', 'Art Nouveau', 'Arquivo X', 'Bauhaus (1919)', 
+    'Barrados no Baile', 'Cine Citá', 'Cinematográfico', 'Claude Monet', 'Colagem', 'Comic-book', 
+    'Cyberpunk', 'DC Comics', 'Da Vinci', 'Dancing Script', 'Disney - Pixar', 'Edgar Degas', 
+    'Édouard Manet', 'Estilo High Society', 'Estilo Lago di Como', 'Estilo Milano 1950', 
+    'Estilo Milano 1980', 'Estilo Napoli 1980', 'Estilo UX Design 2025', 'Fantasy-art', 
+    'Festival de San Remo', 'Flat', 'Fotorrealista', 'FraseUrbane', 'Friends', 'Futurismo', 
+    'Geométrico', 'Estilização Geométrica', 'Gossip Girl', 'Holográfico', 'Esqueceram de Mim', 
+    'Isométrico', 'Jim Davis - Garfield', 'Liga da Justiça', 'Law and Order', 'Lobster', 
+    'O Lobo de Wall Street', 'Luke Skywalker', 'Luxuoso', 'Maximalismo', 'Meme', 'Meme Clássico', 
+    'Meme Regional Trend', 'Meme Trend', 'Menphys', 'Minimalista', 'Neo Brutalismo', 
+    'Nova Trend - Trend em alta no Instagram', 'Old Money Napoli', 'Old Money New York', 
+    'Paul Rand (1940)', 'Pierre-Auguste Renoir', 'Pixel Art', 'Playfair Display', 'Poético', 
+    'Pop Italiano 1980', 'Pós-modernismo (década de 1970)', 'Retrô', 'Roland Garros', 
+    'Roma 1980', 'Sex and the City', 'Stan Lee - Marvel', 'Star Wars', 'Star Wars 1980', 
+    'Supernatural', 'Surrealismo', 'O Talentoso Ripley', 'That\'s \'70s Show', 
+    'The Big Bang Theory', 'Um Maluco no Pedaço', 'Tintin - Hergé', 'Tom Cruise - Missão Impossível', 
+    'Two and a Half Men', 'UX Design 2026', 'Van Gogh', 'Wiener Werkstätte (1903)'
+];
+
+const interiorDesignRooms = [
+    'Banheiro (Suíte)',
+    'Closet',
+    'Cozinha',
+    'Home Theater',
+    'Lavabo',
+    'Mesa de Apoio (Sala)',
+    'Sala de Estar',
+];
+
+const interiorDesignThemesCasa = interiorDesignRooms.map(d => `Design de Interiores (Casa): ${d}`);
+const interiorDesignThemesApto = interiorDesignRooms.map(d => `Design de Interiores (Apartamento): ${d}`);
+
+export const professionalThemes = [
+    'Adega',
+    'Advocacia Família',
+    'Advocacia Trabalhista',
+    'Agência de Marketing Digital',
+    'Agência de Viagens',
+    'Aluguel de brinquedos para festa infantil',
+    'Animação de festa infantil',
+    'Aplicativo de Delivery',
+    'Aplicativo tipo Booking',
+    'Arquiteto',
+    'Assessoria de Imagem Feminina',
+    'Assessoria de Imagem Masculina',
+    'Autoescola',
+    'Barbearia',
+    'Beach Tênis (Esporte)',
+    'Beleza e Cosméticos',
+    'Bike',
+    'Cafeteria',
+    'Carpintaria',
+    'Chatbot',
+    'Chef de Cozinha',
+    'Clínica de Fisioterapia',
+    'Clínica Estética',
+    'Clínica Veterinária',
+    'Clube de alta classe',
+    'Clube de empresários de alta classe',
+    'Clube de Tênis (Esporte)',
+    'Coach de Carreira',
+    'Concessionária de Carros',
+    'Conserto de Bike',
+    'Conserto de Celular',
+    'Construtora',
+    'Contabilidade',
+    'Corretor de Imóveis',
+    'Decoração',
+    'Decoração de Festas',
+    'Dentista',
+    'Depilação Feminina',
+    'Desenvolvimento Pessoal',
+    'Desenvolvimento Web',
+    ...interiorDesignThemesCasa,
+    ...interiorDesignThemesApto,
+    'Design Gráfico',
+    'Design Thinking',
+    'Doces para Festas',
+    'E-commerce de Moda',
+    'Educação',
+    'Eletricista',
+    'Encanador',
+    'Energia Solar',
+    'Engenheiro Civil',
+    'Escola de Idiomas',
+    'Espelhos',
+    'Estúdio de Fotografia',
+    'Estúdio de Tatuagem',
+    'Fabricante de chalets',
+    'Farmácia',
+    'Festa de Casamento',
+    'Festas e Eventos',
+    'Filmaker',
+    'Finanças Pessoais',
+    'Fitness e Saúde',
+    'Floricultura',
+    'Fotógrafo',
+    'Gastronomia',
+    'Gestor de Tráfego',
+    'Hamburgueria',
+    'Hotelaria',
+    'Imobiliária',
+    'Investimentos',
+    'Jardinagem',
+    'Loja de Roupas',
+    'Loja de Tênis (Calçados)',
+    'Manicure e Pedicure',
+    'Marca de Joias',
+    'Marcenaria',
+    'Marketing de Afiliados',
+    'Mecânica de Automóveis',
+    'Mercado',
+    'Música',
+    'Nova Loja de: Presentes (Design Autoral)',
+    'Nova Marca de: Alimentos Fit',
+    'Nova Marca de: Bicicleta Elétrica',
+    'Nova Marca de: Bloco Ecológico para Montagem e Construção de Casas',
+    'Nova Marca de: Brinquedos Educativos Infantis',
+    'Nova Marca de: Brinquedos Infantis',
+    'Nova Marca de: Café',
+    'Nova Marca de: Casas e Construções Modulares e Industrializadas',
+    'Nova Marca de: Casas Modulares (Industrializadas) para Locais Remotos',
+    'Nova Marca de: Chocolate Belga',
+    'Nova Marca de: Chocolates',
+    'Nova Marca de: Chocolates Gianduia',
+    'Nova Marca de: Chocolates Praline',
+    'Nova Marca de: Doces Italianos',
+    'Nova Marca de: Doces para Franquia',
+    'Nova Marca de: Equipamentos para Academia',
+    'Nova Marca de: Fast Fashion Feminina',
+    'Nova Marca de: Fast Fashion Masculina',
+    'Nova Marca de: Gadgets para Camping',
+    'Nova Marca de: Gadgets para o Jardim',
+    'Nova Marca de: Gadgets com Energia Solar',
+    'Nova Marca de: Meio de Transporte Individual Elétrico',
+    'Nova Marca de: Mini Moto Elétrica',
+    'Nova Marca de: Módulo Habitacional Industrializado para Estruturas Existentes',
+    'Nova Marca de: Módulos Habitacionais (Industrializados) para Cidades Densamente Povoadas',
+    'Nova Marca de: Óculos',
+    'Nova Marca de: Produtos Naturais',
+    'Nova Marca de: Produtos Saudáveis',
+    'Nova Marca de: Relógio',
+    'Nova Marca de: Roupa Casual para Homem',
+    'Nova Marca de: Roupa Casual para Mulher',
+    'Nova Marca de: Roupa para Beach Tênis',
+    'Nova Marca de: Roupa para Cross Fit',
+    'Nova Marca de: Salgados para Franquia',
+    'Nova Marca de: Suplementação para +40',
+    'Nova Marca de: Suplementação para +50',
+    'Nova Marca de: Suplementos Aminoácidos',
+    'Nova Marca de: Suplementos Proteína',
+    'Nova Marca de: SUV',
+    'Nova Marca de: Tênis (Calçados)',
+    'Nutricionista',
+    'Ótica',
+    'Padaria',
+    'Paisagismo',
+    'Papelaria',
+    'Personal Organizer',
+    'Personal Trainer',
+    'Pet Shop',
+    'Pilates',
+    'Pizzaria',
+    'Podcast',
+    'Produção de Eventos',
+    'Professor Particular',
+    'Psicologia',
+    'Publicidade',
+    'Restaurante',
+    'Salão de Beleza',
+    'Segurança Eletrônica',
+    'Seguros',
+    'Serviços de Limpeza',
+    'Social Media Manager',
+    'Sorveteria',
+    'Startup de Tecnologia',
+    'Tênis de Quadra (Esporte)',
+    'Terapia Holística',
+    'Turismo',
+    'Yoga'
+].sort((a, b) => a.localeCompare(b));
+
+export const masterPromptText = `Você é um assistente de criação de conteúdo de IA, especializado em gerar posts para redes sociais que são visualmente atraentes e textualmente persuasivos.
+
+Sua tarefa é processar a solicitação do usuário e gerar dois artefatos em uma única resposta:
+1.  **Imagem:** Uma imagem que corresponda à "Descrição da Imagem" e aos "Estilos da Imagem" fornecidos.
+2.  **Conteúdo em JSON:** Um objeto JSON que contenha textos de marketing e sugestões criativas baseadas no "Estilo do Conteúdo".
+
+**Regras Estritas:**
+- Sempre gere a imagem primeiro, antes do bloco de JSON.
+- O bloco de código JSON deve ser o último elemento da sua resposta.
+- O JSON deve ser válido e seguir estritamente a estrutura definida abaixo.
+
+**Estrutura do JSON de Saída:**
+\`\`\`json
+{
+  "postText": {
+    "title": "Um título curto e impactante para o post.",
+    "body": "Um texto principal para o post, com 2 a 3 frases. Use o 'Estilo do Conteúdo' como guia. Pode incluir emojis relevantes.",
+    "hashtags": [
+      "#hashtag1",
+      "#hashtag2",
+      "#hashtag3"
+    ]
+  },
+  "strategyTip": "Uma dica de marketing ou estratégia criativa rápida e acionável relacionada ao post gerado."
+}
+\`\`\`
+
+**Como Processar a Solicitação do Usuário:**
+O usuário fornecerá as seguintes informações:
+- **Descrição da Imagem:** O que deve estar na imagem.
+- **Estilos da Imagem:** Uma lista de estilos visuais e suas ponderações (ex: "Fotorrealista (70%), Cinematográfico (30%)").
+- **Estilo do Conteúdo:** O tom e a voz para o texto (ex: "Profissional e Confiável", "Divertido e Descontraído").
+
+Aja agora. Aguardo a primeira solicitação do usuário.`;

metadata.json

@@ -0,0 +1,6 @@
+{
+  "name": "Copy of Copy of Copy of InstaStyle",
+  "description": "An application for creating stylish text posts for social media. Features AI image generation with style presets, post previews, and Google authentication.",
+  "requestFramePermissions": [],
+  "prompt": ""
+}

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "instastyle-huggingface",
+  "version": "1.0.0",
+  "description": "An application for creating stylish text posts for social media, ready for Hugging Face Spaces.",
+  "private": true,
+  "scripts": {
+    "start": "serve -s . -l 7860"
+  },
+  "dependencies": {
+    "serve": "^14.2.3"
+  }
+}

services/geminiService.ts

@@ -0,0 +1,511 @@
+import { GoogleGenAI, Type } from "@google/genai";
+import type { RegionalityData, AdCopy, AdTrendAnalysis, BrandData, BrandConcept, FeatureDetails } from '@/types';
+import { RateLimitError } from '@/lib/errors';
+
+/**
+ * Processes a caught API error, classifies it, and throws a new, user-friendly error.
+ * This centralizes error handling for all Gemini API calls, making it robust against
+ * various error shapes (Error object, JSON string, plain object).
+ * @param e The caught error object.
+ * @param context A string describing the operation that failed (e.g., 'gerar imagem').
+ */
+const processApiError = (e: unknown, context: string): never => {
+    console.error(`Erro ao ${context} com a API Gemini:`, e);
+
+    // Re-throw our specific custom errors if they've already been processed.
+    if (e instanceof RateLimitError) {
+        throw e;
+    }
+
+    // 1. Get a string representation of the error.
+    let errorString: string;
+    if (e instanceof Error) {
+        errorString = e.message;
+    } else if (typeof e === 'string') {
+        errorString = e;
+    } else {
+        try {
+            errorString = JSON.stringify(e);
+        } catch {
+            errorString = 'Ocorreu um erro não-serializável.';
+        }
+    }
+
+    // 2. Check for the most critical errors first using robust string matching.
+    const lowerCaseError = errorString.toLowerCase();
+    if (lowerCaseError.includes('429') || lowerCaseError.includes('quota') || lowerCaseError.includes('resource_exhausted')) {
+        throw new RateLimitError("Você excedeu sua cota de uso da API. Por favor, aguarde um momento e tente novamente.");
+    }
+    if (lowerCaseError.includes('safety') || lowerCaseError.includes('blocked') || lowerCaseError.includes("api não retornou uma imagem")) {
+        throw new Error("Seu prompt foi bloqueado pelas políticas de segurança da IA. Por favor, reformule sua solicitação para ser mais neutra e evite termos que possam ser considerados sensíveis.");
+    }
+     if (lowerCaseError.includes('rpc failed due to xhr error')) {
+        throw new Error("Ocorreu um erro de comunicação com a API. Verifique sua conexão e tente novamente.");
+    }
+
+    // 3. Try to parse for a more specific API message.
+    try {
+        const errorBody = JSON.parse(errorString);
+        // Handle nested { error: { message: ... } } or flat { message: ... } structures.
+        const apiMsg = errorBody?.error?.message || errorBody?.message;
+        if (apiMsg && typeof apiMsg === 'string' && !apiMsg.trim().startsWith('{')) {
+            throw new Error(apiMsg);
+        }
+    } catch {
+        // Not a JSON string or parsing failed. The raw string might be the best message if it's not JSON.
+        if (!errorString.trim().startsWith('{')) {
+            throw new Error(errorString);
+        }
+    }
+
+    // 4. Final fallback for unknown errors or JSON we couldn't parse.
+    throw new Error("Ocorreu um erro desconhecido ao comunicar com a API.");
+};
+
+
+export async function generateImage(prompt: string, negativePrompt?: string, numberOfImages: number = 1): Promise<string[]> {
+    if (!process.env.API_KEY) {
+        throw new Error("A chave da API Gemini não está configurada. Defina a variável de ambiente API_KEY.");
+    }
+    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+    
+    // Safeguard: The API limit is 4 images per request. Clamp the value to be safe.
+    const safeNumberOfImages = Math.max(1, Math.min(numberOfImages, 4));
+
+    try {
+        const params: any = {
+            model: 'imagen-3.0-generate-002',
+            prompt: prompt,
+            config: {
+                numberOfImages: safeNumberOfImages, // Use the clamped value
+                outputMimeType: 'image/jpeg',
+                aspectRatio: '1:1', // Square image for Instagram
+            },
+        };
+
+        if (negativePrompt) {
+            params.negativePrompt = negativePrompt;
+        }
+        
+        const response = await ai.models.generateImages(params);
+
+        if (response.generatedImages && response.generatedImages.length > 0) {
+            return response.generatedImages.map(img => img.image.imageBytes);
+        } else {
+            // This case is often a safety block. We create a specific error message for it.
+            const blockReason = (response as any).promptFeedback?.blockReason;
+            let errorMessage = "A API não retornou uma imagem";
+            if (blockReason) {
+                errorMessage += `, motivo: ${blockReason}.`;
+            }
+            throw new Error(errorMessage);
+        }
+    } catch (e) {
+        processApiError(e, 'gerar imagem');
+    }
+}
+
+export async function generateSlogan(brandName: string, theme: string): Promise<{slogan: string}> {
+    if (!process.env.API_KEY) {
+        throw new Error("API key not configured.");
+    }
+    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+
+    const prompt = `
+        Aja como um especialista em branding de classe mundial.
+        **Tarefa:** Crie um slogan curto, memorável e impactante.
+        **Marca:** ${brandName}
+        **Nicho/Tema:** ${theme}
+        **Requisitos:**
+        - O slogan deve ser em português do Brasil.
+        - Deve ser conciso (idealmente entre 3 e 7 palavras).
+        - Deve refletir o valor ou a personalidade da marca dentro do nicho.
+
+        **Formato de Saída Obrigatório (JSON):**
+        Responda APENAS com um objeto JSON contendo a chave "slogan".
+    `;
+
+    try {
+        const response = await ai.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.OBJECT,
+                    properties: {
+                        slogan: {
+                            type: Type.STRING,
+                            description: "O slogan gerado para a marca."
+                        }
+                    },
+                    required: ["slogan"]
+                },
+                temperature: 0.9,
+            }
+        });
+
+        const jsonResponse = JSON.parse(response.text.trim());
+        if (jsonResponse.slogan) {
+            return jsonResponse as {slogan: string};
+        } else {
+            throw new Error("A resposta da API para o slogan está malformada.");
+        }
+    } catch (e) {
+        processApiError(e, 'gerar slogan');
+    }
+}
+
+export async function generateAdCopy(imageDescription: string, postText: string, theme: string, brandData: BrandData): Promise<AdCopy> {
+    if (!process.env.API_KEY) {
+        throw new Error("API key not configured.");
+    }
+    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+    const [title, ...subtitleLines] = postText.split('\n');
+    const subtitle = subtitleLines.join(' ');
+
+    const brandClause = brandData.name 
+        ? `A marca é '${brandData.name}'${brandData.slogan ? ` com o slogan '${brandData.slogan}'` : ''}. A influência da marca na cópia deve ser de ${brandData.weight}%.` 
+        : 'Nenhuma marca específica definida.';
+
+    const prompt = `
+        Aja como um copywriter de resposta direta de classe mundial, especialista em campanhas pagas para o tema "${theme}".
+
+        **Contexto do Anúncio:**
+        - **Visual:** Uma imagem de "${imageDescription}"
+        - **Texto na Imagem:** Título: "${title}", Subtítulo: "${subtitle}"
+        - **Branding:** ${brandClause || 'Nenhuma marca específica definida.'}
+
+        **DIRETRIZ MESTRA E INEGOCIÁVEL:**
+        Sua única tarefa é gerar textos para anúncios que sejam **cirurgicamente precisos e persuasivos**.
+
+        1.  **REVISÃO OBRIGATÓRIA:** Antes de responder, você DEVE revisar cada palavra para garantir:
+            - **Coerência Absoluta:** O texto se conecta perfeitamente ao visual e ao texto na imagem.
+            - **Zero Nonsense:** Nenhuma palavra aleatória ou sem sentido. Clareza e lógica são inegociáveis.
+            - **Gramática Impecável:** A escrita deve ser perfeita, pronta para publicação imediata.
+        2.  **FOCO EM CONVERSÃO:** Use a fórmula AIDA (Atenção, Interesse, Desejo, Ação) para maximizar o impacto.
+
+        **Formato de Saída Obrigatório (JSON):**
+        Responda APENAS com um objeto JSON válido para Google e Facebook Ads.
+    `;
+
+    try {
+        const response = await ai.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.OBJECT,
+                    properties: {
+                        google: {
+                            type: Type.OBJECT,
+                            properties: {
+                                headlines: {
+                                    type: Type.ARRAY,
+                                    items: { type: Type.STRING },
+                                    description: "3 headlines curtos e de alto impacto para Google Ads (máx 30 caracteres)."
+                                },
+                                descriptions: {
+                                    type: Type.ARRAY,
+                                    items: { type: Type.STRING },
+                                    description: "2 descrições persuasivas para Google Ads (máx 90 caracteres)."
+                                }
+                            }
+                        },
+                        facebook: {
+                            type: Type.OBJECT,
+                            properties: {
+                                primaryText: {
+                                    type: Type.STRING,
+                                    description: "Texto principal para o Facebook Ad. Comece com um gancho forte. Use quebras de linha e emojis para legibilidade."
+                                },
+                                headline: {
+                                    type: Type.STRING,
+                                    description: "Headline para o Facebook Ad. Focado no benefício principal."
+                                },
+                                description: {
+                                    type: Type.STRING,
+                                    description: "Descrição/link para o Facebook Ad. Um CTA claro."
+                                }
+                            }
+                        },
+                        strategyTip: {
+                            type: Type.STRING,
+                            description: "Uma dica de estratégia de marketing acionável e inteligente relacionada a esta campanha específica."
+                        }
+                    },
+                    required: ["google", "facebook", "strategyTip"]
+                },
+                temperature: 0.8,
+            }
+        });
+
+        const jsonResponse = JSON.parse(response.text.trim());
+        // Basic validation
+        if (jsonResponse.google && jsonResponse.facebook) {
+            return jsonResponse as AdCopy;
+        } else {
+             throw new Error("A resposta da API está malformada.");
+        }
+
+    } catch (e) {
+        processApiError(e, 'gerar textos de anúncio');
+    }
+}
+
+
+export async function analyzeAdTrends(theme: string, regionality: RegionalityData, brandData: BrandData): Promise<AdTrendAnalysis> {
+    if (!process.env.API_KEY) {
+        throw new Error("API key not configured.");
+    }
+    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+
+    const locationParts = [regionality.neighborhood, regionality.city, regionality.country].filter(Boolean);
+    const locationClause = locationParts.length > 0 && regionality.weight > 10
+        ? `com foco na região de ${locationParts.join(', ')} (peso de influência: ${regionality.weight}%)`
+        : 'com um foco global';
+    
+    const brandClause = brandData.name
+        ? `A marca em questão é '${brandData.name}' e sua influência criativa deve ser considerada em ${brandData.weight}% das sugestões.`
+        : 'As sugestões devem ser genéricas para o tema, sem uma marca específica.';
+
+    const prompt = `
+      Aja como um diretor de criação e copywriter sênior, especialista em campanhas virais para o tema "${theme}". Seu foco é ${locationClause}.
+
+      **Contexto da Marca:**
+      ${brandClause}
+      
+      **DIRETRIZ MESTRA E INEGOCIÁVEL:**
+      Sua única tarefa é gerar 3 conceitos de anúncio que sejam **IMPECÁVEIS**. Cada palavra deve ser intencional, coerente e poderosa.
+
+      1.  **REVISÃO OBRIGATÓRIA:** Antes de responder, você DEVE revisar cada palavra para garantir que:
+          - O texto é 100% relevante para "${theme}".
+          - Não existem palavras ou frases sem sentido, aleatórias, ou inventadas. A escrita é clara e lógica.
+          - A gramática e ortografia são PERFEITAS, como se fossem para um cliente de altíssimo padrão.
+      2.  **FOCO EM APLICAÇÃO REAL:** As ideias devem ser tão boas que um profissional de marketing as usaria imediatamente em uma campanha real.
+
+      **Formato de Saída Obrigatório (JSON):**
+      Responda APENAS com um objeto JSON válido, contendo uma análise de tendências, 3 ideias de anúncio e hashtags.
+    `;
+
+    try {
+        const response = await ai.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.OBJECT,
+                    properties: {
+                        trendOverview: {
+                            type: Type.STRING,
+                            description: "Análise concisa (2-3 frases) sobre as tendências de anúncios para este tema. Fale sobre formatos (vídeo, carrossel), ganchos e estéticas que estão funcionando AGORA."
+                        },
+                        adIdeas: {
+                            type: Type.ARRAY,
+                            description: "Uma lista com exatamente 3 ideias de anúncio.",
+                            items: {
+                                type: Type.OBJECT,
+                                properties: {
+                                    conceptName: {
+                                        type: Type.STRING,
+                                        description: "Nome do conceito do anúncio (Ex: 'O Segredo que Ninguém Conta', 'Sua Jornada em 15s')."
+                                    },
+                                    headline: {
+                                        type: Type.STRING,
+                                        description: "Um título de anúncio magnético e curto."
+                                    },
+                                    primaryText: {
+                                        type: Type.STRING,
+                                        description: "O texto principal do anúncio. Use quebras de linha e emojis para legibilidade. Deve ser atraente, claro e direto."
+                                    },
+                                    replicabilityTip: {
+                                        type: Type.STRING,
+                                        description: "Uma dica rápida sobre como replicar o visual deste anúncio (ex: 'Use um vídeo POV mostrando...', 'Crie um carrossel com fotos de clientes...')."
+                                    }
+                                }
+                            }
+                        },
+                        hashtags: {
+                            type: Type.ARRAY,
+                            items: { type: Type.STRING },
+                            description: "Uma lista de 5-7 hashtags relevantes, misturando hashtags de alto volume com nicho."
+                        }
+                    },
+                    required: ["trendOverview", "adIdeas", "hashtags"]
+                },
+                temperature: 0.8,
+            }
+        });
+        
+        const jsonResponse = JSON.parse(response.text.trim());
+        if (jsonResponse.adIdeas) {
+            return jsonResponse as AdTrendAnalysis;
+        } else {
+             throw new Error("A resposta da API está malformada.");
+        }
+
+    } catch (e) {
+        processApiError(e, 'analisar tendências');
+    }
+}
+
+export async function generateProductConcepts(basePrompt: string, productType: string): Promise<BrandConcept[]> {
+    if (!process.env.API_KEY) throw new Error("API key not configured.");
+    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+    const prompt = `
+        Aja como um estúdio de design e branding de renome mundial (pense em Pentagram, IDEO).
+        **Tarefa:** Gerar 3 conceitos de marca distintos e criativos para um novo produto.
+        **Ideia Central do Usuário:** "${basePrompt}"
+        **Tipo de Produto:** ${productType}
+        
+        **Diretrizes Rígidas:**
+        1.  **Originalidade:** Crie nomes e filosofias que se destaquem. Evite o clichê.
+        2.  **Clareza:** O 'visualStyle' deve ser descritivo e evocativo, pintando um quadro claro para um designer.
+        3.  **Ação:** As 'keywords' devem ser termos de busca poderosos que um IA de imagem pode usar.
+
+        **Formato de Saída Obrigatório (JSON Array):**
+        Responda APENAS com um array JSON contendo exatamente 3 objetos.
+    `;
+    try {
+        const response = await ai.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.ARRAY,
+                    items: {
+                        type: Type.OBJECT,
+                        properties: {
+                            name: { type: Type.STRING, description: "Nome da marca/produto. Curto, forte e único." },
+                            philosophy: { type: Type.STRING, description: "O 'porquê' da marca. Um slogan ou frase de missão curta e inspiradora." },
+                            visualStyle: { type: Type.STRING, description: "Descrição do design do produto, materiais, cores e estética geral." },
+                            keywords: { type: Type.ARRAY, items: { type: Type.STRING }, description: "5-7 palavras-chave para guiar a geração de imagem (ex: 'couro vegano, costura contrastante, minimalista')." }
+                        },
+                        required: ["name", "philosophy", "visualStyle", "keywords"]
+                    }
+                },
+                temperature: 0.9
+            }
+        });
+        const jsonResponse = JSON.parse(response.text.trim());
+        if (Array.isArray(jsonResponse) && jsonResponse.length > 0) {
+            return jsonResponse as BrandConcept[];
+        } else {
+            throw new Error("A resposta da API para conceitos de produto está malformada.");
+        }
+    } catch(e) {
+        processApiError(e, 'gerar conceitos de produto');
+    }
+}
+
+export async function generateDesignConcepts(basePrompt: string, designType: string): Promise<BrandConcept[]> {
+    if (!process.env.API_KEY) throw new Error("API key not configured.");
+    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+    const prompt = `
+        Aja como um arquiteto e designer de interiores de classe mundial (pense em Kelly Wearstler, Philippe Starck).
+        **Tarefa:** Gerar 3 conceitos de design distintos para um espaço ou móvel.
+        **Ideia Central do Usuário:** "${basePrompt}"
+        **Tipo de Design:** ${designType}
+        
+        **Diretrizes Rígidas:**
+        1.  **Conceituação Forte:** O 'name' deve ser evocativo, como o nome de uma coleção ou projeto.
+        2.  **Narrativa:** A 'philosophy' deve contar uma história sobre a experiência de estar no espaço.
+        3.  **Especificidade:** O 'visualStyle' deve detalhar materiais, paleta de cores, iluminação e mobiliário chave.
+
+        **Formato de Saída Obrigatório (JSON Array):**
+        Responda APENAS com um array JSON contendo exatamente 3 objetos.
+    `;
+    try {
+        const response = await ai.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.ARRAY,
+                    items: {
+                        type: Type.OBJECT,
+                        properties: {
+                            name: { type: Type.STRING, description: "Nome do conceito de design (ex: 'Refúgio Urbano', 'Oásis Moderno')." },
+                            philosophy: { type: Type.STRING, description: "A narrativa ou sentimento que o design evoca (ex: 'Um santuário de calma na cidade agitada')." },
+                            visualStyle: { type: Type.STRING, description: "Descrição detalhada de materiais (madeira, concreto), texturas, cores, iluminação e formas." },
+                            keywords: { type: Type.ARRAY, items: { type: Type.STRING }, description: "5-7 palavras-chave para guiar uma IA de imagem (ex: 'luz natural, madeira de carvalho, linho, minimalista, brutalismo suave')." }
+                        },
+                        required: ["name", "philosophy", "visualStyle", "keywords"]
+                    }
+                },
+                temperature: 0.9
+            }
+        });
+        const jsonResponse = JSON.parse(response.text.trim());
+        if (Array.isArray(jsonResponse) && jsonResponse.length > 0) {
+            return jsonResponse as BrandConcept[];
+        } else {
+            throw new Error("A resposta da API para conceitos de design está malformada.");
+        }
+    } catch(e) {
+        processApiError(e, 'gerar conceitos de design');
+    }
+}
+
+export async function generateFeatureDescriptions(basePrompt: string, concept: BrandConcept): Promise<FeatureDetails[]> {
+    if (!process.env.API_KEY) throw new Error("API key not configured.");
+    const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
+
+    const prompt = `
+        Aja como um copywriter técnico e de marketing, especialista em traduzir características de produtos em benefícios claros para o consumidor.
+        **Produto:** ${concept.name}
+        **Filosofia/Conceito:** "${concept.philosophy}"
+        **Descrição do Design:** "${concept.visualStyle}"
+        **Ideia Original do Usuário:** "${basePrompt}"
+
+        **Tarefa Principal:**
+        Identifique as 4 características mais importantes, inovadoras ou atraentes do produto descrito. Para cada uma, crie um título curto e uma descrição persuasiva.
+
+        **Diretrizes Rígidas:**
+        1.  **Foco no Benefício:** Não liste apenas a característica. Explique por que ela é importante para o cliente. (Ex: Em vez de "Sola de borracha", use "Aderência Inabalável" com a descrição "Nossa sola de composto duplo garante segurança em qualquer superfície, do asfalto molhado à trilha de terra.")
+        2.  **Linguagem da Marca:** O tom deve ser consistente com a filosofia da marca.
+        3.  **Precisão:** As descrições devem ser plausíveis e baseadas no conceito fornecido.
+
+        **Formato de Saída Obrigatório (JSON Array):**
+        Responda APENAS com um array JSON contendo exatamente 4 objetos.
+    `;
+     try {
+        const response = await ai.models.generateContent({
+            model: 'gemini-2.5-flash',
+            contents: prompt,
+            config: {
+                responseMimeType: "application/json",
+                responseSchema: {
+                    type: Type.ARRAY,
+                    items: {
+                        type: Type.OBJECT,
+                        properties: {
+                            title: {
+                                type: Type.STRING,
+                                description: "O título da característica (2-4 palavras). Ex: 'Design Ergonômico'."
+                            },
+                            description: {
+                                type: Type.STRING,
+                                description: "A descrição do benefício (1-2 frases). Ex: 'Criado para se adaptar perfeitamente, oferecendo conforto o dia todo.'"
+                            }
+                        },
+                        required: ["title", "description"]
+                    }
+                },
+                temperature: 0.7
+            }
+        });
+        const jsonResponse = JSON.parse(response.text.trim());
+        if (Array.isArray(jsonResponse) && jsonResponse.length > 0) {
+            return jsonResponse as FeatureDetails[];
+        } else {
+            throw new Error("A resposta da API para detalhes de features está malformada.");
+        }
+    } catch(e) {
+        processApiError(e, 'gerar descrições de detalhes');
+    }
+}

services/supabaseClient.ts

@@ -0,0 +1,22 @@
+import { createClient } from '@supabase/supabase-js';
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+// These variables are expected to be set in the environment.
+// Do not replace them with hardcoded values.
+const supabaseUrl = process.env.SUPABASE_URL;
+const supabaseAnonKey = process.env.SUPABASE_ANON_KEY;
+
+const isSupabaseEnabled = supabaseUrl && supabaseAnonKey;
+
+// Initialize the Supabase client, which will be null if the environment variables are not set.
+export const supabase: SupabaseClient | null = isSupabaseEnabled
+  ? createClient(supabaseUrl, supabaseAnonKey)
+  : null;
+
+// This check ensures that the rest of the application knows that supabase might be null,
+// and it provides a helpful warning for developers.
+if (!supabase) {
+  console.warn(
+    'Supabase environment variables (SUPABASE_URL, SUPABASE_ANON_KEY) are not set. Authentication features will be disabled.'
+  );
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

types.ts

@@ -0,0 +1,117 @@
+// This file is intentionally left blank as the types from the previous version are no longer needed.
+// New types will be defined locally within components where they are used.
+export interface MixedStyle {
+  name: string;
+  percentage: number;
+}
+
+export interface RegionalityData {
+  country: string;
+
+  city: string;
+  neighborhood: string;
+  weight: number;
+}
+
+export interface BrandData {
+  name: string;
+  slogan: string;
+  weight: number; // Percentage of influence
+}
+
+export type TextPosition = 'center' | 'top' | 'bottom' | 'left' | 'right' | 'top-right';
+export type SubtitleOutlineStyle = 'auto' | 'white' | 'black' | 'soft_shadow' | 'transparent_box';
+
+// Renamed and enhanced for new styling capabilities
+export interface CompositionPreset {
+  id: string;
+  name: string;
+  icon: React.FC<React.SVGProps<SVGSVGElement>>;
+  config: {
+    style: {
+        name: 'fill' | 'stroke' | 'fill-stroke' | 'gradient-on-block' | 'vertical';
+        palette: 'light' | 'dark' | 'complementary' | 'analogous';
+        background?: {
+            color: string; // e.g., 'rgba(0,0,0,0.5)'
+            padding: number; // as a factor of font size
+        };
+        forcedStroke?: string;
+    };
+    rotation: boolean;
+    subtitle: boolean;
+  };
+}
+
+// --- Price Tag Types ---
+export type PriceTagPosition = 'none' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type PriceTagStyleId = 'circle' | 'tag' | 'burst';
+export type PriceTagColor = 'red' | 'yellow' | 'blue' | 'black';
+
+export interface PriceData {
+  text: string;
+  modelText: string;
+  style: PriceTagStyleId;
+  position: PriceTagPosition;
+  color: PriceTagColor;
+}
+
+
+// --- Marketing Suite Types ---
+
+export interface GoogleAd {
+  headlines: string[];
+  descriptions: string[];
+}
+export interface FacebookAd {
+  primaryText: string;
+  headline: string;
+  description: string;
+}
+export interface AdCopy {
+  google: GoogleAd;
+  facebook: FacebookAd;
+  strategyTip: string;
+}
+
+export interface AdIdea {
+  conceptName: string;
+  headline: string;
+  primaryText: string;
+  replicabilityTip: string;
+}
+
+export interface AdTrendAnalysis {
+    trendOverview: string;
+    adIdeas: AdIdea[];
+    hashtags: string[];
+}
+
+export interface BrandConcept {
+    name: string;
+    philosophy: string;
+    visualStyle: string;
+    keywords: string[];
+}
+
+export interface FeatureDetails {
+    title: string;
+    description: string;
+}
+
+// Interface to consolidate all generation parameters into a single object
+export interface GenerateOptions {
+    basePrompt: string;
+    imagePrompt: string;
+    textOverlay: string;
+    compositionId: string;
+    textPosition: TextPosition;
+    subtitleOutline: SubtitleOutlineStyle;
+    artStyles: string[];
+    theme: string;
+    brandData: BrandData;
+    priceData: PriceData;
+    negativeImagePrompt?: string;
+    numberOfImages: number;
+    scenario?: 'product' | 'couple' | 'family' | 'isometric_details' | 'poster' | 'carousel_cta' | 'carousel_educational' | 'carousel_trend' | 'executive_project';
+    concept?: BrandConcept;
+}

vite.config.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});