{{-- Quick profile questions on first dashboard visit. Skippable; reappears next session until completed. --}}
<div x-data="{ open: true }" x-show="open" x-cloak
     class="fixed inset-0 z-[80] grid place-items-center overflow-y-auto bg-navy-950/70 p-4 backdrop-blur-sm">
    <div class="relative w-full max-w-2xl overflow-hidden rounded-brand bg-white shadow-brand-lg"
         x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="opacity-0 translate-y-4 scale-95" x-transition:enter-end="opacity-100 translate-y-0 scale-100">

        <div class="relative overflow-hidden bg-gradient-to-br from-navy-900 via-navy-800 to-wise-800 p-6 text-white">
            <div class="absolute inset-0 opacity-10" style="background:url('{{ asset('images/pattern-kitenge.svg') }}'); background-size:300px;"></div>
            <p class="relative text-xs font-bold uppercase tracking-[0.18em] text-wise-300">Karibu, {{ $user->firstName() }}</p>
            <h2 class="relative mt-1 font-display text-2xl font-bold">Help us tailor Money-Wise to you</h2>
            <p class="relative mt-1.5 text-sm text-navy-200">Sixty seconds, six questions. Your answers shape the advice, tools and content we point you to, and they stay private.</p>
        </div>

        <form method="POST" action="{{ route('onboarding.store') }}" class="space-y-5 p-6">
            @csrf
            <div class="grid gap-4 sm:grid-cols-2">
                <div>
                    <label for="ob-country" class="mb-1 block text-sm font-semibold text-navy-700">Where do you live? *</label>
                    <select name="country" id="ob-country" required class="w-full rounded-2xl border-navy-200 px-4 py-2.5 focus:border-wise-400 focus:ring-wise-400">
                        @foreach (['Kenya', 'Uganda', 'Tanzania', 'Rwanda', 'Nigeria', 'Ghana', 'South Africa', 'United States', 'United Kingdom', 'Canada', 'Germany', 'United Arab Emirates', 'Qatar', 'Saudi Arabia', 'Australia', 'Other'] as $c)
                            <option value="{{ $c }}" @selected(($user->country ?? 'Kenya') === $c)>{{ $c }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="ob-city" class="mb-1 block text-sm font-semibold text-navy-700">City or town <span class="font-normal text-navy-400">(optional)</span></label>
                    <input type="text" name="city" id="ob-city" value="{{ $user->city }}" placeholder="e.g. Nairobi"
                           class="w-full rounded-2xl border-navy-200 px-4 py-2.5 focus:border-wise-400 focus:ring-wise-400">
                </div>
                <div>
                    <label for="ob-gender" class="mb-1 block text-sm font-semibold text-navy-700">Gender</label>
                    <select name="gender" id="ob-gender" class="w-full rounded-2xl border-navy-200 px-4 py-2.5 focus:border-wise-400 focus:ring-wise-400">
                        <option value="">Select...</option>
                        @foreach (\App\Http\Controllers\OnboardingController::GENDERS as $g)
                            <option value="{{ $g }}" @selected($user->gender === $g)>{{ $g }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="ob-dob" class="mb-1 block text-sm font-semibold text-navy-700">Date of birth</label>
                    <input type="date" name="date_of_birth" id="ob-dob" value="{{ $user->date_of_birth?->format('Y-m-d') }}"
                           max="{{ now()->subYears(16)->format('Y-m-d') }}" min="1920-01-01"
                           class="w-full rounded-2xl border-navy-200 px-4 py-2.5 focus:border-wise-400 focus:ring-wise-400">
                    <p class="mt-1 text-[11px] text-navy-400">Helps us match advice to your season of life.</p>
                </div>
                <div>
                    <label for="ob-occupation" class="mb-1 block text-sm font-semibold text-navy-700">What best describes you?</label>
                    <select name="occupation" id="ob-occupation" class="w-full rounded-2xl border-navy-200 px-4 py-2.5 focus:border-wise-400 focus:ring-wise-400">
                        <option value="">Select...</option>
                        @foreach (\App\Http\Controllers\OnboardingController::OCCUPATIONS as $o)
                            <option value="{{ $o }}" @selected($user->occupation === $o)>{{ $o }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <label for="ob-goal" class="mb-1 block text-sm font-semibold text-navy-700">Your biggest money goal right now</label>
                    <select name="goal" id="ob-goal" class="w-full rounded-2xl border-navy-200 px-4 py-2.5 focus:border-wise-400 focus:ring-wise-400">
                        <option value="">Select...</option>
                        @foreach (\App\Http\Controllers\OnboardingController::GOALS as $g)
                            <option value="{{ $g }}" @selected($user->goal === $g)>{{ $g }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="sm:col-span-2">
                    <label for="ob-heard" class="mb-1 block text-sm font-semibold text-navy-700">How did you hear about Money-Wise?</label>
                    <select name="heard_from" id="ob-heard" class="w-full rounded-2xl border-navy-200 px-4 py-2.5 focus:border-wise-400 focus:ring-wise-400">
                        <option value="">Select...</option>
                        @foreach (\App\Http\Controllers\OnboardingController::SOURCES as $s)
                            <option value="{{ $s }}" @selected($user->heard_from === $s)>{{ $s }}</option>
                        @endforeach
                    </select>
                </div>
            </div>

            <div class="flex flex-wrap items-center justify-between gap-3 pt-1">
                <button type="submit" formaction="{{ route('onboarding.skip') }}" formnovalidate
                        class="text-sm font-semibold text-navy-400 transition hover:text-navy-600">
                    I'll do this later
                </button>
                <button type="submit" class="btn-accent">Save my profile <x-icon name="arrow-right" class="h-4 w-4" /></button>
            </div>
        </form>
    </div>
</div>