@php
    // Roadmap data (quarters and tasks)
    $quarters = [
        [
            'label' => 'Q4 2024',
            'items' => [
                'Finalise branding and visual identity',
                'Complete the Game Design Document (GDD)',
                'Begin community engagement on social media platforms',
                'Develop and release tokenomics structure and whitepaper',
                'Develop initial concept art and Version 1 of the UI design',
                'Launch landing page to capture early interest',
            ],
        ],
        [
            'label' => 'Q1 2025',
            'items' => [
                'Conduct token audit and start presale for in-game currency and NFTs',
                'Begin designing the first version of stadiums',
                'Implement and test basic player view modes and movement mechanics',
                'Release a PVE match simulation demo',
                'Launch in-game marketplace for buying, selling, and trading assets',
            ],
        ],
        [
            'label' => 'Q2 2025',
            'items' => [
                'Finalise the go-to-market strategy',
                'Public beta launch on App Store and Google Play',
                'Introduce NFT-based player cards, stadiums, and assets',
                'Implement achievements and level cap system',
                'Introduce exclusive member-only features',
            ],
        ],
        [
            'label' => 'Q3 2025',
            'items' => [
                'Develop and roll out AI-powered custom challenges',
                'Introduce multiplayer mode with real-time matches',
                'Launch story-driven campaigns or scenarios',
                'Implement community leaderboards for top-performing managers',
                'Introduce item rarity system for assets',
            ],
        ],
        [
            'label' => 'Q4 2025',
            'items' => [
                'Allow players to create and manage their own tournaments and leagues',
                'Add new player attributes and power-ups',
                'Enhance marketplace for community-driven sales and trades',
                'Introduce skins for players and customizable stadium features',
                'Launch large-scale in-game events such as international tournaments',
            ],
        ],
    ];

    // Discover slider images to use for roadmap panels
    $dir = public_path('assets/img/slider');
    $extensions = ['jpg','jpeg','png','webp','gif','avif'];
    $imgs = [];
    if (is_dir($dir)) {
        foreach (scandir($dir) as $file) {
            if ($file === '.' || $file === '..') continue;
            $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
            if (in_array($ext, $extensions, true)) $imgs[] = asset('assets/img/slider/' . $file);
        }
        natsort($imgs);
        $imgs = array_values($imgs);
    }
    if (empty($imgs)) {
        // Fallbacks if no images found
        $imgs = [asset('assets/img/slider/slide1.jpg'), asset('assets/img/slider/slide2.jpg'), asset('assets/img/slider/slide3.jpg'), asset('assets/img/slider/slide4.jpg')];
    }

    // Build items with proper quarter labels and content
    $items = [];
    foreach ($quarters as $i => $q) {
        // Create meaningful headlines from the first task of each quarter
        $headlines = [
            'FINALISE BRANDING AND VISUAL IDENTITY',
            'CONDUCT TOKEN AUDIT AND START PRESALE',
            'FINALISE GO-TO-MARKET STRATEGY', 
            'DEVELOP AI-POWERED CUSTOM CHALLENGES',
            'CREATE TOURNAMENT AND LEAGUE SYSTEMS'
        ];
        
        $descriptions = [
            'Establish the foundation with complete branding, game design documentation, and community engagement across social platforms.',
            'Launch token economics with audited presale, stadium designs, player mechanics testing, and marketplace infrastructure.',
            'Execute public beta launch on mobile platforms with NFT integration, achievement systems, and exclusive member features.',
            'Deploy advanced AI systems with multiplayer real-time matches, story campaigns, and competitive leaderboard functionality.',
            'Enable player-created tournaments with enhanced marketplace, customizable features, and large-scale international events.'
        ];
        
        $items[] = [
            'label' => $q['label'],
            'headline' => $headlines[$i] ?? strtoupper($q['items'][0]),
            'description' => $descriptions[$i] ?? 'Key milestones and deliverables planned for this quarter.',
            'bullets' => $q['items'],
            'image' => $imgs[$i % max(count($imgs), 1)],
        ];
    }
@endphp

