@extends('layouts.auth')

@section('title', 'Create Account | ' . config('app.name'))

@section('content')
<div class="auth-card">
    <h1 class="auth-title">Create account</h1>
    <p class="auth-subtitle">Join {{ config('app.name') }} today</p>

    @if($errors->any())
        <div class="auth-error">
            <i class="bi bi-exclamation-circle-fill"></i>
            <span>{{ $errors->first() }}</span>
        </div>
    @endif

    <form method="POST" action="{{ route('register.store') }}">
        @csrf

        <div class="form-group">
            <label class="form-label">Name</label>
            <input type="text" name="name" class="form-input" value="{{ old('name') }}" placeholder="Your name" required autofocus>
        </div>

        <div class="form-group">
            <label class="form-label">Email</label>
            <input type="email" name="email" class="form-input" value="{{ old('email') }}" placeholder="you@example.com" required>
        </div>

        <div class="form-group">
            <label class="form-label">Password</label>
            <input type="password" name="password" class="form-input" placeholder="At least 8 characters" required>
        </div>

        <div class="form-group">
            <label class="form-label">Confirm Password</label>
            <input type="password" name="password_confirmation" class="form-input" placeholder="••••••••" required>
        </div>

        <div class="form-group">
            {{-- COPPA / platform minimum age: 13 at sign-up. maxYear caps
                 the year dropdown at (this year − 13). --}}
            <x-date-picker name="birthday" label="Date of Birth" :value="old('birthday')"
                           :max-year="(int) date('Y') - 13" required />
        </div>

        <div class="form-group">
            <x-gender-select name="gender" label="Gender" :value="old('gender')" required />
        </div>

        <div class="form-group">
            <x-country-select name="nationality" label="Nationality" :value="old('nationality')" placeholder="Select nationality" required />
        </div>

        {{-- Honeypot: hidden from real users, bots fill it in --}}
        <div style="position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden;" aria-hidden="true">
            <input type="text" name="_hp" value="" autocomplete="off" tabindex="-1">
        </div>

        <button type="submit" class="btn-primary">Create Account</button>
    </form>
</div>
@endsection

@section('footer_link')
    Already have an account? <a href="{{ route('login') }}">Sign in</a>
@endsection