@extends('storefront.layout')

@section('title', 'Reset password')

@section('content')
<div class="bg-gradient-to-b from-stone-50 to-stone-100 py-16 px-4 min-h-[70vh] flex items-center">
<div class="w-full max-w-md mx-auto">

    <div class="text-center mb-8">
        <span class="inline-flex items-center gap-1.5 text-xs font-semibold uppercase tracking-widest text-emerald-700 bg-emerald-50 border border-emerald-200 rounded-full px-3 py-1">Account Recovery</span>
        <h1 class="mt-3 text-3xl font-semibold tracking-tight text-stone-900">Reset your password</h1>
        <p class="mt-2 text-sm text-stone-500">Enter your wholesale account email and we will send reset instructions if the account exists.</p>
    </div>

    @if (session('status'))
        <div class="mb-6 rounded-xl bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-800 flex items-start gap-2.5">
            <svg class="mt-0.5 shrink-0 w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"/></svg>
            {{ session('status') }}
        </div>
    @endif

    <div class="bg-white rounded-2xl shadow-sm border border-stone-200 overflow-hidden">
        <form method="POST" action="{{ route('password.email') }}">
            @csrf

            <div class="px-6 pt-6 pb-5 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-stone-700 mb-1.5">Email</label>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus
                           class="w-full rounded-lg border border-stone-300 bg-white px-3 py-2.5 text-sm text-stone-900 placeholder-stone-400 shadow-sm transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20 focus:outline-none @error('email') border-red-400 @enderror">
                    @error('email') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            <div class="px-6 py-4 bg-stone-50 border-t border-stone-100">
                <button type="submit"
                        class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-emerald-700 text-white px-5 py-2.5 text-sm font-medium shadow-sm hover:bg-emerald-800 transition">
                    Send reset link
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0l-7.5-4.615a2.25 2.25 0 01-1.07-1.916V6.75"/></svg>
                </button>
            </div>
        </form>
    </div>

    <p class="mt-5 text-center text-sm text-stone-500">
        Remembered it?
        <a href="{{ route('login') }}" class="text-emerald-700 font-medium hover:text-emerald-800 transition">Back to log in</a>
    </p>

</div>
</div>
@endsection