{{--
    Halaman: Lupa Password
    Layout : layouts/guest.blade.php (Bootstrap 5 SparkWash)
    Route  : /forgot-password (POST → PasswordResetLinkController)
--}}
<x-layouts.guest :title="'Lupa Password — SparkWash'">

    {{-- Deskripsi --}}
    <p class="text-center mb-4" style="font-size: 0.875rem; color: var(--sw-gray); line-height: 1.6;">
        Masukkan alamat email yang terdaftar. Kami akan mengirimkan tautan untuk mereset password Anda.
    </p>

    {{-- Status sukses (link dikirim) --}}
    @if (session('status'))
        <div class="alert d-flex align-items-center gap-2 mb-3"
             style="background: #E8F5E9; border: none; color: #2E7D32; border-radius: var(--sw-radius);"
             role="alert">
            <i class="fas fa-circle-check fa-lg"></i>
            <span style="font-size: 0.875rem;">{{ session('status') }}</span>
        </div>
    @endif

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

        {{-- Email --}}
        <div class="mb-4">
            <label for="email" class="form-label">
                <i class="fas fa-envelope me-1" style="color: var(--sw-primary);"></i>
                Alamat Email
            </label>
            <input
                id="email"
                type="email"
                name="email"
                value="{{ old('email') }}"
                class="form-control @error('email') is-invalid @enderror"
                placeholder="contoh@email.com"
                required
                autofocus
            >
            @error('email')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>

        {{-- Tombol Kirim --}}
        <button type="submit" class="btn btn-primary w-100 py-2 fw-500">
            <i class="fas fa-paper-plane me-2"></i>
            Kirim Tautan Reset Password
        </button>

    </form>

    {{-- Kembali ke Login --}}
    <div class="text-center mt-4">
        <a href="{{ route('login') }}"
           style="font-size: 0.875rem; color: var(--sw-gray); text-decoration: none;">
            <i class="fas fa-arrow-left me-1"></i>
            Kembali ke halaman login
        </a>
    </div>

</x-layouts.guest>