<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 bottom-0 right-0 w-[500px] h-[500px] bg-indigo-500/10 rounded-full blur-[120px]"></div>
        </div>

        <div class="w-full max-w-lg relative z-10">
            <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-12 shadow-2xl">

                <div class="mb-10 text-center">
                    <div class="inline-flex items-center justify-center w-14 h-14 bg-violet-500/10 text-violet-500 rounded-2xl mb-4">
                        <i class="fas fa-user-plus text-2xl"></i>
                    </div>
                    <h2 class="text-3xl font-black dark:text-white uppercase tracking-tight">Registrasi</h2>
                    <p class="text-slate-500 dark:text-slate-400 text-sm mt-2">Daftarkan akun SIMA Anda</p>
                </div>

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

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 mb-2 ml-1">Nama Lengkap</label>
                        <input type="text" name="name" value="{{ old('name') }}" required
                            class="w-full px-5 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"
                            placeholder="Contoh: Rama">
                        <x-input-error :messages="$errors->get('name')" class="mt-2" />
                    </div>

                    <div>
                        <label class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 mb-2 ml-1">Email</label>
                        <input type="email" name="email" value="{{ old('email') }}" required
                            class="w-full px-5 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"
                            placeholder="nama@gmail.com">
                        <x-input-error :messages="$errors->get('email')" class="mt-2" />
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 mb-2 ml-1">Password</label>
                            <input type="password" name="password" required
                                class="w-full px-5 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"
                                placeholder="••••••••">
                        </div>

                        <div>
                            <label class="block text-[10px] font-bold uppercase tracking-[0.2em] text-slate-400 mb-2 ml-1">Konfirmasi</label>
                            <input type="password" name="password_confirmation" required
                                class="w-full px-5 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"
                                placeholder="••••••••">
                        </div>
                    </div>
                    <x-input-error :messages="$errors->get('password')" class="mt-2" />

                    <div class="pt-4">
                        <button type="submit" class="w-full py-4 violet-gradient text-white rounded-2xl font-black shadow-xl shadow-violet-500/25 hover:scale-[1.02] active:scale-95 transition-all">
                            Buat Akun Sekarang
                        </button>
                    </div>
                </form>

                <div class="mt-10 text-center">
                    <p class="text-sm text-slate-500">
                        Sudah punya akun?
                        <a href="{{ route('login') }}" class="font-bold text-violet-600 hover:text-indigo-500">Login di sini</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</x-guest-layout>
