@extends('layouts.public')

@section('title', 'Registration received')

@php
    $statusUrl = \Illuminate\Support\Facades\URL::temporarySignedRoute('status.show', now()->addMinutes(30), ['reference' => $registration->reference]);
@endphp

@section('content')
    <section class="hero-wash relative overflow-hidden text-white">
        <x-geo-pattern id="geo-ok" />
        <div class="relative mx-auto max-w-3xl px-4 pb-14 pt-32 text-center sm:px-6 sm:pb-20 sm:pt-40">
            <span class="mx-auto flex h-16 w-16 animate-fade-up items-center justify-center rounded-full bg-gold-500 text-navy-900">
                <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
            </span>
            <h1 class="animate-fade-up mt-6 font-display text-3xl font-semibold tracking-tight sm:text-5xl">
                {{ $needsApproval ? 'Registration received' : "You're registered!" }}
            </h1>
            <p class="animate-fade-up-delay mt-3 text-base text-white/80 sm:text-lg">
                Thank you, {{ $registration->firstName() }}.
                @if ($needsApproval)
                    Your {{ $category->name }} registration is now with our team for review.
                @else
                    Your {{ $category->name }} badge is on its way.
                @endif
            </p>
        </div>
    </section>

    <section class="mesh-light py-10 sm:py-14">
        <div class="mx-auto max-w-2xl space-y-6 px-4 sm:px-6">
            <div class="surface p-6 text-center sm:p-8">
                <p class="section-kicker">Your reference number</p>
                <p class="mt-2 select-all font-display text-4xl font-bold tracking-wider text-navy-900 sm:text-5xl">{{ $registration->reference }}</p>
                <p class="mt-2 text-sm text-navy-500">Keep this safe &mdash; you need it, with your e-mail or phone, to check your status.</p>
                <div class="mt-4"><x-status-badge :status="$registration->status" /></div>
            </div>

            <div class="surface p-6 sm:p-8">
                <h2 class="font-display text-xl font-semibold text-navy-900">What happens next</h2>
                <ol class="mt-4 space-y-4 text-navy-700">
                    @if ($needsApproval)
                        <li class="flex gap-4"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-sm font-semibold text-emerald-700">1</span><span>The organisers review your details{{ $category->requires_manual_approval ? ' and any supporting documents' : '' }}.</span></li>
                        <li class="flex gap-4"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-sm font-semibold text-emerald-700">2</span><span>We e-mail <strong>{{ $registration->email }}</strong> and text you once a decision is made.</span></li>
                        <li class="flex gap-4"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-sm font-semibold text-emerald-700">3</span><span>If approved, you receive a digital badge with a QR code to show at the gate.</span></li>
                    @else
                        <li class="flex gap-4"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-sm font-semibold text-emerald-700">1</span><span>Check <strong>{{ $registration->email }}</strong> and your phone for your badge link.</span></li>
                        <li class="flex gap-4"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-sm font-semibold text-emerald-700">2</span><span>Save the badge on your phone or print the PDF.</span></li>
                        <li class="flex gap-4"><span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-emerald-50 text-sm font-semibold text-emerald-700">3</span><span>Show the QR code at the gate on arrival.</span></li>
                    @endif
                </ol>
            </div>

            <div class="flex flex-col gap-3 sm:flex-row sm:justify-center">
                <a href="{{ $statusUrl }}" class="btn-primary">View my status</a>
                <a href="{{ route('home') }}" class="btn-ghost">Back to home</a>
            </div>
        </div>
    </section>
@endsection