<section
    x-data="rmTabs({ items: @js($items) })"
    x-init="init()"
    role="region"
    aria-label="Product Roadmap"
    class="relative isolate overflow-hidden bg-gradient-to-br from-slate-900 via-gray-900 to-black text-white">

    <!-- Starfield background effect -->
    <div class="absolute inset-0 opacity-30">
        <div class="absolute top-10 left-10 w-1 h-1 bg-white rounded-full animate-pulse"></div>
        <div class="absolute top-20 right-20 w-0.5 h-0.5 bg-white rounded-full animate-pulse" style="animation-delay: 0.5s"></div>
        <div class="absolute top-40 left-1/4 w-1 h-1 bg-white rounded-full animate-pulse" style="animation-delay: 1s"></div>
        <div class="absolute bottom-32 right-1/3 w-0.5 h-0.5 bg-white rounded-full animate-pulse" style="animation-delay: 1.5s"></div>
        <div class="absolute top-1/3 left-1/2 w-1 h-1 bg-white rounded-full animate-pulse" style="animation-delay: 2s"></div>
        <div class="absolute bottom-20 left-20 w-0.5 h-0.5 bg-white rounded-full animate-pulse" style="animation-delay: 2.5s"></div>
    </div>

    <div class="relative min-h-screen flex items-center justify-center p-4">
        <div class="w-full max-w-7xl">
            <div class="flex flex-col lg:flex-row gap-0">
                <!-- Main Panel -->
                <div class="flex-1">
                    <div class="relative overflow-hidden bg-slate-800/50 backdrop-blur-sm">
                        <div class="flex flex-col md:flex-row min-h-[600px]">
                            <!-- Left vertical label -->
                            <div class="hidden md:flex absolute left-4 top-1/2 -translate-y-1/2 z-10">
                                <span class="-rotate-90 text-xs uppercase tracking-[0.4em] text-white/60 font-medium whitespace-nowrap">Kickstart</span>
                            </div>
                            
                            <!-- Image -->
                            <div class="flex-1 md:flex-none md:w-1/2 relative">
                                <img :src="items[index].image" alt="Roadmap visual" class="w-full h-full object-cover" :loading="index===0 ? 'eager' : 'lazy'" decoding="async">
                                <div class="absolute inset-0 bg-gradient-to-r from-transparent to-slate-800/20"></div>
                            </div>
                            
                            <!-- Content -->
                            <div class="flex-1 md:w-1/2 p-8 lg:p-12 flex flex-col justify-center">
                                <div class="text-sm text-white/70 mb-6" x-text="items[index].label"></div>
                                <h2 data-head class="font-black text-4xl lg:text-5xl xl:text-6xl leading-none uppercase text-white tracking-tight mb-8" x-text="items[index].headline"></h2>
                                <p data-desc class="text-white/70 text-lg leading-relaxed max-w-lg mb-8" x-text="items[index].description"></p>
                                
                                <!-- Interactive Bullet Points -->
                                <div data-bullets class="space-y-3">
                                    <template x-for="(bullet, bi) in items[index].bullets" :key="'bullet-'+bi">
                                        <div class="flex items-start gap-3 opacity-90 hover:opacity-100 transition-opacity duration-200">
                                            <div class="mt-1.5 w-2 h-2 rounded-full bg-cyan-400 shrink-0"></div>
                                            <p class="text-white/80 text-base leading-relaxed" x-text="bullet"></p>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Vertical Tabs -->
                <div class="w-full lg:w-auto mt-4 lg:mt-0">
                    <div class="flex lg:flex-col h-16 lg:h-[600px] w-full lg:w-24">
                        <template x-for="(it, i) in items" :key="'tab-'+i">
                            <button type="button" @click="go(i)"
                                    class="relative flex-1 lg:flex-none lg:h-full transition-colors duration-300"
                                    :class="isActive(i) ? 'bg-slate-700/80' : 'bg-slate-800/60 hover:bg-slate-700/40'">
                                <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white/80 font-medium text-sm whitespace-nowrap"
                                      :class="isActive(i) ? 'lg:-rotate-90' : 'lg:-rotate-90'"
                                      x-text="it.label"></span>
                            </button>
                        </template>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@once
    @push('scripts')
        <script>
            function rmTabs(opts) {
                return {
                    items: opts?.items || [],
                    index: 0,
                    reduced: window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches,

                    init() {
                        this.$nextTick(() => {
                            this.reveal();
                        });
                        // Keyboard arrows
                        window.addEventListener('keydown', (e) => {
                            if (e.key === 'ArrowRight') { e.preventDefault(); this.next(); }
                            if (e.key === 'ArrowLeft')  { e.preventDefault(); this.prev(); }
                        });
                    },

                    go(i) { if (i === this.index) return; this.index = i; this.reveal(); },
                    next() { this.index = (this.index + 1) % this.items.length; this.reveal(); },
                    prev() { this.index = (this.index + this.items.length - 1) % this.items.length; this.reveal(); },
                    isActive(i) { return this.index === i; },

                    reveal() {
                        const G = window.gsap; if (!G || this.reduced) return;
                        const root = this.$root;
                        const head = root.querySelector('[data-head]');
                        const desc = root.querySelector('[data-desc]');
                        const bullets = root.querySelectorAll('[data-bullets] > div');
                        
                        // Set initial states
                        G.set([head, desc], { y: 16, opacity: 0 });
                        G.set(bullets, { y: 12, opacity: 0 });
                        
                        // Animate in sequence
                        const tl = G.timeline();
                        tl.to(head, { y: 0, opacity: 1, duration: 0.6, ease: 'power3.out' })
                          .to(desc, { y: 0, opacity: 1, duration: 0.5, ease: 'power2.out' }, '-=0.3')
                          .to(bullets, { y: 0, opacity: 1, duration: 0.4, stagger: 0.06, ease: 'power2.out' }, '-=0.2');
                    },
                }
            }
        </script>
    @endpush
@endonce