{{-- Paramètres : $images (array d'URLs), $alt (string), $emoji (string) --}}
@php
    $images = $images ?? [];
    $alt    = $alt ?? '';
    $emoji  = $emoji ?? '🏠';
@endphp

<div class="gallery-wrap" x-data="{ active: 0, images: @js($images), lightbox: false }">

    {{-- Image principale --}}
    <div class="gallery-main" @click="lightbox = true" title="Cliquer pour agrandir">
        <template x-for="(img, i) in images" :key="i">
            <img :src="img" :alt="'{{ $alt }} — photo ' + (i+1)"
                 x-show="active === i"
                 style="width:100%;height:100%;object-fit:cover;display:block;"
                 loading="lazy">
        </template>
        <div class="gallery-zoom-hint" x-show="images.length > 0">
            <span><i class="fa-solid fa-magnifying-glass-plus"></i></span>
        </div>
        @if(count($images) > 1)
            <button class="gallery-arrow gallery-arrow-prev"
                    @click.stop="active = (active - 1 + images.length) % images.length"
                    aria-label="Image précédente">‹</button>
            <button class="gallery-arrow gallery-arrow-next"
                    @click.stop="active = (active + 1) % images.length"
                    aria-label="Image suivante">›</button>
            <div class="gallery-counter">
                <span x-text="active + 1"></span>/<span x-text="images.length"></span>
            </div>
        @endif
    </div>

    {{-- Vignettes --}}
    @if(count($images) > 1)
    <div class="gallery-thumbs">
        <template x-for="(img, i) in images" :key="i">
            <button class="gallery-thumb"
                    :class="{ 'active': active === i }"
                    @click="active = i"
                    :aria-label="'Voir la photo ' + (i+1)">
                <img :src="img" :alt="'Vignette ' + (i+1)" loading="lazy">
            </button>
        </template>
    </div>
    @endif

    {{-- Lightbox --}}
    @if(count($images) > 0)
    <div class="lightbox" x-show="lightbox" @click.self="lightbox = false"
         @keydown.escape.window="lightbox = false"
         x-transition:enter="lightbox-enter"
         x-transition:enter-start="lightbox-enter-start"
         x-transition:enter-end="lightbox-enter-end"
         style="display:none;">
        <button class="lightbox-close" @click="lightbox = false"><i class="fa-solid fa-xmark"></i></button>
        <button class="lightbox-arrow lightbox-prev"
                @click="active = (active - 1 + images.length) % images.length">‹</button>
        <div class="lightbox-img-wrap">
            <template x-for="(img, i) in images" :key="i">
                <img :src="img" x-show="active === i" :alt="'{{ $alt }}'" class="lightbox-img">
            </template>
        </div>
        <button class="lightbox-arrow lightbox-next"
                @click="active = (active + 1) % images.length">›</button>
        <div class="lightbox-dots">
            <template x-for="(img, i) in images" :key="i">
                <button class="lightbox-dot" :class="{ 'active': active === i }" @click="active = i"></button>
            </template>
        </div>
    </div>
    @endif
</div>