<x-guest-layout>
    <div class="min-h-[80vh] flex flex-col justify-center items-center py-12 bg-slate-50 px-4">
        <div class="w-full sm:max-w-md px-6 py-8 bg-white shadow-sm rounded-lg border border-slate-50">
            <style>
                input:focus {
                    border-color: #fbbf24 !important;
                    box-shadow: 0 0 0 1px #fbbf24 !important;
                    outline: none !important;
                }
            </style>
            <!-- Session Status -->
            <x-auth-session-status class="mb-4" :status="session('status')" />

            <div class="flex flex-col items-center mb-8">
                <a href="/" class="flex flex-col items-center group">
                    <div class="mb-4 transition-transform duration-300 group-hover:scale-110">
                        <img src="{{ asset('Images/logocarte.png') }}" alt="Logo"
                            class="w-16 h-16 object-contain">
                    </div>
                    <h1 class="text-2xl font-bold text-slate-800 tracking-tight leading-none">sénévalls</h1>
                </a>
            </div>

            <form method="POST" action="{{ route('login') }}">
                @csrf

                <!-- Email Address -->
                <div class="mb-4">
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
                        placeholder="Email"
                        style="width: 100%; padding: 0.85rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; outline: none; transition: all 0.2s;"
                        onfocus="this.style.borderColor='#fbbf24';" onblur="this.style.borderColor='#e2e8f0';">
                    <x-input-error :messages="$errors->get('email')" class="mt-2" />
                </div>

                <!-- Password -->
                <div class="mb-4">
                    <input id="password" type="password" name="password" required placeholder="Mot de passe"
                        style="width: 100%; padding: 0.85rem; border: 1px solid #e2e8f0; border-radius: 0.75rem; outline: none; transition: all 0.2s;"
                        onfocus="this.style.borderColor='#fbbf24';" onblur="this.style.borderColor='#e2e8f0';">
                    <x-input-error :messages="$errors->get('password')" class="mt-2" />
                </div>

                <!-- Remember Me -->
                <div class="flex items-center justify-between mb-6">
                    <label for="remember_me" class="inline-flex items-center cursor-pointer">
                        <input id="remember_me" type="checkbox"
                            class="rounded border-slate-300 text-amber-500 shadow-sm focus:ring-amber-500" name="remember">
                        <span class="ms-2 text-sm text-slate-600">Se souvenir de moi</span>
                    </label>
                </div>

                <div class="flex flex-col items-center gap-4">
                    <button type="submit"
                        style="width: 100%; background-color: #000000; color: #ffffff; font-weight: 700; padding: 0.75rem; border-radius: 0.75rem; border: none; cursor: pointer; display: block; text-align: center; font-size: 0.95rem; transition: all 0.3s shadow-lg;"
                        onmouseover="this.style.color='#fbbf24'; this.style.boxShadow='0 10px 15px -3px rgba(251, 191, 36, 0.2)';"
                        onmouseout="this.style.color='#ffffff'; this.style.boxShadow='none';">
                        Connexion
                    </button>
                </div>
            </form>
        </div>
    </div>
</x-guest-layout>