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

    $cleanDesc = trim(strip_tags($band->description ?? ''));
    if (!empty($cleanDesc)) {
        preg_match('/^([^.!?]+[.!?]+(?:\s+[^.!?]+[.!?]+)?)/u', $cleanDesc, $sentenceMatches);
        $seoDescription = !empty($sentenceMatches[1]) && mb_strlen($sentenceMatches[1]) <= 160
            ? $sentenceMatches[1]
            : \Illuminate\Support\Str::limit($cleanDesc, 155);
    } else {
        $gigCount = $band->events->count();
        $photoCount = $band->publishedImages()->count();
        $seoDescription = "Explore {$band->name}'s live performance history at Fibbers, York (1992–2022). Archive featuring {$gigCount} " . \Illuminate\Support\Str::plural('gig', $gigCount) . " and {$photoCount} " . \Illuminate\Support\Str::plural('photo', $photoCount) . ".";
    }

    $bandSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'MusicGroup',
        'name' => $band->name,
        'url' => route('bands.show', $band),
        'description' => $seoDescription,
    ];
    if ($bandFirstImage) {
        $bandSchema['image'] = $ogImage;
    }
@endphp

<x-main-layout 
    :title="$band->name" 
    :description="$seoDescription" 
    :image="$ogImage" 
    type="music.musician"
    :schema="$bandSchema"
