@extends('layouts.app')

@section('title', 'Forgot Password - ' . ($shopSettings['shop_name'] ?? 'Orange Groceries'))
@section('meta_robots', 'noindex, nofollow')
@section('canonical', route('password.forgot'))

@section('content')
<div class="max-w-md mx-auto px-4 py-16">
    
    <div class="bg-white rounded-3xl p-8 border border-slate-200/80 shadow-xl space-y-6">
        
        <div class="text-center space-y-2">
            <div class="w-14 h-14 bg-amber-50 text-amber-600 rounded-2xl flex items-center justify-center text-2xl mx-auto font-bold shadow-sm">
                <i class="fa-solid fa-key"></i>
            </div>
            <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">Forgot Password?</h1>
            <p class="text-xs text-slate-500 font-medium">Enter your account email to receive a 6-digit verification OTP code.</p>
        </div>

        @if(session('success'))
            <div class="p-4 bg-emerald-50 border-l-4 border-emerald-500 rounded-r-2xl text-emerald-800 text-xs font-bold flex items-center gap-2">
                <i class="fa-solid fa-circle-check text-emerald-600 text-base"></i>
                <span>{{ session('success') }}</span>
            </div>
        @endif

        <form action="{{ route('password.otp.send') }}" method="POST" class="space-y-4">
            @csrf

            <div>
                <label class="block text-xs font-extrabold text-slate-700 mb-1">Account Email Address *</label>
                <input type="email" name="email" value="{{ old('email') }}" placeholder="name@example.com" required autofocus class="w-full px-4 py-3 rounded-2xl border border-slate-200 text-xs focus:ring-2 focus:ring-brand-500 focus:outline-none">
                @error('email')
                    <p class="text-xs text-rose-600 mt-1 font-semibold">{{ $message }}</p>
                @enderror
            </div>

            <button type="submit" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-extrabold text-sm py-3.5 rounded-2xl transition shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2">
                <span>Send Verification OTP</span>
                <i class="fa-solid fa-paper-plane text-xs"></i>
            </button>
        </form>

        <div class="text-center text-xs pt-4 border-t border-slate-100">
            <a href="{{ route('login') }}" class="font-bold text-brand-600 hover:underline flex items-center justify-center gap-1">
                <i class="fa-solid fa-arrow-left text-[10px]"></i> Back to Sign In
            </a>
        </div>

    </div>
</div>
@endsection