@extends('layouts.public', ['title' => 'Réinitialisation'])

@section('content')
    <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-8 pt-10 pb-16 bg-white shadow-2xl rounded-3xl border border-slate-100">
            <style>
                input:focus {
                    border-color: #000000 !important;
                    box-shadow: 0 0 0 1px #000000 !important;
                    outline: none !important;
                }
            </style>

            <div class="flex flex-col items-center mb-8">
                <a href="/">
                    <img src="{{ asset('Images/Logo.png') }}" alt="Logo Í CAMP"
                        class="h-20 w-auto drop-shadow-sm transition-transform duration-300 hover:scale-105">
                </a>
                <div class="mt-4 text-center">
                    <h1 class="text-xl font-bold text-slate-800 uppercase tracking-widest">Sénévalls</h1>
                    <div class="w-10 h-1 bg-[#eab308] mx-auto mt-2"></div>
                </div>
            </div>

            <div class="mb-6 text-sm text-slate-600 leading-relaxed text-center">
                {{ __('Mot de passe oublié ? Pas de souci. Indiquez-nous votre adresse email et nous vous enverrons un lien de réinitialisation.') }}
            </div>

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

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

                <!-- Email Address -->
                <div class="mb-6">
                    <input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
                        placeholder="Votre adresse 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='#000000';" onblur="this.style.borderColor='#e2e8f0';">
                    <x-input-error :messages="$errors->get('email')" class="mt-2" />
                </div>

                <div class="flex flex-col items-center gap-4">
                    <button type="submit"
                        style="width: 100%; background-color: #16a34a; color: #ffffff; font-weight: 700; padding: 1rem; border-radius: 0.75rem; border: none; cursor: pointer; display: block; text-align: center; font-size: 1rem; transition: all 0.3s shadow-lg;"
                        onmouseover="this.style.backgroundColor='#15803d'"
                        onmouseout="this.style.backgroundColor='#16a34a'">
                        {{ __('Envoyer le lien') }}
                    </button>

                    <a href="{{ route('login') }}"
                        style="text-decoration: underline; font-size: 0.875rem; color: #64748b; margin-top: 0.5rem;"
                        onmouseover="this.style.color='#0f172a'" onmouseout="this.style.color='#64748b'">
                        Retour à la connexion
                    </a>
                </div>
            </form>
        </div>
    </div>
@endsection