<h2 class="text-2xl font-bold text-gray-900 mb-1">Welcome back</h2>
<p class="text-sm text-gray-500 mb-8">Sign in to your account to continue</p>

<form method="POST" action="?page=login" class="space-y-5">
    <?= CSRF::field() ?>

    <div>
        <label class="block text-sm font-medium text-gray-700 mb-1.5">Email address</label>
        <input type="email" name="email" value="<?= e(old('email')) ?>" required autofocus
            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition"
            placeholder="you@company.com">
    </div>

    <div>
        <div class="flex items-center justify-between mb-1.5">
            <label class="block text-sm font-medium text-gray-700">Password</label>
            <a href="?page=forgot-password" class="text-xs text-blue-600 hover:text-blue-700">Forgot password?</a>
        </div>
        <input type="password" name="password" required
            class="w-full px-4 py-2.5 text-sm border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-400 transition"
            placeholder="••••••••">
    </div>

    <div class="flex items-center gap-2">
        <input type="checkbox" name="remember" id="remember" class="w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
        <label for="remember" class="text-sm text-gray-600">Remember me for 30 days</label>
    </div>

    <button type="submit"
        class="w-full py-2.5 px-4 text-sm font-semibold text-white bg-slate-900 rounded-xl hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-slate-900 transition">
        Sign in
    </button>
</form>
