@php
    $images = $event->allPublishedImages();
    $eventFirstImage = $event->firstImage();
    $heroImages = $images->isNotEmpty() ? $images : collect(array_filter([$eventFirstImage]));
    $ogImage = $eventFirstImage ? $eventFirstImage->thumbnail(1200, 630) : asset('images/hero.png');

    $leadBand = $event->bands->first();
    $gigTitle = $leadBand 
        ? $leadBand->name . ($event->event_date ? ' (' . $event->event_date->format('jS M Y') . ')' : '') 
        : ($event->name ?? 'Live Gig');

    $cleanDesc = trim(strip_tags($event->description ?? ''));
    if (!empty($cleanDesc)) {
        $seoDescription = \Illuminate\Support\Str::limit($cleanDesc, 155);
    } else {
        $bandNames = $event->bands->pluck('name')->join(', ');
        $venueName = $event->venue->name ?? 'Fibbers, York';
        $dateStr = $event->event_date ? $event->event_date->format('l jS F Y') : 'Date TBA';
        $seoDescription = "Live gig archive: " . ($bandNames ?: 'Live artists') . " performing at {$venueName} on {$dateStr}. View gig details, lineups, and photo archive.";
    }

    $eventSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'MusicEvent',
        'name' => ($leadBand ? $leadBand->name . ' live at ' . ($event->venue->name ?? 'Fibbers') : ($event->name ?? 'Live Gig')),
        'startDate' => $event->event_date ? $event->event_date->toDateString() : null,
        'location' => [
            '@type' => 'MusicVenue',
            'name' => $event->venue->name ?? 'Fibbers',
            'address' => [
                '@type' => 'PostalAddress',
                'addressLocality' => 'York',
                'addressCountry' => 'GB',
            ],
        ],
        'url' => route('gigs.show', $event),
    ];
    if ($eventFirstImage) {
        $eventSchema['image'] = $ogImage;
    }
    if ($event->bands->isNotEmpty()) {
        $eventSchema['performer'] = $event->bands->map(fn($b) => [
            '@type' => 'MusicGroup',
            'name' => $b->name,
            'url' => route('bands.show', $b),
        ])->values()->all();
    }
@endphp

<x-main-layout 
    :title="$gigTitle" 
    :description="$seoDescription" 
    :image="$ogImage" 
    type="music.event"
    :schema="$eventSchema"
