import React, { useState, useEffect } from 'react';
import { 
  Camera, Sparkles, Layout, Type, Download, Image as ImageIcon, 
  ChevronRight, CheckCircle2, Play, LayoutDashboard, History, 
  CreditCard, User, LogOut, UploadCloud, Loader2, Copy, 
  Smartphone, Instagram
} from 'lucide-react';

// --- GTM / DATA LAYER TRACKING ---
// Mestre: Esta função é o coração do seu rastreamento. 
// Ela envia os eventos para o GTM para otimização de campanhas.
const trackEvent = (eventName, data = {}) => {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: eventName,
    ...data
  });
  console.log(`[DataLayer Analytics] ${eventName}:`, data); // Apenas para debug no console
};

export default function App() {
  // Estado Global de Roteamento Simulado
  const [route, setRoute] = useState('home'); // home, login, register, app
  const [user, setUser] = useState(null);

  // Navegação Global
  const navigateTo = (newRoute, eventName = null) => {
    setRoute(newRoute);
    window.scrollTo(0, 0);
    if (eventName) trackEvent(eventName, { destination: newRoute });
  };

  const loginUser = (email) => {
    setUser({ name: 'Lojista VIP', email, credits: 100, plan: 'Pro' });
    trackEvent('login_success', { method: 'email' });
    navigateTo('app');
  };

  const logoutUser = () => {
    setUser(null);
    navigateTo('home');
  };

  // --- ROTEADOR PRINCIPAL ---
  if (route === 'home') return <LandingPage onNavigate={navigateTo} />;
  if (route === 'login') return <LoginPage onNavigate={navigateTo} onLogin={loginUser} />;
  if (route === 'register') return <RegisterPage onNavigate={navigateTo} onLogin={loginUser} />;
  if (route === 'app' && user) return <Dashboard user={user} onLogout={logoutUser} />;
  
  return <LandingPage onNavigate={navigateTo} />;
}

