@extends('layouts.public')

@section('title', 'Badge verification')

@php
    $config = match ($state) {
        'valid' => ['title' => 'Valid badge', 'text' => 'This badge is genuine and the registration is approved.', 'tone' => 'bg-emerald-500', 'icon' => 'M5 13l4 4L19 7'],
        'revoked' => ['title' => 'Badge revoked', 'text' => 'This badge has been revoked. Do not admit — refer to the registration desk.', 'tone' => 'bg-coral-500', 'icon' => 'M6 18L18 6M6 6l12 12'],
        'expired' => ['title' => 'Badge expired', 'text' => 'This badge is no longer valid for entry.', 'tone' => 'bg-amber-500', 'icon' => 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z'],
        'not_approved' => ['title' => 'Not approved', 'text' => 'The registration linked to this badge is not currently approved.', 'tone' => 'bg-amber-500', 'icon' => 'M12 9v4m0 4h.01M10.3 3.9L2.4 18a2 2 0 001.7 3h15.8a2 2 0 001.7-3L13.7 3.9a2 2 0 00-3.4 0z'],
        default => ['title' => 'Badge not recognised', 'text' => 'We could not find this badge. It may be forged or damaged.', 'tone' => 'bg-coral-500', 'icon' => 'M6 18L18 6M6 6l12 12'],
    };
@endphp

@section('content')
    <section class="hero-wash relative overflow-hidden pb-28 pt-28 text-white sm:pt-32">
        <x-geo-pattern id="geo-verify" />
        <div class="relative mx-auto max-w-md px-4 text-center">
            <p class="text-xs font-semibold uppercase tracking-[0.22em] text-gold-500">Badge verification</p>
        </div>
    </section>

    <section class="mesh-light -mt-20 pb-16">
        <div class="mx-auto max-w-md px-4">
            <article class="surface animate-fade-up overflow-hidden text-center" role="status" aria-live="polite">
                <div class="{{ $config['tone'] }} px-6 py-8 text-white">
                    <span class="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-white/20">
                        <svg class="h-9 w-9" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $config['icon'] }}"/></svg>
                    </span>
                    <h1 class="mt-4 font-display text-3xl font-semibold">{{ $config['title'] }}</h1>
                </div>
                <div class="space-y-4 px-6 py-7">
                    <p class="text-navy-500">{{ $config['text'] }}</p>

                    @if ($name)
                        <dl class="divide-y divide-navy-100 border-y border-navy-100 text-left">
                            <div class="flex justify-between gap-4 py-3"><dt class="text-sm text-navy-500">Name</dt><dd class="font-semibold text-navy-900">{{ $name }}</dd></div>
                            @if ($category)
                                <div class="flex justify-between gap-4 py-3"><dt class="text-sm text-navy-500">Category</dt><dd class="font-semibold text-navy-900">{{ $category }}</dd></div>
                            @endif
                            <div class="flex justify-between gap-4 py-3"><dt class="text-sm text-navy-500">Event</dt><dd class="text-right font-semibold text-navy-900">{{ $event }}</dd></div>
                            <div class="flex justify-between gap-4 py-3"><dt class="text-sm text-navy-500">Venue</dt><dd class="text-right font-semibold text-navy-900">{{ $venue }}</dd></div>
                        </dl>
                    @endif
                </div>
            </article>
            <p class="mt-5 text-center text-xs text-navy-500">Identity details are intentionally limited on this page.</p>
        </div>
    </section>
@endsection