>
    <div class="relative min-h-[50vh] flex items-end py-20 overflow-hidden" x-data="{ 
        activeBg: 0, 
        bgImages: {{ $heroImages->map(fn($img) => $img->thumbnail(1920, 1080))->values()->toJson() }},
        init() {
            if (this.bgImages.length > 1) {
                setInterval(() => {
                    this.activeBg = (this.activeBg + 1) % this.bgImages.length;
                }, 5000);
            }
        }
    }">
        <div class="absolute inset-0 z-0">
            <template x-for="(img, index) in bgImages" :key="index">
                <div x-show="activeBg === index" 
                     x-transition:enter="transition opacity-100 duration-1000"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     x-transition:leave="transition opacity-0 duration-1000"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0"
                     class="absolute inset-0 overflow-hidden">
                    <img :src="img" alt="{{ addslashes($gigTitle) }} live at Fibbers" class="w-full h-full object-cover object-top origin-top opacity-50 transform scale-105">
                </div>
            </template>
            @if($heroImages->isEmpty())
                <div class="absolute inset-0 bg-grunge opacity-10"></div>
            @endif
            <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a]/20 to-transparent"></div>
        </div>

        <div class="relative z-20 max-w-7xl mx-auto px-4 w-full">
            <div class="max-w-4xl">
                @if($event->event_date)
                    <div class="mb-4 sm:mb-6 inline-flex items-stretch gap-1">
                        @if($prevEvent ?? null)
                            <a href="{{ route('gigs.show', $prevEvent) }}" 
                               class="inline-flex items-center justify-center px-2.5 sm:px-3 bg-pink-600 hover:bg-pink-700 text-white rounded-none shadow-md transition group"
                               title="Previous gig: {{ $prevEvent->bands->first()?->name ?? $prevEvent->name }} ({{ $prevEvent->event_date?->format('D j M Y') }})">
                                <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white transform group-hover:-translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/>
                                </svg>
                            </a>
                        @else
                            <span class="inline-flex items-center justify-center px-2.5 sm:px-3 bg-pink-600/40 text-white/30 rounded-none cursor-not-allowed">
                                <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"/>
                                </svg>
                            </span>
                        @endif

                        <span class="inline-flex items-center px-3.5 py-1.5 sm:px-4 sm:py-2 bg-pink-600 text-white text-xs sm:text-sm font-black uppercase tracking-wider rounded-none leading-none shadow-md">
                            {{ $event->event_date->format('D j M Y') }}
                        </span>

                        @if($nextEvent ?? null)
                            <a href="{{ route('gigs.show', $nextEvent) }}" 
                               class="inline-flex items-center justify-center px-2.5 sm:px-3 bg-pink-600 hover:bg-pink-700 text-white rounded-none shadow-md transition group"
                               title="Next gig: {{ $nextEvent->bands->first()?->name ?? $nextEvent->name }} ({{ $nextEvent->event_date?->format('D j M Y') }})">
                                <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white transform group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/>
                                </svg>
                            </a>
                        @else
                            <span class="inline-flex items-center justify-center px-2.5 sm:px-3 bg-pink-600/40 text-white/30 rounded-none cursor-not-allowed">
                                <svg class="w-3.5 h-3.5 sm:w-4 sm:h-4 text-white/30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"/>
                                </svg>
                            </span>
                        @endif
                    </div>
                @endif

                <h1 class="text-4xl md:text-7xl font-normal md:-mb-2 text-white uppercase tracking-tight leading-[0.95]">
                    {{ $event->bands->first()->name ?? $event->name }}
                </h1>
                
                <p class="text-sm sm:text-xl md:text-lg font-bold text-white uppercase tracking-tight">
                    {{ $event->venue->name ?? 'Venue Unknown' }}
                </p>

                <!-- "I was at this gig" Action Button -->
                <div class="mt-8 flex items-center gap-3">
                    @guest
                        <a href="{{ route('login', ['redirect' => url()->current(), 'intent' => 'attend_gig']) }}" 
                           class="inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-white/10 hover:bg-white/20 text-white font-bold text-xs uppercase tracking-widest backdrop-blur border border-white/20 transition group shadow-lg">
                            <svg class="w-4 h-4 text-pink-500 group-hover:scale-125 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                            </svg>
                            Were you at this gig? Click here.
                        </a>
                    @else
                        @if($event->hasAttendee(auth()->user()))
                            <div class="inline-flex items-center gap-3 bg-green-500/10 border border-green-500/30 px-4 py-2 rounded-full backdrop-blur">
                                <span class="inline-flex items-center gap-1.5 text-green-400 font-bold text-xs uppercase tracking-wider">
                                    <svg class="w-4 h-4 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                                    You were at this gig
                                </span>
                                <form action="{{ route('gigs.attendance.destroy', $event) }}" method="POST" onsubmit="return confirm('Remove your attendance from this gig?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-xs text-green-400 hover:text-red-400 underline transition">Remove</button>
                                </form>
                            </div>
                        @else
                            <form action="{{ route('gigs.attendance.store', $event) }}" method="POST">
                                @csrf
                                <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 rounded-full bg-pink-600 hover:bg-pink-700 text-white font-bold text-xs uppercase tracking-widest shadow-lg shadow-pink-600/30 hover:scale-105 active:scale-95 transition group">
                                    <svg class="w-4 h-4 text-white group-hover:scale-125 transition-transform" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                                    </svg>
                                    Were you at this gig? Click here.
                                </button>
                            </form>
                        @endif
                    @endguest
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 py-12 sm:py-20">
        @if($event->bands->count() > 0)
            @php
                $rotations = ['rotate-1', '-rotate-1', 'rotate-[1.5deg]', '-rotate-[1.5deg]'];
            @endphp

            <div class="mb-16">
                <div class="flex items-center gap-4 mb-8">
                    <h2 class="text-2xl font-black uppercase text-white tracking-tight">The Lineup</h2>
                    <div class="flex-1 h-px bg-white/5"></div>
                </div>

                @php
                    $supportAngles = ['rotate-2', '-rotate-2', 'rotate-3', '-rotate-1'];
                @endphp

                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 sm:gap-8 pt-4 pb-2">
                    @foreach($event->bands as $index => $band)
                        @php
                            $isHeadliner = ($index === 0);
                            $badgeAngle = $isHeadliner ? '-rotate-3' : $supportAngles[($index - 1) % count($supportAngles)];
                        @endphp
                        <a href="{{ route('bands.show', $band) }}" 
                           class="group block relative transform {{ $rotations[$index % count($rotations)] }} group-hover:z-20 transition-all duration-300">
                            
                            <div class="relative">
                                <!-- "Stuck on" Role Badge (Headline / Support) -->
                                @if($isHeadliner)
                                    <div class="absolute -top-3 -left-2 sm:-top-3.5 sm:-left-2.5 z-20 transform {{ $badgeAngle }} transition-transform duration-300 bg-pink-600 text-white text-xs sm:text-sm font-black py-1.5 px-3 sm:py-2 sm:px-4 uppercase tracking-wider rounded-none shadow-[0_4px_14px_rgba(0,0,0,0.75)] border border-pink-400/40 select-none pointer-events-none">
                                        Headline
                                    </div>
                                @else
                                    <div class="absolute -top-2 -left-1.5 sm:-top-2.5 sm:-left-2 z-20 transform {{ $badgeAngle }} transition-transform duration-300 bg-white text-black text-[9px] sm:text-[11px] font-black py-1 px-2.5 sm:py-1.5 sm:px-3 uppercase tracking-wider rounded-none shadow-[0_3px_10px_rgba(0,0,0,0.65)] border border-black/10 select-none pointer-events-none">
                                        Support
                                    </div>
                                @endif

                                <!-- Square Photo Container with thin border -->
                                <div class="aspect-square w-full relative overflow-hidden bg-[#1e1e1e] border border-white/20 rounded-none group-hover:border-pink-500 transition duration-300">
                                    @if($image = $band->firstImage())
                                        <img src="{{ $image->thumbnail(600, 600) }}" 
                                             alt="{{ $image->altText($band->name) }}" 
                                             loading="lazy"
                                             class="w-full h-full object-cover group-hover:scale-105 transition duration-500 pointer-events-none select-none">
                                    @else
                                        <div class="w-full h-full flex flex-col items-center justify-center text-gray-700 bg-[#161616]">
                                            <svg class="w-10 h-10 text-gray-600/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
                                            </svg>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            
                            <!-- Band Name Underneath (Rotated with photo, 2 lines of text allocated) -->
                            <div class="mt-3 px-1 h-11 sm:h-12 flex items-start">
                                <h3 class="text-base sm:text-lg font-black text-white group-hover:text-pink-500 transition uppercase tracking-tight line-clamp-2 leading-tight">
                                    {{ $band->name }}
                                </h3>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

        @if ($event->description)
            <div class="mb-16">
                <div class="flex items-center gap-4 mb-6">
                    <h2 class="text-3xl font-black uppercase text-white tracking-tight">The Gig details</h2>
                    <div class="flex-1 h-px bg-white/5"></div>
                </div>
                <div class="prose prose-invert prose-lg max-w-none text-gray-300 leading-relaxed font-medium">
                    {!! nl2br(e($event->description)) !!}
                </div>
            </div>
        @endif

        @if($images->count() > 0)
            <div id="photos" class="scroll-mt-20 mb-16">
                <x-image-gallery :images="$images" title="Gig Gallery" :item-name="$gigTitle" columns="grid-cols-2 md:grid-cols-3 lg:grid-cols-4" class="mt-0" />
            </div>
        @endif

        <!-- Attendees Section -->
        @if($event->attendees->isNotEmpty())
            @php
                $attendeeShapes = [
                    [
                        'rot' => '-rotate-1',
                        'polygon' => '1,2 99,0 98,39 2,40',
                    ],
                    [
                        'rot' => 'rotate-1',
                        'polygon' => '2,0 99,3 97,40 2,37',
                    ],
                    [
                        'rot' => '-rotate-2',
                        'polygon' => '1,3 98,1 100,38 3,40',
                    ],
                    [
                        'rot' => 'rotate-2',
                        'polygon' => '2,1 98,3 99,38 1,40',
                    ],
                ];
            @endphp

            <div class="mb-16">
                <div class="flex items-center gap-3 mb-8">
                    <h2 class="text-2xl font-black uppercase text-white tracking-tight">In the crowd</h2>
                    <span class="inline-flex items-center justify-center min-w-[1.75rem] h-7 px-2 rounded-full bg-pink-600 text-white text-sm font-black leading-none shadow-sm shadow-pink-600/30 -translate-y-[2.5px]">
                        {{ $event->attendees->count() }}
                    </span>
                    <div class="flex-1 h-px bg-white/5"></div>
                </div>

                <div class="flex flex-wrap gap-3 sm:gap-4 items-center">
                    @foreach($event->attendees as $index => $attendee)
                        @php
                            $shape = $attendeeShapes[$index % count($attendeeShapes)];
                            $isCurrentUser = auth()->check() && auth()->id() === $attendee->id;
                        @endphp
                        <a href="{{ route('community.show', [$attendee, $attendee->slug]) }}" 
                           class="flex-shrink-0 relative inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 text-xs sm:text-sm font-bold uppercase tracking-wider group transition-all transform {{ $shape['rot'] }} hover:rotate-0 hover:scale-105">
                            @if($isCurrentUser)
                                <svg class="absolute inset-0 w-full h-full text-pink-600 fill-current drop-shadow-[0_0_12px_rgba(219,39,119,0.45)] group-hover:text-pink-500 transition-all duration-200 pointer-events-none"
                                    viewBox="0 0 100 40" preserveAspectRatio="none">
                                    <polygon points="{{ $shape['polygon'] }}" />
                                </svg>
                                <span class="relative z-10 select-none text-white font-bold">{{ $attendee->first_name }} {{ $attendee->last_name }}</span>
                            @else
                                <svg class="absolute inset-0 w-full h-full fill-[#161616] stroke-white/20 stroke-[1.5] group-hover:stroke-pink-500 group-hover:fill-pink-600/10 drop-shadow-md transition-all duration-200 pointer-events-none"
                                    viewBox="0 0 100 40" preserveAspectRatio="none">
                                    <polygon points="{{ $shape['polygon'] }}" vector-effect="non-scaling-stroke" />
                                </svg>
                                <span class="relative z-10 select-none text-gray-400 group-hover:text-white transition-colors font-bold">{{ $attendee->first_name }} {{ $attendee->last_name }}</span>
                            @endif
                        </a>
                    @endforeach
                </div>
            </div>
        @endif

        <!-- More Gigs From This Era Panel -->
        @if(isset($moreGigs) && $moreGigs->isNotEmpty())
            <div class="mt-20 pt-16 border-t border-white/5">
                <div class="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-12">
                    <div class="max-w-2xl">
                        <div class="mb-3">
                            <span class="text-xs font-black uppercase tracking-[0.25em] text-pink-500">Live Archives</span>
                        </div>
                        <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-white uppercase tracking-tight">
                            {{ $moreGigsTitle ?? 'More Gigs In The Vault' }}
                        </h2>
                        <p class="text-base sm:text-lg text-gray-400 font-medium leading-relaxed mt-3">
                            @if(!empty($moreGigsYear))
                                Explore more memorable live nights, support sets, and lineups from {{ $moreGigsYear }}.
                            @else
                                Explore more memorable live nights, support sets, and lineups from the Fibbers archives.
                            @endif
                        </p>
                    </div>
                    <a href="{{ !empty($moreGigsYear) ? route('gigs.index', ['year' => $moreGigsYear]) : route('gigs.index') }}"
                        class="inline-flex items-center gap-2 text-pink-600 font-black uppercase tracking-widest hover:text-white transition group shrink-0">
                        View {{ !empty($moreGigsYear) ? $moreGigsYear . ' Gigs' : 'All Gigs' }}
                        <svg class="w-5 h-5 group-hover:translate-x-1 transition" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                        </svg>
                    </a>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                    @include('partials.random-gig-cards', ['randomGigs' => $moreGigs, 'startIndex' => 0])
                </div>
            </div>
        @endif

        <div class="mt-20 pt-16 border-t border-white/5">
            <x-comments :model="$event" />
        </div>

        <div class="mt-16 text-center">
            <a href="{{ route('gigs.index') }}" class="inline-flex items-center gap-2 text-xs font-bold text-gray-400 hover:text-white uppercase tracking-widest transition">
                &larr; Back to all gigs
            </a>
        </div>
    </div>
</x-main-layout>