<x-guest-layout>
    <!-- Phase 15: Premium Dark Authentication (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">System Access 2.5</span>
            </div>
            
            <div class="space-y-2">
                <h2 class="text-4xl font-display font-black text-white tracking-tighter uppercase italic leading-tight">
                    Masuk Ke Akun<br>
                    <span class="text-indigo-500">Leasing Pro</span>
                </h2>
                <p class="text-[13px] font-medium text-slate-500 tracking-tight max-w-[280px] mx-auto opacity-70">
                    Otentikasi keamanan diperlukan untuk akses portal operasional.
                </p>
            </div>
        </div>

        <!-- Session Status -->
        @if (session('status'))
            <x-auth-session-status class="rounded-2xl border border-indigo-500/30 bg-indigo-500/10 p-4 text-xs font-bold text-indigo-400 italic text-center shadow-sm" :status="session('status')" />
        @endif

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

            <!-- Ultra-Clean Dark Input Stack -->
            <div class="space-y-8">
                <!-- Email -->
                <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 autofocus autocomplete="off" 
                    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 -->
                <div class="space-y-2.5">
                    <div class="flex justify-between items-center px-1">
                        <x-input-label for="password" value="Kata Sandi" class="text-[10px] font-black uppercase tracking-[0.3em] text-slate-500 italic" />
                        @if (Route::has('password.request'))
                            <a class="text-[9px] font-black uppercase tracking-widest text-indigo-400 hover:text-white transition-all italic underline underline-offset-4 decoration-indigo-500/30" href="{{ route('password.request') }}">
                                Lupa Sandi?
                            </a>
                        @endif
                    </div>
                    <input id="password" type="password" name="password" required autocomplete="off" 
                        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="••••••••" />
                    <x-input-error :messages="$errors->get('password')" class="mt-2 px-1 text-[10px] font-bold text-rose-400 italic uppercase" />
                </div>
            </div>

            <!-- Options -->
            <div class="flex items-center px-1 group cursor-pointer">
                <input id="remember_me" type="checkbox" name="remember" 
                    class="w-5 h-5 rounded-lg border-white/10 bg-white/5 text-indigo-600 focus:ring-4 focus:ring-indigo-500/10 transition-all duration-500 cursor-pointer shadow-sm">
                <label for="remember_me" class="ms-3 text-[10px] font-black text-slate-500 uppercase tracking-[0.2em] cursor-pointer group-hover:text-white transition-colors italic">
                    Ingat Sesi Saya
                </label>
            </div>

            <!-- Execution -->
            <div class="pt-4">
                <button type="submit" class="group relative w-full inline-flex items-center justify-center gap-3 px-8 py-6 bg-white hover:bg-indigo-600 text-slate-950 hover:text-white rounded-[32px] font-display font-black text-[14px] uppercase italic tracking-[0.3em] transition-all duration-500 shadow-[0_20px_40px_-10px_rgba(0,0,0,0.5)] hover:shadow-[0_25px_50px_-12px_rgba(79,70,229,0.3)] hover:scale-[1.01] active:scale-[0.99] overflow-hidden">
                    <span class="relative z-10">Masuk Ke Sistem</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>

            <!-- Redirects -->
            <div class="text-center pt-16 border-t border-white/5 space-y-8 opacity-80">
                <p class="text-[9px] font-black text-slate-600 uppercase tracking-[0.5em] italic">Belum punya akses?</p>
                <div class="flex flex-col sm:flex-row items-center justify-center gap-6 sm:gap-10">
                    <a href="{{ route('register.member') }}" class="group flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-400 hover:text-white transition-all">
                        <span>Daftar Member</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 class="hidden sm:block w-1.5 h-1.5 bg-white/5 rounded-full"></div>
                    <a href="{{ route('register.leasing') }}" class="group flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-indigo-400 hover:text-white transition-all">
                        <span>Daftar Leasing</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>
            </div>
        </form>
    </div>
</x-guest-layout>
