@extends('layouts.auth')
@section('title', 'Forgot Password')

@section('content')
    <div class="mb-8">
        <h2 class="font-display text-2xl font-bold text-surface-900 tracking-tight">Forgot password?</h2>
        <p class="text-surface-500 mt-1.5 text-sm">Enter your email and we'll send you a reset link.</p>
    </div>

    @if(session('status'))
        <div class="mb-6 flex items-start gap-3 rounded-xl bg-emerald-50 border border-emerald-200 p-4">
            <svg class="w-5 h-5 text-emerald-600 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <p class="text-sm font-medium text-emerald-800">{{ session('status') }}</p>
        </div>
    @endif

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

        <x-input
            name="email"
            label="Email address"
            type="email"
            :value="old('email')"
            placeholder="you@example.com"
            required
        />

        <button type="submit" class="btn-primary w-full justify-center py-2.5 shadow-glow">
            Send Reset Link
        </button>
    </form>

    <p class="text-center text-sm text-surface-500 mt-6">
        <a href="{{ route('login') }}"
           class="text-primary-600 hover:text-primary-700 font-medium inline-flex items-center gap-1">
            <svg class="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to sign in
        </a>
    </p>
@endsection