@extends('layouts.public')

@section('title', 'Register')

@section('content')
    <section class="hero-wash relative overflow-hidden text-white">
        <x-geo-pattern id="geo-reg1" />
        <div class="relative mx-auto max-w-7xl px-4 pb-12 pt-32 sm:px-6 sm:pb-16 sm:pt-40 lg:px-8">
            <x-steps :current="1" class="mb-10 max-w-xl" />
            <div class="max-w-3xl animate-fade-up">
                <h1 class="font-display text-3xl font-semibold tracking-tight sm:text-5xl">How will you join {{ config('event.short_name') }}?</h1>
                <p class="mt-4 max-w-2xl text-base text-white/80 sm:text-lg">Choose the category that best describes you. Each one asks for slightly different details.</p>
            </div>
        </div>
    </section>

    <section class="mesh-light py-12 sm:py-16">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            @if ($categories->isEmpty())
                <p class="surface p-8 text-center text-navy-500">No registration categories are open at the moment.</p>
            @else
                <ul class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($categories as $category)
                        @php
                            $remaining = $category->remaining_capacity;
                            $full = $remaining !== null && $remaining <= 0;
                            $almost = $remaining !== null && $remaining > 0 && $remaining <= 20;
                        @endphp
                        <li>
                            <a href="{{ route('registration.details', $category) }}"
                               class="surface group flex h-full flex-col p-6 transition hover:-translate-y-0.5 hover:border-emerald-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-emerald-500">
                                <div class="flex items-center justify-between gap-3">
                                    <span class="text-xs font-semibold uppercase tracking-[0.18em] text-turquoise-600">{{ $category->entity_type === 'corporate' ? 'Organisation' : 'Individual' }}</span>
                                    @if ($full)
                                        <span class="status-pill bg-sky-50 text-sky-700 ring-1 ring-sky-200">Waitlist</span>
                                    @elseif ($almost)
                                        <span class="status-pill bg-amber-50 text-amber-700 ring-1 ring-amber-200">{{ $remaining }} left</span>
                                    @endif
                                </div>
                                <h2 class="mt-3 font-display text-2xl font-semibold text-navy-900 group-hover:text-emerald-600">{{ $category->name }}</h2>
                                @if ($category->description)
                                    <p class="mt-2 flex-1 text-sm leading-relaxed text-navy-500">{{ $category->description }}</p>
                                @else
                                    <div class="flex-1"></div>
                                @endif

                                <ul class="mt-4 space-y-1 text-xs text-navy-500">
                                    @if ($category->min_age || $category->max_age)
                                        <li>Ages {{ $category->min_age ?? 'any' }}{{ $category->max_age ? '–'.$category->max_age : '+' }}</li>
                                    @endif
                                    @if ($category->requires_manual_approval)
                                        <li>Subject to organiser approval</li>
                                    @endif
                                    @if ($remaining !== null && ! $full && ! $almost)
                                        <li>{{ $remaining }} places remaining</li>
                                    @endif
                                    @if ($full)
                                        <li>This category is full &mdash; you can still apply for the waitlist.</li>
                                    @endif
                                </ul>

                                <span class="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600">
                                    Continue
                                    <svg class="h-4 w-4 transition group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14m-6-6l6 6-6 6"/></svg>
                                </span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @endif

            <p class="mt-10 text-center text-sm text-navy-500">
                Already registered? <a href="{{ route('status.lookup') }}" class="font-semibold text-emerald-600 underline">Check your status</a>
            </p>
        </div>
    </section>
@endsection