<x-guest-layout>

    <!-- Header -->
    <div class="mb-8">
        <h2 class="text-2xl font-bold text-slate-900 mb-1">Welcome back</h2>
        <p class="text-slate-500 text-sm">Sign in to your GARI account to continue.</p>
    </div>

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

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

        <!-- Email -->
        <div>
            <label for="email" class="auth-label">Email Address</label>
            <input id="email" type="email" name="email" value="{{ old('email') }}"
                   class="auth-input @error('email') !border-red-400 !bg-red-50 @enderror"
                   placeholder="you@example.com" required autofocus autocomplete="username">
            @error('email')
                <p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
                    <i class="fas fa-circle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Password -->
        <div>
            <div class="flex items-center justify-between mb-1.5">
                <label for="password" class="auth-label mb-0">Password</label>
                @if (Route::has('password.request'))
                    <a href="{{ route('password.request') }}" class="text-[11px] text-brand-600 hover:text-brand-800 font-medium transition-colors">
                        Forgot password?
                    </a>
                @endif
            </div>
            <input id="password" type="password" name="password"
                   class="auth-input @error('password') !border-red-400 !bg-red-50 @enderror"
                   placeholder="••••••••" required autocomplete="current-password">
            @error('password')
                <p class="mt-1.5 text-xs text-red-500 flex items-center gap-1">
                    <i class="fas fa-circle-exclamation text-[10px]"></i> {{ $message }}
                </p>
            @enderror
        </div>

        <!-- Remember Me -->
        <div class="flex items-center gap-2.5">
            <input id="remember_me" type="checkbox" name="remember"
                   class="w-4 h-4 rounded border-slate-300 text-brand-600 focus:ring-brand-500">
            <label for="remember_me" class="text-sm text-slate-600">Keep me signed in</label>
        </div>

        <!-- Submit -->
        <button type="submit"
                class="w-full bg-slate-900 hover:bg-brand-600 text-white font-bold py-3 rounded-xl text-sm tracking-wide transition-colors shadow-sm flex items-center justify-center gap-2 mt-2">
            Sign In to GARI <i class="fas fa-arrow-right text-xs"></i>
        </button>

        <!-- Divider -->
        <div class="flex items-center gap-3 my-2">
            <div class="flex-grow h-px bg-slate-100"></div>
            <span class="text-xs text-slate-400 font-medium">New to GARI?</span>
            <div class="flex-grow h-px bg-slate-100"></div>
        </div>

        <!-- Register link -->
        <a href="{{ route('register') }}"
           class="w-full block text-center bg-white border border-slate-200 hover:border-slate-300 text-slate-700 font-semibold py-3 rounded-xl text-sm transition-colors">
            Create an Account
        </a>

    </form>
</x-guest-layout>
