@php
    $rotations = ['-rotate-1', 'rotate-[1.5deg]', '-rotate-[1.5deg]', 'rotate-1'];
    $startIndex = $startIndex ?? 0;
@endphp
@foreach ($randomGigs as $index => $gig)
    @php
        $rot = $rotations[($startIndex + $index) % count($rotations)];
        $gigTitle = $gig->name ?: ($gig->bands->first()->name ?? 'Special Event');
        $gigFallback = $gigTitle . ' - Live at Fibbers York' . ($gig->event_date ? ' (' . $gig->event_date->format('Y') . ')' : '');
    @endphp
    <a href="{{ route('gigs.show', $gig) }}"
        data-gig-id="{{ $gig->id }}"
        class="group relative aspect-[4/5] overflow-hidden bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform {{ $rot }} hover:shadow-[0_15px_35px_rgba(0,0,0,0.8)] hover:scale-[1.02] hover:z-10 transition-all duration-300">
        @if ($firstImage = $gig->firstImage())
            <img src="{{ $firstImage->thumbnail(600, 750) }}" 
                 alt="{{ $firstImage->altText($gigFallback) }}"
                 loading="lazy"
                 class="absolute inset-0 w-full h-full object-cover group-hover:scale-110 transition duration-700">
        @else
            <div class="absolute inset-0 bg-neutral-900 flex flex-col items-center justify-center text-gray-600 transition duration-700">
                <svg class="w-14 h-14 text-white/10" 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

        <!-- Vignette gradient overlay matching homepage featured bands -->
        <div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-85 transition duration-500 group-hover:opacity-95"></div>

        <!-- Featured Gig badge if applicable -->
        @if ($gig->featured)
            <div class="absolute top-3 right-3 bg-pink-600 text-white text-[9px] font-black py-0.5 px-2 uppercase tracking-wider shadow-md z-10">
                FEATURED
            </div>
        @endif

        <!-- Card bottom text -->
        <div class="absolute bottom-5 left-5 right-5 sm:bottom-6 sm:left-6 sm:right-6 flex flex-col justify-end z-10">
            @if ($gig->event_date)
                <span class="inline-flex items-center px-2 py-0.5 bg-pink-600 text-white font-black uppercase text-[10px] sm:text-[11px] tracking-wider rounded-none leading-none mb-2 self-start shadow-md">
                    {{ $gig->event_date->format('D d M Y') }}
                </span>
            @endif

            <h3 class="text-xl sm:text-2xl font-black text-white uppercase leading-tight break-words group-hover:text-pink-400 transition-colors line-clamp-2">
                {{ $gigTitle }}
            </h3>

            @if($gig->bands && $gig->bands->count() > 1)
                <p class="text-xs text-gray-400 font-medium leading-tight line-clamp-1 mt-1.5">
                    Support: {{ $gig->bands->skip(1)->pluck('name')->implode(', ') }}
                </p>
            @endif
        </div>
    </a>
@endforeach