@extends('layouts.app')

@section('title', 'Подтвердите возраст — teeu')
@section('meta_description', 'Раздел для лиц старше 18 лет.')

{{-- Технический экран подтверждения возраста (SEO §14). --}}
@section('seo')
    @include('partials.seo.meta', ['robots' => 'noindex, follow'])
@endsection

@section('content')
    <div class="mx-auto max-w-xl py-8">
        <h1 class="text-3xl font-extrabold tracking-tight text-[var(--color-ink)]">Подтвердите возраст</h1>

        <p class="mt-3 text-[15px] leading-relaxed text-[var(--color-slate)]">
            Данный раздел предназначен только для лиц, достигших 18 лет. При получении заказа вас могут
            попросить показать <span class="text-[var(--color-primary)]">документ, удостоверяющий личность</span>.
        </p>

        <form method="POST" action="{{ route('age.confirm') }}" class="mt-7">
            @csrf
            <input type="hidden" name="return" value="{{ $return }}">

            <label for="dob" class="block text-[15px] font-semibold text-[var(--color-slate)]">
                Пожалуйста, укажите дату вашего рождения
            </label>
            <input type="date" id="dob" name="dob" value="{{ old('dob') }}"
                   max="{{ now()->toDateString() }}" required
                   class="mt-2 w-full max-w-sm rounded-[var(--radius-md)] border-[1.5px] border-[#E1E4EA] bg-white px-4 py-3 text-[15px] text-[var(--color-ink)] outline-none transition focus:border-[var(--color-primary)] focus:shadow-[0_0_0_4px_rgba(24,119,255,0.12)] @error('dob') border-[var(--color-danger,#E5484D)] @enderror">

            @error('dob')
                <p class="mt-2 text-sm font-semibold text-[#E5484D]">{{ $message }}</p>
            @enderror

            <p class="mt-4 text-[13px] leading-relaxed text-[var(--color-muted)]">
                Нажимая кнопку «Подтвердить», вы соглашаетесь на обработку указанных данных в соответствии
                с <a href="{{ route('privacy') }}" class="text-[var(--color-primary)] hover:underline">Политикой</a>.
            </p>

            <div class="mt-6 flex flex-wrap items-center gap-3">
                <button type="submit"
                        class="rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 py-3 text-sm font-bold text-white shadow-[var(--shadow-primary)] transition hover:bg-[var(--color-primary-dark)]">
                    Подтвердить
                </button>
                <a href="{{ route('home') }}"
                   class="rounded-[var(--radius-md)] bg-[var(--color-primary-soft)] px-6 py-3 text-sm font-bold text-[var(--color-primary)] transition hover:bg-[#dcebff]">
                    Отменить
                </a>
            </div>
        </form>
    </div>
@endsection