@extends('layouts.public')

@section('title', 'Badge — '.$registration->full_name)

@section('content')
    <section class="hero-wash relative overflow-hidden pb-24 pt-28 text-white sm:pt-32">
        <x-geo-pattern id="geo-badge" />
        <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">Your digital badge</p>
            <p class="mt-2 text-sm text-white/75">Show the QR code at the gate. Brightness up!</p>
        </div>
    </section>

    <section class="mesh-light -mt-16 pb-14">
        <div class="mx-auto max-w-md px-4">
            <article class="surface animate-fade-up overflow-hidden" aria-label="Event badge">
                <header class="bg-navy-900 px-6 py-5 text-center text-white">
                    <p class="font-display text-sm font-semibold uppercase leading-snug tracking-wider">{{ $event['name'] }}</p>
                    <p class="mt-1 text-xs text-turquoise-400">{{ $event['theme'] }}</p>
                </header>
                <div class="h-1.5 bg-gradient-to-r from-gold-500 via-turquoise-500 to-emerald-500"></div>

                <div class="px-6 pb-6 pt-7 text-center">
                    <span class="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 font-display text-3xl font-bold text-emerald-600 ring-4 ring-emerald-100">
                        {{ \Illuminate\Support\Str::upper(\Illuminate\Support\Str::substr($registration->full_name, 0, 1)) }}
                    </span>
                    <h1 class="mt-4 font-display text-2xl font-semibold leading-tight text-navy-900">{{ $registration->full_name }}</h1>
                    @if ($organisation)
                        <p class="mt-1 text-sm text-navy-500">{{ $organisation->name }}@if ($registration->company_role) &middot; {{ $registration->company_role }}@endif</p>
                    @elseif ($registration->media_outlet)
                        <p class="mt-1 text-sm text-navy-500">{{ $registration->media_outlet }}</p>
                    @endif
                    <span class="mt-3 inline-block rounded-full bg-emerald-500 px-4 py-1 text-xs font-semibold uppercase tracking-widest text-white">{{ $category->name }}</span>

                    <div class="mx-auto mt-6 w-fit rounded-2xl border border-navy-100 bg-white p-3">
                        <img src="{{ $qr }}" alt="QR code for {{ $registration->reference }}" class="h-52 w-52 sm:h-56 sm:w-56">
                    </div>
                    <p class="mt-3 font-display text-lg font-semibold tracking-[0.2em] text-navy-900">{{ $registration->reference }}</p>
                </div>

                <footer class="border-t border-dashed border-navy-200 bg-mist px-6 py-4 text-center text-xs text-navy-500">
                    <x-event-dates :event="$event" :with-venue="true" /><br>
                    Personal &amp; non-transferable &middot; Badge v{{ $badge->issue_number }}
                </footer>
            </article>

            <div class="mt-6 flex flex-col gap-3 sm:flex-row">
                <a href="{{ $pdfUrl }}" class="btn-primary flex-1">Download PDF</a>
                <button type="button" onclick="window.print()" class="btn-ghost flex-1">Print</button>
            </div>
            <p class="mt-4 text-center text-xs text-navy-500">Bookmark this page &mdash; you can reopen it any time from the link in your confirmation message.</p>
        </div>
    </section>
@endsection