<div class="max-w-md w-full bg-slate-900/90 backdrop-blur border border-slate-800 rounded-3xl p-8 shadow-2xl">
    <div class="text-center mb-8">
        <div class="w-16 h-16 rounded-2xl bg-gradient-to-tr from-emerald-600 to-emerald-400 mx-auto flex items-center justify-center text-white text-3xl shadow-xl shadow-emerald-500/20 mb-4">
            <i class="fa-brands fa-whatsapp"></i>
        </div>
        <h1 class="text-2xl font-bold text-white tracking-tight">WhatsApp CRM</h1>
        <p class="text-slate-400 text-sm mt-1">Multi-Agent WhatsApp Sales & Support Platform</p>
    </div>

    <?php if (isset($_GET['error'])): ?>
        <div class="bg-red-500/10 border border-red-500/30 text-red-300 px-4 py-3 rounded-xl text-sm mb-6 flex items-center space-x-2">
            <i class="fa-solid fa-circle-exclamation"></i>
            <span>
                <?php
                $err = $_GET['error'];
                if ($err === 'invalid_credentials') echo 'Invalid email or password.';
                elseif ($err === 'empty_fields') echo 'Please fill in both email and password.';
                elseif ($err === 'account_disabled') echo 'Your account is disabled.';
                else echo 'Authentication error occurred.';
                ?>
            </span>
        </div>
    <?php endif; ?>

    <form method="POST" action="/login" class="space-y-4">
        <div>
            <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">Email Address</label>
            <div class="relative">
                <i class="fa-solid fa-envelope absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                <input type="email" name="email" id="login_email" value="admin@crm.local" required
                       class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition">
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold text-slate-300 uppercase tracking-wider mb-2">Password</label>
            <div class="relative">
                <i class="fa-solid fa-lock absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500 text-sm"></i>
                <input type="password" name="password" id="login_password" value="password123" required
                       class="w-full bg-slate-950 border border-slate-800 rounded-xl pl-10 pr-4 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 transition">
            </div>
        </div>

        <button type="submit" class="w-full bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-3.5 px-4 rounded-xl shadow-lg shadow-emerald-500/25 transition cursor-pointer flex items-center justify-center space-x-2">
            <span>Sign In to CRM</span>
            <i class="fa-solid fa-arrow-right text-sm"></i>
        </button>
    </form>

    <div class="mt-8 pt-6 border-t border-slate-800/80 text-center">
        <p class="text-xs text-slate-400 mb-3">⚡ Quick Demo Login Presets:</p>
        <div class="grid grid-cols-2 gap-2">
            <button onclick="fillDemo('admin@crm.local', 'password123')" type="button" class="bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs py-2 px-3 rounded-lg transition border border-slate-700">
                👑 Admin Login
            </button>
            <button onclick="fillDemo('sarah@crm.local', 'password123')" type="button" class="bg-slate-800 hover:bg-slate-700 text-slate-300 text-xs py-2 px-3 rounded-lg transition border border-slate-700">
                👩‍💼 Agent Login
            </button>
        </div>
    </div>
</div>

<script>
function fillDemo(email, pass) {
    document.getElementById('login_email').value = email;
    document.getElementById('login_password').value = pass;
}
</script>
