@php
    $homeSchema = [
        '@context' => 'https://schema.org',
        '@type' => 'WebSite',
        'name' => 'Fibbers - An Archive 1992-2022',
        'url' => url('/'),
        'description' => 'The official historical archive of Fibbers live music venue in York, UK (1992–2022).',
        'potentialAction' => [
            '@type' => 'SearchAction',
            'target' => route('bands.index') . '?search={search_term_string}',
            'query-input' => 'required name=search_term_string'
        ]
    ];
@endphp

<x-main-layout 
    description="The official historical archive of Fibbers live music venue in York, UK (1992–2022). Explore over 4,000 gigs, bands, photos, videos, and memories."
    :image="asset('images/hero.png')"
    :schema="$homeSchema"
>
    <div class="relative min-h-[85vh] -mt-[64px] md:-mt-[97px] pt-[64px] md:pt-[97px] flex items-center justify-center overflow-hidden">
        <!-- Hero Background -->
        <div class="absolute inset-0 z-0 overflow-hidden">
            <video autoplay loop muted playsinline poster="{{ asset('images/homepage-thumbnail.jpg') }}" class="w-full h-full object-cover brightness-[0.7] contrast-[1.05]">
                <source src="{{ asset('video/homepage-v1.mp4') }}" type="video/mp4">
            </video>
            <div class="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent"></div>
        </div>

        <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 flex flex-col items-center md:items-start text-center md:text-left">
            <h1 class="flex flex-col items-center md:items-start gap-2 sm:gap-3 mb-16 text-2xl sm:text-4xl md:text-5xl font-normal">
                <!-- Top strip: The heart of York's music scene for 30 years. -->
                <div class="inline-flex flex-col items-start rotate-3 transform origin-center md:origin-bottom-left mb-2 sm:mb-7">
                    <span class="bg-white text-black px-3 pt-2.5 pb-1 sm:px-4 sm:pt-4 sm:pb-1 md:pt-5 md:pb-1 leading-none shadow-xl">The heart of York's music</span>
                    <span class="bg-white text-black px-3 py-1 sm:px-4 sm:py-1 leading-none shadow-xl -mt-[1px]">scene for 30 years.</span>
                </div>
                <!-- Bottom strip: If you were there, you know. -->
                <div class="inline-flex -rotate-1 sm:-rotate-[1.5deg] translate-x-3 sm:translate-x-6 md:translate-x-10 transform origin-center md:origin-top-left mt-0.5">
                    <span class="bg-white text-black px-3 pt-2.5 pb-1 sm:px-4 sm:pt-4 sm:pb-1 md:pt-5 md:pb-1 leading-none shadow-xl">If you were there, you know.</span>
                </div>
            </h1>
            <p class="text-lg sm:text-xl md:text-2xl text-white font-medium mb-12 max-w-2xl mx-auto md:mx-0 md:ml-auto md:self-end md:text-right leading-snug sm:leading-relaxed">
                Decades of sweat on the walls and ringing in our ears. Fibbers defined live music in York. This archive keeps these memories alive for the bands who took the stage, the grafters who ran it and the legends who filled the room.
            </p>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 lg:gap-10 w-full pt-4">
                <a href="/bands"
                    class="bg-black text-white border border-white hover:border-pink-600 hover:bg-pink-600 hover:text-white feature-font text-base sm:text-lg md:text-xl lg:text-2xl font-bold py-4 px-3 sm:py-5 sm:px-5 flex items-center justify-center text-center shadow-xl -rotate-2 hover:rotate-0 hover:scale-105 transition-all duration-200 transform leading-tight min-h-[64px] sm:min-h-[76px]">
                    Discover the bands
                </a>
                <a href="/gigs"
                    class="bg-black text-white border border-white hover:border-pink-600 hover:bg-pink-600 hover:text-white feature-font text-base sm:text-lg md:text-xl lg:text-2xl font-bold py-4 px-3 sm:py-5 sm:px-5 flex items-center justify-center text-center shadow-xl rotate-1 hover:rotate-0 hover:scale-105 transition-all duration-200 transform leading-tight min-h-[64px] sm:min-h-[76px]">
                    Relive the gigs
                </a>
                <a href="{{ route('gallery.index') }}"
                    class="bg-black text-white border border-white hover:border-pink-600 hover:bg-pink-600 hover:text-white feature-font text-base sm:text-lg md:text-xl lg:text-2xl font-bold py-4 px-3 sm:py-5 sm:px-5 flex items-center justify-center text-center shadow-xl -rotate-1 hover:rotate-0 hover:scale-105 transition-all duration-200 transform leading-tight min-h-[64px] sm:min-h-[76px]">
                    Trawl the archive
                </a>
                @auth
                    <a href="{{ route('community.show', [auth()->user(), auth()->user()->slug]) }}"
                        class="bg-black text-white border border-white hover:border-pink-600 hover:bg-pink-600 hover:text-white feature-font text-base sm:text-lg md:text-xl lg:text-2xl font-bold py-4 px-3 sm:py-5 sm:px-5 flex items-center justify-center text-center shadow-xl rotate-2 hover:rotate-0 hover:scale-105 transition-all duration-200 transform leading-tight min-h-[64px] sm:min-h-[76px]">
                        {{ auth()->user()->first_name ? auth()->user()->first_name . "'s story" : 'Your story' }}
                    </a>
                @else
                    <a href="/register"
                        class="bg-black text-white border border-white hover:border-pink-600 hover:bg-pink-600 hover:text-white feature-font text-base sm:text-lg md:text-xl lg:text-2xl font-bold py-4 px-3 sm:py-5 sm:px-5 flex items-center justify-center text-center shadow-xl rotate-2 hover:rotate-0 hover:scale-105 transition-all duration-200 transform leading-tight min-h-[64px] sm:min-h-[76px]">
                        Share your story
                    </a>
                @endauth
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="max-w-7xl mx-auto px-4 py-12">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-12 lg:gap-16 text-center">
            <!-- Stat 1 -->
            <div class="relative p-8 sm:p-10 flex flex-col justify-between">
                <div class="absolute inset-0 bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform -rotate-2 pointer-events-none">
                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-pink-600/10 rounded-full blur-2xl"></div>
                </div>
                <div class="relative z-10">
                    <div class="text-6xl font-black text-pink-600 mb-4 tracking-tighter">
                        30+
                    </div>
                    <h3 class="text-2xl font-black mb-3 text-white uppercase">Years of Live Music</h3>
                    <p class="text-gray-400 leading-relaxed">From the early days on Stonebow to the final curtain, Fibbers was at the heart of York's music scene.</p>
                </div>
            </div>

            <!-- Stat 2 -->
            <div class="relative p-8 sm:p-10 flex flex-col justify-between">
                <div class="absolute inset-0 bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform rotate-[1.5deg] pointer-events-none">
                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-white/5 rounded-full blur-2xl"></div>
                </div>
                <div class="relative z-10">
                    <div class="text-6xl font-black text-pink-600 mb-4 tracking-tighter">
                        7000+
                    </div>
                    <h3 class="text-2xl font-black mb-3 text-white uppercase">Bands</h3>
                    <p class="text-gray-400 leading-relaxed">From those who made it, to those that didn't. Folk and poetry to metal and punk. Every artist and band that graced our stages, right here.</p>
                </div>
            </div>

            <!-- Stat 3 -->
            <div class="relative p-8 sm:p-10 flex flex-col justify-between">
                <div class="absolute inset-0 bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform -rotate-[1.5deg] pointer-events-none">
                    <div class="absolute -right-4 -top-4 w-24 h-24 bg-white/5 rounded-full blur-2xl"></div>
                </div>
                <div class="relative z-10">
                    <div class="text-6xl font-black text-pink-600 mb-4 tracking-tighter">
                        8000+
                    </div>
                    <h3 class="text-2xl font-black mb-3 text-white uppercase">Gigs Archived</h3>
                    <p class="text-gray-400 leading-relaxed">Every line-up, every poster, every setlist and every memorable night. It's all here for you to jump right back in.</p>
                </div>
            </div>
        </div>

        <!-- Fibbers Vault Section -->
        <div class="max-w-7xl mx-auto px-4 py-24 border-t border-white/5">
            <div class="flex flex-col md:flex-row md:items-end justify-between gap-8 mb-16">
                <div class="max-w-2xl">
                    <h2 class="text-4xl md:text-5xl font-black text-white uppercase mb-6 tracking-tight">
                        Fibbers Vault ('92-'22)
                    </h2>
                    <p class="text-lg text-gray-400 font-medium leading-relaxed">
                        Almost 7000 bands, 8000 gigs and 3500 posters, flyers, photos, riders, press clippings, food menus and other
                        unique, fascinating bits and pieces.
                    </p>
                </div>
                <a href="{{ route('bands.index') }}"
                    class="inline-flex items-center gap-2 text-pink-600 font-black uppercase tracking-widest hover:text-white transition group">
                    View All 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 id="bands-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                @include('partials.random-band-cards', ['randomBands' => $randomBands, 'startIndex' => 0])
            </div>

            <!-- Subtle Load More Featured Bands Button -->
            <div class="mt-12 text-center">
                <button id="load-more-bands-btn"
                    type="button"
                    class="group inline-flex items-center gap-2.5 px-6 py-3 bg-[#1e1e1e] hover:bg-[#262626] border border-white/20 hover:border-pink-500/50 text-gray-400 hover:text-white text-xs sm:text-sm font-bold uppercase tracking-widest transition-all duration-200 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed">
                    <svg class="w-4 h-4 text-pink-500 transition-transform duration-500 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                    </svg>
                    <span id="load-more-text">Show more featured bands</span>
                    <svg id="load-more-spinner" class="hidden w-4 h-4 text-pink-500 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
                    </svg>
                </button>
            </div>

            <script>
                document.addEventListener('DOMContentLoaded', function() {
                    const btn = document.getElementById('load-more-bands-btn');
                    const grid = document.getElementById('bands-grid');
                    const text = document.getElementById('load-more-text');
                    const spinner = document.getElementById('load-more-spinner');

                    if (!btn || !grid) return;

                    btn.addEventListener('click', async function() {
                        btn.disabled = true;
                        text.textContent = 'Loading bands...';
                        spinner.classList.remove('hidden');

                        try {
                            const existingCards = grid.querySelectorAll('[data-band-id]');
                            const excludeIds = Array.from(existingCards).map(el => el.dataset.bandId).filter(Boolean);
                            const offset = existingCards.length;

                            const url = new URL('{{ route('api.bands.random') }}', window.location.origin);
                            if (excludeIds.length) {
                                url.searchParams.set('exclude', excludeIds.join(','));
                            }
                            url.searchParams.set('offset', offset);

                            const res = await fetch(url);
                            if (!res.ok) throw new Error('Failed to load bands');
                            const html = await res.text();

                            if (html.trim().length > 0) {
                                const parser = new DOMParser();
                                const doc = parser.parseFromString(html, 'text/html');
                                const newCards = Array.from(doc.body.children);

                                // Preload & decode every image in memory before showing the cards
                                const imagePromises = [];
                                newCards.forEach(card => {
                                    const imgs = card.querySelectorAll('img');
                                    imgs.forEach(img => {
                                        if (img.src) {
                                            imagePromises.push(new Promise(resolve => {
                                                const preloader = new Image();
                                                preloader.onload = () => {
                                                    if ('decode' in preloader) {
                                                        preloader.decode().then(resolve).catch(resolve);
                                                    } else {
                                                        resolve();
                                                    }
                                                };
                                                preloader.onerror = resolve;
                                                preloader.src = img.src;
                                            }));
                                        }
                                    });
                                });

                                if (imagePromises.length > 0) {
                                    await Promise.all(imagePromises);
                                }

                                // Append cards with opacity 0 so they don't clunk in
                                newCards.forEach(card => {
                                    card.style.opacity = '0';
                                    card.style.transition = 'opacity 0.6s ease-out';
                                    grid.appendChild(card);
                                });

                                // Stagger fade in smoothly now that images are completely ready
                                requestAnimationFrame(() => {
                                    newCards.forEach((card, index) => {
                                        setTimeout(() => {
                                            card.style.opacity = '1';
                                        }, index * 80);
                                    });
                                });
                            }
                        } catch (err) {
                            console.error(err);
                        } finally {
                            btn.disabled = false;
                            text.textContent = 'Show more featured bands';
                            spinner.classList.add('hidden');
                        }
                    });
                });
            </script>
        </div>

        <!-- Retro Quote Section -->
        <div class="max-w-4xl mx-auto px-4 py-20 text-center border-y border-white/5">
            <blockquote class="text-3xl md:text-5xl text-white not-italic leading-tight" style="font-family: 'Special Elite', cursive;">
                "If you weren't there, you wouldn't understand. If you were, you'll never forget."
            </blockquote>
        </div>

        <!-- This Week In History Section -->
        @if(isset($historyTabs) && !empty($historyTabs))
            <x-this-week-in-history :tabs="$historyTabs" />
        @endif

        <!-- CTA Section -->
        <div class="max-w-5xl mx-auto px-4 py-16 sm:py-24 text-center">
            <div class="relative group p-10 sm:p-16 md:p-20 flex flex-col items-center justify-center">
                <div class="absolute inset-0 bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform rotate-1 group-hover:rotate-0 group-hover:scale-[1.01] group-hover:border-pink-500/40 transition-all duration-300 pointer-events-none">
                    <div class="absolute -right-6 -top-6 w-48 h-48 bg-pink-600/15 rounded-full blur-3xl group-hover:bg-pink-600/25 transition"></div>
                    <div class="absolute -left-6 -bottom-6 w-48 h-48 bg-blue-600/10 rounded-full blur-3xl group-hover:bg-pink-600/15 transition"></div>
                </div>

                <div class="relative z-10 max-w-2xl mx-auto">
                    <h2 class="text-4xl sm:text-5xl font-black mb-6 text-white uppercase leading-none">The Archive Needs You</h2>
                    <p class="text-lg sm:text-xl text-white mb-10 md:mb-12 leading-relaxed font-medium">
                        The history of Fibbers wasn't just made on stage.<br />It happened on the dance floor, at the bar, in the loos, in the dressing room, and outside in the queue. Dig out your old photos, videos, flyers, and tickets, and tell us your stories.
                    </p>
                    <a href="{{ route('register') }}"
                        class="relative inline-flex items-center justify-center px-8 sm:px-12 py-5 sm:py-6 text-white text-lg sm:text-xl md:text-2xl font-bold tracking-wide group/btn transition-all">
                        <svg class="absolute inset-0 w-full h-full text-pink-600 fill-current drop-shadow-[0_0_20px_rgba(219,39,119,0.5)] transform -rotate-1 sm:-rotate-2 group-hover/btn:rotate-0 group-hover/btn:scale-105 group-hover/btn:text-pink-500 transition-all duration-200 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">Share your memories!</span>
                    </a>
                </div>
            </div>
        </div>
</x-main-layout>