<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Masuk Akun | BERKAH.TRF</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; }
        .auth-card { border-radius: 2rem; }
    </style>
    <x-pwa />
</head>
<body class="bg-[#F8FAFC] min-h-screen flex items-center justify-center p-6">
    <x-loading />

    <div class="max-w-[400px] w-full">
        <div class="text-center mb-8">
            <h1 class="text-3xl font-black italic tracking-tighter text-blue-600 mb-1">BERKAH.TRF</h1>
            <p class="text-gray-400 text-sm font-medium uppercase tracking-[0.2em]">Thrift Store Indonesia</p>
        </div>

        <div class="bg-white p-10 auth-card shadow-xl shadow-blue-100/50 border border-white relative overflow-hidden">
            {{-- Hiasan Background --}}
            <div class="absolute top-0 right-0 w-32 h-32 bg-blue-50 rounded-full -mr-16 -mt-16 z-0"></div>

            <div class="relative z-10">
                <div class="mb-8">
                    {{-- UBAH DISINI: Teks jadi lebih umum --}}
                    <h2 class="text-2xl font-extrabold text-gray-800">Selamat Datang</h2>
                    <p class="text-gray-500 text-sm mt-1">Masuk untuk melanjutkan belanja atau kelola toko.</p>
                </div>

                @if ($errors->any())
                    <div class="bg-red-50 border border-red-100 text-red-600 p-4 rounded-2xl mb-6 flex items-start gap-3 animate-pulse">
                        <i class="fas fa-exclamation-circle mt-1"></i>
                        <span class="text-xs font-bold leading-relaxed">{{ $errors->first() }}</span>
                    </div>
                @endif
                
                @if (session('success'))
                    <div class="bg-green-50 border border-green-100 text-green-600 p-4 rounded-2xl mb-6 flex items-start gap-3">
                        <i class="fas fa-check-circle mt-1"></i>
                        <span class="text-xs font-bold leading-relaxed">{{ session('success') }}</span>
                    </div>
                @endif

                <form action="{{ route('login.post') }}" method="POST" class="space-y-5">
                    @csrf
                    <div>
                        <label class="block text-[11px] font-black uppercase tracking-widest text-gray-400 mb-2 ml-1">Email Address</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                                <i class="far fa-envelope"></i>
                            </span>
                            <input type="email" name="email" value="{{ old('email') }}"
                                   class="w-full pl-11 pr-4 py-3.5 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none text-sm font-medium" 
                                   placeholder="nama@email.com" required>
                        </div>
                    </div>

                    <div>
                        <label class="block text-[11px] font-black uppercase tracking-widest text-gray-400 mb-2 ml-1">Password</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-gray-400">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input type="password" name="password" 
                                   class="w-full pl-11 pr-4 py-3.5 bg-gray-50 border border-gray-100 rounded-2xl focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all outline-none text-sm font-medium" 
                                   placeholder="Password" required>
                        </div>
                    </div>

                    <button type="submit" 
                            class="w-full bg-blue-600 text-white font-bold py-4 rounded-2xl shadow-lg shadow-blue-200 hover:bg-blue-700 active:scale-[0.98] transition-all flex items-center justify-center gap-2 group">
                        <span>MASUK SEKARANG</span>
                        <i class="fas fa-arrow-right text-sm group-hover:translate-x-1 transition-transform"></i>
                    </button>
                </form>

                {{-- TAMBAHAN: Link untuk Register User Baru --}}
                <div class="mt-8 pt-6 border-t border-dashed border-gray-100 text-center">
                    <p class="text-gray-500 text-sm mb-3">Belum punya akun?</p>
                    <a href="{{ route('register') }}" class="inline-block text-blue-600 font-bold text-sm hover:underline hover:text-blue-700 transition">
                        Daftar Member Baru
                    </a>
                </div>

                <div class="mt-6 text-center">
                    <a href="/" class="text-gray-400 text-xs font-bold hover:text-blue-600 transition flex items-center justify-center gap-2">
                        <i class="fas fa-store"></i> KEMBALI KE BERANDA
                    </a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>