>
    <style>
        @keyframes kenBurnsEffect {
            0% {
                transform: scale(1) translate(0, 0);
            }
            50% {
                transform: scale(1.08) translate(-1%, 0.5%);
            }
            100% {
                transform: scale(1.15) translate(1%, 1%);
            }
        }
        .animate-ken-burns {
            transform-origin: top center;
            animation: kenBurnsEffect 18s ease-in-out infinite alternate;
        }
    </style>

    <!-- Immersive Hero Header (Above the Fold) -->
    <div class="relative min-h-[70vh] sm:min-h-[78vh] flex items-center justify-center overflow-hidden py-24 sm:py-28">
        <!-- Background Ken Burns Slideshow -->
        <div class="absolute inset-0 z-0 overflow-hidden" x-data="{
            active: 0,
            images: {{ $heroImages->map(fn($img) => $img->thumbnail(1920, 1080))->values()->toJson() }},
            init() {
                if (this.images.length > 1) {
                    setInterval(() => {
                        this.active = (this.active + 1) % this.images.length;
                    }, 6000);
                }
            }
        }">
            <template x-for="(image, index) in images" :key="index">
                <div x-show="active === index"
                     x-transition:enter="transition-opacity ease-in-out duration-1000"
                     x-transition:enter-start="opacity-0"
                     x-transition:enter-end="opacity-100"
                     x-transition:leave="transition-opacity ease-in-out duration-1000"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0"
                     class="absolute inset-0 overflow-hidden">
                    <img :src="image"
                         alt="{{ $band->name }} live at Fibbers, York"
                         class="w-full h-full object-cover object-top origin-top animate-ken-burns will-change-transform brightness-100 contrast-105" />
                </div>
            </template>

            @if ($heroImages->isEmpty())
                <div class="absolute inset-0 bg-[#121212] flex items-center justify-center">
                    <div class="w-96 h-96 rounded-full bg-pink-600/10 blur-3xl pointer-events-none"></div>
                </div>
            @endif
        </div>

        <!-- Layered Dramatic Overlays (Lightened so images are clearly visible) -->
        <!-- 1. Subtle Black Wash Overlay -->
        <div class="absolute inset-0 bg-black/30 z-[1]"></div>
        <!-- 2. Gentle Vignette for Center Text Focus -->
        <div class="absolute inset-0 z-[2]" style="background: radial-gradient(ellipse at center, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.35) 60%, rgba(10,10,10,0.75) 100%);"></div>
        <!-- 3. Bottom Seamless Blend to Page Background -->
        <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-[#0a0a0a]/20 to-transparent z-[3]"></div>
        <!-- 4. Subtle Grunge Texture -->
        <div class="absolute inset-0 bg-grunge z-[4] pointer-events-none opacity-10"></div>

        <!-- Hero Content (Overlap Design) -->
        <div class="relative z-10 max-w-5xl mx-auto px-4 sm:px-6 w-full text-center flex flex-col items-center">
            <!-- Band/Artist Name -->
            <h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-normal text-white uppercase tracking-tight leading-[0.95] drop-shadow-[0_4px_30px_rgba(0,0,0,0.9)]"
                style="font-family: 'Special Elite', cursive;">
                {{ $band->name }}
            </h1>

            <!-- Badges (Featured / Supergroup) -->
            @if ($band->featured || $band->supergroup)
                <div class="flex flex-wrap items-center justify-center gap-2 sm:gap-3 mt-0 mb-1">
                    @if ($band->featured)
                        <span class="relative inline-flex items-center justify-center px-2.5 py-0.5 sm:px-4 sm:py-1.5 text-white text-[9px] sm:text-xs font-black uppercase tracking-wider sm:tracking-[0.2em]">
                            <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)] transform -rotate-1 pointer-events-none"
                                viewBox="0 0 100 40" preserveAspectRatio="none">
                                <polygon points="1,2 99,0 98,39 2,40" />
                            </svg>
                            <span class="relative z-10">Featured Artist</span>
                        </span>
                    @endif
                    @if ($band->supergroup)
                        <span class="relative inline-flex items-center justify-center px-2.5 py-0.5 sm:px-4 sm:py-1.5 text-white text-[9px] sm:text-xs font-black uppercase tracking-wider sm:tracking-[0.2em]">
                            <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)] transform rotate-1 pointer-events-none"
                                viewBox="0 0 100 40" preserveAspectRatio="none">
                                <polygon points="2,1 98,3 99,38 1,40" />
                            </svg>
                            <span class="relative z-10 inline-flex items-center gap-1 sm:gap-1.5">
                                <svg class="w-2.5 h-2.5 sm:w-3 sm:h-3 text-pink-200 fill-current" 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>
                                Supergroup
                            </span>
                        </span>
                    @endif
                </div>
            @endif

            <!-- Band Description (1-2 Key Sentences Excerpt) -->
            @if (!empty(trim($band->description ?? '')))
                @php
                    $cleanDesc = trim(strip_tags($band->description));
                    preg_match('/^([^.!?]+[.!?]+(?:\s+[^.!?]+[.!?]+)?)/u', $cleanDesc, $sentenceMatches);
                    $excerpt = !empty($sentenceMatches[1]) && mb_strlen($sentenceMatches[1]) <= 220
                        ? $sentenceMatches[1]
                        : \Illuminate\Support\Str::words($cleanDesc, 28, '...');
                @endphp
                <p class="text-base sm:text-lg md:text-xl text-gray-200/95 font-medium max-w-2xl mx-auto leading-relaxed mt-4 drop-shadow-[0_2px_12px_rgba(0,0,0,0.8)]">
                    {{ $excerpt }}
                </p>
            @endif

            <!-- Stats "Tapes" (Visual White Label Tape Blocks) -->
            <div class="mt-6 sm:mt-10 inline-flex items-center justify-center max-w-full px-2">
                <div class="bg-white text-black px-3.5 pt-2 pb-1 sm:px-7 sm:pt-3.5 sm:pb-2 shadow-[0_12px_35px_rgba(0,0,0,0.85)] transform -rotate-1 hover:rotate-0 transition-transform duration-200 inline-flex flex-nowrap items-center justify-center gap-x-1 sm:gap-x-2 md:gap-x-3 text-[11px] sm:text-xl md:text-2xl font-bold tracking-tight uppercase whitespace-nowrap leading-none"
                     style="font-family: 'Special Elite', cursive;">

                    <!-- Photos -->
                    <a href="#photos" class="text-black hover:text-pink-600 transition-colors leading-none">
                        <strong>{{ $band->publishedImages()->count() }}</strong> {{ \Illuminate\Support\Str::plural('PIC', $band->publishedImages()->count()) }}
                    </a>

                    <span class="text-black/30 font-light inline leading-none">/</span>

                    <!-- Videos -->
                    <a href="#videos" class="text-black hover:text-pink-600 transition-colors leading-none">
                        <strong>{{ $band->videos->where('publish', true)->count() }}</strong> {{ \Illuminate\Support\Str::plural('VID', $band->videos->where('publish', true)->count()) }}
                    </a>

                    <span class="text-black/30 font-light inline leading-none">/</span>

                    <!-- Gigs -->
                    <a href="#gigs" class="text-black hover:text-pink-600 transition-colors leading-none">
                        <strong>{{ $band->events->count() }}</strong> {{ \Illuminate\Support\Str::plural('GIG', $band->events->count()) }}
                    </a>

                    <span class="text-black/30 font-light inline leading-none">/</span>

                    <!-- Comments -->
                    <a href="#comments" class="text-black hover:text-pink-600 transition-colors leading-none">
                        <strong>{{ $band->comments->count() }}</strong> {{ \Illuminate\Support\Str::plural('COMMENT', $band->comments->count()) }}
                    </a>

                    @if(isset($relatedGalleryItems) && $relatedGalleryItems->isNotEmpty())
                        <span class="text-black/30 font-light inline leading-none">/</span>
                        <!-- Gallery Artifacts -->
                        <a href="#memorabilia" class="text-black hover:text-pink-600 transition-colors leading-none">
                            <strong>{{ $relatedGalleryItems->count() }}</strong> {{ \Illuminate\Support\Str::plural('ITEM', $relatedGalleryItems->count()) }}
                        </a>
                    @endif
                </div>
            </div>

            <!-- Band Membership Action ("I was in this band") -->
            <div class="mt-6 flex flex-col sm:flex-row items-center justify-center gap-3">
                @guest
                    <a href="{{ route('login', ['redirect' => url()->current(), 'intent' => 'join_band']) }}" 
                       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-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                        </svg>
                        Were you in this band? Click here.
                    </a>
                @else
                    @if($band->isMember(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're in this band
                            </span>
                            <form action="{{ route('bands.membership.destroy', $band) }}" method="POST" onsubmit="return confirm('Remove your membership claim from this band?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-xs text-green-400 hover:text-red-400 underline transition">Leave</button>
                            </form>
                        </div>
                    @elseif($band->isPendingMember(auth()->user()))
                        <div class="inline-flex items-center gap-3 bg-amber-500/10 border border-amber-500/30 px-4 py-2 rounded-full backdrop-blur">
                            <span class="inline-flex items-center gap-1.5 text-amber-400 font-bold text-xs uppercase tracking-wider">
                                <svg class="w-4 h-4 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                I was in this band (Pending Approval)
                            </span>
                            <form action="{{ route('bands.membership.destroy', $band) }}" method="POST">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-xs text-amber-400 hover:text-red-400 underline transition">Cancel claim</button>
                            </form>
                        </div>
                    @else
                        <form action="{{ route('bands.membership.store', $band) }}" 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-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/>
                                </svg>
                                Were you in this band? Click here.
                            </button>
                        </form>
                    @endif
                @endguest
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto px-4 py-12 sm:py-16">
        @if (!empty(trim($band->description ?? '')))
            <div>
                <div class="flex items-center gap-4 mb-8">
                    <h2 class="text-4xl font-black uppercase text-white tracking-tight">The <span
                            class="text-pink-600">Bio</span></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($band->description)) !!}
                </div>
            </div>
        @endif

        @php
            $visibleMembers = $band->visibleMembers(auth()->user());
            $memberShapes = [
                [
                    'rot' => '-rotate-2',
                    'polygon' => '1,2 99,0 98,39 2,40',
                ],
                [
                    'rot' => 'rotate-1 sm:rotate-2',
                    'polygon' => '2,0 99,3 97,40 2,37',
                ],
            ];
        @endphp

        @if($visibleMembers->isNotEmpty())
            <div class="{{ empty(trim($band->description ?? '')) ? 'mt-0' : 'mt-16' }} mb-12">
                <div class="flex items-center gap-4 mb-6">
                    <h2 class="text-2xl font-black uppercase text-white tracking-tight">Band Members</h2>
                    <div class="flex-1 h-px bg-white/5"></div>
                </div>
                <div class="flex flex-wrap gap-4 sm:gap-6 items-center">
                    @foreach($visibleMembers as $index => $mem)
                        @php
                            $shape = $memberShapes[$index % count($memberShapes)];
                        @endphp
                        @if($mem->pivot->approved)
                            <a href="{{ route('community.show', [$mem, $mem->slug]) }}" 
                               class="relative inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 text-white text-sm sm:text-base font-bold tracking-wide group transition-all">
                                <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)] transform {{ $shape['rot'] }} group-hover:rotate-0 group-hover:scale-105 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">{{ $mem->first_name }} {{ $mem->last_name }}</span>
                            </a>
                        @else
                            <a href="{{ route('community.show', [$mem, $mem->slug]) }}" 
                               class="inline-flex items-center gap-2 px-4 py-2 border border-amber-500/30 bg-amber-500/10 text-amber-300 font-bold text-xs tracking-wide rounded-none">
                                <span>{{ $mem->first_name }} {{ $mem->last_name }}</span>
                                <span class="text-[10px] text-amber-400 font-medium uppercase tracking-wider">(Pending Approval)</span>
                            </a>
                        @endif
                    @endforeach
                </div>
            </div>
        @endif

        <div id="photos" class="scroll-mt-20">
            <x-image-gallery :images="$band->publishedImages()" title="Gallery" :item-name="$band->name" :class="empty(trim($band->description ?? '')) ? 'mt-0' : 'mt-20'" />
        </div>
        

        @php
            $publishedVideos = $band->videos->where('publish', true);
        @endphp

        <x-video-gallery :videos="$publishedVideos" />

        @if ($band->events->count() > 0)
            @php
                $rawEvents = $band->events->sortByDesc('event_date')->values();
                $distinctYearsCount = $rawEvents->map(fn($e) => $e->event_date?->format('Y'))->filter()->unique()->count();
                $shouldScroll = $rawEvents->count() >= 5 && $distinctYearsCount > 1;

                $attendedEventIds = auth()->check()
                    ? auth()->user()->attendedEvents()->pluck('events.id')->flip()->all()
                    : [];

                $eventsData = $rawEvents->map(function ($event) use ($band, $attendedEventIds) {
                    $firstBand = $event->bands->first();
                    $isHeadliner = $firstBand && $firstBand->id === $band->id;

                    // Other bands on the bill excluding this band
                    $otherBands = $event->bands->reject(fn($b) => $b->id === $band->id)->values();
                    $otherBandNames = $otherBands->pluck('name')->all();

                    if ($isHeadliner) {
                        $billTitle = $band->name;
                        if (count($otherBandNames) > 0) {
                            $supportText = 'Support from ' . implode(', ', array_map('e', $otherBandNames));
                            $subtitleHtml = ($event->name && strcasecmp($event->name, $band->name) !== 0)
                                ? $supportText . ' • ' . e($event->name)
                                : $supportText;
                        } else {
                            $subtitleHtml = ($event->name && strcasecmp($event->name, $band->name) !== 0) ? e($event->name) : null;
                        }
                    } else {
                        $billTitle = $firstBand?->name ?? 'Headliner';
                        $remainingBands = $otherBands->reject(fn($b) => $b->id === $firstBand?->id)->pluck('name')->all();

                        $supportListHtml = '<span class="text-white font-bold">' . e($band->name) . '</span>';
                        if (count($remainingBands) > 0) {
                            $supportListHtml .= ', ' . implode(', ', array_map('e', $remainingBands));
                        }
                        $subtitleHtml = 'Support from ' . $supportListHtml;
                        if ($event->name && strcasecmp($event->name, $billTitle) !== 0) {
                            $subtitleHtml .= ' • ' . e($event->name);
                        }
                    }

                    return [
                        'id' => $event->id,
                        'url' => route('gigs.show', $event),
                        'timestamp' => $event->event_date ? $event->event_date->timestamp : 0,
                        'year' => $event->event_date ? $event->event_date->format('Y') : 'Unknown',
                        'dayOfWeek' => $event->event_date ? $event->event_date->format('D') : '',
                        'day' => $event->event_date ? $event->event_date->format('d') : '',
                        'month' => $event->event_date ? $event->event_date->format('M') : '',
                        'venue' => $event->venue->name ?? 'Fibbers, York',
                        'isHeadliner' => $isHeadliner,
                        'role' => $isHeadliner ? 'headline' : 'support',
                        'billTitle' => $billTitle,
                        'subtitleHtml' => $subtitleHtml,
                        'userAttended' => isset($attendedEventIds[$event->id]),
                    ];
                })->values();
            @endphp

            <div id="gigs"
                 class="mt-20 scroll-mt-28"
                 x-data="{
                     sortOrder: 'desc',
                     roleFilter: 'all',
                     allGigs: @js($eventsData),
                     shouldScroll: {{ $shouldScroll ? 'true' : 'false' }},
                     thumbTop: 0,
                     thumbHeight: 40,
                     canScroll: false,
                     isDragging: false,
                     hasDragged: false,
                     dragStartY: 0,
                     dragStartScrollTop: 0,
                     resetScroll() {
                         if (this.$refs.scrollContainer) {
                             this.$refs.scrollContainer.scrollTop = 0;
                         }
                         this.$nextTick(() => {
                             if (this.$refs.scrollContainer) {
                                 this.$refs.scrollContainer.scrollTop = 0;
                             }
                             this.refreshScrollbar();
                         });
                     },
                     setRole(role) {
                         this.roleFilter = role;
                         this.resetScroll();
                     },
                     toggleSort() {
                         this.sortOrder = (this.sortOrder === 'desc' ? 'asc' : 'desc');
                         this.resetScroll();
                     },
                     updateScrollbar() {
                         const el = this.$refs.scrollContainer;
                         if (!el || !this.shouldScroll) {
                             this.canScroll = false;
                             return;
                         }
                         const scrollHeight = el.scrollHeight;
                         const clientHeight = el.clientHeight;

                         if (scrollHeight <= clientHeight + 2) {
                             this.canScroll = false;
                             return;
                         }

                         this.canScroll = true;
                         const track = this.$refs.scrollTrack;
                         const trackHeight = track ? track.clientHeight : clientHeight;
                         const minThumb = 36;
                         const calculatedThumb = Math.max(minThumb, Math.min(trackHeight, Math.round((clientHeight / scrollHeight) * trackHeight)));
                         this.thumbHeight = calculatedThumb;

                         const maxScroll = scrollHeight - clientHeight;
                         const maxThumbTop = Math.max(0, trackHeight - calculatedThumb);
                         this.thumbTop = maxScroll > 0 ? Math.min(maxThumbTop, Math.max(0, (el.scrollTop / maxScroll) * maxThumbTop)) : 0;
                     },
                     refreshScrollbar() {
                         this.$nextTick(() => {
                             this.updateScrollbar();
                         });
                     },
                     startDrag(e) {
                         this.isDragging = true;
                         this.hasDragged = false;
                         this.dragStartY = e.clientY;
                         this.dragStartScrollTop = this.$refs.scrollContainer ? this.$refs.scrollContainer.scrollTop : 0;
                         document.body.classList.add('select-none');

                         const onPointerMove = (moveEvent) => {
                             if (!this.isDragging) return;
                             const deltaY = moveEvent.clientY - this.dragStartY;
                             if (Math.abs(deltaY) > 2) {
                                 this.hasDragged = true;
                             }
                             const el = this.$refs.scrollContainer;
                             const track = this.$refs.scrollTrack;
                             if (!el || !track) return;

                             const trackHeight = track.clientHeight;
                             const maxThumbTop = Math.max(1, trackHeight - this.thumbHeight);
                             const maxScroll = el.scrollHeight - el.clientHeight;

                             if (maxThumbTop > 0 && maxScroll > 0) {
                                 const scrollDelta = (deltaY / maxThumbTop) * maxScroll;
                                 el.scrollTop = this.dragStartScrollTop + scrollDelta;
                             }
                         };

                         const onPointerUp = () => {
                             this.isDragging = false;
                             document.body.classList.remove('select-none');
                             setTimeout(() => {
                                 this.hasDragged = false;
                             }, 60);
                             window.removeEventListener('pointermove', onPointerMove);
                             window.removeEventListener('pointerup', onPointerUp);
                             window.removeEventListener('pointercancel', onPointerUp);
                         };

                         window.addEventListener('pointermove', onPointerMove);
                         window.addEventListener('pointerup', onPointerUp);
                         window.addEventListener('pointercancel', onPointerUp);
                     },
                     onTrackClick(e) {
                         if (this.hasDragged || this.isDragging) return;
                         if (e.target === this.$refs.scrollThumb || (this.$refs.scrollThumb && this.$refs.scrollThumb.contains(e.target))) {
                             return;
                         }
                         const track = this.$refs.scrollTrack;
                         const el = this.$refs.scrollContainer;
                         if (!track || !el) return;

                         const rect = track.getBoundingClientRect();
                         const clickY = e.clientY - rect.top;
                         const trackHeight = track.clientHeight;
                         const maxThumbTop = Math.max(1, trackHeight - this.thumbHeight);
                         const maxScroll = el.scrollHeight - el.clientHeight;

                         if (maxThumbTop > 0 && maxScroll > 0) {
                             const targetThumbTop = Math.max(0, Math.min(maxThumbTop, clickY - (this.thumbHeight / 2)));
                             el.scrollTo({
                                 top: (targetThumbTop / maxThumbTop) * maxScroll,
                                 behavior: 'smooth'
                             });
                         }
                     },
                     init() {
                         this.$watch('roleFilter', () => this.resetScroll());
                         this.$watch('sortOrder', () => this.resetScroll());
                         this.refreshScrollbar();
                         window.addEventListener('resize', () => this.refreshScrollbar());
                         if (window.ResizeObserver && this.$refs.scrollContainer) {
                             const ro = new ResizeObserver(() => this.refreshScrollbar());
                             ro.observe(this.$refs.scrollContainer);
                         }
                     },
                     get counts() {
                         return {
                             all: this.allGigs.length,
                             headline: this.allGigs.filter(g => g.role === 'headline').length,
                             support: this.allGigs.filter(g => g.role === 'support').length
                         };
                     },
                     get filteredGigs() {
                         let list = this.allGigs;
                         if (this.roleFilter !== 'all') {
                             list = list.filter(g => g.role === this.roleFilter);
                         }
                         return list.slice().sort((a, b) => {
                             return this.sortOrder === 'asc' ? a.timestamp - b.timestamp : b.timestamp - a.timestamp;
                         });
                     },
                     get filteredCount() {
                         return this.filteredGigs.length;
                     },
                     get groupedYears() {
                         const groups = [];
                         const map = new Map();
                         for (const gig of this.filteredGigs) {
                             const y = gig.year;
                             if (!map.has(y)) {
                                 const group = { year: y, gigs: [] };
                                 map.set(y, group);
                                 groups.push(group);
                             }
                             map.get(y).gigs.push(gig);
                         }
                         return groups;
                     }
                 }">
                <!-- Section Header -->
                <div class="flex items-center gap-3 mb-8">
                    <h2 class="text-2xl font-black uppercase text-white tracking-tight">Gig History</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]"
                          x-text="filteredCount">
                        {{ $rawEvents->count() }}
                    </span>
                    <div class="flex-1 h-px bg-white/5"></div>
                </div>

                <!-- Filter and Sort Toolbar -->
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
                    <!-- Role Filter Tabs -->
                    <div class="inline-flex items-center p-1 bg-white/5 border border-white/5 text-xs font-bold w-fit">
                        <button type="button"
                                @click="setRole('all')"
                                :class="roleFilter === 'all' ? 'bg-pink-600 text-white shadow-sm shadow-pink-600/30' : 'text-gray-400 hover:text-white'"
                                class="px-3 py-1.5 transition-all duration-200 uppercase tracking-wider text-[10px]">
                            All (<span x-text="counts.all"></span>)
                        </button>
                        <button type="button"
                                @click="setRole('headline')"
                                :class="roleFilter === 'headline' ? 'bg-pink-600 text-white shadow-sm shadow-pink-600/30' : 'text-gray-400 hover:text-white'"
                                class="px-3 py-1.5 transition-all duration-200 uppercase tracking-wider text-[10px]">
                            Headline (<span x-text="counts.headline"></span>)
                        </button>
                        <button type="button"
                                @click="setRole('support')"
                                :class="roleFilter === 'support' ? 'bg-pink-600 text-white shadow-sm shadow-pink-600/30' : 'text-gray-400 hover:text-white'"
                                class="px-3 py-1.5 transition-all duration-200 uppercase tracking-wider text-[10px]">
                            Support (<span x-text="counts.support"></span>)
                        </button>
                    </div>

                    <!-- Sort Order Toggle -->
                    <div class="flex items-center">
                        <button type="button"
                                @click="toggleSort()"
                                class="inline-flex items-center gap-2 px-3.5 py-1.5 bg-white/5 hover:bg-white/10 active:scale-95 border border-white/5 text-gray-300 hover:text-white transition">
                            <svg class="w-4 h-4 text-pink-500 transition-transform duration-300"
                                 :class="{ 'rotate-180': sortOrder === 'asc' }"
                                 fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"></path>
                            </svg>
                            <span class="text-[10px] uppercase tracking-wider font-black" x-text="sortOrder === 'desc' ? 'Most Recent First' : 'Oldest First'"></span>
                        </button>
                    </div>
                </div>

                <!-- Sticky Header Gig List Container -->
                <div class="{{ $shouldScroll ? 'relative flex items-stretch gap-2.5 sm:gap-3.5' : '' }}">
                    <div x-ref="scrollContainer"
                         @if($shouldScroll) @scroll.passive="updateScrollbar()" @endif
                         class="{{ $shouldScroll ? 'flex-1 min-w-0 max-h-[580px] overflow-y-auto space-y-6 relative no-scrollbar overscroll-contain' : 'space-y-6 relative' }}">
                        <template x-for="group in groupedYears" :key="group.year">
                            <div class="space-y-3">
                                <!-- Sticky Year Bar -->
                                <div class="sticky top-0 z-10 px-4 py-2.5 bg-[#0f0f10]/95 backdrop-blur-md border border-white/20 flex items-center justify-between shadow-lg">
                                    <div class="flex items-center gap-2.5">
                                        <span class="text-sm sm:text-base font-black text-white tracking-wider" x-text="group.year"></span>
                                    </div>
                                    <span class="text-[10px] sm:text-[11px] font-bold text-gray-400 uppercase tracking-widest"
                                          x-text="group.gigs.length + (group.gigs.length === 1 ? ' gig' : ' gigs')">
                                    </span>
                                </div>

                                <!-- Gigs List for this year -->
                                <div class="space-y-3">
                                    <template x-for="gig in group.gigs" :key="gig.id">
                                        <a :href="gig.url"
                                           class="group block glass-panel p-5 sm:p-6 border border-white/5 hover:border-pink-500/30 transition-all duration-300 relative overflow-hidden">
                                            <div class="absolute top-0 right-0 w-32 h-32 bg-pink-600/5 blur-3xl -z-10 group-hover:bg-pink-600/10 transition"></div>
                                            
                                            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 sm:gap-6">
                                                <div class="flex items-center gap-4 sm:gap-6 min-w-0">
                                                    <!-- Date Badge (NO year) -->
                                                    <div class="flex flex-col items-center justify-center min-w-[62px] py-2.5 px-3 bg-white/5 border border-white/5 group-hover:border-pink-500/30 transition shrink-0">
                                                        <span class="text-[10px] font-black text-pink-500 uppercase italic leading-none mb-1" x-text="gig.dayOfWeek"></span>
                                                        <span class="text-xl font-black text-white leading-none" x-text="gig.day"></span>
                                                        <span class="text-[10px] font-black text-gray-400 uppercase tracking-widest leading-none mt-0.5" x-text="gig.month"></span>
                                                    </div>

                                                    <!-- Gig Details -->
                                                    <div class="min-w-0 flex-1">
                                                        <div class="flex items-center gap-2 mb-1.5 flex-wrap">
                                                            <span class="text-[10px] font-black text-gray-400 uppercase tracking-[0.2em] truncate" x-text="gig.venue"></span>
                                                            <template x-if="gig.userAttended">
                                                                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full bg-green-500/10 border border-green-500/30 text-[10px] font-bold text-green-400 tracking-wide leading-none">
                                                                    <svg class="w-2.5 h-2.5 text-green-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/>
                                                                    </svg>
                                                                    I was at this gig!
                                                                </span>
                                                            </template>
                                                        </div>
                                                        <h3 class="text-lg sm:text-xl font-black text-white uppercase tracking-tight group-hover:text-pink-500 transition-colors truncate leading-none"
                                                            x-text="gig.billTitle">
                                                        </h3>
                                                        <template x-if="gig.subtitleHtml">
                                                            <p class="text-xs text-gray-400 font-medium truncate -mt-1" x-html="gig.subtitleHtml"></p>
                                                        </template>
                                                    </div>
                                                </div>

                                                <!-- Role Badge & Arrow -->
                                                <div class="flex items-center justify-between sm:justify-end gap-3 sm:gap-4 shrink-0 pt-2 sm:pt-0 border-t sm:border-t-0 border-white/5">
                                                    <template x-if="gig.isHeadliner">
                                                        <span class="h-9 px-3.5 inline-flex items-center justify-center bg-pink-600 text-white text-[10px] font-black uppercase tracking-widest italic leading-none">HEADLINER</span>
                                                    </template>
                                                    <template x-if="!gig.isHeadliner">
                                                        <span class="h-9 px-3.5 inline-flex items-center justify-center bg-white/5 text-gray-400 text-[10px] font-bold uppercase tracking-widest italic leading-none border border-white/5">SUPPORT</span>
                                                    </template>
                                                    <div class="w-9 h-9 bg-white/5 flex items-center justify-center text-white group-hover:bg-pink-600 transition-colors">
                                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </template>
                                </div>
                            </div>
                        </template>

                        <!-- Empty state if filter has 0 results -->
                        <div x-show="filteredGigs.length === 0" class="glass-panel p-8 text-center border border-white/5">
                            <p class="text-sm font-bold uppercase tracking-widest text-gray-400">
                                No <span x-text="roleFilter"></span> gigs found for {{ $band->name }}
                            </p>
                        </div>
                    </div>

                    @if($shouldScroll)
                        <!-- Obvious Custom Scrollbar (Cross-browser, iOS & macOS Safari tested) -->
                        <div x-show="canScroll"
                             x-cloak
                             x-ref="scrollTrack"
                             @click="onTrackClick($event)"
                             class="w-3.5 bg-[#202228] shrink-0 self-stretch relative select-none rounded-none cursor-pointer overflow-hidden"
                             style="max-height: 580px;"
                             title="Scroll gig history">
                            <!-- Pink-600 Thumb with Square Edges -->
                            <div x-ref="scrollThumb"
                                 @pointerdown.prevent="startDrag($event)"
                                 class="w-full bg-pink-600 hover:bg-pink-500 active:bg-pink-700 rounded-none cursor-grab active:cursor-grabbing absolute left-0 touch-none transition-colors duration-150"
                                 :style="'top: ' + thumbTop + 'px; height: ' + thumbHeight + 'px;'">
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        @endif

        @if(isset($relatedGalleryItems) && $relatedGalleryItems->isNotEmpty())
            @php
                $hasMoreThan4 = $relatedGalleryItems->count() > 4;
                $cardWidthClass = $hasMoreThan4 
                    ? 'w-[calc(82%-8px)] sm:w-[calc((100%-2*1.5rem)/2.4)] lg:w-[calc((100%-4*1.5rem)/4.35)]' 
                    : 'w-[calc(82%-8px)] sm:w-[calc((100%-1.5rem)/2)] lg:w-[calc((100%-3*1.5rem)/4)]';
            @endphp
            <!-- Archival Posters & Memorabilia Section -->
            <div id="memorabilia" class="mt-20 scroll-mt-28" x-data="{
                canScrollLeft: false,
                canScrollRight: true,
                sliderIsDown: false,
                sliderStartX: 0,
                sliderScrollLeft: 0,
                hasDragged: false,
                lastMoveX: 0,
                lastMoveTime: 0,
                dragVelocity: 0,
                capturedPointerId: null,

                updateArrows() {
                    const el = this.$refs.artifactSlider;
                    if (!el) return;
                    this.canScrollLeft = el.scrollLeft > 10;
                    this.canScrollRight = el.scrollLeft < (el.scrollWidth - el.clientWidth - 15);
                },
                slideLeft() {
                    const el = this.$refs.artifactSlider;
                    if (!el) return;
                    el.style.scrollBehavior = 'smooth';
                    el.style.scrollSnapType = 'x mandatory';
                    const scrollAmount = el.clientWidth * 0.75;
                    el.scrollBy({ left: -scrollAmount, behavior: 'smooth' });
                    setTimeout(() => this.updateArrows(), 350);
                },
                slideRight() {
                    const el = this.$refs.artifactSlider;
                    if (!el) return;
                    el.style.scrollBehavior = 'smooth';
                    el.style.scrollSnapType = 'x mandatory';
                    const scrollAmount = el.clientWidth * 0.75;
                    el.scrollBy({ left: scrollAmount, behavior: 'smooth' });
                    setTimeout(() => this.updateArrows(), 350);
                },
                handlePointerDown(e) {
                    if (e.pointerType === 'mouse' && e.button !== 0) return;
                    const el = this.$refs.artifactSlider;
                    if (!el) return;

                    this.sliderIsDown = true;
                    this.hasDragged = false;
                    this.sliderStartX = e.clientX;
                    this.sliderScrollLeft = el.scrollLeft;
                    this.lastMoveX = e.clientX;
                    this.lastMoveTime = performance.now();
                    this.dragVelocity = 0;
                    this.capturedPointerId = null;

                    el.style.scrollBehavior = 'auto';
                    el.style.scrollSnapType = 'none';
                },
                handlePointerMove(e) {
                    if (!this.sliderIsDown) return;
                    const el = this.$refs.artifactSlider;
                    if (!el) return;

                    const deltaX = e.clientX - this.sliderStartX;
                    if (Math.abs(deltaX) > 6) {
                        this.hasDragged = true;
                        if (!this.capturedPointerId) {
                            try {
                                el.setPointerCapture(e.pointerId);
                                this.capturedPointerId = e.pointerId;
                            } catch (err) {}
                        }
                    }

                    const now = performance.now();
                    const dt = now - this.lastMoveTime;
                    if (dt > 8) {
                        this.dragVelocity = (e.clientX - this.lastMoveX) / dt;
                        this.lastMoveX = e.clientX;
                        this.lastMoveTime = now;
                    }

                    el.scrollLeft = this.sliderScrollLeft - deltaX;
                    this.updateArrows();
                },
                handlePointerUp(e) {
                    if (!this.sliderIsDown) return;
                    this.sliderIsDown = false;

                    const el = this.$refs.artifactSlider;
                    if (el) {
                        if (this.capturedPointerId !== null) {
                            try {
                                if (el.hasPointerCapture(this.capturedPointerId)) {
                                    el.releasePointerCapture(this.capturedPointerId);
                                }
                            } catch (err) {}
                            this.capturedPointerId = null;
                        }

                        el.style.scrollBehavior = 'smooth';
                        el.style.scrollSnapType = 'x mandatory';

                        const now = performance.now();
                        const timeSinceLastMove = now - this.lastMoveTime;

                        if (this.hasDragged && timeSinceLastMove < 80 && Math.abs(this.dragVelocity) > 0.25) {
                            const maxMomentum = el.clientWidth * 0.75;
                            const momentum = Math.max(-maxMomentum, Math.min(maxMomentum, -this.dragVelocity * 140));
                            el.scrollBy({ left: momentum, behavior: 'smooth' });
                        }

                        setTimeout(() => this.updateArrows(), 350);
                    }

                    setTimeout(() => {
                        this.hasDragged = false;
                        this.updateArrows();
                    }, 120);
                },
                init() {
                    this.$nextTick(() => this.updateArrows());
                }
            }">
                <!-- Section Header -->
                <div class="flex items-center justify-between mb-8">
                    <div class="flex items-center gap-3">
                        <h2 class="text-2xl font-black uppercase text-white tracking-tight">Posters &amp; Memorabilia</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]">
                            {{ $relatedGalleryItems->count() }}
                        </span>
                        <div class="hidden sm:block flex-1 h-px bg-white/5"></div>
                    </div>

                    <div class="flex items-center gap-4">
                        @if($hasMoreThan4)
                            <div class="hidden sm:flex items-center gap-2">
                                <button type="button"
                                        @click="slideLeft()"
                                        :disabled="!canScrollLeft"
                                        :class="canScrollLeft ? 'opacity-100 hover:bg-pink-600 hover:border-pink-500 text-white' : 'opacity-25 cursor-not-allowed text-gray-500'"
                                        class="w-8 h-8 rounded-full bg-[#1e1e1e] border border-white/20 flex items-center justify-center transition"
                                        aria-label="Previous artifacts">
                                    <svg class="w-4 h-4" 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>
                                </button>
                                <button type="button"
                                        @click="slideRight()"
                                        :disabled="!canScrollRight"
                                        :class="canScrollRight ? 'opacity-100 hover:bg-pink-600 hover:border-pink-500 text-white' : 'opacity-25 cursor-not-allowed text-gray-500'"
                                        class="w-8 h-8 rounded-full bg-[#1e1e1e] border border-white/20 flex items-center justify-center transition"
                                        aria-label="Next artifacts">
                                    <svg class="w-4 h-4" 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>
                                </button>
                            </div>
                        @endif

                        <a href="{{ route('gallery.index', ['search' => $band->name]) }}" 
                           class="text-xs font-bold uppercase tracking-widest text-pink-500 hover:text-white transition group inline-flex items-center gap-1">
                            <span>View In Gallery</span>
                            <svg class="w-3.5 h-3.5 transform group-hover:translate-x-0.5 transition" 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>
                    </div>
                </div>

                <!-- Artifact Cards Slider with Peeking and Pointer Drag -->
                <div class="relative group/slider">
                    <div x-ref="artifactSlider"
                         @scroll.passive="updateArrows()"
                         @pointerdown="handlePointerDown($event)"
                         @pointermove="handlePointerMove($event)"
                         @pointerup="handlePointerUp($event)"
                         @pointercancel="handlePointerUp($event)"
                         @dragstart.prevent
                         style="scrollbar-width: none; -ms-overflow-style: none;"
                         class="overflow-x-auto flex snap-x snap-mandatory gap-4 sm:gap-6 py-4 px-1 -my-2 no-scrollbar [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden select-none cursor-grab active:cursor-grabbing touch-pan-x">
                        @php
                            $rotations = ['-rotate-1', 'rotate-1', '-rotate-[1.5deg]', 'rotate-[1.5deg]'];
                        @endphp
                        @foreach($relatedGalleryItems as $index => $item)
                            @php
                                $rot = $rotations[$index % count($rotations)];
                            @endphp
                            <a href="{{ route('gallery.show', $item) }}" 
                               draggable="false"
                               @dragstart.prevent.stop
                               @click="if (hasDragged) { $event.preventDefault(); $event.stopPropagation(); return false; }"
                               class="group relative flex flex-col bg-neutral-950/70 border border-white/15 hover:border-pink-500/60 p-3 sm:p-4 rounded-none transition-all duration-300 ease-out transform {{ $rot }} hover:z-20 shadow-xl hover:shadow-2xl antialiased shrink-0 {{ $cardWidthClass }} snap-start cursor-grab active:cursor-grabbing select-none">
                                <!-- Archival Image Housing (Square) -->
                                <div class="aspect-square bg-black/40 flex items-center justify-center relative overflow-hidden pointer-events-none select-none">
                                    <img src="{{ $item->thumbnail(600, 600, 'scale') }}" 
                                         alt="{{ $item->altText($band->name, $index + 1) }}" 
                                         loading="lazy"
                                         draggable="false"
                                         class="max-w-full max-h-full w-auto h-auto object-contain drop-shadow-[0_4px_12px_rgba(0,0,0,0.6)] group-hover:scale-105 transition-transform duration-[240ms] ease-out select-none pointer-events-none">
                                </div>

                                <!-- Caption / Title (Inside Mount) -->
                                <div class="mt-3 min-h-[2.5rem] sm:min-h-[2.75rem] flex items-start pointer-events-none select-none">
                                    <h3 class="text-sm sm:text-base font-bold text-white uppercase tracking-tight line-clamp-2 leading-snug pointer-events-none select-none">
                                        {{ $item->caption ?: 'Untitled Artifact' }}
                                    </h3>
                                </div>
                            </a>
                        @endforeach
                    </div>

                    @if($hasMoreThan4)
                        <!-- Right peek fade overlay when more items can be scrolled -->
                        <div x-show="canScrollRight"
                             x-transition:enter="transition-opacity duration-300"
                             x-transition:enter-start="opacity-0"
                             x-transition:enter-end="opacity-100"
                             x-transition:leave="transition-opacity duration-300"
                             x-transition:leave-start="opacity-100"
                             x-transition:leave-end="opacity-0"
                             class="hidden sm:block absolute right-0 top-0 bottom-0 w-12 sm:w-16 md:w-20 bg-gradient-to-l from-[#0a0a0a] via-[#0a0a0a]/60 to-transparent pointer-events-none z-30">
                        </div>

                        <!-- Left fade overlay when scrolled away from start -->
                        <div x-show="canScrollLeft"
                             x-transition:enter="transition-opacity duration-300"
                             x-transition:enter-start="opacity-0"
                             x-transition:enter-end="opacity-100"
                             x-transition:leave="transition-opacity duration-300"
                             x-transition:leave-start="opacity-100"
                             x-transition:leave-end="opacity-0"
                             class="hidden sm:block absolute left-0 top-0 bottom-0 w-12 sm:w-16 md:w-20 bg-gradient-to-r from-[#0a0a0a] via-[#0a0a0a]/60 to-transparent pointer-events-none z-30">
                        </div>
                    @endif
                </div>
            </div>
        @endif

        <!-- More Featured Bands Panel -->
        @if(isset($moreBands) && $moreBands->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">Fibbers Vault Archive</span>
                        </div>
                        <h2 class="text-3xl sm:text-4xl md:text-5xl font-black text-white uppercase tracking-tight">
                            More Featured Bands
                        </h2>
                        <p class="text-base sm:text-lg text-gray-400 font-medium leading-relaxed mt-3">
                            Explore more legendary artists and performers that graced the Fibbers stages.
                        </p>
                    </div>
                    <a href="{{ route('bands.index', ['featured' => 1]) }}"
                        class="inline-flex items-center gap-2 text-pink-600 font-black uppercase tracking-widest hover:text-white transition group shrink-0">
                        View More Featured Bands
                        <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-band-cards', ['randomBands' => $moreBands, 'startIndex' => 0])
                </div>
            </div>
        @endif

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