{{-- Lightbox Component — Supports single image + gallery navigation --}}
<div
    x-data="{
        open: false,
        src: '',
        title: '',
        mode: 'single',
        photos: [],
        currentIndex: 0,

        openSingle(detail) {
            this.mode = 'single';
            this.photos = [];
            this.currentIndex = 0;
            this.src = detail.src;
            this.title = detail.title || '';
            this.open = true;
        },

        openGallery(detail) {
            this.mode = 'gallery';
            this.photos = detail.photos || [];
            this.currentIndex = detail.index || 0;
            this.showPhoto(this.currentIndex);
            this.open = true;
        },

        showPhoto(index) {
            if (this.photos.length === 0) return;
            this.currentIndex = index;
            this.src = this.photos[index].src;
            this.title = this.photos[index].title || '';
        },

        prev() {
            if (this.photos.length === 0) return;
            this.showPhoto((this.currentIndex - 1 + this.photos.length) % this.photos.length);
        },

        next() {
            if (this.photos.length === 0) return;
            this.showPhoto((this.currentIndex + 1) % this.photos.length);
        },

        close() {
            this.open = false;
        }
    }"
    @open-lightbox.window="openSingle($event.detail)"
    @open-gallery-lightbox.window="openGallery($event.detail)"
    @keydown.escape.window="close()"
    @keydown.left.window="if (open && mode === 'gallery') prev()"
    @keydown.right.window="if (open && mode === 'gallery') next()"
    x-show="open"
    x-cloak
    class="fixed inset-0 z-[100] flex items-center justify-center"
>
    {{-- Backdrop --}}
    <div
        @click="close()"
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0"
        x-transition:enter-end="opacity-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100"
        x-transition:leave-end="opacity-0"
        class="absolute inset-0 bg-black/90 backdrop-blur-sm"
    ></div>

    {{-- Close Button --}}
    <button
        @click="close()"
        class="absolute top-4 right-4 z-10 p-3 text-white/80 hover:text-white transition-colors"
        aria-label="Chiudi"
    >
        <svg class="w-8 h-8" 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>

    {{-- Counter Badge (gallery mode only) --}}
    <div
        x-show="mode === 'gallery' && photos.length > 1"
        class="absolute top-5 left-1/2 -translate-x-1/2 z-10 px-4 py-1.5 rounded-full bg-black/50 backdrop-blur-sm text-white/90 text-sm font-medium"
    >
        <span x-text="(currentIndex + 1) + ' / ' + photos.length"></span>
    </div>

    {{-- Prev Button (gallery mode only) --}}
    <button
        x-show="mode === 'gallery' && photos.length > 1"
        @click="prev()"
        class="absolute left-2 md:left-6 z-10 p-3 rounded-full bg-black/40 backdrop-blur-sm text-white/80 hover:text-white hover:bg-black/60 transition-all"
        aria-label="Precedente"
    >
        <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
        </svg>
    </button>

    {{-- Next Button (gallery mode only) --}}
    <button
        x-show="mode === 'gallery' && photos.length > 1"
        @click="next()"
        class="absolute right-2 md:right-6 z-10 p-3 rounded-full bg-black/40 backdrop-blur-sm text-white/80 hover:text-white hover:bg-black/60 transition-all"
        aria-label="Successiva"
    >
        <svg class="w-6 h-6 md:w-8 md:h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
        </svg>
    </button>

    {{-- Image Container --}}
    <div
        x-transition:enter="transition ease-out duration-300"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-200"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="relative z-10 max-w-[90vw] max-h-[90vh]"
    >
        <img
            :src="src"
            :alt="title"
            class="max-w-full max-h-[85vh] object-contain rounded-lg shadow-2xl"
        />
        {{-- Title --}}
        <p
            x-show="title"
            x-text="title"
            class="absolute bottom-0 left-0 right-0 text-center text-white bg-black/50 backdrop-blur-sm py-3 px-4 rounded-b-lg font-medium text-sm line-clamp-2"
        ></p>
    </div>
</div>