import React, { useState, useEffect } from 'react';
import { 
  Shield, Zap, DollarSign, Menu, X, CreditCard, Star, Gift, 
  ArrowRight, CheckCircle, Play, Lock, User, LayoutDashboard, 
  Briefcase, LogOut, BarChart3, Users, PlusCircle, Smartphone, FileText, MapPin, Phone
} from 'lucide-react';

// --- IDENTIDAD VISUAL & LOGO ---

const Logo = ({ size = "w-12 h-12", showText = false, colorText = "text-[#0B1C3C]" }) => (
  <div className="flex items-center gap-3">
    <div className={`${size} relative drop-shadow-lg flex-shrink-0`}>
      <svg viewBox="0 0 100 120" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full">
        <path d="M50 115C50 115 95 90 95 30V10H5V30C5 90 50 115 50 115Z" fill="#0B1C3C" stroke="#39FF14" strokeWidth="2"/>
        <path d="M95 10L5 115V115C5 115 25 105 50 115C75 105 95 80 95 30V10Z" fill="#39FF14" opacity="0.9"/>
        <defs>
          <linearGradient id="goldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stopColor="#FFD700" />
            <stop offset="50%" stopColor="#FDB931" />
            <stop offset="100%" stopColor="#B8860B" />
          </linearGradient>
          <filter id="shadow">
            <feDropShadow dx="1" dy="2" stdDeviation="1" floodColor="black" floodOpacity="0.5"/>
          </filter>
        </defs>
        <path d="M25 40 V80 L35 80 V60 L50 80 L65 60 V80 L75 80 V40 L65 40 L50 65 L35 40 Z" fill="url(#goldGrad)" filter="url(#shadow)"/>
        <path d="M58 55 H70 V48 H58" fill="url(#goldGrad)" /> 
      </svg>
    </div>
    {showText && (
      <div className={`font-sans font-extrabold tracking-tight leading-none ${colorText}`}>
        <div className="text-lg">MISIÓN</div>
        <div className="text-xl">EFECTIVO</div>
      </div>
    )}
  </div>
);

// --- DATOS MOCK ---

const MISSIONS = [
  { id: 1, title: "Ver Video Promocional", reward: 0.05, type: "video", partner: "AdNetwork", duration: "30s" },
  { id: 2, title: "Like a Barbería El Pepe", reward: 0.15, type: "social", partner: "Barbería El Pepe", duration: "Instant" },
  { id: 3, title: "Encuesta Financiera", reward: 0.50, type: "survey", partner: "Banco Local", duration: "5 min" },
  { id: 4, title: "Seguir a Pizzería Don Juan", reward: 0.10, type: "social", partner: "Pizzería Don Juan", duration: "Instant" },
  { id: 5, title: "Instalar Juego 'Warriors'", reward: 1.20, type: "download", partner: "GameStudio", duration: "2 min" },
];

const COUPONS = [
  { id: 1, title: "2x1 en Hamburguesas", store: "Burger King", discount: "50%", cost: 0, img: "🍔" },
  { id: 2, title: "Corte de Cabello", store: "Barbería El Pepe", discount: "-20%", cost: 10, img: "💈" },
  { id: 3, title: "Pizza Familiar", store: "Don Juan", discount: "$5 OFF", cost: 50, img: "🍕" },
];

// --- APP COMPONENT ---

