@extends('layouts.app')

@section('title', 'Lupa Kata Sandi - Janoer Koening')

@section('content')
<div class="py-20 bg-[#FAF7F0]">
    <div class="max-w-md mx-auto px-4 sm:px-6">
        <div class="bg-white p-8 rounded-3xl border border-[#A8BBA6]/20 shadow-xl">
            <div class="text-center mb-8">
                <img src="{{ asset('assets/brand/logo.png') }}" alt="Logo" class="h-12 mx-auto mb-3">
                <h1 class="font-heading text-3xl font-bold text-charcoal">Lupa Kata Sandi?</h1>
                <p class="text-xs text-charcoal/60 mt-1">Masukkan alamat email terdaftar Anda. Kami akan mengirimkan tautan untuk membuat kata sandi baru.</p>
            </div>

            @if(session('status'))
                <div class="mb-4 p-4 bg-emerald-50 text-emerald-800 text-xs rounded-xl border border-emerald-200 flex items-start gap-2">
                    <i data-lucide="check-circle" class="w-4 h-4 text-emerald-600 shrink-0 mt-0.5"></i>
                    <span>{{ session('status') }}</span>
                </div>
            @endif

            @if(isset($errors) && $errors->any())
                <div class="mb-4 p-3 bg-red-50 text-red-700 text-xs rounded-xl border border-red-200">
                    {{ $errors->first() }}
                </div>
            @endif

            <form action="{{ route('password.email') }}" method="POST" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-semibold text-charcoal/80 mb-1">Alamat Email Terdaftar</label>
                    <input type="email" name="email" value="{{ old('email') }}" required autofocus placeholder="contoh: nama@domain.com" class="w-full px-4 py-2.5 rounded-xl border border-charcoal/20 text-sm focus:border-deepsage outline-none">
                </div>

                <button type="submit" class="w-full py-3 bg-deepsage text-ivory text-xs font-semibold uppercase tracking-wider rounded-full hover:bg-opacity-90 shadow-md transition flex items-center justify-center gap-2 cursor-pointer active:scale-95">
                    <i data-lucide="send" class="w-3.5 h-3.5"></i>
                    <span>Kirim Tautan Reset Password</span>
                </button>
            </form>

            <div class="mt-6 pt-6 border-t border-gray-100 text-center text-xs text-charcoal/60">
                Sudah ingat kata sandi Anda? <a href="{{ route('login') }}" class="text-deepsage font-semibold hover:underline">Kembali ke Halaman Masuk</a>
            </div>
        </div>
    </div>
</div>
@endsection