@php
    $motos = grouped_motos();
@endphp

<div
    x-data="{
        open: false,
        categories: [
            { key: '50cc', label: '50 cc' },
            { key: '125cc', label: '125 cc' },
            { key: 'plus125cc', label: '+ de 125 cc' }
        ],
        activeCategory: '50cc',
        isMobile: window.innerWidth < 768,
        showCatDropdown: false,
        scrollLocked: false,
        scrollPosition: 0,
        get motosByCategory() {
            const motos = @js($motos);
            return {
                '50cc': motos['50cc'] ?? [],
                '125cc': motos['125cc'] ?? [],
                'plus125cc': motos['+125cc'] ?? []
            };
        },
        lockScroll() {
            if (this.scrollLocked) return;
            this.scrollLocked = true;
            this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || 0;
            document.body.style.top = `-${this.scrollPosition}px`;
            document.body.style.left = '0';
            document.body.style.right = '0';
            document.body.style.width = '100%';
            document.body.style.position = 'fixed';
            document.body.classList.add('overflow-hidden');
        },
        unlockScroll() {
            if (!this.scrollLocked) return;
            this.scrollLocked = false;
            document.body.classList.remove('overflow-hidden');
            const y = -parseInt(document.body.style.top || '0', 10);
            document.body.style.position = '';
            document.body.style.top = '';
            document.body.style.left = '';
            document.body.style.right = '';
            document.body.style.width = '';
            window.scrollTo(0, y);
        },
        openModal() { this.open = true; },
        close() { this.open = false; this.showCatDropdown = false; this.unlockScroll(); },
        selectCategory(key) { this.activeCategory = key; this.showCatDropdown = false; }
    }"
    x-init="
        window.addEventListener('resize', () => { isMobile = window.innerWidth < 768 });
        document.addEventListener('keydown', e => { if (open && e.key === 'Escape') close(); });
        $watch('open', v => { v ? lockScroll() : unlockScroll() });
    "
    x-on:open-moto-modal.window="openModal()"
    x-show="open"
    x-cloak
    x-transition.opacity
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md"
    x-on:click.self="close"
>
    <div
        :class="isMobile 
            ? 'bg-[#0c0c0d] shadow-xl p-5 px-2 w-full h-full max-w-full max-h-full overflow-x-hidden overflow-y-auto relative transition-all ease-in-out transform pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)]'
            : 'bg-[#0c0c0d] shadow-xl p-7 w-full max-w-5xl max-h-[95vh] overflow-x-hidden overflow-y-auto relative transition-all ease-in-out transform'"
        x-transition:enter="transition transform duration-400"
        x-transition:enter-start="opacity-0 scale-75"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition transform duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-90"
    >
        <h2 class="text-xl tracking-wider capitalize flex justify-between items-center"
            :class="isMobile ? 'px-4 pt-6' : ''"
        >
            <div class="flex items-center gap-4">
                <svg class="w-4" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22 22.907L4 9V35L22 22.907Z" fill="#ED1D24" stroke="#ED1D24" stroke-width="4"/>
                </svg>
                <span>
                    Nos motos
                </span>
            </div>
            <button
                type="button"
                class=" text-white hover:text-brand transition-colors"
                x-on:click="close"
                aria-label="Fermer"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>
        </h2>
        <!-- Bouton X -->
        <div class="flex md:gap-7 my-7"
            :class="isMobile ? 'flex-col gap-4 px-4' : ''"
        >
            <!-- Sidebar catégories ou select mobile -->
            <template x-if="!isMobile">
                <aside class="w-40 flex flex-col gap-7">
                    <template x-for="cat in categories" :key="cat.key">
                        <button
                            type="button"
                            fold-top-left="30px" fold-bottom-right="30px"
                            class="py-5 px-4 tracking-wider text-lg flex flex-col gap-3 justify-center items-center transition"
                            :class="activeCategory === cat.key ? 'bg-[image:var(--brand-gradient)]' : 'bg-white/5'"
                            x-on:click="activeCategory = cat.key"
                        >
                            <img x-bind:src="'/images/'+cat.key+'.svg'" class="w-1/2" alt="category">
                            <span x-text="cat.label"></span>
                        </button>
                    </template>
                </aside>
            </template>
            <template x-if="isMobile">
                <div class="w-full mb-4 relative" x-data>
                    <label class="block mb-4 tracking-wider text-sm text-white">Choisir la catégorie</label>
                    <button
                        type="button"
                        class="w-full flex tracking-wider items-center justify-between bg-white/10 py-3 px-4"
                        x-on:click="showCatDropdown = !showCatDropdown"
                    >
                        <span x-text="categories.find(c => c.key === activeCategory)?.label"></span>
                        <svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                        </svg>
                    </button>
                    <div
                        x-show="showCatDropdown"
                        x-transition
                        class="absolute left-0 right-0 mt-2 bg-[#18181b] shadow-lg z-50 border border-white/10"
                        style="min-width:100%;"
                    >
                        <template x-for="cat in categories" :key="cat.key">
                            <button
                                type="button"
                                class="w-full text-left px-4 py-3  hover:bg-white/10"
                                :class="activeCategory === cat.key ? 'bg-white/5 tracking-wider' : ''"
                                x-on:click="selectCategory(cat.key)"
                            >
                                <span x-text="cat.label"></span>
                            </button>
                        </template>
                    </div>
                    <div
                        x-show="showCatDropdown"
                        x-on:click="showCatDropdown = false"
                        class="fixed inset-0 z-40"
                        style="top:0;left:0;"
                    ></div>
                </div>
            </template>
            <!-- Liste motos -->
            <section class="flex-1">
                <div 
                    class="grid md:gap-8 gap-4"
                    :class="isMobile ? 'grid-cols-2' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'"
                >
                    <template x-for="moto in motosByCategory[activeCategory]" :key="moto.id">
                        <a :href="moto.url" class=" flex relative flex-col items-center group overflow-hidden">
                            <!-- Image -->
                            <img 
                                :src="moto.thumbnail || moto.primary_variant?.image" 
                                :alt="moto.title" 
                                class="aspect-square object-contain"
                            >

                            <!-- Contenu texte -->
                            <div class="absolute flex flex-col justify-end p-6 inset-0 z-10 text-white">
                                <h3 class="tracking-wider md:text-lg mb-1 uppercase" x-text="moto.title"></h3>
                                <span class="text-xs font-open-sans" x-text="(moto.variants?.length || 0) + ' couleur(s)'"></span>
                            </div>

                            <!-- Overlay gradient -->
                            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-60 
                                        group-hover:opacity-80 transition-opacity duration-300 ease-in-out will-change-[opacity]">
                            </div>
                        </a>
                    </template>
                    <template x-if="motosByCategory[activeCategory].length === 0">
                        <div class="col-span-full flex px-10 items-center justify-center h-40 tracking-wider bg-white/1">
                            Aucune moto dans cette catégorie.
                        </div>
                    </template>
                </div>
            </section>
        </div>
    </div>
</div>