// ==========================================
// 1. LANDING PAGE (Focada em Conversão)
// ==========================================
function LandingPage({ onNavigate }) {
  useEffect(() => { trackEvent('view_landing_page'); }, []);

  return (
    <div className="min-h-screen bg-gray-50 font-sans text-gray-900">
      {/* HEADER */}
      <header className="bg-white border-b border-gray-100 sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="bg-purple-600 p-2 rounded-lg">
              <Sparkles className="w-5 h-5 text-white" />
            </div>
            <span className="font-bold text-xl tracking-tight">Vitrine IA</span>
          </div>
          <div className="flex gap-4">
            <button onClick={() => onNavigate('login', 'click_login_nav')} className="text-gray-600 hover:text-purple-600 font-medium px-4 py-2 transition-colors">Entrar</button>
            <button onClick={() => onNavigate('register', 'click_cta_nav')} className="bg-purple-600 hover:bg-purple-700 text-white font-medium px-5 py-2 rounded-full shadow-sm transition-all hover:shadow-md transform hover:-translate-y-0.5">Testar Grátis</button>
          </div>
        </div>
      </header>

      {/* HERO SECTION */}
      <section className="pt-20 pb-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto text-center">
        <h1 className="text-5xl md:text-6xl font-extrabold tracking-tight text-gray-900 mb-6 leading-tight">
          Transforme fotos simples da sua loja em <span className="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-blue-500">posts profissionais</span> que vendem.
        </h1>
        <p className="text-xl text-gray-600 mb-10 max-w-3xl mx-auto">
          Crie fotos com modelos hiper-realistas, posts de venda com preço, stories automáticos e legendas magnéticas em <strong>menos de 2 minutos</strong>.
        </p>
        <div className="flex flex-col sm:flex-row justify-center gap-4">
          <button onClick={() => onNavigate('register', 'click_cta_hero_start')} className="bg-purple-600 hover:bg-purple-700 text-white font-bold text-lg px-8 py-4 rounded-full shadow-lg shadow-purple-600/30 transition-all hover:-translate-y-1 flex items-center justify-center gap-2">
            Começar agora <ChevronRight className="w-5 h-5" />
          </button>
          <button onClick={() => onNavigate('register', 'click_cta_hero_trial')} className="bg-white border border-gray-200 hover:border-purple-300 text-gray-800 font-bold text-lg px-8 py-4 rounded-full shadow-sm transition-all flex items-center justify-center gap-2">
            <Play className="w-5 h-5 text-purple-600" /> Ver como funciona
          </button>
        </div>
        
        {/* HERO IMAGE MOCK */}
        <div className="mt-16 bg-white p-4 rounded-2xl shadow-xl border border-gray-100 max-w-5xl mx-auto relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent z-10"></div>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4 h-[400px]">
            <div className="bg-gray-100 rounded-xl flex flex-col items-center justify-center border-2 border-dashed border-gray-300 p-6">
              <Camera className="w-12 h-12 text-gray-400 mb-4" />
              <p className="text-gray-500 font-medium">1. Foto no Cabide</p>
            </div>
            <div className="hidden md:flex items-center justify-center">
              <div className="bg-purple-100 p-3 rounded-full animate-pulse">
                <Sparkles className="w-8 h-8 text-purple-600" />
              </div>
            </div>
            <div className="bg-gray-100 rounded-xl bg-cover bg-center relative" style={{backgroundImage: "url('https://images.unsplash.com/photo-1515347619362-710081d58dcc?w=600&q=80')"}}>
               <div className="absolute inset-0 bg-black/20 rounded-xl"></div>
               <div className="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-sm p-3 rounded-lg text-left">
                 <p className="text-xs font-bold text-purple-600 mb-1">NOVIDADE</p>
                 <p className="font-bold text-sm">Vestido Elegance • R$149</p>
               </div>
            </div>
          </div>
        </div>
      </section>

      {/* BENEFÍCIOS */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold mb-4">O seu estúdio completo e automático</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">Substitua fotógrafos, designers e copywriters por uma única ferramenta fácil de usar.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            <BenefitCard icon={<ImageIcon className="text-blue-500 w-6 h-6"/>} title="Fotos com modelos reais" desc="A IA veste sua peça em modelos hiper-realistas em diversos cenários." />
            <BenefitCard icon={<Layout className="text-purple-500 w-6 h-6"/>} title="Posts para Instagram" desc="Templates prontos focados em conversão, com sua marca e preço." />
            <BenefitCard icon={<Smartphone className="text-pink-500 w-6 h-6"/>} title="Stories Automáticos" desc="Formatos verticais dinâmicos criados instantaneamente." />
            <BenefitCard icon={<Type className="text-green-500 w-6 h-6"/>} title="Legendas que Vendem" desc="Textos persuasivos gerados com base no seu público e produto." />
          </div>
        </div>
      </section>

      {/* PREÇO */}
      <section className="py-20 bg-gray-50" id="pricing">
        <div className="max-w-lg mx-auto px-4">
          <div className="bg-white rounded-3xl shadow-xl border border-gray-100 p-8 relative overflow-hidden">
            <div className="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">MAIS POPULAR</div>
            <h3 className="text-2xl font-bold mb-2">Plano Pro Lojista</h3>
            <p className="text-gray-500 mb-6">Tudo que você precisa para vender todos os dias.</p>
            <div className="mb-6">
              <span className="text-5xl font-extrabold">R$99</span>
              <span className="text-xl text-gray-500">,90</span>
              <span className="text-gray-500">/mês</span>
            </div>
            <ul className="space-y-4 mb-8">
              <PricingItem text="100 gerações de imagens/mês" />
              <PricingItem text="Geração ILIMITADA de posts" />
              <PricingItem text="Geração ILIMITADA de stories" />
              <PricingItem text="Geração ILIMITADA de legendas" />
              <PricingItem text="Suporte prioritário" />
            </ul>
            <button onClick={() => onNavigate('register', 'click_checkout_plan')} className="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 rounded-xl transition-all shadow-lg hover:shadow-xl">
              Assinar Agora
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

function BenefitCard({ icon, title, desc }) {
  return (
    <div className="p-6 bg-gray-50 rounded-2xl border border-gray-100 hover:border-purple-100 transition-colors">
      <div className="bg-white w-12 h-12 rounded-xl flex items-center justify-center shadow-sm mb-4">
        {icon}
      </div>
      <h3 className="text-xl font-bold mb-2">{title}</h3>
      <p className="text-gray-600">{desc}</p>
    </div>
  );
}

function PricingItem({ text }) {
  return (
    <li className="flex items-center gap-3">
      <CheckCircle2 className="w-5 h-5 text-purple-600" />
      <span className="text-gray-700 font-medium">{text}</span>
    </li>
  );
}

// ==========================================
// 2. AUTH PAGES (Login & Registro)
// ==========================================
function LoginPage({ onNavigate, onLogin }) {
  const [email, setEmail] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    onLogin(email || 'teste@loja.com');
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <div className="flex justify-center mb-6">
          <div className="bg-purple-600 p-3 rounded-xl shadow-lg"><Sparkles className="w-8 h-8 text-white" /></div>
        </div>
        <h2 className="text-center text-3xl font-extrabold text-gray-900">Acesse seu estúdio</h2>
      </div>

      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-white py-8 px-4 shadow sm:rounded-2xl sm:px-10 border border-gray-100">
          <form className="space-y-6" onSubmit={handleSubmit}>
            <div>
              <label className="block text-sm font-medium text-gray-700">Email da loja</label>
              <input type="email" required value={email} onChange={e=>setEmail(e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-lg p-3 shadow-sm focus:ring-purple-500 focus:border-purple-500" placeholder="contato@sualoja.com.br"/>
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700">Senha</label>
              <input type="password" required className="mt-1 block w-full border border-gray-300 rounded-lg p-3 shadow-sm focus:ring-purple-500 focus:border-purple-500" placeholder="••••••••"/>
            </div>
            <button type="submit" className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-purple-600 hover:bg-purple-700">
              Entrar
            </button>
          </form>
          <div className="mt-6 text-center">
            <button onClick={() => onNavigate('register')} className="text-sm text-purple-600 hover:text-purple-500 font-medium">Não tem conta? Criar conta</button>
          </div>
        </div>
      </div>
    </div>
  );
}

function RegisterPage({ onNavigate, onLogin }) {
  const [email, setEmail] = useState('');
  
  const handleSubmit = (e) => {
    e.preventDefault();
    trackEvent('signup_completed');
    onLogin(email || 'novo@loja.com');
  };

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div className="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 className="text-center text-3xl font-extrabold text-gray-900">Crie sua conta</h2>
        <p className="mt-2 text-center text-sm text-gray-600">e comece a vender mais hoje mesmo.</p>
      </div>

      <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div className="bg-white py-8 px-4 shadow sm:rounded-2xl sm:px-10 border border-gray-100">
          <form className="space-y-4" onSubmit={handleSubmit}>
            <div>
              <label className="block text-sm font-medium text-gray-700">Nome da Loja</label>
              <input type="text" required className="mt-1 block w-full border border-gray-300 rounded-lg p-3" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700">Email</label>
              <input type="email" required value={email} onChange={e=>setEmail(e.target.value)} className="mt-1 block w-full border border-gray-300 rounded-lg p-3" />
            </div>
            <div>
              <label className="block text-sm font-medium text-gray-700">Senha</label>
              <input type="password" required className="mt-1 block w-full border border-gray-300 rounded-lg p-3" />
            </div>
            <button type="submit" className="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-bold text-white bg-purple-600 hover:bg-purple-700">
              Criar conta e Testar
            </button>
          </form>
          <div className="mt-6 text-center">
            <button onClick={() => onNavigate('login')} className="text-sm text-purple-600 hover:text-purple-500 font-medium">Já tem conta? Entrar</button>
          </div>
        </div>
      </div>
    </div>
  );
}

// ==========================================
// 3. DASHBOARD & CORE APP
// ==========================================
function Dashboard({ user, onLogout }) {
  const [activeTab, setActiveTab] = useState('dashboard'); // dashboard, studio, history, profile, billing
  const [credits, setCredits] = useState(user.credits);

  useEffect(() => {
    trackEvent('view_app_screen', { screen_name: activeTab });
  }, [activeTab]);

  return (
    <div className="flex h-screen bg-gray-50 overflow-hidden font-sans">
      
      {/* SIDEBAR LATERAL */}
      <aside className="w-64 bg-white border-r border-gray-200 flex flex-col justify-between hidden md:flex">
        <div>
          <div className="h-16 flex items-center px-6 border-b border-gray-100">
            <Sparkles className="w-6 h-6 text-purple-600 mr-2" />
            <span className="font-bold text-lg">Vitrine IA</span>
          </div>
          <nav className="p-4 space-y-1">
            <SidebarItem icon={<LayoutDashboard/>} label="Dashboard" active={activeTab==='dashboard'} onClick={() => setActiveTab('dashboard')} />
            <SidebarItem icon={<Sparkles/>} label="Criar Conteúdo" active={activeTab==='studio'} onClick={() => setActiveTab('studio')} highlight />
            <SidebarItem icon={<History/>} label="Histórico" active={activeTab==='history'} onClick={() => setActiveTab('history')} />
            <SidebarItem icon={<CreditCard/>} label="Assinatura" active={activeTab==='billing'} onClick={() => setActiveTab('billing')} />
            <SidebarItem icon={<User/>} label="Perfil" active={activeTab==='profile'} onClick={() => setActiveTab('profile')} />
          </nav>
        </div>
        <div className="p-4 border-t border-gray-100">
          <div className="mb-4 bg-purple-50 p-3 rounded-xl border border-purple-100">
             <p className="text-xs text-purple-600 font-bold mb-1">Gerações restantes</p>
             <div className="flex items-end gap-1">
               <span className="text-2xl font-black text-purple-900">{credits}</span>
               <span className="text-sm text-purple-700 mb-1">/ 100</span>
             </div>
             <div className="w-full bg-purple-200 h-2 rounded-full mt-2">
               <div className="bg-purple-600 h-2 rounded-full" style={{width: `${(credits/100)*100}%`}}></div>
             </div>
          </div>
          <button onClick={onLogout} className="flex items-center text-gray-500 hover:text-red-500 text-sm font-medium transition-colors px-2">
            <LogOut className="w-4 h-4 mr-2" /> Sair da conta
          </button>
        </div>
      </aside>

      {/* MOBILE HEADER (Simples) */}
      <div className="md:hidden absolute top-0 left-0 w-full h-16 bg-white border-b flex items-center justify-between px-4 z-10">
         <div className="flex items-center"><Sparkles className="w-5 h-5 text-purple-600 mr-2" /><span className="font-bold">Vitrine IA</span></div>
         <button onClick={() => setActiveTab('studio')} className="bg-purple-600 text-white text-xs font-bold px-3 py-1.5 rounded-lg">CRIAR</button>
      </div>

      {/* ÁREA PRINCIPAL */}
      <main className="flex-1 overflow-y-auto pt-16 md:pt-0">
        <div className="p-4 md:p-8 max-w-6xl mx-auto h-full">
          {activeTab === 'dashboard' && <ViewDashboard onNavigateToStudio={() => setActiveTab('studio')} credits={credits} />}
          {activeTab === 'studio' && <ViewStudio onDeductCredit={() => setCredits(c => Math.max(0, c-1))} />}
          {activeTab === 'history' && <ViewHistory />}
          {activeTab === 'billing' && <ViewBilling credits={credits} />}
          {activeTab === 'profile' && <ViewProfile user={user} />}
        </div>
      </main>

    </div>
  );
}

function SidebarItem({ icon, label, active, onClick, highlight }) {
  const baseClasses = "flex items-center w-full px-3 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 group";
  const activeClasses = highlight 
    ? "bg-purple-600 text-white shadow-md shadow-purple-600/20" 
    : "bg-gray-100 text-gray-900";
  const inactiveClasses = "text-gray-600 hover:bg-gray-50 hover:text-gray-900";
  
  return (
    <button onClick={onClick} className={`${baseClasses} ${active ? activeClasses : inactiveClasses}`}>
      <span className={`mr-3 ${active ? (highlight ? 'text-white' : 'text-purple-600') : 'text-gray-400 group-hover:text-purple-500'}`}>
        {React.cloneElement(icon, { size: 18 })}
      </span>
      {label}
    </button>
  );
}

// --- VIEWS DO DASHBOARD ---

function ViewDashboard({ onNavigateToStudio, credits }) {
  return (
    <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
      <h1 className="text-2xl font-bold text-gray-900 mb-6">Visão Geral</h1>
      
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <DashboardCard title="Gerações Restantes" value={credits} icon={<Sparkles className="text-purple-500"/>} subtitle="Renova em 15 dias" />
        <DashboardCard title="Posts Criados" value="24" icon={<Instagram className="text-pink-500"/>} subtitle="Este mês" />
        <DashboardCard title="Stories Criados" value="48" icon={<Smartphone className="text-blue-500"/>} subtitle="Este mês" />
      </div>

      <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-3xl p-8 md:p-10 text-white shadow-xl shadow-purple-600/20 relative overflow-hidden flex flex-col md:flex-row items-center justify-between">
        <div className="relative z-10 mb-6 md:mb-0">
          <h2 className="text-3xl font-extrabold mb-2">Hora de vender mais.</h2>
          <p className="text-purple-100 max-w-md">Transforme aquela foto simples do estoque em um post que atrai clientes em segundos.</p>
        </div>
        <button onClick={onNavigateToStudio} className="relative z-10 bg-white text-purple-600 hover:bg-gray-50 font-bold text-lg px-8 py-4 rounded-2xl shadow-lg transition-transform hover:scale-105 flex items-center gap-2">
          <Sparkles className="w-5 h-5"/> CRIAR NOVO CONTEÚDO
        </button>
        {/* Abstract shapes */}
        <div className="absolute top-0 right-0 -translate-y-1/4 translate-x-1/4 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
      </div>
    </div>
  );
}

function DashboardCard({ title, value, subtitle, icon }) {
  return (
    <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-center gap-4">
      <div className="p-4 bg-gray-50 rounded-xl border border-gray-100">{icon}</div>
      <div>
        <p className="text-sm font-medium text-gray-500">{title}</p>
        <div className="flex items-baseline gap-2">
          <h3 className="text-2xl font-black text-gray-900">{value}</h3>
          {subtitle && <span className="text-xs text-gray-400">{subtitle}</span>}
        </div>
      </div>
    </div>
  );
}

// ==========================================
// MÓDULO CORE: O STUDIO DE CRIAÇÃO (WIZARD)
// ==========================================
// Mestre: Aqui consolidamos todas as telas de geração (modelo, post, legenda) em um fluxo sem atrito.
function ViewStudio({ onDeductCredit }) {
  const [step, setStep] = useState(1); // 1: Upload, 2: Config Modelo, 3: Processando, 4: Editor (Post+Legenda)
  const [uploadedImage, setUploadedImage] = useState(null);
  
  // Configs da IA
  const [aiConfig, setAiConfig] = useState({ gender: 'feminina_jovem', style: 'casual', pose: 'em_pe', bg: 'estudio' });
  
  // Imagem Gerada Mock
  const [generatedImage, setGeneratedImage] = useState(null);
  
  // Configs de Post
  const [postConfig, setPostConfig] = useState({ type: 'post', layout: 'promocao', price: '149', installment: '3x de R$49', pieceType: 'Vestido Midi', targetAudience: 'Mulheres' });
  const [generatedCaption, setGeneratedCaption] = useState('');

  const handleUpload = (e) => {
    // Simula o upload mostrando um placeholder genérico de roupa no cabide
    setUploadedImage("https://images.unsplash.com/photo-1572804013309-82a89b436400?w=500&q=80"); // Blusa mock
    trackEvent('studio_upload_image');
    setStep(2);
  };

  const handleGenerateModel = () => {
    trackEvent('studio_start_generation', aiConfig);
    setStep(3); // Loading
    
    // Simula chamada de API
    setTimeout(() => {
      onDeductCredit();
      // Retorna uma imagem de modelo baseada vagamente nas configs (mock)
      setGeneratedImage("https://images.unsplash.com/photo-1515347619362-710081d58dcc?w=800&q=80"); 
      setStep(4);
      generateMockCaption();
    }, 3000);
  };

  const generateMockCaption = () => {
    const caption = `✨ Elegância e conforto no mesmo look!\n\nNosso ${postConfig.pieceType} é perfeito para você se sentir linda em qualquer ocasião. Feito com tecido premium e caimento impecável.\n\n🛍️ Disponível agora por R$${postConfig.price} (ou ${postConfig.installment})\n\n👇 Chama no Direct para garantir o seu antes que esgote! Link na bio.`;
    setGeneratedCaption(caption);
    trackEvent('studio_generate_caption_auto');
  };

  const handleDownload = (format) => {
    trackEvent('download_asset', { format, post_type: postConfig.type });
    alert(`Iniciando download do ${format} gerado... (Simulação)`);
  };

  return (
    <div className="h-full flex flex-col animate-in fade-in duration-300">
      
      {/* Header do Studio */}
      <div className="flex items-center justify-between mb-6">
        <h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2">
          <Sparkles className="w-6 h-6 text-purple-600" /> Estúdio IA
        </h1>
        {step > 1 && step < 4 && <button onClick={() => setStep(1)} className="text-sm text-gray-500 hover:text-gray-900">Cancelar e voltar</button>}
      </div>

      {/* Área de Trabalho */}
      <div className="bg-white border border-gray-200 rounded-3xl shadow-sm flex-1 overflow-hidden flex flex-col md:flex-row">
        
        {/* STEP 1: UPLOAD */}
        {step === 1 && (
          <div className="flex-1 flex flex-col items-center justify-center p-10 text-center border-2 border-dashed border-gray-200 m-8 rounded-3xl hover:border-purple-400 transition-colors bg-gray-50 cursor-pointer" onClick={handleUpload}>
             <div className="bg-white p-4 rounded-full shadow-sm mb-4"><UploadCloud className="w-10 h-10 text-purple-600" /></div>
             <h3 className="text-xl font-bold mb-2">Envie a foto da roupa</h3>
             <p className="text-gray-500 mb-6 max-w-sm">Tire uma foto da peça em um cabide, manequim ou no chão bem iluminado. (JPG, PNG, WEBP)</p>
             <button className="bg-purple-600 text-white px-6 py-3 rounded-xl font-medium shadow-sm pointer-events-none">Selecionar Imagem</button>
          </div>
        )}

        {/* STEP 2: CONFIGURAR IA */}
        {step === 2 && (
          <div className="flex-1 flex flex-col md:flex-row w-full h-full">
            {/* Esquerda: Preview da Original */}
            <div className="w-full md:w-1/2 bg-gray-100 p-8 flex items-center justify-center border-r border-gray-200">
               <div className="max-w-sm w-full relative">
                 <p className="absolute top-2 left-2 bg-black/50 text-white text-xs px-2 py-1 rounded backdrop-blur-sm">Foto Original</p>
                 <img src={uploadedImage} alt="Original" className="w-full h-auto rounded-xl shadow-md object-cover aspect-[3/4]" />
               </div>
            </div>
            
            {/* Direita: Controles */}
            <div className="w-full md:w-1/2 p-8 overflow-y-auto">
              <h3 className="text-xl font-bold mb-6">Como deseja a foto final?</h3>
              
              <div className="space-y-5">
                <StudioSelect label="Tipo de Modelo" value={aiConfig.gender} onChange={(v) => setAiConfig({...aiConfig, gender: v})} 
                  options={[{v:'feminina_jovem', l:'Feminina Jovem'}, {v:'feminina_adulta', l:'Feminina Adulta'}, {v:'masculina_jovem', l:'Masculina Jovem'}]} />
                
                <StudioSelect label="Estilo / Vibe" value={aiConfig.style} onChange={(v) => setAiConfig({...aiConfig, style: v})} 
                  options={[{v:'casual', l:'Casual Dia a Dia'}, {v:'elegante', l:'Elegante / Festa'}, {v:'streetwear', l:'Streetwear Moderno'}]} />
                
                <StudioSelect label="Posição" value={aiConfig.pose} onChange={(v) => setAiConfig({...aiConfig, pose: v})} 
                  options={[{v:'em_pe', l:'Em pé natural'}, {v:'andando', l:'Andando (Dinâmico)'}, {v:'pose_fashion', l:'Pose Fashionista'}]} />
                
                <StudioSelect label="Cenário de Fundo" value={aiConfig.bg} onChange={(v) => setAiConfig({...aiConfig, bg: v})} 
                  options={[{v:'estudio', l:'Estúdio Branco'}, {v:'urbano', l:'Ambiente Urbano'}, {v:'loja', l:'Loja Elegante'}]} />
              </div>

              <button onClick={handleGenerateModel} className="w-full mt-8 bg-purple-600 hover:bg-purple-700 text-white font-bold py-4 rounded-xl shadow-lg transition-all flex justify-center items-center gap-2 text-lg">
                <Sparkles className="w-5 h-5"/> Gerar Foto Realista <span className="text-purple-200 text-sm font-normal ml-2">(-1 geração)</span>
              </button>
            </div>
          </div>
        )}

        {/* STEP 3: LOADING */}
        {step === 3 && (
          <div className="flex-1 flex flex-col items-center justify-center p-10 bg-gray-50 w-full h-full">
            <Loader2 className="w-16 h-16 text-purple-600 animate-spin mb-6" />
            <h2 className="text-2xl font-bold mb-2">A IA está trabalhando...</h2>
            <p className="text-gray-500">Ajustando iluminação, vestindo a peça na modelo e renderizando os detalhes (aprox. 15s).</p>
          </div>
        )}

        {/* STEP 4: EDITOR FINAL (Onde a mágica da conversão acontece) */}
        {step === 4 && (
          <div className="flex flex-col md:flex-row w-full h-full">
            
            {/* Esquerda: Configurações de Venda & Copy */}
            <div className="w-full md:w-[400px] border-r border-gray-200 bg-gray-50 flex flex-col h-full">
              <div className="p-4 border-b border-gray-200 bg-white">
                <h3 className="font-bold flex items-center gap-2"><Layout className="w-5 h-5 text-purple-600"/> Formato & Preço</h3>
              </div>
              <div className="p-4 overflow-y-auto flex-1 space-y-6">
                
                <div>
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block">Formato</label>
                  <div className="flex gap-2">
                    <button onClick={()=>setPostConfig({...postConfig, type: 'post'})} className={`flex-1 py-2 text-sm font-medium rounded-lg border ${postConfig.type === 'post' ? 'bg-purple-100 border-purple-500 text-purple-700' : 'bg-white border-gray-200'}`}>Post Quadrado</button>
                    <button onClick={()=>setPostConfig({...postConfig, type: 'story'})} className={`flex-1 py-2 text-sm font-medium rounded-lg border ${postConfig.type === 'story' ? 'bg-purple-100 border-purple-500 text-purple-700' : 'bg-white border-gray-200'}`}>Story (9:16)</button>
                  </div>
                </div>

                <div>
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block">Etiqueta de Preço</label>
                  <input type="text" value={postConfig.price} onChange={e=>setPostConfig({...postConfig, price: e.target.value})} placeholder="Valor (ex: 149)" className="w-full border border-gray-300 rounded-lg p-2 text-sm mb-2" />
                  <input type="text" value={postConfig.installment} onChange={e=>setPostConfig({...postConfig, installment: e.target.value})} placeholder="Parcelas (ex: 3x de R$49)" className="w-full border border-gray-300 rounded-lg p-2 text-sm" />
                </div>

                <div className="pt-4 border-t border-gray-200">
                  <label className="text-xs font-bold text-gray-500 uppercase tracking-wider mb-2 block flex justify-between items-center">
                    <span>Legenda Inteligente</span>
                    <button onClick={generateMockCaption} className="text-purple-600 hover:text-purple-700"><Sparkles className="w-4 h-4"/></button>
                  </label>
                  <textarea value={generatedCaption} onChange={e=>setGeneratedCaption(e.target.value)} rows="8" className="w-full border border-gray-300 rounded-lg p-3 text-sm resize-none focus:ring-purple-500 bg-white shadow-sm leading-relaxed" />
                  <button onClick={() => {navigator.clipboard.writeText(generatedCaption); trackEvent('copy_caption')}} className="w-full mt-2 text-sm text-gray-600 bg-white border border-gray-200 py-2 rounded-lg flex items-center justify-center gap-2 hover:bg-gray-50">
                    <Copy className="w-4 h-4"/> Copiar Legenda
                  </button>
                </div>

              </div>
            </div>

            {/* Direita: Preview Visual e Download */}
            <div className="flex-1 bg-gray-200 flex flex-col items-center justify-center p-6 relative overflow-y-auto">
               
               {/* Container do Mockup (Escalável) */}
               <div className={`relative bg-white shadow-2xl transition-all duration-300 ${postConfig.type === 'post' ? 'w-[400px] h-[400px] rounded-sm' : 'w-[320px] h-[568px] rounded-xl overflow-hidden'}`}>
                  {/* Imagem de Fundo Gerada */}
                  <img src={generatedImage} alt="Gerada" className="absolute inset-0 w-full h-full object-cover" />
                  
                  {/* Overlay Escuro Inferior para Leitura */}
                  <div className="absolute bottom-0 w-full h-1/3 bg-gradient-to-t from-black/80 to-transparent"></div>
                  
                  {/* Elementos de Venda (Preço/Tag) */}
                  {postConfig.type === 'post' ? (
                    <div className="absolute bottom-6 left-6 text-white">
                      <div className="bg-purple-600 text-xs font-bold px-2 py-1 rounded inline-block mb-1 shadow-md">NOVIDADE</div>
                      <div className="text-3xl font-black drop-shadow-md">R${postConfig.price}</div>
                      {postConfig.installment && <div className="text-sm font-medium opacity-90">{postConfig.installment}</div>}
                    </div>
                  ) : (
                    // Story Layout
                    <div className="absolute bottom-10 left-0 w-full text-center px-4">
                       <div className="bg-white/90 backdrop-blur-sm text-gray-900 rounded-2xl p-4 shadow-xl inline-block w-full">
                         <p className="text-xs font-bold text-purple-600 mb-1 tracking-widest uppercase">{postConfig.pieceType}</p>
                         <div className="text-4xl font-black mb-1">R${postConfig.price}</div>
                         <div className="text-sm text-gray-500 mb-3">{postConfig.installment}</div>
                         <div className="bg-purple-600 text-white font-bold py-2 rounded-xl text-sm animate-pulse">COMPRAR AGORA</div>
                       </div>
                    </div>
                  )}
               </div>

               {/* Ações de Baixar */}
               <div className="absolute bottom-6 flex gap-3">
                 <button onClick={() => handleDownload('Imagem Limpa')} className="bg-white text-gray-800 px-4 py-2 rounded-full shadow-md font-medium text-sm flex items-center gap-2 hover:bg-gray-50">
                    <ImageIcon className="w-4 h-4"/> Baixar Só Foto
                 </button>
                 <button onClick={() => handleDownload(postConfig.type === 'post' ? 'Post com Preço' : 'Story Pronto')} className="bg-purple-600 text-white px-6 py-2 rounded-full shadow-lg shadow-purple-600/30 font-bold text-sm flex items-center gap-2 hover:bg-purple-700 hover:-translate-y-0.5 transition-transform">
                    <Download className="w-4 h-4"/> Baixar {postConfig.type === 'post' ? 'Post' : 'Story'}
                 </button>
               </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function StudioSelect({ label, options, value, onChange }) {
  return (
    <div>
      <label className="block text-sm font-bold text-gray-700 mb-2">{label}</label>
      <div className="grid grid-cols-2 gap-2">
        {options.map(opt => (
          <button key={opt.v} onClick={() => onChange(opt.v)} 
            className={`px-3 py-2 text-sm rounded-lg border text-left transition-colors ${value === opt.v ? 'bg-purple-50 border-purple-500 text-purple-700 font-medium' : 'bg-white border-gray-200 text-gray-600 hover:border-gray-300'}`}>
            {opt.l}
          </button>
        ))}
      </div>
    </div>
  );
}


// ==========================================
// OUTRAS VIEWS (Histórico, Assinatura, Perfil)
// ==========================================

function ViewHistory() {
  // Mock data
  const items = [1,2,3,4,5,6].map(i => ({ id: i, date: '12 Out, 2023', img: `https://images.unsplash.com/photo-1515347619362-710081d58dcc?w=300&q=80&sig=${i}` }));
  
  return (
    <div className="animate-in fade-in">
      <h2 className="text-2xl font-bold mb-6 text-gray-900">Histórico de Criações</h2>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        {items.map(item => (
          <div key={item.id} className="bg-white p-2 rounded-2xl border border-gray-100 shadow-sm group">
            <div className="relative aspect-[3/4] rounded-xl overflow-hidden mb-3">
               <img src={item.img} alt="Histórico" className="w-full h-full object-cover" />
               <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                 <button onClick={() => trackEvent('history_download_again')} className="bg-white text-gray-900 p-2 rounded-full shadow-lg hover:scale-110 transition-transform"><Download className="w-4 h-4"/></button>
               </div>
            </div>
            <p className="text-xs text-center text-gray-500">{item.date}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function ViewBilling({ credits }) {
  return (
    <div className="max-w-2xl animate-in fade-in">
      <h2 className="text-2xl font-bold mb-6 text-gray-900">Assinatura</h2>
      <div className="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm mb-6">
        <div className="flex justify-between items-start mb-6 border-b border-gray-100 pb-6">
          <div>
            <span className="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded mb-2 inline-block">ATIVO</span>
            <h3 className="text-xl font-bold">Plano Pro Lojista</h3>
            <p className="text-gray-500 text-sm">R$99,90 / mês</p>
          </div>
          <button className="text-purple-600 text-sm font-bold border border-purple-200 px-4 py-2 rounded-lg hover:bg-purple-50 transition-colors">Gerenciar Pagamento</button>
        </div>
        <div>
          <h4 className="font-bold mb-2">Uso este mês</h4>
          <div className="flex justify-between text-sm text-gray-600 mb-2">
            <span>{100 - credits} gerações usadas</span>
            <span>{credits} restantes</span>
          </div>
          <div className="w-full bg-gray-100 h-3 rounded-full overflow-hidden">
            <div className="bg-purple-600 h-full rounded-full" style={{width: `${((100-credits)/100)*100}%`}}></div>
          </div>
          <p className="text-xs text-gray-400 mt-2">Sua cota renova em 15 de Novembro de 2023.</p>
        </div>
      </div>
    </div>
  );
}

function ViewProfile({ user }) {
  return (
    <div className="max-w-xl animate-in fade-in">
      <h2 className="text-2xl font-bold mb-6 text-gray-900">Seu Perfil</h2>
      <div className="bg-white p-8 rounded-3xl border border-gray-100 shadow-sm">
        <div className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Nome da Loja</label>
            <input type="text" defaultValue={user.name} className="w-full border border-gray-300 rounded-lg p-3 bg-gray-50 focus:bg-white focus:ring-purple-500" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
            <input type="email" defaultValue={user.email} disabled className="w-full border border-gray-200 rounded-lg p-3 bg-gray-100 text-gray-500 cursor-not-allowed" />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Nova Senha</label>
            <input type="password" placeholder="••••••••" className="w-full border border-gray-300 rounded-lg p-3 focus:ring-purple-500" />
          </div>
          <button onClick={() => {trackEvent('profile_update'); alert('Salvo com sucesso!')}} className="mt-4 bg-gray-900 text-white font-bold py-3 px-6 rounded-xl hover:bg-gray-800 transition-colors">
            Salvar Alterações
          </button>
        </div>
      </div>
    </div>
  );
}