export default function App() {
  // Estados Globales
  const [authView, setAuthView] = useState('login'); // login, register, app
  const [userRole, setUserRole] = useState('guest'); // guest, free, elite, business
  const [view, setView] = useState('dashboard');
  const [balance, setBalance] = useState(0.00);
  const [showAd, setShowAd] = useState(false);
  const [sidebarOpen, setSidebarOpen] = useState(false); // Mobile sidebar toggle

  // ESTADO DE VALIDACIÓN DE USUARIO (KYC)
  const [isVerified, setIsVerified] = useState(false); 
  const [showVerificationModal, setShowVerificationModal] = useState(false);
  const [pendingAction, setPendingAction] = useState(null); // Para guardar qué quería hacer el usuario antes de validar

  // Lógica de navegación y anuncios
  const handleViewChange = (newView) => {
    // Simulación de "Regla de Actividad" (Anuncio obligatorio para usuarios Free)
    if (userRole === 'free' && Math.random() > 0.7 && newView !== 'elite') {
      setShowAd(true);
      setTimeout(() => setShowAd(false), 3500);
    }
    setView(newView);
    setSidebarOpen(false); // Cerrar sidebar en móvil al navegar
  };

  const login = (role) => {
    setUserRole(role);
    setAuthView('app');
    setView('dashboard');
    // Simulamos que el usuario Elite ya está verificado, pero el Free debe hacerlo
    if (role === 'elite') {
      setBalance(15.50);
      setIsVerified(true);
    } else {
      setBalance(0.00);
      setIsVerified(false); // Usuario nuevo empieza sin verificar
    }
    if (role === 'business') setBalance(500.00);
  };

  const logout = () => {
    setAuthView('login');
    setUserRole('guest');
    setBalance(0);
    setIsVerified(false);
  };

  // Función Guardián: Verifica si el usuario puede realizar acciones críticas
  const checkVerification = (actionCallback) => {
    if (isVerified || userRole === 'business') {
      actionCallback();
    } else {
      setPendingAction(() => actionCallback); // Guardamos la acción para ejecutarla después de validar
      setShowVerificationModal(true);
    }
  };

  const handleVerificationSubmit = (e) => {
    e.preventDefault();
    // Aquí iría la lógica de envío al backend
    setIsVerified(true);
    setShowVerificationModal(false);
    alert("¡Identidad Validada con Éxito!");
    
    // Ejecutar la acción que estaba pendiente (ej: solicitar préstamo o completar misión)
    if (pendingAction) {
      pendingAction();
      setPendingAction(null);
    }
  };

  // --- SUB-COMPONENTES DE UI ---

  const SidebarItem = ({ icon: Icon, label, active, onClick, color }) => (
    <button 
      onClick={onClick}
      className={`w-full flex items-center gap-4 px-4 py-3 rounded-xl transition-all duration-200 group ${
        active 
          ? 'bg-[#39FF14] text-[#0B1C3C] font-bold shadow-lg shadow-green-500/20' 
          : 'text-gray-400 hover:bg-white/5 hover:text-white'
      }`}
    >
      <Icon size={22} className={`${active ? 'text-[#0B1C3C]' : color || 'text-gray-400 group-hover:text-white'}`} />
      <span className={active ? '' : ''}>{label}</span>
    </button>
  );

  const StatCard = ({ title, value, subtext, icon: Icon, colorClass }) => (
    <div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-start justify-between relative overflow-hidden group hover:shadow-md transition">
      <div className="relative z-10">
        <p className="text-gray-500 text-sm font-medium mb-1">{title}</p>
        <h3 className="text-2xl font-bold text-[#0B1C3C]">{value}</h3>
        {subtext && <p className="text-xs text-green-500 mt-1 font-bold">{subtext}</p>}
      </div>
      <div className={`p-3 rounded-xl ${colorClass} bg-opacity-10 text-opacity-100`}>
        <Icon size={24} className={colorClass.replace('bg-', 'text-')} />
      </div>
      {/* Decoración fondo */}
      <div className={`absolute -right-6 -bottom-6 w-24 h-24 rounded-full ${colorClass} opacity-10 group-hover:scale-110 transition`}></div>
    </div>
  );

  // --- VISTAS DE AUTENTICACIÓN (LOGIN/REGISTER) ---

  if (authView !== 'app') {
    return (
      <div className="min-h-screen bg-[#0B1C3C] flex items-center justify-center p-4 relative overflow-hidden">
        {/* Fondo decorativo */}
        <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
        <div className="absolute -top-20 -left-20 w-96 h-96 bg-[#39FF14] rounded-full filter blur-[150px] opacity-20"></div>
        <div className="absolute -bottom-20 -right-20 w-96 h-96 bg-[#004aad] rounded-full filter blur-[150px] opacity-20"></div>

        <div className="bg-white rounded-3xl shadow-2xl w-full max-w-4xl flex flex-col md:flex-row overflow-hidden relative z-10">
          
          {/* Lado Izquierdo (Visual) */}
          <div className="hidden md:flex md:w-1/2 bg-gradient-to-br from-[#0B1C3C] to-[#050F22] p-12 flex-col justify-between text-white relative">
            <div className="absolute top-0 left-0 w-full h-full opacity-10 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')]"></div>
            <div>
              <Logo size="w-20 h-20" colorText="text-white" showText={true} />
              <h2 className="text-4xl font-bold mt-8 leading-tight">Tu tiempo vale <span className="text-[#39FF14]">Oro</span>.</h2>
              <p className="mt-4 text-gray-300">Únete al ecosistema financiero donde pedir prestado, ganar y ahorrar es una sola misión.</p>
            </div>
            <div className="space-y-4">
              <div className="flex items-center gap-3 bg-white/10 p-3 rounded-lg backdrop-blur-sm">
                <CheckCircle className="text-[#39FF14]" size={20} />
                <span className="text-sm font-medium">Préstamos Rápidos</span>
              </div>
              <div className="flex items-center gap-3 bg-white/10 p-3 rounded-lg backdrop-blur-sm">
                <CheckCircle className="text-[#39FF14]" size={20} />
                <span className="text-sm font-medium">Ingresos por Tareas</span>
              </div>
              <div className="flex items-center gap-3 bg-white/10 p-3 rounded-lg backdrop-blur-sm">
                <CheckCircle className="text-[#39FF14]" size={20} />
                <span className="text-sm font-medium">Descuentos Reales</span>
              </div>
            </div>
          </div>

          {/* Lado Derecho (Formulario) */}
          <div className="w-full md:w-1/2 p-8 md:p-12 bg-gray-50">
            <div className="md:hidden flex justify-center mb-6">
              <Logo size="w-16 h-16" showText={true} />
            </div>
            
            <div className="flex justify-between items-center mb-8">
              <h2 className="text-2xl font-bold text-[#0B1C3C]">
                {authView === 'login' ? 'Iniciar Sesión' : 'Crear Cuenta'}
              </h2>
              <button 
                onClick={() => setAuthView(authView === 'login' ? 'register' : 'login')}
                className="text-sm text-blue-600 font-bold hover:underline"
              >
                {authView === 'login' ? 'Registrarse' : 'Entrar'}
              </button>
            </div>

            <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
              {authView === 'register' && (
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Nombre Completo (Visual)</label>
                  <input type="text" className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-[#39FF14] focus:border-transparent outline-none transition" placeholder="Ej. Juan Pérez" />
                </div>
              )}
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Correo Electrónico</label>
                <input type="email" className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-[#39FF14] focus:border-transparent outline-none transition" placeholder="nombre@correo.com" />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-1">Contraseña</label>
                <input type="password" className="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-[#39FF14] focus:border-transparent outline-none transition" placeholder="••••••••" />
              </div>
              
              <div className="pt-4">
                <p className="text-xs text-center text-gray-500 mb-4">Selecciona un perfil para simular (Demo):</p>
                <div className="grid grid-cols-1 gap-3">
                  <button onClick={() => login('free')} className="w-full bg-[#0B1C3C] text-white py-3 rounded-xl font-bold shadow-lg hover:bg-[#1a2f55] transition flex items-center justify-center gap-2">
                    <User size={18}/> Usuario Estándar (No Verificado)
                  </button>
                  <button onClick={() => login('elite')} className="w-full bg-gradient-to-r from-[#FFD700] to-[#B8860B] text-[#0B1C3C] py-3 rounded-xl font-bold shadow-lg hover:shadow-xl transition flex items-center justify-center gap-2">
                    <Star size={18}/> Usuario Elite (Verificado)
                  </button>
                  <button onClick={() => login('business')} className="w-full bg-white border-2 border-[#0B1C3C] text-[#0B1C3C] py-3 rounded-xl font-bold hover:bg-gray-50 transition flex items-center justify-center gap-2">
                    <Briefcase size={18}/> Negocio Aliado
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }

  // --- ESTRUCTURA PRINCIPAL DE LA APP (DASHBOARD) ---

  const isBusiness = userRole === 'business';
  
  return (
    <div className="flex h-screen bg-gray-100 overflow-hidden font-sans">
      
      {/* 1. SIDEBAR (Navegación Desktop & Mobile Drawer) */}
      <aside className={`
        fixed inset-y-0 left-0 z-30 w-72 bg-[#0B1C3C] text-white transition-transform duration-300 ease-in-out shadow-2xl
        md:translate-x-0 md:static md:flex md:flex-col
        ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
      `}>
        {/* Header Sidebar */}
        <div className="p-6 border-b border-white/10 flex items-center justify-between">
          <Logo size="w-10 h-10" showText={true} colorText="text-white" />
          <button onClick={() => setSidebarOpen(false)} className="md:hidden text-gray-400 hover:text-white">
            <X size={24} />
          </button>
        </div>

        {/* Perfil Mini Resumen */}
        <div className="p-6">
          <div className="bg-white/5 rounded-xl p-4 border border-white/10">
            <p className="text-xs text-gray-400 uppercase font-bold tracking-wider mb-1">Tu Saldo</p>
            <div className="text-3xl font-bold text-[#39FF14] flex items-baseline gap-1">
              ${balance.toFixed(2)} <span className="text-sm text-white">USD</span>
            </div>
            <div className="mt-3 flex items-center gap-2">
              <span className={`px-2 py-1 rounded text-[10px] font-bold uppercase ${
                userRole === 'elite' ? 'bg-[#FFD700] text-black' : 
                userRole === 'business' ? 'bg-purple-500 text-white' : 
                'bg-gray-600 text-gray-300'
              }`}>
                {userRole === 'elite' ? 'Agente Elite' : userRole === 'business' ? 'Partner' : 'Agente Básico'}
              </span>
              {isVerified && !isBusiness && (
                <span className="bg-blue-500/20 text-blue-300 p-1 rounded-full" title="Verificado">
                  <Shield size={12} fill="currentColor"/>
                </span>
              )}
            </div>
          </div>
        </div>

        {/* Menu Items */}
        <div className="flex-1 overflow-y-auto px-4 space-y-2 py-4">
          {!isBusiness ? (
            <>
              <SidebarItem icon={LayoutDashboard} label="Dashboard" active={view === 'dashboard'} onClick={() => handleViewChange('dashboard')} />
              <SidebarItem icon={Zap} label="Misiones" active={view === 'missions'} onClick={() => handleViewChange('missions')} color="text-yellow-400" />
              <SidebarItem icon={CreditCard} label="Préstamos" active={view === 'loan'} onClick={() => handleViewChange('loan')} color="text-green-400" />
              <SidebarItem icon={Gift} label="Cupones Aliados" active={view === 'coupons'} onClick={() => handleViewChange('coupons')} color="text-purple-400" />
              <div className="pt-4 pb-2">
                <div className="h-px bg-white/10 mx-2"></div>
              </div>
              <SidebarItem icon={Star} label="Membresía Elite" active={view === 'elite'} onClick={() => handleViewChange('elite')} color="text-[#FFD700]" />
            </>
          ) : (
            <>
              <SidebarItem icon={LayoutDashboard} label="Resumen Negocio" active={view === 'dashboard'} onClick={() => handleViewChange('dashboard')} />
              <SidebarItem icon={PlusCircle} label="Crear Campaña" active={view === 'campaigns'} onClick={() => handleViewChange('campaigns')} color="text-[#39FF14]" />
              <SidebarItem icon={BarChart3} label="Estadísticas" active={view === 'stats'} onClick={() => handleViewChange('stats')} />
              <SidebarItem icon={Users} label="Validar Cupones" active={view === 'validate'} onClick={() => handleViewChange('validate')} />
            </>
          )}
        </div>

        {/* Footer Sidebar */}
        <div className="p-4 border-t border-white/10">
          <button onClick={logout} className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-red-400 hover:bg-red-500/10 transition">
            <LogOut size={20} />
            <span>Cerrar Sesión</span>
          </button>
        </div>
      </aside>

      {/* Overlay para móvil */}
      {sidebarOpen && (
        <div 
          className="fixed inset-0 bg-black/50 z-20 md:hidden backdrop-blur-sm"
          onClick={() => setSidebarOpen(false)}
        ></div>
      )}

      {/* 2. CONTENIDO PRINCIPAL (Main Area) */}
      <main className="flex-1 overflow-y-auto relative">
        
        {/* Mobile Header */}
        <header className="md:hidden bg-white p-4 shadow-sm flex justify-between items-center sticky top-0 z-10">
          <div className="flex items-center gap-2">
            <button onClick={() => setSidebarOpen(true)} className="text-[#0B1C3C]">
              <Menu size={28} />
            </button>
            <Logo size="w-8 h-8" />
          </div>
          <div className="bg-gray-100 px-3 py-1 rounded-full font-bold text-[#0B1C3C] border border-gray-200">
            ${balance.toFixed(2)}
          </div>
        </header>

        <div className="p-6 md:p-10 max-w-7xl mx-auto">
          
          {/* VIEW: DASHBOARD USUARIO */}
          {view === 'dashboard' && !isBusiness && (
            <div className="space-y-8 animate-fade-in">
              <header className="mb-8">
                <h1 className="text-3xl font-bold text-[#0B1C3C]">Hola, {userRole === 'elite' ? 'Comandante' : 'Agente'} 👋</h1>
                <p className="text-gray-500">Aquí está el resumen de tu actividad financiera.</p>
                {!isVerified && (
                  <div className="mt-4 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg flex items-start gap-3">
                    <Shield className="text-yellow-600 flex-shrink-0" size={20} />
                    <div>
                      <h4 className="font-bold text-yellow-800 text-sm">Cuenta No Verificada</h4>
                      <p className="text-xs text-yellow-700">Para solicitar préstamos o retirar ganancias, necesitas validar tu identidad. Se te pedirá al realizar tu primera acción importante.</p>
                    </div>
                  </div>
                )}
              </header>

              {/* Stats Grid */}
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <StatCard title="Saldo Disponible" value={`$${balance.toFixed(2)}`} subtext="Listo para retirar" icon={DollarSign} colorClass="bg-green-500" />
                <StatCard title="Misiones Cumplidas" value="12" subtext="+2 hoy" icon={CheckCircle} colorClass="bg-blue-500" />
                <StatCard title="Estado de Préstamo" value="Pre-Aprobado" subtext="Verificar ahora" icon={Shield} colorClass="bg-purple-500" />
              </div>

              {/* Promo Banner */}
              <div className="bg-gradient-to-r from-[#0B1C3C] to-[#1e3a8a] rounded-2xl p-8 text-white relative overflow-hidden shadow-xl">
                <div className="relative z-10 max-w-lg">
                  <h2 className="text-2xl font-bold mb-2">¿Necesitas dinero urgente?</h2>
                  <p className="text-blue-100 mb-6">Nuestra red de financieras tiene nuevas ofertas para ti. Si no calificas, te pagamos por intentarlo.</p>
                  <button onClick={() => handleViewChange('loan')} className="bg-[#39FF14] text-[#0B1C3C] px-6 py-3 rounded-xl font-bold hover:scale-105 transition shadow-lg shadow-green-500/30">
                    Solicitar Préstamo
                  </button>
                </div>
                <CreditCard className="absolute right-0 bottom-0 text-white opacity-5 w-64 h-64 -mr-10 -mb-10" />
              </div>

              {/* Recent Missions */}
              <div>
                <h3 className="text-xl font-bold text-[#0B1C3C] mb-4 flex items-center justify-between">
                  <span>Misiones Recomendadas</span>
                  <button onClick={() => handleViewChange('missions')} className="text-sm text-blue-600 font-bold hover:underline">Ver todas</button>
                </h3>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  {MISSIONS.slice(0, 3).map(m => (
                    <div key={m.id} className="bg-white p-5 rounded-xl border border-gray-100 shadow-sm hover:shadow-md transition cursor-pointer" onClick={() => handleViewChange('missions')}>
                      <div className="flex justify-between items-start mb-2">
                        <span className={`px-2 py-1 rounded text-[10px] font-bold uppercase ${m.type === 'video' ? 'bg-blue-100 text-blue-600' : 'bg-purple-100 text-purple-600'}`}>{m.type}</span>
                        <span className="text-[#39FF14] font-bold">+${userRole === 'elite' ? (m.reward * 1.1).toFixed(2) : m.reward.toFixed(2)}</span>
                      </div>
                      <h4 className="font-bold text-gray-800 mb-1">{m.title}</h4>
                      <p className="text-xs text-gray-500">{m.partner} • {m.duration}</p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

          {/* VIEW: PRÉSTAMOS (Loan Simulator) */}
          {view === 'loan' && (
             <div className="max-w-2xl mx-auto bg-white p-8 rounded-3xl shadow-lg border border-gray-100 animate-slide-up">
               <div className="text-center mb-8">
                 <Shield size={48} className="mx-auto text-[#0B1C3C] mb-4" />
                 <h2 className="text-2xl font-bold text-[#0B1C3C]">Simulador de Préstamo</h2>
                 <p className="text-gray-500">Encuentra la mejor oferta en segundos.</p>
               </div>
               
               <div className="mb-8">
                 <div className="flex justify-between mb-2">
                   <span className="text-gray-700 font-bold">Monto a Solicitar</span>
                   <span className="text-[#0B1C3C] font-bold text-xl">$150.00 USD</span>
                 </div>
                 <input type="range" className="w-full accent-[#39FF14] h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" />
                 <div className="flex justify-between text-xs text-gray-400 mt-2">
                   <span>$50</span>
                   <span>$500</span>
                 </div>
               </div>

               <div className="grid grid-cols-2 gap-4 mb-8">
                  <div className="bg-gray-50 p-4 rounded-xl text-center border border-gray-200">
                    <p className="text-xs text-gray-500">Pago Estimado</p>
                    <p className="font-bold text-[#0B1C3C]">$165.00</p>
                  </div>
                  <div className="bg-gray-50 p-4 rounded-xl text-center border border-gray-200">
                    <p className="text-xs text-gray-500">Plazo</p>
                    <p className="font-bold text-[#0B1C3C]">30 Días</p>
                  </div>
               </div>

               <button 
                 onClick={() => checkVerification(() => alert("¡Solicitud enviada a revisión! Te contactaremos en breve."))}
                 className="w-full bg-[#0B1C3C] text-white py-4 rounded-xl font-bold shadow-xl hover:bg-[#152a55] transition mb-4"
               >
                 SOLICITAR AHORA
               </button>
               <p className="text-xs text-center text-gray-400">
                 Al solicitar, aceptas nuestros términos y condiciones. Tu información será compartida con nuestros aliados financieros.
               </p>
             </div>
          )}

          {/* VIEW: MISIONES */}
          {view === 'missions' && (
            <div>
              <header className="mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                  <h2 className="text-2xl font-bold text-[#0B1C3C]">Tablero de Misiones</h2>
                  <p className="text-gray-500">Completa tareas y aumenta tu saldo al instante.</p>
                </div>
                {userRole === 'free' && (
                  <div className="bg-orange-100 text-orange-700 px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2">
                     <Lock size={16}/> Eres Free: +10% de ganancia bloqueada
                  </div>
                )}
              </header>

              <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                {MISSIONS.map((m, idx) => (
                  <div key={m.id} className={`p-6 flex items-center justify-between hover:bg-gray-50 transition ${idx !== MISSIONS.length - 1 ? 'border-b border-gray-100' : ''}`}>
                    <div className="flex items-center gap-4">
                      <div className={`w-12 h-12 rounded-full flex items-center justify-center ${m.type === 'video' ? 'bg-blue-100 text-blue-600' : 'bg-purple-100 text-purple-600'}`}>
                         {m.type === 'video' ? <Play size={20} fill="currentColor"/> : <Smartphone size={20}/>}
                      </div>
                      <div>
                        <h4 className="font-bold text-gray-800">{m.title}</h4>
                        <div className="flex items-center gap-2 text-xs text-gray-500">
                          <span className="font-bold">{m.partner}</span>
                          <span>•</span>
                          <span>{m.duration}</span>
                        </div>
                      </div>
                    </div>
                    <div className="text-right">
                      <div className="text-lg font-bold text-[#39FF14]">
                        +${userRole === 'elite' ? (m.reward * 1.1).toFixed(2) : m.reward.toFixed(2)}
                      </div>
                      {userRole === 'free' && <div className="text-[10px] text-gray-400 line-through">${(m.reward * 1.1).toFixed(2)}</div>}
                      <button 
                        onClick={() => checkVerification(() => {
                          setBalance(prev => prev + (userRole === 'elite' ? m.reward * 1.1 : m.reward));
                          alert("¡Recompensa acreditada!");
                        })}
                        className="mt-1 bg-[#0B1C3C] text-white text-xs px-3 py-1 rounded hover:bg-blue-900 transition"
                      >
                        Completar
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}

          {/* VIEW: ELITE (SUSCRIPCIÓN) */}
          {view === 'elite' && (
            <div className="relative overflow-hidden bg-[#0B1C3C] rounded-3xl text-white p-8 md:p-16 text-center shadow-2xl">
              <div className="absolute top-0 left-0 w-full h-full bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-10"></div>
              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-[#FFD700] rounded-full filter blur-[150px] opacity-10"></div>
              
              <div className="relative z-10 max-w-2xl mx-auto">
                <Star size={64} className="mx-auto text-[#FFD700] mb-6 drop-shadow-[0_0_15px_rgba(255,215,0,0.5)]" fill="#FFD700"/>
                <h2 className="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-[#FFD700] via-[#FDB931] to-[#B8860B]">
                  MISIÓN ELITE
                </h2>
                <p className="text-xl text-gray-300 mb-10">Desbloquea el máximo potencial de tus ingresos.</p>

                <div className="grid md:grid-cols-2 gap-6 mb-10 text-left">
                  <div className="bg-white/5 p-6 rounded-2xl border border-[#FFD700]/30 backdrop-blur-sm">
                    <h3 className="text-[#FFD700] font-bold text-lg mb-2 flex items-center gap-2"><Zap size={18}/> Turbo Ganancias</h3>
                    <p className="text-sm text-gray-300">Gana un 10% extra permanente en todas las misiones que completes.</p>
                  </div>
                  <div className="bg-white/5 p-6 rounded-2xl border border-[#FFD700]/30 backdrop-blur-sm">
                    <h3 className="text-[#FFD700] font-bold text-lg mb-2 flex items-center gap-2"><Shield size={18}/> Cero Publicidad</h3>
                    <p className="text-sm text-gray-300">Elimina los anuncios obligatorios y navega sin interrupciones.</p>
                  </div>
                </div>

                <div className="bg-gradient-to-r from-[#FFD700] to-[#B8860B] text-[#0B1C3C] p-1 rounded-2xl inline-block w-full max-w-md">
                   <div className="bg-[#0B1C3C] rounded-xl p-6 relative overflow-hidden">
                     <div className="absolute top-0 right-0 bg-[#FFD700] text-black text-xs font-bold px-3 py-1 rounded-bl-lg">POPULAR</div>
                     <p className="text-gray-400 text-sm">Suscripción Mensual</p>
                     <div className="text-4xl font-bold text-white mb-4">$1.50 <span className="text-lg text-gray-500 font-normal">/mes</span></div>
                     
                     {userRole === 'elite' ? (
                       <button disabled className="w-full bg-gray-600 text-gray-300 py-3 rounded-lg font-bold cursor-not-allowed">
                         PLAN ACTIVO
                       </button>
                     ) : (
                       <button onClick={() => { setUserRole('elite'); setBalance(prev => prev - 1.50); alert("¡Bienvenido al Nivel Elite!"); }} className="w-full bg-[#39FF14] hover:bg-[#32d612] text-[#0B1C3C] py-3 rounded-lg font-bold transition">
                         ACTIVAR AHORA
                       </button>
                     )}
                     <p className="text-xs text-gray-500 mt-3">Se descuenta automáticamente de tu saldo.</p>
                   </div>
                </div>
              </div>
            </div>
          )}

           {/* VIEW: BUSINESS DASHBOARD (B2B) */}
           {isBusiness && view === 'dashboard' && (
             <div className="animate-fade-in">
               <h1 className="text-3xl font-bold text-[#0B1C3C] mb-8">Panel de Negocio</h1>
               <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
                 <StatCard title="Saldo Publicidad" value="$500.00" icon={CreditCard} colorClass="bg-blue-500" />
                 <StatCard title="Cupones Canjeados" value="45" icon={Gift} colorClass="bg-purple-500" />
                 <StatCard title="Visitas al Perfil" value="1,203" icon={User} colorClass="bg-orange-500" />
                 <StatCard title="ROI Estimado" value="+320%" icon={BarChart3} colorClass="bg-green-500" />
               </div>

               <div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                 <div className="flex justify-between items-center mb-6">
                   <h3 className="text-xl font-bold text-[#0B1C3C]">Campañas Activas</h3>
                   <button className="bg-[#0B1C3C] text-white px-4 py-2 rounded-lg text-sm font-bold flex items-center gap-2 hover:bg-[#152a55]">
                     <PlusCircle size={16}/> Nueva Campaña
                   </button>
                 </div>
                 <table className="w-full text-left">
                   <thead>
                     <tr className="text-gray-400 text-sm border-b border-gray-100">
                       <th className="pb-3 font-medium">Nombre</th>
                       <th className="pb-3 font-medium">Tipo</th>
                       <th className="pb-3 font-medium">Progreso</th>
                       <th className="pb-3 font-medium">Estado</th>
                     </tr>
                   </thead>
                   <tbody className="text-sm">
                     <tr className="border-b border-gray-50 hover:bg-gray-50">
                       <td className="py-4 font-bold text-gray-800">Promo Verano 2x1</td>
                       <td className="py-4 text-gray-500">Cupón QR</td>
                       <td className="py-4">
                         <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                           <div className="h-full bg-green-500 w-[60%]"></div>
                         </div>
                       </td>
                       <td className="py-4"><span className="bg-green-100 text-green-700 px-2 py-1 rounded text-xs font-bold">Activa</span></td>
                     </tr>
                     <tr className="hover:bg-gray-50">
                       <td className="py-4 font-bold text-gray-800">Seguidores Instagram</td>
                       <td className="py-4 text-gray-500">Social Task</td>
                       <td className="py-4">
                         <div className="w-24 h-2 bg-gray-200 rounded-full overflow-hidden">
                           <div className="h-full bg-blue-500 w-[30%]"></div>
                         </div>
                       </td>
                       <td className="py-4"><span className="bg-blue-100 text-blue-700 px-2 py-1 rounded text-xs font-bold">Pausada</span></td>
                     </tr>
                   </tbody>
                 </table>
               </div>
             </div>
           )}

        </div>
      </main>

      {/* 3. MOBILE BOTTOM NAV (Solo visible en pantallas pequeñas y usuarios NO negocio) */}
      {!isBusiness && (
        <nav className="md:hidden fixed bottom-0 w-full bg-white border-t border-gray-200 flex justify-around py-3 z-20 shadow-[0_-5px_15px_rgba(0,0,0,0.05)]">
          <button onClick={() => handleViewChange('dashboard')} className={`flex flex-col items-center ${view === 'dashboard' ? 'text-[#0B1C3C]' : 'text-gray-400'}`}>
            <LayoutDashboard size={24} />
          </button>
          <button onClick={() => handleViewChange('missions')} className={`flex flex-col items-center ${view === 'missions' ? 'text-[#0B1C3C]' : 'text-gray-400'}`}>
            <Zap size={24} />
          </button>
           <button onClick={() => handleViewChange('loan')} className="flex flex-col items-center -mt-8 bg-[#39FF14] p-4 rounded-full shadow-lg border-4 border-gray-50 text-[#0B1C3C]">
            <CreditCard size={24} />
          </button>
          <button onClick={() => handleViewChange('coupons')} className={`flex flex-col items-center ${view === 'coupons' ? 'text-[#0B1C3C]' : 'text-gray-400'}`}>
            <Gift size={24} />
          </button>
          <button onClick={() => handleViewChange('elite')} className={`flex flex-col items-center ${view === 'elite' ? 'text-[#B8860B]' : 'text-gray-400'}`}>
            <Star size={24} fill={view === 'elite' ? "#B8860B" : "none"} />
          </button>
        </nav>
      )}

      {/* AD INTERSTITIAL SIMULATION */}
      {showAd && (
        <div className="fixed inset-0 z-50 bg-[#0B1C3C] flex flex-col items-center justify-center animate-in fade-in duration-300">
           <div className="text-white text-center p-8 max-w-md">
             <div className="w-full aspect-video bg-black mb-4 rounded-xl flex items-center justify-center relative overflow-hidden">
               <span className="text-gray-500 font-bold">VIDEO PUBLICITARIO</span>
               <div className="absolute bottom-0 left-0 h-1 bg-[#39FF14] w-full animate-pulse"></div>
             </div>
             <h2 className="text-2xl font-bold mb-2">Juego de Guerra</h2>
             <p className="text-gray-400 mb-6">El mejor juego de estrategia del año.</p>
             <button className="w-full bg-[#39FF14] text-[#0B1C3C] py-3 rounded-xl font-bold mb-4">
               INSTALAR AHORA
             </button>
             <p className="text-xs text-gray-500">El anuncio cerrará en 3 segundos...</p>
             <div className="mt-8 border-t border-white/10 pt-4">
               <p className="text-sm mb-2">¿Odias esperar?</p>
               <button onClick={() => { setShowAd(false); handleViewChange('elite'); }} className="text-[#FFD700] font-bold underline">Hazte Elite por $1.50</button>
             </div>
           </div>
        </div>
      )}

      {/* MODAL DE VALIDACIÓN DE CUENTA (KYC) */}
      {showVerificationModal && (
        <div className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4 backdrop-blur-sm animate-in fade-in zoom-in duration-200">
           <div className="bg-white w-full max-w-lg rounded-2xl shadow-2xl overflow-hidden max-h-[90vh] overflow-y-auto">
             <div className="bg-[#0B1C3C] p-6 text-white text-center relative">
               <button onClick={() => setShowVerificationModal(false)} className="absolute top-4 right-4 text-white/70 hover:text-white"><X size={24}/></button>
               <Shield size={48} className="mx-auto text-[#39FF14] mb-3"/>
               <h2 className="text-2xl font-bold">Validación de Identidad</h2>
               <p className="text-blue-200 text-sm mt-1">Requerido para préstamos y retiros (KYC).</p>
             </div>
             
             <div className="p-6 md:p-8">
               <form onSubmit={handleVerificationSubmit} className="space-y-4">
                 <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-bold text-gray-600 mb-1">Nombres</label>
                      <input required type="text" className="w-full p-3 bg-gray-50 rounded-lg border focus:ring-[#39FF14] focus:border-[#39FF14] outline-none transition" placeholder="Tus nombres"/>
                    </div>
                    <div>
                      <label className="block text-xs font-bold text-gray-600 mb-1">Apellidos</label>
                      <input required type="text" className="w-full p-3 bg-gray-50 rounded-lg border focus:ring-[#39FF14] focus:border-[#39FF14] outline-none transition" placeholder="Tus apellidos"/>
                    </div>
                 </div>

                 <div>
                    <label className="block text-xs font-bold text-gray-600 mb-1">Cédula / DNI</label>
                    <div className="relative">
                      <CreditCard className="absolute left-3 top-3.5 text-gray-400" size={18}/>
                      <input required type="text" className="w-full p-3 pl-10 bg-gray-50 rounded-lg border focus:ring-[#39FF14] focus:border-[#39FF14] outline-none transition" placeholder="Número de Identidad"/>
                    </div>
                 </div>

                 <div>
                    <label className="block text-xs font-bold text-gray-600 mb-1">Celular (Validación SMS)</label>
                    <div className="relative">
                      <Phone className="absolute left-3 top-3.5 text-gray-400" size={18}/>
                      <input required type="tel" className="w-full p-3 pl-10 bg-gray-50 rounded-lg border focus:ring-[#39FF14] focus:border-[#39FF14] outline-none transition" placeholder="+593 99 999 9999"/>
                    </div>
                 </div>

                 <div>
                    <label className="block text-xs font-bold text-gray-600 mb-1">Dirección Domiciliaria</label>
                    <div className="relative">
                      <MapPin className="absolute left-3 top-3.5 text-gray-400" size={18}/>
                      <input required type="text" className="w-full p-3 pl-10 bg-gray-50 rounded-lg border focus:ring-[#39FF14] focus:border-[#39FF14] outline-none transition" placeholder="Ciudad, Calle Principal y Secundaria"/>
                    </div>
                 </div>

                 <div className="pt-4 border-t border-gray-100">
                    <label className="flex items-start gap-3 cursor-pointer group">
                      <input required type="checkbox" className="mt-1 w-5 h-5 accent-[#0B1C3C] cursor-pointer"/>
                      <span className="text-xs text-gray-500 leading-snug">
                        Declaro que la información es real y acepto los <span className="text-[#0B1C3C] font-bold hover:underline">Términos y Condiciones</span>, así como la <span className="text-[#0B1C3C] font-bold hover:underline">Política de Tratamiento de Datos</span> para fines financieros.
                      </span>
                    </label>
                 </div>

                 <button type="submit" className="w-full bg-[#39FF14] text-[#0B1C3C] py-4 rounded-xl font-bold text-lg shadow-lg hover:bg-green-400 transition transform active:scale-95 mt-4">
                   VALIDAR Y CONTINUAR
                 </button>
               </form>
             </div>
           </div>
        </div>
      )}

    </div>
  );
}