<x-guest-layout>
    <div class="text-center mb-8">
        <h2 class="text-2xl font-black text-white tracking-tight">Welcome Back</h2>
        <p class="text-white/40 text-sm mt-1">Access your compliance dashboard</p>
    </div>

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

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

        <!-- Email Address -->
        <div class="space-y-1">
            <label for="email" class="auth-label">Corporate Email</label>
            <input id="email" class="w-full auth-input @error('email') border-red-500/50 @enderror" 
                   type="email" name="email" :value="old('email')" 
                   required autofocus autocomplete="username" 
                   placeholder="name@company.com" />
            @error('email')
                <p class="mt-2 text-xs text-red-400 opacity-80">{{ $message }}</p>
            @enderror
        </div>

        <!-- Password -->
        <div class="space-y-1">
            <div class="flex items-center justify-between">
                <label for="password" class="auth-label">Password</label>
                @if (Route::has('password.request'))
                    <a class="text-[10px] uppercase font-black tracking-widest text-white/30 hover:text-white transition-colors" href="{{ route('password.request') }}">
                        Forgot?
                    </a>
                @endif
            </div>

            <input id="password" class="w-full auth-input @error('password') border-red-500/50 @enderror"
                   type="password"
                   name="password"
                   required autocomplete="current-password"
                   placeholder="••••••••" />
            @error('password')
                <p class="mt-2 text-xs text-red-400 opacity-80">{{ $message }}</p>
            @enderror
        </div>

        <!-- CAPTCHA -->
        <div class="space-y-3">
            <label for="captcha" class="auth-label">Security Verification</label>
            <div class="flex items-center gap-4">
                <div class="px-6 py-3 bg-white/5 border border-white/10 rounded-xl select-none">
                    <span class="text-xl font-black tracking-[0.5em] text-white italic blur-[0.5px]">{{ $captcha }}</span>
                </div>
                <div class="flex-1">
                    <input id="captcha" class="w-full auth-input @error('captcha') border-red-500/50 @enderror"
                           type="text" name="captcha" 
                           required 
                           placeholder="Type code" />
                </div>
            </div>
            @error('captcha')
                <p class="mt-2 text-xs text-red-400 opacity-80">{{ $message }}</p>
            @enderror
        </div>

        <!-- Remember Me -->
        <div class="flex items-center">
            <label for="remember_me" class="inline-flex items-center cursor-pointer group">
                <input id="remember_me" type="checkbox" class="rounded border-white/10 bg-white/5 text-[#1710e6] shadow-sm focus:ring-[#1710e6] focus:ring-offset-0" name="remember">
                <span class="ms-3 text-xs text-white/40 group-hover:text-white/60 transition-colors">Keep me signed in</span>
            </label>
        </div>

        <div class="pt-2">
            <button type="submit" class="w-full flex justify-center items-center gap-2 py-4 bg-[#1710e6] text-white font-black text-xs uppercase tracking-[0.2em] shadow-glow hover:scale-[1.02] active:scale-[0.98] transition-all">
                Sign In
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            </button>
        </div>

        <div class="text-center pt-6 border-t border-white/5">
            <p class="text-xs text-white/30">Don't have an account?</p>
            <a href="{{ route('register') }}" class="mt-2 inline-block text-[10px] uppercase font-black tracking-widest text-white hover:text-white/70 transition-colors underline underline-offset-8">
                Create Free Account
            </a>
        </div>
    </form>
</x-guest-layout>
