@extends('layouts.auth')
@section('title', 'Reset Password — JAM Members Club')

@section('content')
<div class="min-h-screen flex items-center justify-center px-4 bg-[#0d0d0d]">
    <div class="w-full max-w-sm">
        <div class="text-center mb-8">
            <p class="text-[#D4B84A] text-xs tracking-[0.4em] uppercase font-medium">Jam Corner · Members Club</p>
        </div>
        <div class="bg-[#111111] border border-[#1e1e1e] rounded-2xl p-8">
            <h2 class="text-xl font-semibold mb-2 text-center" style="font-family: 'Playfair Display', serif;">Reset Password</h2>
            <p class="text-white/40 text-sm text-center mb-6">Enter your email to receive a reset link.</p>

            @if(session('status'))
            <div class="bg-green-900/30 border border-green-700/50 rounded-lg p-3 mb-5">
                <p class="text-green-400 text-sm">{{ session('status') }}</p>
            </div>
            @endif

            @if($errors->any())
            <div class="bg-red-900/30 border border-red-700/50 rounded-lg p-3 mb-5">
                @foreach($errors->all() as $error)
                <p class="text-red-400 text-xs">{{ $error }}</p>
                @endforeach
            </div>
            @endif

            <form method="POST" action="{{ route('password.email') }}" class="space-y-6">
                @csrf
                <div>
                    <label class="block text-xs tracking-widest uppercase text-white/40 mb-2">Email Address</label>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus
                           class="w-full bg-transparent border-b border-[#2a2a2a] focus:border-[#D4B84A] outline-none text-white py-3 text-sm transition-colors">
                </div>
                <button type="submit"
                        class="w-full bg-[#D4B84A] hover:bg-[#E8D080] text-black font-semibold text-xs tracking-widest uppercase py-4 rounded-full transition-colors">
                    Send Reset Link
                </button>
            </form>
            <div class="mt-4 text-center">
                <a href="{{ route('login') }}" class="text-white/30 hover:text-white text-xs transition-colors">Back to login</a>
            </div>
        </div>
    </div>
</div>
@endsection