@php
    $gallery = $departamento->galeria ?? [];
    $firstImage = $gallery[0] ?? null;
@endphp

@if ($firstImage)
<section
    class="pb-12 pt-5 overflow-x-hidden"
    x-data="{ activeImage: '{{ Storage::url($firstImage) }}' }"
>

    {{-- 🔒 IMAGEN PRINCIPAL (CONTAINER) --}}
    <div class="container px-4 mx-auto mb-10 md:px-[11%] pt-9">
        <div class="relative aspect-[16/9] overflow-hidden rounded-sm shadow-xl bg-gray-100 cursor-zoom-in">
            <img
                :src="activeImage"
                class="w-full h-full object-cover transition-opacity duration-300"
                alt="{{ $departamento->titulo }}"
            />
        </div>
    </div>

    {{--  THUMBNAILS FULL WIDTH --}}
    <div class="room-gallery-wrapper w-screen relative left-1/2 -translate-x-1/2 overflow-hidden">
        <div class="glide room-gallery-thumbs max-w-full">
            <div class="glide__track" data-glide-el="track">
                <ul class="glide__slides">
                    @foreach ($gallery as $image)
                        @php $url = Storage::url($image); @endphp
                        <li class="glide__slide">
                            <button
                                @click="activeImage = '{{ $url }}'"
                                :class="{
                                    'ring-2 ring-[#009ba2] opacity-100': activeImage === '{{ $url }}',
                                    'opacity-60': activeImage !== '{{ $url }}'
                                }"
                                class="w-full aspect-[4/2] overflow-hidden rounded-sm transition-all duration-300 hover:opacity-100"
                            >
                                <img
                                    src="{{ $url }}"
                                    class="w-full h-full object-cover"
                                    alt="{{ $departamento->titulo }}"
                                />
                            </button>
                        </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>

</section>
@endif
@push('scripts')
<script>
    window.addEventListener('load', () => {
        new Glide('.room-gallery-thumbs', {
            type: 'slider',
            perView: 4,
            gap: 1,
            breakpoints: {
                1024: {
                    perView: 4,
                },
                768: {
                    perView: 3,
                    gap: 1,
                },
                480: {
                    perView: 2,
                    gap: 1,
                },
            }
        }).mount();
    });
</script>
@endpush