<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lupa Password - Perpustakaan Digital</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { font-family: 'Poppins', sans-serif; background-color: #f3f4f6; }
        @keyframes float-icon {
            0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.1; }
            50% { transform: translateY(-10px) rotate(5deg); opacity: 0.2; }
        }
        .bg-icon { animation: float-icon 5s ease-in-out infinite; }
    </style>
</head>

<body class="min-h-screen flex items-center justify-center p-4">

    <div class="w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden flex flex-col md:flex-row relative">

        <div class="w-full md:w-1/2 p-8 flex flex-col justify-between relative z-10 order-2 md:order-1">
            <div class="flex items-center gap-2 mb-4">
                <div class="w-8 h-8 bg-blue-600 rounded flex items-center justify-center text-white font-bold text-sm">P</div>
                <span class="font-bold text-gray-800 text-lg">Perpustakaan</span>
            </div>

            <div class="py-4">
                <h2 class="text-2xl font-bold text-gray-800 mb-2">Lupa Password?</h2>
                <p class="text-sm text-gray-500 leading-relaxed">
                    Jangan khawatir. Cukup masukkan alamat email Anda dan kami akan mengirimkan tautan untuk mereset kata sandi Anda.
                </p>
            </div>

            <a href="{{ route('login') }}" class="flex items-center text-xs text-gray-500 hover:text-blue-600 transition mt-4">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
                Kembali ke Login
            </a>
        </div>

        <div class="w-full md:w-1/2 bg-gradient-to-br from-blue-700 to-blue-900 relative p-8 flex flex-col justify-center order-1 md:order-2">

            <div class="absolute top-0 bottom-0 -left-1 hidden md:block w-12 h-full">
                 <svg class="h-full w-full text-white fill-current" viewBox="0 0 100 100" preserveAspectRatio="none">
                    <path d="M0 0 L0 100 Q 100 50 0 0 Z"></path>
                </svg>
            </div>

            <div class="absolute inset-0 overflow-hidden pointer-events-none">
                <svg class="bg-icon absolute top-8 right-8 w-16 h-16 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3 3.1-3 1.71 0 3.1 1.29 3.1 3v2z"/></svg>
            </div>

            <div class="relative z-10">
                <h3 class="text-xl font-bold text-white text-center mb-6">Reset Password</h3>

                @if (session('status'))
                    <div class="mb-4 bg-green-500/20 border border-green-500/50 text-white text-xs p-2.5 rounded-lg text-center backdrop-blur-sm">
                        {{ session('status') }}
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mb-4 bg-red-500/20 border border-red-500/50 text-white text-xs p-2.5 rounded-lg text-center backdrop-blur-sm">
                        {{ $errors->first() }}
                    </div>
                @endif

                <form method="POST" action="{{ route('password.email') }}" class="space-y-4">
                    @csrf

                    <div class="relative group">
                        <input type="email" name="email" required placeholder="Masukkan Email Terdaftar"
                               class="w-full px-4 py-3 text-sm bg-white/10 border border-white/20 rounded-lg text-white placeholder-blue-100/60 focus:outline-none focus:bg-white/20 focus:border-white transition backdrop-blur-sm shadow-sm">
                    </div>

                    <button type="submit"
                            class="w-full py-3 bg-emerald-500 hover:bg-emerald-400 text-white font-semibold rounded-lg shadow-lg transform active:scale-95 transition-all duration-200 text-sm tracking-wide mt-2">
                        KIRIM LINK RESET
                    </button>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
