@extends('layouts.public')

@section('title', $event['short_name'])
@section('meta_description', 'Register for the '.$event['name'].' — '.$event['theme'].'. '.$event['venue'].'.')

@php
    $tz = $event['timezone'];
    $startsAt = \Illuminate\Support\Carbon::parse($event['start'], $tz);
@endphp

@section('content')
    {{-- ============================ HERO ============================ --}}
    <section class="hero-wash relative isolate flex min-h-[92svh] items-center overflow-hidden text-white">
        <x-geo-pattern id="geo-hero" />
        <div class="relative mx-auto w-full max-w-7xl px-4 pb-20 pt-36 sm:px-6 lg:px-8">
            <div class="max-w-4xl">
                <p class="animate-fade-up text-sm font-semibold uppercase tracking-[0.24em] text-gold-500">
                    <x-event-dates :event="$event" :with-venue="true" />
                </p>
                <h1 class="animate-fade-up mt-5 font-display text-4xl font-bold uppercase leading-[1.05] tracking-tight sm:text-6xl lg:text-7xl">
                    {{ $event['name'] }}
                </h1>
                <p class="animate-fade-up-delay mt-8 font-display text-xl font-medium text-turquoise-400 sm:text-2xl">
                    Your future. Your financial power.
                </p>
                <p class="animate-fade-up-delay mt-3 max-w-xl text-base leading-relaxed text-white/80 sm:text-lg">
                    Connect with ideas, institutions and opportunities shaping youth financial inclusion.
                </p>
                <div class="animate-fade-up-delay-2 mt-9 flex flex-col gap-3 sm:flex-row">
                    @if ($event['registration_open'])
                        <a href="{{ route('registration.create') }}" class="btn-primary !bg-gold-500 !text-navy-900 hover:!bg-gold-400 sm:px-8 sm:py-4 sm:text-base">Register now</a>
                    @else
                        <a href="{{ route('status.lookup') }}" class="btn-primary !bg-gold-500 !text-navy-900 hover:!bg-gold-400 sm:px-8 sm:py-4 sm:text-base">Check registration status</a>
                    @endif
                    <a href="#expect" class="btn-secondary sm:px-8 sm:py-4 sm:text-base">Explore event</a>
                </div>
            </div>
        </div>
    </section>

    {{-- ============================ COUNTDOWN ============================ --}}
    <section class="border-b border-navy-100 bg-white" aria-labelledby="countdown-title">
        <div class="mx-auto flex max-w-7xl flex-col items-center gap-6 px-4 py-10 sm:px-6 lg:flex-row lg:justify-between lg:px-8"
             x-data="countdown('{{ $startsAt->toIso8601String() }}')">
            <div class="text-center lg:text-left">
                <p class="section-kicker">The countdown</p>
                <h2 id="countdown-title" class="mt-1 font-display text-2xl font-semibold text-navy-900">
                    <span x-show="!done">Doors open in</span>
                    <span x-cloak x-show="done">The symposium is under way</span>
                </h2>
            </div>
            <dl class="grid grid-cols-4 gap-3 sm:gap-6" x-show="!done" aria-live="off">
                @foreach (['days' => 'Days', 'hours' => 'Hours', 'minutes' => 'Minutes', 'seconds' => 'Seconds'] as $key => $label)
                    <div class="flex min-w-[4.25rem] flex-col-reverse text-center sm:min-w-[6rem]">
                        <dt class="mt-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-navy-500">{{ $label }}</dt>
                        <dd class="font-display text-4xl font-semibold tabular-nums text-emerald-500 sm:text-6xl" x-text="{{ $key }}">00</dd>
                    </div>
                @endforeach
            </dl>
            <a href="{{ $event['registration_open'] ? route('registration.create') : route('programme') }}" class="btn-ghost">
                {{ $event['registration_open'] ? 'Secure your place' : 'View programme' }}
            </a>
        </div>
    </section>

    {{-- ============================ WHAT TO EXPECT ============================ --}}
    <section id="expect" class="mesh-light scroll-mt-4 py-20 sm:py-24">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="max-w-2xl">
                <p class="section-kicker">What to expect</p>
                <h2 class="section-title mt-3">Two days built around {{ \Illuminate\Support\Str::lower($event['theme']) }}.</h2>
                <p class="mt-4 text-lg leading-relaxed text-navy-500">
                    {{ $event['about'] ?: ($event['tagline'] ?: 'A national gathering of young people, financial institutions, innovators and policy makers working to widen access to finance across Africa.') }}
                </p>
            </div>

            <div class="mt-14 grid gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-4">
                @foreach ([
                    ['title' => 'Keynotes & panels', 'text' => 'Hear central bankers, founders and young leaders debate the next decade of inclusive finance.', 'color' => 'bg-emerald-500', 'icon' => 'M12 3v10m0 0a3 3 0 003-3V6a3 3 0 00-6 0v4a3 3 0 003 3zm-6 0a6 6 0 0012 0m-6 6v3'],
                    ['title' => 'Innovation showcase', 'text' => 'Meet fintech builders and exhibitors demonstrating tools that put money in young hands.', 'color' => 'bg-turquoise-500', 'icon' => 'M9.8 4.2l2.2 2.2m0 0l2.2-2.2M12 6.4V3m-6 8h12l-1 9H7l-1-9z'],
                    ['title' => 'Hands-on workshops', 'text' => 'Practical sessions on saving, credit, digital payments and starting a business.', 'color' => 'bg-gold-500 !text-navy-900', 'icon' => 'M4 6h16M4 12h16M4 18h10'],
                    ['title' => 'Networking & mentors', 'text' => 'Build relationships with institutions and peers who can open doors long after the event.', 'color' => 'bg-coral-500', 'icon' => 'M17 20h5v-2a4 4 0 00-5-3.9M9 20H4v-2a4 4 0 015-3.9m6-5.1a3 3 0 11-6 0 3 3 0 016 0z'],
                ] as $i => $item)
                    <div class="animate-fade-up">
                        <span class="flex h-12 w-12 items-center justify-center rounded-2xl text-white {{ $item['color'] }}">
                            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="{{ $item['icon'] }}"/></svg>
                        </span>
                        <h3 class="mt-5 font-display text-xl font-semibold text-navy-900">{{ $item['title'] }}</h3>
                        <p class="mt-2 leading-relaxed text-navy-500">{{ $item['text'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- ============================ WHO CAN PARTICIPATE ============================ --}}
    @if ($categories->isNotEmpty())
        <section class="bg-white py-20 sm:py-24" aria-labelledby="who-title">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div class="max-w-2xl">
                        <p class="section-kicker">Who can participate</p>
                        <h2 id="who-title" class="section-title mt-3">There is a place for you.</h2>
                    </div>
                    @if ($event['registration_open'])
                        <a href="{{ route('registration.create') }}" class="btn-ghost self-start sm:self-auto">See all categories</a>
                    @endif
                </div>

                <div class="mt-10 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($categories as $category)
                        @php($tag = $category->entity_type === 'corporate' ? 'Organisation' : 'Individual')
                        <a href="{{ $event['registration_open'] ? route('registration.details', $category) : route('status.lookup') }}"
                           class="surface group flex flex-col p-6 transition hover:-translate-y-0.5 hover:border-emerald-500">
                            <span class="text-xs font-semibold uppercase tracking-[0.18em] text-turquoise-600">{{ $tag }}</span>
                            <h3 class="mt-2 font-display text-xl font-semibold text-navy-900 group-hover:text-emerald-600">{{ $category->name }}</h3>
                            @if ($category->description)
                                <p class="mt-2 flex-1 text-sm leading-relaxed text-navy-500">{{ $category->description }}</p>
                            @endif
                            <span class="mt-5 inline-flex items-center gap-1 text-sm font-semibold text-emerald-600">
                                {{ $event['registration_open'] ? 'Register' : 'Registration closed' }}
                                <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>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ============================ PROGRAMME HIGHLIGHTS ============================ --}}
    @if ($highlights->isNotEmpty())
        <section class="mesh-light py-20 sm:py-24" aria-labelledby="programme-title">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
                    <div class="max-w-2xl">
                        <p class="section-kicker">Programme highlights</p>
                        <h2 id="programme-title" class="section-title mt-3">A taste of what is on stage.</h2>
                    </div>
                    <a href="{{ route('programme') }}" class="btn-ghost self-start sm:self-auto">Full programme</a>
                </div>

                <ol class="mt-10 divide-y divide-navy-100 border-y border-navy-100">
                    @foreach ($highlights as $session)
                        @php($when = $session->starts_at->timezone($tz))
                        <li class="grid gap-2 py-6 sm:grid-cols-[11rem_1fr] sm:gap-8">
                            <div>
                                <p class="font-display text-lg font-semibold text-emerald-600">{{ $when->format('H:i') }}@if ($session->ends_at) <span class="text-navy-200">–</span> {{ $session->ends_at->timezone($tz)->format('H:i') }}@endif</p>
                                <p class="text-sm text-navy-500">{{ $when->format('l, j F') }}</p>
                            </div>
                            <div>
                                <h3 class="font-display text-xl font-semibold text-navy-900">{{ $session->title }}</h3>
                                @if ($session->description)
                                    <p class="mt-1 max-w-2xl text-navy-500">{{ \Illuminate\Support\Str::limit($session->description, 180) }}</p>
                                @endif
                                @if ($session->speaker_name || $session->room)
                                    <p class="mt-2 text-sm font-medium text-navy-500">
                                        {{ collect([$session->speaker_name, $session->room])->filter()->implode(' · ') }}
                                    </p>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ol>
            </div>
        </section>
    @endif

    {{-- ============================ SPONSORS ============================ --}}
    @if ($sponsors->isNotEmpty())
        <section class="bg-white py-16 sm:py-20" aria-labelledby="sponsors-title">
            <div class="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">
                <p class="section-kicker">Our partners</p>
                <h2 id="sponsors-title" class="section-title mt-3">Backed by institutions that believe in youth.</h2>
                <ul class="mt-10 flex flex-wrap items-center justify-center gap-x-10 gap-y-6">
                    @foreach ($sponsors as $sponsor)
                        <li>
                            @if ($sponsor->website)
                                <a href="{{ $sponsor->website }}" target="_blank" rel="noopener noreferrer" class="block opacity-80 transition hover:opacity-100">
                            @endif
                            @if ($sponsor->logo_path)
                                <img src="{{ asset('storage/'.$sponsor->logo_path) }}" alt="{{ $sponsor->name }}" class="h-12 w-auto max-w-[9rem] object-contain" loading="lazy">
                            @else
                                <span class="font-display text-xl font-semibold text-navy-500">{{ $sponsor->name }}</span>
                            @endif
                            @if ($sponsor->website)
                                </a>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        </section>
    @endif

    {{-- ============================ FAQ TEASERS ============================ --}}
    @if ($faqs->isNotEmpty())
        <section class="mesh-light py-20 sm:py-24" aria-labelledby="faq-title">
            <div class="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-[1fr_1.6fr] lg:px-8">
                <div>
                    <p class="section-kicker">Good to know</p>
                    <h2 id="faq-title" class="section-title mt-3">Quick answers.</h2>
                    <a href="{{ route('faq') }}" class="btn-ghost mt-6">All questions</a>
                </div>
                <div class="space-y-3">
                    @foreach ($faqs as $faq)
                        <details class="surface group p-5" @if ($loop->first) open @endif>
                            <summary class="flex cursor-pointer list-none items-center justify-between gap-4 font-semibold text-navy-900">
                                {{ $faq->question }}
                                <svg class="h-5 w-5 shrink-0 text-emerald-500 transition group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"/></svg>
                            </summary>
                            <p class="mt-3 leading-relaxed text-navy-500">{{ $faq->answer }}</p>
                        </details>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    {{-- ============================ FINAL CTA ============================ --}}
    <section class="hero-wash relative overflow-hidden text-white">
        <x-geo-pattern id="geo-cta" />
        <div class="relative mx-auto max-w-4xl px-4 py-20 text-center sm:px-6 sm:py-24">
            <h2 class="font-display text-3xl font-semibold tracking-tight sm:text-5xl">Be in the room where it happens.</h2>
            <p class="mx-auto mt-4 max-w-xl text-lg text-white/80">Registration takes about five minutes. Bring your ideas, your questions and your ambition.</p>
            <div class="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
                @if ($event['registration_open'])
                    <a href="{{ route('registration.create') }}" class="btn-primary !bg-gold-500 !text-navy-900 hover:!bg-gold-400 sm:px-8 sm:py-4 sm:text-base">Register now</a>
                @endif
                <a href="{{ route('status.lookup') }}" class="btn-secondary sm:px-8 sm:py-4 sm:text-base">Check my status</a>
            </div>
        </div>
    </section>
@endsection