<x-guest-layout>
    <!-- Phase 15: Premium Dark Registration (Elite Minimalist) -->
    <div class="space-y-12 py-4">
        <!-- Brand & Hero -->
        <div class="text-center space-y-6">
            <div class="inline-flex items-center gap-2 px-3 py-1 bg-white/5 rounded-full border border-white/10 shadow-sm">
                <span class="w-1.5 h-1.5 bg-indigo-500 rounded-full animate-pulse"></span>
                <span class="text-[9px] font-black text-slate-500 uppercase tracking-[0.2em] italic">Join the Ecosystem v2.5</span>
            </div>
            
            <div class="space-y-2">
                <h2 class="text-4xl font-display font-black text-white tracking-tighter uppercase italic leading-tight text-balance">
                    Daftarkan Akun<br>
                    Baru <span class="text-indigo-500">Sekarang</span>
                </h2>
                <p class="text-[13px] font-medium text-slate-500 tracking-tight max-w-[280px] mx-auto opacity-70">
                    Mulailah perjalanan operasional Anda bersama Leasing Pro.
                </p>
            </div>
        </div>

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

            <!-- Unified Dark Input Stack -->
            <div class="grid grid-cols-1 gap-8">
                <!-- Name -->
                <div class="space-y-2.5">
                    <x-input-label for="name" value="Nama Lengkap" class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 px-1 italic" />
                    <input id="name" type="text" name="name" :value="old('name')" required autofocus 
                        class="block w-full px-7 py-5 bg-white/5 border border-white/10 rounded-3xl text-sm font-bold text-white placeholder:text-slate-700 focus:border-indigo-500 focus:ring-0 focus:bg-white/10 transition-all duration-500 shadow-sm" 
                        placeholder="Nama Lengkap Anda" />
                    <x-input-error :messages="$errors->get('name')" class="mt-2 px-1 text-[10px] font-bold text-rose-400 italic uppercase" />
                </div>

                <!-- Role Selection -->
                <div class="space-y-2.5">
                    <x-input-label for="role" value="Daftar Sebagai" class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 px-1 italic" />
                    <div class="relative">
                        <select id="role" name="role" class="block w-full px-7 py-5 bg-white/5 border border-white/10 rounded-3xl text-sm font-bold text-white appearance-none focus:border-indigo-500 focus:ring-0 focus:bg-white/10 transition-all duration-500 shadow-sm">
                            <option value="member" class="bg-slate-900">Member (Pencarian Data)</option>
                            <option value="leasing" class="bg-slate-900">Leasing (Pengelola Data)</option>
                        </select>
                        <div class="absolute inset-y-0 right-7 flex items-center pointer-events-none text-slate-500">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M19 9l-7 7-7-7"></path></svg>
                        </div>
                    </div>
                </div>

                <!-- Email Address -->
                <div class="space-y-2.5">
                    <x-input-label for="email" value="Alamat Email" class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 px-1 italic" />
                    <input id="email" type="email" name="email" :value="old('email')" required
                        class="block w-full px-7 py-5 bg-white/5 border border-white/10 rounded-3xl text-sm font-bold text-white placeholder:text-slate-700 focus:border-indigo-500 focus:ring-0 focus:bg-white/10 transition-all duration-500 shadow-sm" 
                        placeholder="email@perusahaan.com" />
                    <x-input-error :messages="$errors->get('email')" class="mt-2 px-1 text-[10px] font-bold text-rose-400 italic uppercase" />
                </div>

                <!-- Password Group -->
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
                    <!-- Password -->
                    <div class="space-y-2.5">
                        <x-input-label for="password" value="Kata Sandi" class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 px-1 italic" />
                        <input id="password" type="password" name="password" required 
                            class="block w-full px-7 py-5 bg-white/5 border border-white/10 rounded-3xl text-sm font-bold text-white placeholder:text-slate-700 focus:border-indigo-500 focus:ring-0 focus:bg-white/10 transition-all duration-500 shadow-sm" 
                            placeholder="••••••••" />
                    </div>

                    <!-- Confirm Password -->
                    <div class="space-y-2.5">
                        <x-input-label for="password_confirmation" value="Konfirmasi" class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 px-1 italic" />
                        <input id="password_confirmation" type="password" name="password_confirmation" required 
                            class="block w-full px-7 py-5 bg-white/5 border border-white/10 rounded-3xl text-sm font-bold text-white placeholder:text-slate-700 focus:border-indigo-500 focus:ring-0 focus:bg-white/10 transition-all duration-500 shadow-sm" 
                            placeholder="••••••••" />
                    </div>
                </div>
                <x-input-error :messages="$errors->get('password')" class="mt-2 px-1 text-[10px] font-bold text-rose-400 italic uppercase" />
                <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2 px-1 text-[10px] font-bold text-rose-400 italic uppercase" />
            </div>

            <!-- Execution -->
            <div class="pt-6">
                <button type="submit" class="group relative w-full inline-flex items-center justify-center gap-3 px-8 py-6 bg-indigo-600 hover:bg-white text-white hover:text-slate-950 rounded-[32px] font-display font-black text-[14px] uppercase italic tracking-[0.3em] transition-all duration-500 shadow-[0_20px_40px_-10px_rgba(79,70,229,0.3)] hover:shadow-[0_25px_50px_-12px_rgba(255,255,255,0.2)] hover:scale-[1.01] active:scale-[0.99] overflow-hidden">
                    <span class="relative z-10">Daftar Akun Baru</span>
                    <svg class="w-5 h-5 relative z-10 transition-transform duration-500 group-hover:translate-x-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
                </button>
            </div>

            <!-- Redirect -->
            <div class="text-center pt-16 border-t border-white/5 space-y-6 opacity-80">
                <p class="text-[9px] font-black text-slate-600 uppercase tracking-[0.5em] italic leading-none">Sudah terdaftar?</p>
                <a href="{{ route('login') }}" class="group inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-400 hover:text-white transition-all">
                    <span>Masuk Ke Akun Anda</span>
                    <svg class="w-3.5 h-3.5 transition-transform group-hover:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M9 5l7 7-7 7"></path></svg>
                </a>
            </div>
        </form>
    </div>
</x-guest-layout>
