<x-guest-layout>
    <div class="min-h-screen flex items-center justify-center p-6 relative">
        <div class="absolute top-0 left-0 w-full h-full pointer-events-none">
            <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-violet-500/10 rounded-full blur-[120px]"></div>
        </div>

        <div class="w-full max-w-md relative z-10">
            <div class="flex items-center justify-center gap-3 mb-8">
                <div class="w-10 h-10 violet-gradient rounded-xl flex items-center justify-center shadow-lg shadow-violet-500/30">
                    <span class="text-white font-bold text-xl">S</span>
                </div>
                <span class="text-2xl font-black tracking-tighter dark:text-white uppercase">SIMA</span>
            </div>

            <div class="bg-white/70 dark:bg-[#161625]/70 backdrop-blur-xl border border-white dark:border-white/10 rounded-[2.5rem] p-8 md:p-10 shadow-2xl">
                <div class="text-center mb-10">
                    <h2 class="text-2xl font-extrabold dark:text-white">Selamat Datang</h2>
                    <p class="text-slate-500 dark:text-slate-400 text-sm mt-2">Silakan masuk untuk melanjutkan</p>
                </div>

                <x-auth-session-status class="mb-4" :status="session('status')" />

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

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 mb-2 ml-1">Email Address</label>
                        <div class="relative group">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-violet-500 transition-colors">
                                <i class="fas fa-envelope"></i>
                            </span>
                            <input type="email" name="email" value="{{ old('email') }}" required autofocus
                                class="w-full pl-12 pr-4 py-4 bg-slate-100 dark:bg-white/5 border-none rounded-2xl focus:ring-2 focus:ring-violet-500 outline-none transition-all dark:text-white text-sm"
                                placeholder="rama@email.com">
                        </div>
                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 mb-2 ml-1">Password</label>
                        <div class="relative group" x-data="{ show: false }">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-violet-500 transition-colors">
                                <i class="fas fa-lock"></i>
                            </span>
                            <input :type="show ? 'text' : 'password'" name="password" required
                                class="w-full pl-12 pr-12 py-4 bg-slate-100 dark:bg-white/5 border-none rounded-2xl focus:ring-2 focus:ring-violet-500 outline-none transition-all dark:text-white text-sm"
                                placeholder="••••••••">
                            <button type="button" @click="show = !show" class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-violet-500 transition-colors">
                                <i class="fas" :class="show ? 'fa-eye-slash' : 'fa-eye'"></i>
                            </button>
                        </div>
                        <x-input-error :messages="$errors->get('password')" class="mt-2" />
                    </div>

                    <div class="flex items-center justify-between pt-2">
                        <label class="flex items-center gap-2 cursor-pointer group">
                            <input type="checkbox" name="remember" class="w-4 h-4 rounded border-slate-300 dark:border-white/10 text-violet-600 focus:ring-violet-500 bg-transparent">
                            <span class="text-xs text-slate-500 group-hover:text-violet-500 transition-colors">Ingat saya</span>
                        </label>
                        @if (Route::has('password.request'))
                            <a href="{{ route('password.request') }}" class="text-xs font-bold text-violet-600 hover:text-indigo-500">Lupa password?</a>
                        @endif
                    </div>

                    <button type="submit" class="w-full py-4 violet-gradient text-white rounded-2xl font-bold shadow-xl shadow-violet-500/30 hover:scale-[1.02] active:scale-95 transition-all flex items-center justify-center gap-3">
                        Masuk Ke Akun
                        <i class="fas fa-arrow-right text-xs"></i>
                    </button>
                </form>

                {{-- <div class="mt-10 pt-6 border-t border-slate-200 dark:border-white/5 text-center">
                    <p class="text-sm text-slate-500">
                        Belum punya akun?
                        <a href="{{ route('register') }}" class="font-bold text-violet-600 hover:underline underline-offset-4">Daftar sekarang</a>
                    </p>
                </div> --}}
            </div>
        </div>
    </div>
</x-guest-layout>
