@php
    $seoEventTitle = $event->title . ' — ' . config('app.name');
    $seoEventDesc  = $event->tagline
        ? Str::limit($event->tagline, 155)
        : ($event->description ? Str::limit(strip_tags($event->description), 155) : null);
    $jsonLdEvent = array_filter([
        '@context'    => 'https://schema.org',
        '@type'       => 'Event',
        'name'        => $event->title,
        'description' => $seoEventDesc,
        'startDate' => $event->starts_at?->toAtomString(),
        'endDate'   => $event->ends_at?->toAtomString(),
        'url'         => route('events.show', $event),
        'location'    => $event->location ? [
            '@type' => 'Place',
            'name'  => $event->location,
        ] : ['@type' => 'VirtualLocation'],
        'organizer'   => $event->organiser ? [
            '@type' => 'Person',
            'name'  => $event->organiser->name,
        ] : null,
        'eventStatus'     => 'https://schema.org/EventScheduled',
        'eventAttendanceMode' => 'https://schema.org/OfflineEventAttendanceMode',
    ]);
@endphp
<x-app-layout :title="$seoEventTitle" :description="$seoEventDesc ?? ''">
@push('seo')
<script type="application/ld+json">{!! json_encode($jsonLdEvent, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) !!}</script>
@endpush
    {{-- No header slot — hero takes full width --}}

    @php
        $organiser   = $event->organiser;
        $proProfile  = $organiser->proProfile ?? null;
        $embed       = request()->boolean('embed');
        $accentHex   = $event->accent_color ?? null;
        $hasBg       = $event->bg_gradient_from || $event->bg_color;

        // Build CSS for page background override (only applied in embed or when bg set)
        if ($event->bg_gradient_from && $event->bg_gradient_to) {
            $pageBgStyle = "background: linear-gradient(135deg, {$event->bg_gradient_from} 0%, {$event->bg_gradient_to} 100%)";
        } elseif ($event->bg_color) {
            $pageBgStyle = "background-color: {$event->bg_color}";
        } else {
            $pageBgStyle = null;
        }

        $modalityIcons = [
            'in_person' => '📍',
            'online'    => '💻',
            'hybrid'    => '🔀',
        ];
        $typeLabels = [
            'fun_activity'   => __('Fun activity'),
            'online_meeting' => __('Online meeting'),
            'peer_support'   => __('Peer support'),
            'lecture'        => __('Lecture / Talk'),
            'workshop'       => __('Workshop'),
            'walk'           => __('Walk / Hike'),
            'game_night'     => __('Game night'),
            'creative'       => __('Creative / Arts'),
            'food_drinks'    => __('Food & drinks'),
            'sport'          => __('Sport & movement'),
            'meet_greet'     => __('Meet & greet'),
        ];
        $spotsLeft = $event->spotsLeft();

        // Card header tint — derived from event background color
        $primaryHex = $event->bg_gradient_from ?? $event->bg_color ?? null;
        $ecHeaderBg = $ecHeaderDarkBg = null;
        if ($primaryHex) {
            $phex = ltrim($primaryHex, '#');
            $pr = hexdec(substr($phex, 0, 2));
            $pg = hexdec(substr($phex, 2, 2));
            $pb = hexdec(substr($phex, 4, 2));
            // Light mode: 28% color blended with white
            $lhr = (int) round($pr * 0.28 + 255 * 0.72);
            $lhg = (int) round($pg * 0.28 + 255 * 0.72);
            $lhb = (int) round($pb * 0.28 + 255 * 0.72);
            $ecHeaderBg = "rgb($lhr,$lhg,$lhb)";
            // Determine if tint is dark enough to need white text
            $ecHeaderLight = (0.299 * $lhr + 0.587 * $lhg + 0.114 * $lhb) / 255 > 0.5;
            // Dark mode: 38% color blended with gray-800 (31,41,55)
            $dhr = (int) round($pr * 0.38 + 31 * 0.62);
            $dhg = (int) round($pg * 0.38 + 41 * 0.62);
            $dhb = (int) round($pb * 0.38 + 55 * 0.62);
            $ecHeaderDarkBg = "rgb($dhr,$dhg,$dhb)";
            $ecHeaderDarkLight = (0.299 * $dhr + 0.587 * $dhg + 0.114 * $dhb) / 255 > 0.45;
        }
    @endphp

    <style>
        .rtf-area ul { list-style-type: disc; padding-left: 1.5rem; margin: .25rem 0 }
        .rtf-area ol { list-style-type: decimal; padding-left: 1.5rem; margin: .25rem 0 }
        .rtf-area li { margin: .1rem 0 }
        .rtf-area b, .rtf-area strong { font-weight: 600 }
        .rtf-area i, .rtf-area em { font-style: italic }
        .rtf-area p { margin-bottom: .25rem }
        @if ($ecHeaderBg)
        .ec-header { background: {{ $ecHeaderBg }} }
        html.dark .ec-header { background: {{ $ecHeaderDarkBg }} }
        .ec-header hr { border-color: rgba(0,0,0,0.12) }
        html.dark .ec-header hr { border-color: rgba(255,255,255,0.12) }
        @endif
    </style>
    @if ($pageBgStyle)
        <style>body { {!! $pageBgStyle !!} !important; min-height:100vh }</style>
    @endif

    @if ($embed)
        <div class="max-w-4xl mx-auto px-4 pt-2 flex justify-end">
            <a href="{{ route('events.show', $event) }}" target="_blank"
               class="text-xs px-3 py-1 rounded-full bg-black/20 text-white hover:bg-black/30 transition">
                {{ __('Open in ND-Link') }} ↗
            </a>
        </div>
    @endif

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-28">

        {{-- Flash messages --}}
        @foreach ([
            'registered'              => __('You are registered!'),
            'registration-cancelled'  => __('Your registration has been cancelled.'),
            'event-created'           => __('Event created successfully.'),
            'event-updated'           => __('Event updated.'),
        ] as $key => $msg)
            @if (session('status') === $key)
                <div class="mt-4 text-sm text-green-600 bg-green-50 border border-green-200 rounded-lg px-4 py-3">{{ $msg }}</div>
            @endif
        @endforeach
        @if (session('error'))
            <div class="mt-4 text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-4 py-3">{{ session('error') }}</div>
        @endif
        @foreach (['invite-accepted' => __('You are going!'), 'invite-declined' => __('You have declined the invitation.')] as $key => $msg)
            @if (session('status') === $key)
                <div class="mt-4 text-sm text-green-600 bg-green-50 border border-green-200 rounded-lg px-4 py-3">{{ $msg }}</div>
            @endif
        @endforeach

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- A. Cover image (smaller)                                --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($event->cover_image)
            <div class="mt-2 rounded-2xl overflow-hidden shadow-sm" style="aspect-ratio:1200/628">
                <img src="{{ Storage::disk('public')->url($event->cover_image) }}"
                     alt="{{ $event->title }}"
                     class="w-full h-full object-cover">
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- B. Event info card (FIRST) — naam, datum, locatie       --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        <div class="mt-4 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">

            {{-- Card header: titel, tagline, organisator, badges --}}
            <div class="ec-header px-5 pt-5 pb-4">
                <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white leading-tight">{{ $event->title }}</h1>
                @if ($event->tagline)
                    <p class="text-base mt-1 italic text-gray-500 dark:text-gray-400"
                       @if($ecHeaderBg && !$ecHeaderLight) style="color:rgba(255,255,255,0.75)" @endif>{{ $event->tagline }}</p>
                @endif
                <p class="text-sm mt-2 text-gray-500 dark:text-gray-400"
                   @if($ecHeaderBg && !$ecHeaderLight) style="color:rgba(255,255,255,0.75)" @endif>
                    {{ __('By') }} <a href="{{ route('profiles.show', $organiser) }}"
                       class="hover:underline font-medium text-gray-700 dark:text-gray-300"
                       @if($ecHeaderBg && !$ecHeaderLight) style="color:#fff" @endif>{{ $proProfile?->organization_name ?? $organiser->name }}</a>
                </p>
                <hr class="my-3">
                <div class="flex flex-wrap gap-1.5">
                    @if ($event->nd_friendly)
                        <span class="text-xs px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300 border border-green-200 font-medium">🧠 {{ __('ND-friendly') }}</span>
                    @endif
                    @if ($event->event_type && isset($typeLabels[$event->event_type]))
                        <span class="text-xs px-2 py-0.5 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 border border-indigo-100">{{ $typeLabels[$event->event_type] }}</span>
                    @endif
                    @if ($event->event_modality)
                        <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">{{ $modalityIcons[$event->event_modality] ?? '' }} {{ __($event->event_modality) }}</span>
                    @endif
                    @if ($event->is_private)
                        <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-500">🔒 {{ __('Private') }}</span>
                    @endif
                    @if ($event->group)
                        <a href="{{ route('groups.show', $event->group) }}"
                           class="text-xs px-2 py-0.5 rounded-full bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 border border-purple-100 hover:bg-purple-100 transition">
                            👥 {{ $event->group->name }}
                        </a>
                    @endif
                </div>
            </div>

            <div class="px-5 py-4 grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3 text-sm border-t border-gray-100 dark:border-gray-700">
                {{-- Date & time --}}
                <div class="flex items-start gap-2.5">
                    <span class="text-base mt-0.5 shrink-0">📅</span>
                    <div>
                        <p class="font-semibold text-gray-800 dark:text-gray-100">{{ $event->starts_at->translatedFormat('l j F Y') }}</p>
                        <p class="text-gray-500 dark:text-gray-400 text-xs">
                            {{ $event->starts_at->format('H:i') }}
                            @if ($event->ends_at)
                                – {{ $event->ends_at->format('H:i') }}
                                @if ($event->ends_at->isNextDay($event->starts_at))
                                    ({{ $event->ends_at->translatedFormat('j F') }})
                                @endif
                            @endif
                        </p>
                    </div>
                </div>

                {{-- Location + map link --}}
                @if ($event->location || $event->address)
                    <div class="flex items-start gap-2.5">
                        <span class="text-base mt-0.5 shrink-0 ml-1 mr-1">📍</span>
                        <div>
                            @if ($event->location)
                                <p class="font-semibold text-gray-800 dark:text-gray-100">{{ $event->location }}</p>
                            @endif
                            @if ($event->address)
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $event->address }}</p>
                            @endif
                            @php $mapQuery = urlencode(trim(($event->address ?? '') . ' ' . ($event->location ?? ''))); @endphp
                            @if ($mapQuery)
                                <a href="https://www.google.com/maps/search/?api=1&query={{ $mapQuery }}"
                                   target="_blank" rel="noopener"
                                   class="text-xs text-indigo-600 dark:text-indigo-400 hover:underline mt-0.5 inline-block">
                                    🗺 {{ __('Show on map') }}
                                </a>
                            @endif
                        </div>
                    </div>
                @endif

                {{-- Online URL --}}
                @if ($event->online_url && in_array($event->event_modality, ['online', 'hybrid']))
                    <div class="flex items-start gap-2.5">
                        <span class="text-base mt-0.5 shrink-0">💻</span>
                        <div>
                            <p class="font-semibold text-gray-800 dark:text-gray-100">{{ __('Online') }}</p>
                            <a href="{{ $event->online_url }}" target="_blank" rel="noopener"
                               class="text-xs text-indigo-600 hover:underline break-all">{{ $event->online_url }}</a>
                        </div>
                    </div>
                @endif

                {{-- Contact --}}
                @if ($event->contact_email)
                    <div class="flex items-start gap-2.5">
                        <span class="text-base mt-0.5 shrink-0">✉️</span>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ __('Contact') }}</p>
                            <a href="mailto:{{ $event->contact_email }}"
                               class="font-semibold text-gray-800 dark:text-gray-100 hover:underline text-sm">{{ $event->contact_email }}</a>
                        </div>
                    </div>
                @endif

                {{-- Website --}}
                @if ($event->website_url)
                    <div class="flex items-start gap-2.5">
                        <span class="text-base mt-0.5 shrink-0">🌐</span>
                        <div>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ __('Website') }}</p>
                            <a href="{{ $event->website_url }}" target="_blank" rel="noopener"
                               class="font-semibold text-gray-800 dark:text-gray-100 hover:underline text-sm break-all">{{ $event->website_url }}</a>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- C. Organiser card                                       --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        <div class="mt-4 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
            {{-- Header: avatar + name --}}
            <div class="ec-header px-5 pt-5 pb-4 flex items-start gap-3">
                @if ($organiser->primaryPhoto)
                    <img src="{{ $organiser->primaryPhoto->avatarUrl() }}" alt="{{ $organiser->name }}"
                         class="w-14 h-14 rounded-full object-cover ring-2 ring-white/50 shadow shrink-0">
                @elseif ($proProfile && $proProfile->logo_path)
                    <img src="{{ Storage::disk('public')->url($proProfile->logo_path) }}"
                         alt="{{ $proProfile->organization_name ?? $organiser->name }}"
                         class="w-14 h-14 rounded-xl object-contain border border-white/30 bg-white/80 p-1 shadow-sm shrink-0">
                @else
                    <div class="w-14 h-14 rounded-full flex items-center justify-center text-2xl font-bold text-white shadow ring-2 ring-white/30 shrink-0"
                         style="background-color:rgb(var(--a6))">
                        {{ strtoupper(substr($organiser->name, 0, 1)) }}
                    </div>
                @endif
                <div class="min-w-0">
                    <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                        <a href="{{ route('profiles.show', $organiser) }}"
                           class="font-bold text-gray-900 dark:text-white hover:underline">
                            {{ $proProfile?->organization_name ?? $organiser->name }}
                        </a>
                        @if ($proProfile?->organization_name)
                            <span class="text-sm text-gray-500 dark:text-gray-400">– {{ $organiser->name }}</span>
                        @endif
                        <span class="text-xs text-gray-400">#{{ $organiser->id }}</span>
                        @if ($isOrganiser)
                            <span class="text-xs px-2 py-0.5 rounded-full bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400">{{ __('You') }}</span>
                        @endif
                    </div>
                    @if ($proProfile && ($proProfile->city || $proProfile->country))
                        <p class="text-xs text-gray-400 mt-0.5">
                            📍 {{ collect([$proProfile->city, $proProfile->country])->filter()->implode(', ') }}
                        </p>
                    @endif
                </div>
            </div>

            {{-- Body: contact info + links --}}
            <div class="px-5 py-3 space-y-1.5">
                @if ($proProfile && $proProfile->contact_email)
                    <p class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
                        <span>✉️</span>
                        <a href="mailto:{{ $proProfile->contact_email }}" class="hover:underline break-all">{{ $proProfile->contact_email }}</a>
                    </p>
                @endif
                @if ($proProfile && $proProfile->website)
                    <p class="flex items-center gap-1.5 text-xs">
                        <span>🌐</span>
                        <a href="{{ $proProfile->website }}" target="_blank" rel="noopener" class="text-indigo-600 dark:text-indigo-400 hover:underline break-all">{{ $proProfile->website }}</a>
                    </p>
                @endif
                <div class="flex flex-wrap gap-2 pt-1">
                    <a href="{{ route('events.index', ['organiser' => $organiser->id]) }}"
                       class="text-xs px-3 py-1 rounded-full border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition">
                        📅 {{ __('All events by :name', ['name' => $proProfile?->organization_name ?? $organiser->name]) }}
                    </a>
                    @if ($proProfile)
                        <a href="{{ route('pro.show', $proProfile) }}"
                           class="text-xs px-3 py-1 rounded-full border border-amber-200 text-amber-700 hover:bg-amber-50 transition">
                            {{ __('View profile') }}
                        </a>
                    @endif
                </div>
            </div>

            {{-- Organiser action buttons — own row, always below info --}}
            @if ($isOrganiser)
                <div class="px-5 py-3 border-t border-gray-100 dark:border-gray-700 flex flex-wrap gap-2">
                    @if ($event->registration_required)
                        <a href="{{ route('events.registrations', $event) }}"
                           class="relative px-3 py-1.5 text-xs rounded-lg border text-white font-semibold transition hover:opacity-90"
                           style="background-color:rgb(var(--a6)); border-color:rgb(var(--a6))">
                            📊 {{ __('Registrations') }}
                            @if ($confirmedCount > 0)
                                <span class="ml-1 bg-white/25 rounded px-1">{{ $confirmedCount }}</span>
                            @endif
                        </a>
                    @endif
                    <a href="{{ route('events.edit', $event) }}"
                       class="px-3 py-1.5 text-xs rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 transition">
                        ✏️ {{ __('Edit') }}
                    </a>
                    @if (auth()->user()?->is_pro)
                        <a href="{{ route('events.coupons.index', $event) }}"
                           class="px-3 py-1.5 text-xs rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700 transition">
                            🏷 {{ __('Discount codes') }}
                        </a>
                    @endif
                    <a href="{{ route('events.copy', $event) }}"
                       class="px-3 py-1.5 text-xs rounded-lg border border-indigo-200 text-indigo-600 hover:bg-indigo-50 dark:border-indigo-700 dark:text-indigo-400 dark:hover:bg-indigo-900/30 transition">
                        📋 {{ __('Copy') }}
                    </a>
                    <form method="POST" action="{{ route('events.destroy', $event) }}"
                          onsubmit="return confirm('{{ __('Are you sure you want to cancel this event? All registered attendees will be notified and paid registrations will be refunded. Refund processing costs will be charged to you.') }}')">
                        @csrf @method('DELETE')
                        <button type="submit"
                                class="px-3 py-1.5 text-xs rounded-lg border border-red-300 text-red-600 hover:bg-red-50 transition">
                            🗑 {{ __('Delete') }}
                        </button>
                    </form>
                </div>
            @endif
        </div>

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- D. Description + What to expect                        --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($event->description || $event->what_to_expect)
            <div class="mt-5 space-y-5">
                @if ($event->description)
                    <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
                        <div class="ec-header px-5 py-3">
                            <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-sm uppercase tracking-wide">{{ __('About this event') }}</h3>
                        </div>
                        <div class="rtf-area text-sm text-gray-700 dark:text-gray-300 leading-relaxed px-5 py-4">
                            {!! str_contains($event->description, '<') ? $event->description : nl2br(e($event->description)) !!}
                        </div>
                    </div>
                @endif
                @if ($event->what_to_expect)
                    <div class="bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
                        <div class="ec-header px-5 py-3">
                            <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-sm uppercase tracking-wide">{{ __('What to expect') }}</h3>
                        </div>
                        <div class="rtf-area text-sm text-gray-700 dark:text-gray-300 leading-relaxed px-5 py-4">
                            {!! str_contains($event->what_to_expect, '<') ? $event->what_to_expect : nl2br(e($event->what_to_expect)) !!}
                        </div>
                    </div>
                @endif
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- E. ND profile + sensory info                            --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @php
        $hasSensory = $event->sensory_noise || $event->sensory_lighting || $event->sensory_crowd
                   || $event->communication_style || $event->social_pressure
                   || $event->quiet_space || $event->sensory_notes;
        @endphp
        @if ($event->nd_friendly || $hasSensory)
            <div class="mt-5 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
                <div class="ec-header px-5 py-3">
                    <h3 class="font-semibold text-sm text-gray-700 dark:text-gray-200 uppercase tracking-wide">🧠 {{ __('ND profile') }}</h3>
                </div>
                <div class="px-5 py-4">

                {{-- ND-friendly badge --}}
                @if ($event->nd_friendly)
                    <div class="flex items-center gap-2 mb-4">
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-sm font-semibold bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300 border border-green-300 dark:border-green-700">
                            🧠 {{ __('ND-friendly') }}
                        </span>
                        <span class="text-xs text-gray-400">{{ __('This event is welcoming and adapted for neurodivergent participants.') }}</span>
                    </div>
                @endif

                @if ($hasSensory)
                    <h3 class="font-semibold text-sm text-gray-700 dark:text-gray-200 mb-3 uppercase tracking-wide">{{ __('Sensory profile') }}</h3>

                    @php
                    $sensoryDisplay = [
                        'sensory_noise' => [
                            'icon' => '🔊', 'label' => __('Noise'),
                            'values' => ['quiet' => ['label' => __('Quiet'), 'color' => 'green'],
                                         'moderate' => ['label' => __('Moderate'), 'color' => 'amber'],
                                         'loud' => ['label' => __('Loud'), 'color' => 'red']],
                        ],
                        'sensory_lighting' => [
                            'icon' => '💡', 'label' => __('Lighting'),
                            'values' => ['dim' => ['label' => __('Dim'), 'color' => 'blue'],
                                         'normal' => ['label' => __('Normal'), 'color' => 'gray'],
                                         'bright' => ['label' => __('Bright'), 'color' => 'amber']],
                        ],
                        'sensory_crowd' => [
                            'icon' => '👥', 'label' => __('Crowd'),
                            'values' => ['small' => ['label' => __('Small'), 'color' => 'green'],
                                         'medium' => ['label' => __('Medium'), 'color' => 'amber'],
                                         'large' => ['label' => __('Large'), 'color' => 'red']],
                        ],
                        'communication_style' => [
                            'icon' => '💬', 'label' => __('Communication'),
                            'values' => ['verbal' => ['label' => __('Verbal'), 'color' => 'indigo'],
                                         'written' => ['label' => __('Written'), 'color' => 'indigo'],
                                         'mixed' => ['label' => __('Mixed'), 'color' => 'indigo'],
                                         'open' => ['label' => __('Open / flexible'), 'color' => 'green']],
                        ],
                        'social_pressure' => [
                            'icon' => '🤝', 'label' => __('Social pressure'),
                            'values' => ['low' => ['label' => __('Low'), 'color' => 'green'],
                                         'medium' => ['label' => __('Medium'), 'color' => 'amber'],
                                         'high' => ['label' => __('High'), 'color' => 'red']],
                        ],
                    ];
                    $colorMap = [
                        'green' => 'bg-green-50 text-green-700 border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-700',
                        'amber' => 'bg-amber-50 text-amber-700 border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-700',
                        'red'   => 'bg-red-50 text-red-700 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-700',
                        'blue'  => 'bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-700',
                        'indigo'=> 'bg-indigo-50 text-indigo-700 border-indigo-200 dark:bg-indigo-900/30 dark:text-indigo-300 dark:border-indigo-700',
                        'gray'  => 'bg-gray-50 text-gray-700 border-gray-200 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600',
                    ];
                    @endphp

                    <div class="flex flex-wrap gap-2 mb-3">
                        @foreach ($sensoryDisplay as $field => $cfg)
                            @if ($event->$field)
                                @php $val = $cfg['values'][$event->$field] ?? null; @endphp
                                @if ($val)
                                    <span class="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-full border {{ $colorMap[$val['color']] }}">
                                        {{ $cfg['icon'] }} <strong>{{ $cfg['label'] }}:</strong> {{ $val['label'] }}
                                    </span>
                                @endif
                            @endif
                        @endforeach
                        @if ($event->quiet_space)
                            <span class="inline-flex items-center gap-1 text-xs px-2.5 py-1 rounded-full border {{ $colorMap['green'] }}">
                                🔕 {{ __('Quiet space available') }}
                            </span>
                        @endif
                    </div>

                    @if ($event->sensory_notes)
                        <p class="text-xs text-gray-500 dark:text-gray-400 italic">{{ $event->sensory_notes }}</p>
                    @endif
                @endif
                </div>{{-- /px-5 py-4 --}}
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- F. Registration section                                 --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($event->registration_required)
            <div id="event-registration" class="mt-5 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
                <div class="ec-header px-5 py-3">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100 text-sm uppercase tracking-wide">{{ __('Registration') }}</h3>
                </div>
                <div class="px-5 py-5">

                {{-- Capacity bar --}}
                @if ($event->max_attendees !== null && $isOrganiser)
                    @php $pct = min(100, round($confirmedCount / max(1, $event->max_attendees) * 100)); @endphp
                    <div class="mb-4">
                        <div class="flex justify-between text-xs text-gray-500 mb-1">
                            <span>{{ $confirmedCount }} / {{ $event->max_attendees }} {{ __('spots filled') }}</span>
                            <span>{{ $spotsLeft !== null && $spotsLeft > 0 ? trans_choice(':count spot left|:count spots left', $spotsLeft) : __('Fully booked') }}</span>
                        </div>
                        <div class="w-full bg-gray-100 dark:bg-gray-700 rounded-full h-2">
                            <div class="h-2 rounded-full transition-all"
                                 style="width:{{ $pct }}%; background-color:rgb(var(--a6))"></div>
                        </div>
                    </div>
                @endif

                {{-- Registration closes notice --}}
                @if ($event->registration_closes_at && now()->isBefore($event->registration_closes_at))
                    <p class="text-xs text-gray-400 mb-3">
                        ⏰ {{ __('Registration closes') }}: {{ $event->registration_closes_at->translatedFormat('j F Y H:i') }}
                    </p>
                @elseif ($event->registration_closes_at && now()->isAfter($event->registration_closes_at))
                    <p class="text-xs text-red-500 mb-3 font-semibold">{{ __('Registration has closed.') }}</p>
                @endif

                @php
                    $isPaidEvent      = $event->registration_price !== null && (float) $event->registration_price > 0;
                    $registrationOpen = ! ($event->registration_closes_at && now()->isAfter($event->registration_closes_at));
                    $fullyBooked      = $spotsLeft !== null && $spotsLeft <= 0;
                    $isAdminOrganiser = $organiser->hasAdminAccess();
                    // Admin organizers: never add service fee on top of ticket price
                    $buyerPrice       = $isPaidEvent
                        ? ($isAdminOrganiser
                            ? (float) $event->registration_price
                            : \App\Http\Controllers\EventRegistrationController::buyerAmount($event))
                        : 0;
                    $basePrice        = (float) ($event->registration_price ?? 0);
                    $serviceFeeAdded  = $isPaidEvent && ! $isAdminOrganiser && $event->service_fee_payer === 'buyer';
                @endphp

                @if ($hasPendingRegistration)
                    {{-- Payment started but not completed --}}
                    <div class="space-y-3">
                        <div class="flex items-center gap-2 text-sm font-medium text-amber-600 dark:text-amber-400">
                            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"/></svg>
                            {{ __('Payment not completed') }}
                        </div>
                        <p class="text-xs text-gray-500 dark:text-gray-400">{{ __('Your registration is reserved but not yet confirmed. Complete the payment to secure your spot.') }}</p>
                        <div class="flex items-center gap-3 flex-wrap">
                            <form method="POST" action="{{ route('events.register', $event) }}">
                                @csrf
                                <button type="submit"
                                        class="px-4 py-2 rounded-xl text-white text-sm font-semibold transition hover:opacity-90"
                                        style="background-color: var(--color-accent, #6366f1)">
                                    {{ __('Retry payment') }}
                                </button>
                            </form>
                            <form method="POST" action="{{ route('events.register.cancel', $event) }}">
                                @csrf @method('DELETE')
                                <button type="submit" class="text-xs text-gray-400 hover:text-red-500 underline transition">
                                    {{ __('Cancel registration') }}
                                </button>
                            </form>
                        </div>
                    </div>
                @elseif ($isRegistered)
                    {{-- Already registered --}}
                    <div class="flex items-center justify-between">
                        <span class="text-sm font-semibold text-green-600">✓ {{ __('You are registered') }}</span>
                        @auth
                            <form method="POST" action="{{ route('events.register.cancel', $event) }}">
                                @csrf @method('DELETE')
                                <button type="submit"
                                        class="text-xs text-gray-400 hover:text-red-500 underline transition">
                                    {{ __('Cancel registration') }}
                                </button>
                            </form>
                        @endauth
                    </div>
                @elseif (! $registrationOpen || $fullyBooked)
                    <p class="text-sm text-gray-400">{{ $fullyBooked ? __('This event is fully booked.') : __('Registration has closed.') }}</p>
                @elseif (! $isPaidEvent)
                    {{-- Free registration: auth users click directly, guests enter name + email --}}
                    @auth
                        <form method="POST" action="{{ route('events.register', $event) }}">
                            @csrf
                            <button type="submit"
                                    class="w-full sm:w-auto px-6 py-2.5 rounded-xl text-white font-semibold transition hover:opacity-90"
                                    style="background-color:rgb(var(--a6))">
                                {{ __('Register (free)') }}
                            </button>
                        </form>
                    @else
                        <form method="POST" action="{{ route('events.register', $event) }}" class="space-y-3">
                            @csrf
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">{{ __('Your name') }}</label>
                                    <input type="text" name="guest_name" required maxlength="100"
                                           value="{{ old('guest_name') }}"
                                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400">
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">{{ __('Your email') }}</label>
                                    <input type="email" name="guest_email" required maxlength="255"
                                           value="{{ old('guest_email') }}"
                                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400">
                                </div>
                            </div>
                            <button type="submit"
                                    class="w-full sm:w-auto px-6 py-2.5 rounded-xl text-white font-semibold transition hover:opacity-90"
                                    style="background-color:rgb(var(--a6))">
                                {{ __('Register for this event') }}
                            </button>
                        </form>
                    @endauth
                @else
                    {{-- Paid registration with coupon --}}
                    @auth
                        <div x-data="{
                                price: {{ $buyerPrice }},
                                coupon: '',
                                couponState: null,
                                couponError: '',
                                discounted: null,
                                loading: false,
                                get displayPrice() {
                                    return this.discounted !== null ? this.discounted : this.price.toFixed(2);
                                },
                                async validateCoupon() {
                                    if (!this.coupon.trim()) { this.couponState = null; this.discounted = null; return; }
                                    this.loading = true; this.couponError = '';
                                    try {
                                        const r = await fetch('{{ route('premium.coupon.validate') }}?code=' + encodeURIComponent(this.coupon) + '&plan=event&event_id={{ $event->id }}', {
                                            headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content, 'Accept': 'application/json' }
                                        });
                                        const d = await r.json();
                                        if (d.valid) {
                                            this.couponState = 'valid';
                                            this.discounted = d.type === 'percent'
                                                ? (this.price * (1 - d.value / 100)).toFixed(2)
                                                : Math.max(0.01, this.price - d.value).toFixed(2);
                                        } else { this.couponState = 'invalid'; this.couponError = '{{ __('Invalid or expired code.') }}'; this.discounted = null; }
                                    } catch { this.couponState = 'invalid'; this.couponError = '{{ __('Could not validate code.') }}'; }
                                    this.loading = false;
                                }
                            }">

                            <div class="flex items-center gap-4 mb-4">
                                <div>
                                    <p class="text-2xl font-bold text-gray-900 dark:text-white" x-text="'€' + displayPrice"></p>
                                    <p x-show="discounted !== null" class="text-xs text-gray-400 line-through">€{{ number_format($buyerPrice, 2, ',', '.') }}</p>
                                    @if ($isAdminOrganiser)
                                        <p class="text-xs text-green-600">✓ {{ __('Service cost included') }}</p>
                                    @elseif ($serviceFeeAdded)
                                        <p class="text-xs text-gray-400">
                                            {{ __('Incl. €:fee service fee', ['fee' => number_format($event->service_fee ?? config('services.ticketing.service_fee', 1.50), 2, ',', '.')]) }}
                                        </p>
                                    @endif
                                </div>
                            </div>

                            {{-- Coupon code --}}
                            <div class="flex gap-2 mb-4">
                                <input type="text" x-model="coupon" @input.debounce.600ms="validateCoupon()"
                                       placeholder="{{ __('Discount code') }}"
                                       class="flex-1 min-w-0 border rounded-lg px-3 py-2 text-sm uppercase tracking-wider dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400"
                                       :class="couponState === 'valid' ? 'border-green-400' : (couponState === 'invalid' ? 'border-red-400' : 'border-gray-300 dark:border-gray-600')" />
                                <button type="button" @click="validateCoupon()" :disabled="loading"
                                        class="shrink-0 px-4 py-2 rounded-lg text-sm font-semibold text-white transition hover:opacity-90 disabled:opacity-50"
                                        style="background-color:rgb(var(--a6))">
                                    {{ __('Apply') }}
                                </button>
                            </div>
                            <p x-show="couponState === 'valid'" class="text-xs text-green-600 mb-3">✓ {{ __('Discount applied') }}</p>
                            <p x-show="couponState === 'invalid'" class="text-xs text-red-500 mb-3" x-text="couponError"></p>

                            <form method="POST" action="{{ route('events.register', $event) }}" x-ref="payForm">
                                @csrf
                                <input type="hidden" name="coupon_code" :value="couponState === 'valid' ? coupon : ''">
                                <button type="submit"
                                        class="w-full sm:w-auto px-8 py-3 rounded-xl text-white font-bold text-base transition hover:opacity-90"
                                        style="background-color:rgb(var(--a6))">
                                    {{ __('Pay') }} <span x-text="'€' + displayPrice"></span>
                                </button>
                            </form>
                        </div>
                    @else
                        {{-- Guest: show price + name/email form, direct checkout without account --}}
                        <div class="flex items-center gap-4 mb-4">
                            <div>
                                <p class="text-2xl font-bold text-gray-900 dark:text-white">€{{ number_format($buyerPrice, 2, ',', '.') }}</p>
                                @if ($serviceFeeAdded)
                                    <p class="text-xs text-gray-400">
                                        {{ __('Incl. €:fee service fee', ['fee' => number_format($event->service_fee ?? config('services.ticketing.service_fee', 1.50), 2, ',', '.')]) }}
                                    </p>
                                @endif
                            </div>
                        </div>
                        <form method="POST" action="{{ route('events.register', $event) }}" class="space-y-3">
                            @csrf
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">{{ __('Your name') }}</label>
                                    <input type="text" name="guest_name" required maxlength="100"
                                           value="{{ old('guest_name') }}"
                                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400">
                                </div>
                                <div>
                                    <label class="block text-xs text-gray-500 dark:text-gray-400 mb-1">{{ __('Your email') }}</label>
                                    <input type="email" name="guest_email" required maxlength="255"
                                           value="{{ old('guest_email') }}"
                                           class="w-full border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-2 dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400">
                                </div>
                            </div>
                            <div class="flex gap-2">
                                <input type="text" name="coupon_code" maxlength="32"
                                       value="{{ old('coupon_code') }}"
                                       placeholder="{{ __('Discount code') }}"
                                       class="w-40 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm uppercase tracking-wider dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400">
                            </div>
                            <button type="submit"
                                    class="w-full sm:w-auto px-8 py-3 rounded-xl text-white font-bold text-base transition hover:opacity-90"
                                    style="background-color:rgb(var(--a6))">
                                {{ __('Register for this event') }} — €{{ number_format($buyerPrice, 2, ',', '.') }}
                            </button>
                        </form>
                    @endauth
                @endif
                </div>{{-- /px-5 py-5 --}}
            </div>
        @else
            {{-- No registration required: RSVP via invitation system --}}
            @auth
                @if (! $isOrganiser && $myInvite)
                    <div class="mt-5 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm px-5 py-4">
                        <h3 class="font-semibold text-gray-800 dark:text-gray-100 mb-3 text-sm">{{ __('Your invitation') }}</h3>
                        <div class="flex flex-wrap gap-3">
                            @if ($myInvite->status === 'invited')
                                <form method="POST" action="{{ route('events.accept', $event) }}">
                                    @csrf
                                    <button type="submit"
                                            class="px-5 py-2 text-sm rounded-xl text-white font-semibold transition hover:opacity-90"
                                            style="background-color:rgb(var(--a6))">
                                        {{ __('Accept') }}
                                    </button>
                                </form>
                                <form method="POST" action="{{ route('events.decline', $event) }}">
                                    @csrf
                                    <button type="submit"
                                            class="px-5 py-2 text-sm rounded-xl border border-gray-300 text-gray-600 hover:bg-gray-50 transition">
                                        {{ __("Can't go") }}
                                    </button>
                                </form>
                            @elseif ($myInvite->status === 'accepted')
                                <span class="text-sm text-green-600 font-medium">✓ {{ __('Going') }}</span>
                                <form method="POST" action="{{ route('events.decline', $event) }}">
                                    @csrf
                                    <button type="submit" class="text-xs text-gray-400 hover:text-red-500 transition underline">
                                        {{ __("Can't go anymore") }}
                                    </button>
                                </form>
                            @elseif ($myInvite->status === 'declined')
                                <span class="text-sm text-gray-400">{{ __('You declined this invitation.') }}</span>
                                <form method="POST" action="{{ route('events.accept', $event) }}">
                                    @csrf
                                    <button type="submit" class="text-xs text-gray-400 hover:text-green-600 transition underline">
                                        {{ __('Accept after all') }}
                                    </button>
                                </form>
                            @endif
                        </div>
                    </div>
                @endif
            @endauth
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- F. Attendees                                            --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($accepted->isNotEmpty())
            <div class="mt-5 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm overflow-hidden">
                <div class="ec-header px-5 py-3">
                    <h3 class="font-semibold text-sm text-gray-700 dark:text-gray-200 uppercase tracking-wide">
                        {{ __('Attendees') }} ({{ $accepted->count() }})
                    </h3>
                </div>
                <div class="px-5 py-4">
                <div class="flex flex-wrap gap-3">
                    @foreach ($accepted->take(12) as $inv)
                        @php $u = $inv->user; @endphp
                        <a href="{{ route('profiles.show', $u) }}" class="flex flex-col items-center gap-1 group w-14">
                            @if ($u->primaryPhoto)
                                <img src="{{ $u->primaryPhoto->avatarUrl() }}" alt="{{ $u->name }}"
                                     class="w-11 h-11 rounded-full object-cover group-hover:ring-2 transition"
                                     style="--tw-ring-color:rgb(var(--a6))">
                            @else
                                <div class="w-11 h-11 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-500">
                                    {{ strtoupper(substr($u->name, 0, 1)) }}
                                </div>
                            @endif
                            <span class="text-xs text-gray-500 dark:text-gray-400 truncate w-full text-center">{{ $u->name }}</span>
                        </a>
                    @endforeach
                    @if ($accepted->count() > 12)
                        <div class="w-11 h-11 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center text-xs font-semibold text-gray-500">
                            +{{ $accepted->count() - 12 }}
                        </div>
                    @endif
                </div>
                </div>{{-- /px-5 py-4 --}}
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- G. Notification toggle                                  --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @auth
            @php
                $notifyBg      = $ecHeaderBg   ?? null;
                $notifyText    = $notifyBg ? ($ecHeaderLight ? '#1f2937' : '#ffffff') : null;
                $notifyBgDark  = $ecHeaderDarkBg ?? null;
            @endphp
            <div class="mt-5 flex justify-center sm:justify-start"
                 x-data="{ following: {{ $isFollowing ? 'true' : 'false' }}, loading: false }">
                <button @click="if(!loading){ loading=true; fetch('{{ route('events.follow', $event) }}', { method:'POST', headers:{'X-CSRF-TOKEN':'{{ csrf_token() }}','Accept':'application/json'} }).then(r=>r.json()).then(d=>{following=d.following;loading=false}).catch(()=>loading=false) }"
                        :disabled="loading"
                        class="flex items-center gap-2 px-4 py-2 rounded-xl border text-sm font-medium transition disabled:opacity-50 {{ $notifyBg ? '' : '' }}"
                        @if($notifyBg)
                            style="background:{{ $notifyBg }}; color:{{ $notifyText }}; border-color:rgba(0,0,0,0.12)"
                            :style="following ? 'background:{{ $notifyBg }}; color:{{ $notifyText }}; border-color:rgba(0,0,0,0.25); box-shadow:0 0 0 2px {{ $notifyBg }}40' : 'background:{{ $notifyBg }}; color:{{ $notifyText }}; border-color:rgba(0,0,0,0.12)'"
                        @else
                            :class="following ? 'border-indigo-300 bg-indigo-50 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-300' : 'border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700'"
                        @endif>
                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                              d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
                    </svg>
                    <span x-text="following ? '{{ __('Notifications on') }}' : '{{ __('Notify me') }}'"></span>
                    <span x-show="following" style="display:none">✓</span>
                </button>
            </div>
        @endauth

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- I. Embed code (organiser only)                          --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($isOrganiser)
            <div class="mt-5 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm px-5 py-4"
                 x-data="{
                     copied: false,
                     lang: '{{ app()->getLocale() }}',
                     baseUrl: '{{ route('events.show', $event) }}',
                     get embedUrl()  { return this.baseUrl + '?embed=1&lang=' + this.lang; },
                     get embedCode() { return '<iframe src=\'' + this.embedUrl + '\' width=\'100%\' height=\'800\' frameborder=\'0\' style=\'border-radius:16px;overflow:hidden\' allowfullscreen></iframe>'; },
                 }">
                <h3 class="font-semibold text-sm text-gray-700 dark:text-gray-200 mb-2">{{ __('Embed on your website') }}</h3>
                <p class="text-xs text-gray-400 mb-2">{{ __('Copy this code and paste it into your website HTML.') }}</p>

                {{-- Language selector --}}
                <div class="flex items-center gap-1.5 mb-3">
                    <span class="text-xs text-gray-400 mr-1">{{ __('Language') }}:</span>
                    @foreach(['nl' => 'NL', 'en' => 'EN', 'fr' => 'FR', 'de' => 'DE', 'es' => 'ES'] as $code => $label)
                        <button @click="lang = '{{ $code }}'"
                                :class="lang === '{{ $code }}' ? 'bg-indigo-600 text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600'"
                                class="px-2 py-0.5 rounded text-xs font-medium transition-colors">
                            {{ $label }}
                        </button>
                    @endforeach
                </div>

                <div class="relative">
                    <code x-text="embedCode"
                          class="block text-xs bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 pr-16 break-all select-all text-gray-700 dark:text-gray-300"></code>
                    <button @click="navigator.clipboard.writeText(embedCode).then(() => { copied = true; setTimeout(() => copied = false, 2500) })"
                            class="absolute top-2 right-2 px-2 py-1 text-xs rounded bg-indigo-50 text-indigo-600 hover:bg-indigo-100 transition">
                        <span x-text="copied ? '✓' : '{{ __('Copy') }}'"></span>
                    </button>
                </div>
                <p class="text-xs text-gray-400 mt-2">
                    {{ __('Preview') }}:
                    <a :href="embedUrl" x-text="embedUrl" target="_blank" class="text-indigo-500 hover:underline"></a>
                </p>
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- I2. Kortingsaanvraag-link (organiser only)              --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($isOrganiser)
            @php
                $orgLabels      = \App\Models\ProCouponLabel::where('user_id', $event->user_id)->orderBy('name')->get();
                $baseRequestUrl = route('coupon-request.create');
            @endphp
            <div class="mt-5 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm px-5 py-4"
                 x-data="{
                     copied: false,
                     discount: 50,
                     scope: '{{ $event->coupon_label_id ? 'label' : 'organizer' }}',
                     currentLabelId: {{ $event->coupon_label_id ?? 'null' }},
                     organizerId: {{ $event->user_id }},
                     selectedLabels: {{ $event->coupon_label_id ? '[' . $event->coupon_label_id . ']' : '[]' }},
                     base: '{{ $baseRequestUrl }}',
                     get url() {
                         const p = new URLSearchParams();
                         if (this.scope === 'label' && this.currentLabelId) {
                             p.set('label', this.currentLabelId);
                         } else if (this.scope === 'organizer') {
                             p.set('organizer', this.organizerId);
                         } else if (this.scope === 'multi') {
                             if (this.selectedLabels.length === 0) return this.base;
                             if (this.selectedLabels.length === 1) {
                                 p.set('label', this.selectedLabels[0]);
                             } else {
                                 p.set('labels', this.selectedLabels.join(','));
                             }
                         }
                         p.set('discount', this.discount);
                         return this.base + '?' + p.toString();
                     },
                     toggle(id) {
                         const i = this.selectedLabels.indexOf(id);
                         if (i === -1) this.selectedLabels.push(id);
                         else this.selectedLabels.splice(i, 1);
                     },
                 }">
                <h3 class="font-semibold text-sm text-gray-700 dark:text-gray-200 mb-1">{{ __('Discount request link') }}</h3>
                <p class="text-xs text-gray-400 mb-3">{{ __('Share this link so visitors can request a personal discount code.') }}</p>

                {{-- % --}}
                <div class="flex items-center gap-2 mb-4">
                    <label class="text-xs text-gray-500 shrink-0">{{ __('Discount') }}:</label>
                    <input type="number" x-model.number="discount" min="1" max="100"
                           class="w-20 text-sm rounded-lg border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 py-1 px-2 focus:ring-indigo-400 focus:border-indigo-400">
                    <span class="text-xs text-gray-500">%</span>
                </div>

                {{-- Scope selector --}}
                <div class="space-y-2 mb-4 text-sm">
                    @if($event->coupon_label_id)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" x-model="scope" value="label" class="text-indigo-600">
                        <span class="text-gray-700 dark:text-gray-300">
                            {{ __('This event type only') }}
                            <span class="text-indigo-500 font-medium">({{ $event->couponLabel?->name }})</span>
                        </span>
                    </label>
                    @endif
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" x-model="scope" value="organizer" class="text-indigo-600">
                        <span class="text-gray-700 dark:text-gray-300">
                            {{ __('All events by') }} <span class="font-medium">{{ $event->user?->name }}</span>
                        </span>
                    </label>
                    @if($orgLabels->count() > 1)
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="radio" x-model="scope" value="multi" class="text-indigo-600">
                        <span class="text-gray-700 dark:text-gray-300">{{ __('Select event types') }}:</span>
                    </label>
                    <div x-show="scope === 'multi'" class="ml-6 space-y-1.5" style="display:none">
                        @foreach($orgLabels as $lbl)
                        <label class="flex items-center gap-2 cursor-pointer text-sm">
                            <input type="checkbox"
                                   :checked="selectedLabels.includes({{ $lbl->id }})"
                                   @change="toggle({{ $lbl->id }})"
                                   class="text-indigo-600 rounded">
                            <span class="text-gray-700 dark:text-gray-300">{{ $lbl->name }}</span>
                        </label>
                        @endforeach
                    </div>
                    @endif
                </div>

                {{-- URL preview + copy --}}
                <div class="relative">
                    <code x-text="url"
                          class="block text-xs bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg p-3 pr-16 break-all select-all text-gray-700 dark:text-gray-300"></code>
                    <button @click="navigator.clipboard.writeText(url).then(() => { copied = true; setTimeout(() => copied = false, 2500) })"
                            class="absolute top-2 right-2 px-2 py-1 text-xs rounded bg-indigo-50 text-indigo-600 hover:bg-indigo-100 transition">
                        <span x-text="copied ? '✓' : '{{ __('Copy') }}'"></span>
                    </button>
                </div>
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- J. Organiser invite panel (only for organiser)          --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($isOrganiser)
            <div class="mt-8 bg-white dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm px-6 py-5"
                 x-data="{ tab: 'user' }">
                <h3 class="font-semibold text-sm text-gray-700 dark:text-gray-200 mb-3">{{ __('Invite to event') }}</h3>

                @if (session('status') === 'group-invited')
                    <p class="text-xs text-green-600 mb-2">
                        {{ trans_choice(':count member invited.|:count members invited.', session('invited_count', 0)) }}
                    </p>
                @endif
                @error('invite')
                    <p class="text-xs text-red-500 mb-2">{{ $message }}</p>
                @enderror

                <div class="flex gap-1 mb-3 border-b border-gray-100 dark:border-gray-700">
                    <button @click="tab = 'user'"
                            :class="tab === 'user' ? 'border-b-2 text-indigo-600 font-semibold' : 'text-gray-400 hover:text-gray-600'"
                            class="px-3 pb-2 text-xs transition border-transparent">{{ __('User') }}</button>
                    <button @click="tab = 'group'"
                            :class="tab === 'group' ? 'border-b-2 text-indigo-600 font-semibold' : 'text-gray-400 hover:text-gray-600'"
                            class="px-3 pb-2 text-xs transition border-transparent">{{ __('Group') }}</button>
                </div>

                <div x-show="tab === 'user'">
                    <form method="POST" action="{{ route('events.invite', $event) }}" class="flex gap-2">
                        @csrf
                        <input type="number" name="user_id" placeholder="{{ __('User ID') }}" required
                               class="w-28 border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400" />
                        <button type="submit"
                                class="px-4 py-1.5 rounded-lg text-sm font-semibold text-white transition hover:opacity-90"
                                style="background-color:rgb(var(--a6))">{{ __('Invite') }}</button>
                    </form>
                </div>

                <div x-show="tab === 'group'">
                    @if ($inviteGroups->isEmpty())
                        <p class="text-xs text-gray-400">{{ __('You are not a member of any group.') }}</p>
                    @else
                        <form method="POST" action="{{ route('events.invite-group', $event) }}" class="flex gap-2">
                            @csrf
                            <select name="group_id" required
                                    class="flex-1 border border-gray-300 dark:border-gray-600 rounded-lg text-sm px-3 py-1.5 dark:bg-gray-700 dark:text-gray-100 focus:ring focus:ring-indigo-200 focus:border-indigo-400">
                                <option value="">{{ __('— select group —') }}</option>
                                @foreach ($inviteGroups as $g)
                                    <option value="{{ $g->id }}">{{ $g->name }}</option>
                                @endforeach
                            </select>
                            <button type="submit"
                                    class="px-4 py-1.5 rounded-lg text-sm font-semibold text-white transition hover:opacity-90"
                                    style="background-color:rgb(var(--a6))">{{ __('Invite') }}</button>
                        </form>
                    @endif
                </div>

                @if ($event->invitations->isNotEmpty())
                    <div class="mt-4 space-y-2">
                        @foreach ($event->invitations as $inv)
                            <div class="flex items-center gap-2 text-sm">
                                @if ($inv->user->primaryPhoto)
                                    <img src="{{ $inv->user->primaryPhoto->avatarUrl() }}" alt="{{ $inv->user->name }}"
                                         class="w-9 h-9 rounded-full object-cover shrink-0">
                                @else
                                    <div class="w-9 h-9 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center text-sm font-bold text-gray-500 shrink-0">
                                        {{ strtoupper(substr($inv->user->name, 0, 1)) }}
                                    </div>
                                @endif
                                <span class="flex-1 text-gray-700 dark:text-gray-300 truncate">{{ $inv->user->name }}</span>
                                <span class="text-xs px-2 py-0.5 rounded-full
                                    {{ $inv->status === 'accepted' ? 'bg-green-50 text-green-600' : ($inv->status === 'declined' ? 'bg-red-50 text-red-500' : 'bg-gray-100 text-gray-500') }}">
                                    {{ __($inv->status) }}
                                </span>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @endif

        {{-- ═══════════════════════════════════════════════════════ --}}
        {{-- H. Other events by same organiser                       --}}
        {{-- ═══════════════════════════════════════════════════════ --}}
        @if ($otherEvents->isNotEmpty())
            <div class="mt-8">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="font-semibold text-gray-800 dark:text-gray-100">
                        {{ __('More events by :name', ['name' => $organiser->name]) }}
                    </h3>
                    <a href="{{ route('events.index', ['organiser' => $organiser->id]) }}"
                       class="text-xs text-indigo-600 hover:underline">{{ __('All events') }} →</a>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @foreach ($otherEvents as $other)
                        <a href="{{ route('events.show', $other) }}"
                           class="bg-white dark:bg-gray-800 rounded-xl border border-gray-100 dark:border-gray-700 shadow-sm hover:shadow-md transition overflow-hidden group">
                            @if ($other->cover_image)
                                <div class="h-28 overflow-hidden">
                                    <img src="{{ Storage::disk('public')->url($other->cover_image) }}" alt="{{ $other->title }}"
                                         class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
                                </div>
                            @else
                                <div class="h-28 flex items-center justify-center"
                                     style="background:linear-gradient(135deg,rgb(var(--a5)),rgb(var(--a6)))">
                                    <span class="text-white font-bold text-sm px-3 text-center">{{ Str::limit($other->title, 40) }}</span>
                                </div>
                            @endif
                            <div class="p-3">
                                <p class="font-semibold text-xs text-gray-800 dark:text-gray-100 truncate">{{ $other->title }}</p>
                                <p class="text-xs text-gray-400 mt-0.5">{{ $other->starts_at->translatedFormat('j M Y') }}</p>
                                @if ($other->location)
                                    <p class="text-xs text-gray-400 truncate">📍 {{ $other->location }}</p>
                                @endif
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

    </div>

    @if (! $embed)
        @push('bottom-bar-buttons')
            {{-- Back --}}
            <a href="{{ url()->previous() === url()->current() ? route('events.index') : url()->previous() }}"
               class="bottom-bar-btn shrink-0 px-2.5 sm:px-4 py-1.5 sm:py-2 rounded-lg text-sm font-semibold flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
                </svg>
                <span class="hidden xs:inline">{{ __('Back') }}</span>
            </a>

            {{-- Share --}}
            <div x-data="{ copied: false }" class="shrink-0">
                <button @click="navigator.clipboard.writeText(window.location.href).then(() => { copied = true; setTimeout(() => copied = false, 2500) })"
                        class="bottom-bar-btn px-2.5 sm:px-4 py-1.5 sm:py-2 rounded-lg text-sm font-semibold flex items-center gap-1">
                    <svg class="h-4 w-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                    </svg>
                    <span x-text="copied ? '{{ __('Copied!') }}' : '{{ __('Share') }}'"></span>
                </button>
            </div>

            {{-- Register / registered state --}}
            @if ($event->registration_required && $registrationOpen && ! $fullyBooked && ! $isOrganiser)
                @if ($isRegistered)
                    <span class="shrink-0 px-2.5 sm:px-4 py-1.5 text-sm font-semibold text-white/60">✓ <span class="hidden sm:inline">{{ __('You are registered') }}</span></span>
                @else
                    <a href="#event-registration"
                       class="bottom-bar-btn-primary shrink-0 px-2.5 sm:px-5 py-1.5 sm:py-2 rounded-lg text-sm font-bold text-white transition hover:opacity-90 flex items-center gap-1 whitespace-nowrap"
                       style="max-width: 48vw">
                        <span class="truncate">
                            {{ __('Register') }}@if($isPaidEvent) &nbsp;<span class="hidden xs:inline">{{ __('for this event') }}&nbsp;</span>€{{ number_format($buyerPrice, 2, ',', '.') }}@endif
                        </span>
                    </a>
                @endif
            @endif

            {{-- Help --}}
            <div class="shrink-0">
                <x-page-help title="Events">{{ __('This is the public event page. Use the Share button to copy the link and share it via e-mail or social media. You can also embed this page on your own website using the iframe code (visible to the organiser). Registered participants receive event reminders when you enable notifications.') }}</x-page-help>
            </div>
        @endpush
    @endif
</x-app-layout>