<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>

    <style>
        body { 
            font-family: 'Plus Jakarta Sans', sans-serif; 
            background: #fff5f7;
            height: 100vh; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
        }

        .card {
            background: #ffffff;
            box-shadow: 0 20px 40px rgba(255, 182, 193, 0.2);
            border-radius: 40px;
        }
    </style>
</head>

<body>

<div class="card p-10 w-full max-w-md mx-4">
    <div class="text-center mb-8">
        <h2 class="text-3xl font-extrabold tracking-tighter text-slate-800 italic">
            Login<span class="text-pink-500"></span>
        </h2>
        <p class="text-slate-500 text-sm font-medium mt-2">
            Welcome back, Gorgeous! ♥
        </p>
    </div>

    @if ($errors->any())
        <div class="mb-4 p-3 bg-red-50 border border-red-100 text-red-500 text-xs rounded-2xl font-semibold">
            Email atau password salah, Dear.
        </div>
    @endif

    <form method="POST" action="{{ route('login') }}" class="space-y-5" autocomplete="off">
        @csrf

        <div class="space-y-2">
            <label class="text-[10px] font-black tracking-widest uppercase text-pink-400 ml-4">
                Email Address
            </label>
            <input 
                type="email" 
                name="email" 
                class="w-full px-6 py-4 rounded-full border border-pink-100 focus:ring-2 focus:ring-pink-300 outline-none shadow-sm text-sm"
                placeholder="pretty@email.com"
                autocomplete="off"
                required
            >
        </div>

        <div class="space-y-2">
            <label class="text-[10px] font-black tracking-widest uppercase text-pink-400 ml-4">
                Password
            </label>
            <input 
                type="password" 
                name="password" 
                class="w-full px-6 py-4 rounded-full border border-pink-100 focus:ring-2 focus:ring-pink-300 outline-none shadow-sm text-sm"
                placeholder="••••••••"
                autocomplete="new-password"
                required
            >
        </div>

        <button type="submit" 
            class="w-full py-4 bg-gradient-to-r from-pink-500 to-rose-400 text-white rounded-full font-bold text-sm shadow-lg hover:scale-[1.02] transition transform active:scale-95">
            LOGIN NOW
        </button>
    </form>

    <div class="mt-8 text-center text-sm text-slate-400 font-medium">
        Belum punya akun? 
        <a href="{{ route('register') }}" class="text-pink-500 font-bold hover:underline">
            Register
        </a>
    </div>
</div>

</body>
</html>