@props(['tabs'])

@php
    $rotations = ['-rotate-1', 'rotate-1', 'rotate-[1.5deg]', '-rotate-[1.5deg]', '-rotate-1', 'rotate-1', 'rotate-[1.5deg]'];
    $tabShapes = [
        ['-rotate-1', '1,2 99,0 98,39 2,40'],
        ['rotate-1', '2,0 99,3 97,40 2,37'],
        ['-rotate-2', '1,3 98,1 100,38 3,40'],
        ['rotate-2', '2,1 98,3 99,38 1,40'],
        ['-rotate-1', '1,2 99,0 98,39 2,40'],
    ];
@endphp

<section id="this-week-in-history" 
    class="py-16 sm:py-24 border-b border-white/5 relative"
    x-data="{
        activeTab: 30
    }">

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Section Header -->
        <div class="text-center max-w-3xl mx-auto mb-10 sm:mb-14">
            <h2 class="text-3xl sm:text-5xl md:text-6xl font-black text-white uppercase tracking-tight leading-none">
                This Week In History
            </h2>
            <p class="text-sm sm:text-base md:text-lg text-gray-400 font-medium leading-relaxed mt-3 sm:mt-4">
                Step back in time to this exact week across 30 years of Fibbers live music archives.
            </p>
        </div>

        <!-- Milestone Selector Navigation (Horizontal Reel on mobile / Centered on sm+) -->
        <div class="mb-10 sm:mb-12">
            <div x-ref="milestoneReel"
                class="flex flex-nowrap sm:flex-wrap items-center sm:justify-center overflow-x-auto sm:overflow-visible no-scrollbar py-2 gap-3 sm:gap-4 overscroll-x-contain touch-pan-x">
                @foreach(array_values($tabs) as $i => $tab)
                    @php
                        $shape = $tabShapes[$i % count($tabShapes)];
                        $yAgo = $tab['yearsAgo'];
                    @endphp
                    <button type="button"
                        @click="activeTab = {{ $yAgo }}"
                        class="flex-shrink-0 relative inline-flex items-center justify-center px-5 py-2.5 sm:px-6 sm:py-3 text-xs sm:text-sm font-bold uppercase tracking-wider group transition-all transform {{ $shape[0] }} hover:rotate-0 hover:scale-105 cursor-pointer outline-none">
                        
                        <!-- Polygon shape background -->
                        <template x-if="activeTab === {{ $yAgo }}">
                            <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)] pointer-events-none transition-all duration-200"
                                viewBox="0 0 100 40" preserveAspectRatio="none">
                                <polygon points="{{ $shape[1] }}" />
                            </svg>
                        </template>
                        <template x-if="activeTab !== {{ $yAgo }}">
                            <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 pointer-events-none transition-all duration-200"
                                viewBox="0 0 100 40" preserveAspectRatio="none">
                                <polygon points="{{ $shape[1] }}" vector-effect="non-scaling-stroke" />
                            </svg>
                        </template>

                        <!-- Label & Meta -->
                        <span class="relative z-10 select-none flex items-center gap-2"
                              :class="activeTab === {{ $yAgo }} ? 'text-white font-black' : 'text-gray-400 group-hover:text-white font-bold'">
                            <span>{{ $yAgo }} Years Ago</span>
                            <span class="text-[10px] px-1.5 py-0.5 rounded-none font-mono"
                                  :class="activeTab === {{ $yAgo }} ? 'bg-black/30 text-white' : 'bg-white/10 text-gray-400 group-hover:text-white'">
                                {{ $tab['year'] }}
                            </span>
                        </span>
                    </button>
                @endforeach
            </div>
        </div>

        <!-- Tab Contents for Each Milestone -->
        @foreach($tabs as $yearsAgo => $tab)
            <div x-show="activeTab === {{ $yearsAgo }}"
                 x-transition:enter="transition ease-out duration-250"
                 x-transition:enter-start="opacity-0 translate-y-2"
                 x-transition:enter-end="opacity-100 translate-y-0"
                 style="{{ $yearsAgo !== 30 ? 'display: none;' : '' }}">

                <!-- Era Sub-header -->
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 pb-4 mb-8 border-b border-white/10">
                    <div class="flex items-center gap-3">
                        <span class="text-xs sm:text-sm font-black uppercase text-pink-500 tracking-wider">
                            Week of {{ $tab['start']->format('j') }}–{{ $tab['end']->format('j F Y') }}
                        </span>
                        <span class="text-xs sm:text-sm text-white font-black uppercase tracking-wider">
                            {{ $tab['events']->count() }} {{ \Illuminate\Support\Str::plural('Gig', $tab['events']->count()) }}
                        </span>
                    </div>

                    <a href="{{ route('gigs.index', ['year' => $tab['year']]) }}"
                        class="inline-flex items-center gap-1.5 text-xs font-black uppercase tracking-wider text-pink-500 hover:text-white transition group">
                        <span>Explore all gigs in {{ $tab['year'] }}</span>
                        <svg class="w-3.5 h-3.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"/></svg>
                    </a>
                </div>

                @if($tab['events']->isNotEmpty())
                    <!-- Gigs Grid -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">
                        @foreach($tab['events'] as $gIndex => $event)
                            @php
                                $headlineBand = $event->bands->first();
                                $supportBands = $event->bands->slice(1);
                                $headlineImage = $headlineBand?->firstImage() ?? $event->firstImage();
                                $rotClass = $rotations[$gIndex % count($rotations)];
                            @endphp

                            <div class="group relative flex flex-col justify-between bg-[#141416]/95 border border-white/10 hover:border-pink-500/50 shadow-[0_10px_30px_rgba(0,0,0,0.6)] hover:shadow-[0_15px_35px_rgba(0,0,0,0.8)] transition-all duration-300 transform {{ $rotClass }} hover:rotate-0 hover:scale-[1.02] overflow-hidden rounded-none">
                                
                                <div>
                                    <!-- Image Area -->
                                    <div class="aspect-[16/10] w-full overflow-hidden bg-black/60 relative border-b border-white/10">
                                        @if($headlineImage)
                                            <img src="{{ $headlineImage->thumbnail(640, 400) }}" 
                                                 alt="{{ $headlineBand ? $headlineBand->name : 'Fibbers Gig' }}"
                                                 loading="lazy"
                                                 class="w-full h-full object-cover group-hover:scale-105 transition duration-700 pointer-events-none select-none transform-gpu">
                                        @else
                                            <div class="w-full h-full flex items-center justify-center bg-neutral-900">
                                                <span class="text-4xl font-black text-white/10 uppercase tracking-tighter">
                                                    {{ $headlineBand ? substr($headlineBand->name, 0, 1) : 'F' }}
                                                </span>
                                            </div>
                                        @endif

                                        <!-- Corner Date Badge -->
                                        <div class="absolute top-2.5 left-2.5 z-10">
                                            <span class="inline-flex items-center px-2.5 py-1 bg-pink-600 text-white font-black uppercase text-[10px] sm:text-xs tracking-wider shadow-md">
                                                {{ $event->event_date->format('D d M Y') }}
                                            </span>
                                        </div>
                                    </div>

                                    <!-- Body Content -->
                                    <div class="p-4 sm:p-4.5">
                                        <!-- Headline Band Link -->
                                        @if($headlineBand)
                                            <h3 class="text-lg sm:text-xl font-black text-white uppercase leading-tight line-clamp-2">
                                                <a href="{{ route('bands.show', $headlineBand->slug) }}" 
                                                   class="hover:text-pink-500 transition duration-150 inline">
                                                    {{ $headlineBand->name }}
                                                </a>
                                            </h3>
                                        @else
                                            <h3 class="text-lg sm:text-xl font-black text-white uppercase leading-tight line-clamp-2">
                                                <a href="{{ route('gigs.show', $event) }}" class="hover:text-pink-500 transition duration-150 inline">
                                                    {{ $event->name ?: 'Special Event' }}
                                                </a>
                                            </h3>
                                        @endif

                                        <!-- Support Bands (All individually clickable) -->
                                        @if($supportBands->isNotEmpty())
                                            <div class="mt-2.5">
                                                <span class="text-[10px] font-black uppercase tracking-widest text-pink-500/80 block mb-1">
                                                    Support:
                                                </span>
                                                <div class="flex flex-wrap gap-1.5">
                                                    @foreach($supportBands as $sup)
                                                        <a href="{{ route('bands.show', $sup->slug) }}"
                                                           class="inline-flex items-center px-2 py-0.5 bg-white/5 hover:bg-pink-600 hover:text-white text-gray-300 border border-white/10 hover:border-pink-500 text-xs font-bold transition rounded-none">
                                                            {{ $sup->name }}
                                                        </a>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                </div>

                                <!-- Card Footer: Full Gig Entry Action -->
                                <div class="p-4 pt-0">
                                    <a href="{{ route('gigs.show', $event) }}"
                                       class="flex items-center justify-between w-full py-2 px-3 bg-white/5 hover:bg-pink-600 text-gray-300 hover:text-white border border-white/10 hover:border-pink-500 text-xs font-black uppercase tracking-wider transition duration-150 group/btn">
                                        <span>View Gig</span>
                                        <svg class="w-4 h-4 group-hover/btn: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" />
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <!-- Empty State for Quiet Weeks -->
                    <div class="py-16 px-6 text-center glass-panel border border-dashed border-white/15 bg-white/[0.02]">
                        <p class="text-xs font-black uppercase tracking-[0.2em] text-pink-500 mb-2">Vault Silence</p>
                        <h4 class="text-xl sm:text-2xl font-black text-white uppercase">No Gigs Recorded for this Week in {{ $tab['year'] }}</h4>
                        <p class="text-sm text-gray-400 mt-2 max-w-md mx-auto">
                            The stage was quiet during this week {{ $yearsAgo }} years ago, or records are awaiting discovery.
                        </p>
                        <a href="{{ route('gigs.index', ['year' => $tab['year']]) }}" 
                           class="inline-flex items-center gap-2 mt-6 px-5 py-2.5 bg-pink-600 hover:bg-pink-700 text-white text-xs font-black uppercase tracking-wider transition">
                            Explore all gigs from {{ $tab['year'] }} &rarr;
                        </a>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
</section>