window.LoginAdmin = ({ isOpen, onClose, onLoginSuccess, theme }) => {
    const [user, setUser] = React.useState('');
    const [pass, setPass] = React.useState('');
    const [error, setError] = React.useState(false);

    if (!isOpen) return null;

    const handleSubmit = (e) => {
        e.preventDefault();
        // Tus credenciales maestras secretas
        if (user === 'AdminOrbity' && pass === 'AlphaCreative99X') {
            onLoginSuccess();
            onClose();
        } else {
            setError(true);
            setTimeout(() => setError(false), 2000);
        }
    };

    return (
        <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/90 backdrop-blur-sm animate-fade-in">
            <div className={`w-full max-w-md p-8 rounded-3xl border shadow-2xl animate-slide-up ${theme === 'dark' ? 'bg-[#16181d] border-white/10' : 'bg-white border-slate-200'}`}>
                <div className="flex justify-between items-center mb-8 text-inherit">
                    {/* Título Discreto - Sin la palabra Admin */}
                    <h3 className="text-xl font-black uppercase tracking-tighter">Acceso Cuenta Pro</h3>
                    <button onClick={onClose} className="opacity-50 hover:opacity-100 transition-opacity">✕</button>
                </div>
                
                <form onSubmit={handleSubmit} className="space-y-6 text-inherit">
                    <div>
                        <label className="text-[10px] font-black uppercase opacity-50 block mb-2 tracking-widest">Credencial de Usuario</label>
                        <input 
                            type="text" 
                            className={`w-full bg-transparent border rounded-xl px-4 py-3 outline-none transition-colors ${theme === 'dark' ? 'border-white/10 focus:border-white/30' : 'border-slate-300 focus:border-slate-500'}`}
                            value={user}
                            onChange={(e) => setUser(e.target.value)}
                        />
                    </div>
                    <div>
                        <label className="text-[10px] font-black uppercase opacity-50 block mb-2 tracking-widest">Clave de Acceso</label>
                        <input 
                            type="password" 
                            className={`w-full bg-transparent border rounded-xl px-4 py-3 outline-none transition-colors ${theme === 'dark' ? 'border-white/10 focus:border-white/30' : 'border-slate-300 focus:border-slate-500'}`}
                            value={pass}
                            onChange={(e) => setPass(e.target.value)}
                        />
                    </div>
                    
                    {error && <p className="text-red-500 text-[10px] font-bold uppercase animate-pulse text-center tracking-widest">Credenciales no autorizadas</p>}
                    
                    {/* Botón de login en Blanco/Negro para coincidir con la UI superior */}
                    <button type="submit" className={`w-full py-4 font-black rounded-2xl uppercase tracking-widest text-xs shadow-lg transition-transform active:scale-95 ${theme === 'dark' ? 'bg-white text-black hover:bg-gray-200' : 'bg-black text-white hover:bg-gray-800'}`}>
                        Iniciar Sesión Segura
                    </button>
                </form>
            </div>
        </div>
    );
};