@php
    $gallery = $data['gallery'] ?? collect();
    $showCategories = $section->getSetting('show_categories', true);
    $layout = $section->getSetting('layout', 'grid');
    $categories = $gallery->pluck('gallery_category')->filter()->unique()->values();
@endphp

<div class="site-section" x-data="{ lightbox: null, lightboxIdx: 0, activeCategory: 'all', images: [] }"
     x-init="images = Array.from($refs.galleryGrid?.children || [])">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center mb-12 reveal">
            <h2 class="section-title mx-auto">{{ $section->title ?? 'معرض الصور' }}</h2>
            @if($section->subtitle)
                <p class="mt-4 text-gray-500 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        @if($gallery->count())
            {{-- Category Filter Tabs --}}
            @if($showCategories && $categories->count() > 1)
                <div class="flex items-center justify-center gap-2 mb-8 overflow-x-auto pb-2 scrollbar-hide reveal">
                    <button @click="activeCategory = 'all'; images.forEach(el => el.style.display = '')"
                            :class="activeCategory === 'all' ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                            class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap">
                        الكل
                    </button>
                    @foreach($categories as $cat)
                        <button @click="activeCategory = '{{ $cat }}'; images.forEach(el => el.style.display = el.dataset.category === '{{ $cat }}' || !el.dataset.category ? '' : 'none')"
                                :class="activeCategory === '{{ $cat }}' ? 'bg-[var(--site-accent)] text-white shadow-md' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'"
                                class="px-5 py-2 rounded-full text-sm font-medium transition-all whitespace-nowrap">
                            {{ $cat }}
                        </button>
                    @endforeach
                </div>
            @endif

            {{-- Gallery Grid --}}
            <div class="gallery-grid reveal" x-ref="galleryGrid"
                 @if($layout === 'masonry') style="columns: 3; column-gap: 1rem;" @endif>
                @foreach($gallery as $index => $image)
                    <div class="gallery-item"
                         data-category="{{ $image->gallery_category ?? '' }}"
                         @click="lightbox = '{{ $image->url }}'; lightboxIdx = {{ $index }}"
                         @if($layout === 'masonry') style="break-inside: avoid; margin-bottom: 1rem;" @endif>
                        <img src="{{ $image->url }}"
                             alt="{{ $image->alt_text_ar ?? 'صورة من المعرض' }}"
                             loading="lazy">
                        <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity z-10 bg-black/30">
                            <svg class="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"/>
                            </svg>
                        </div>
                        @if($image->gallery_category)
                            <span class="absolute bottom-2 start-2 z-10 px-2 py-0.5 bg-black/50 text-white text-xs rounded-full backdrop-blur-sm">
                                {{ $image->gallery_category }}
                            </span>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <div class="gallery-grid">
                @for($i = 0; $i < 6; $i++)
                    <div class="aspect-[3/2] skeleton-block rounded-lg"></div>
                @endfor
            </div>
            <div class="empty-state mt-4">
                <p class="text-sm">لم تُضف صور بعد</p>
            </div>
        @endif
    </div>

    {{-- Lightbox with Navigation --}}
    <div x-show="lightbox"
         x-transition.opacity
         @click.self="lightbox = null"
         @keydown.escape.window="lightbox = null"
         @keydown.left.window="if(lightbox) { lightboxIdx = (lightboxIdx - 1 + {{ $gallery->count() }}) % {{ $gallery->count() }}; lightbox = [{{ $gallery->map(fn($i) => "'" . $i->url . "'")->implode(',') }}][lightboxIdx]; }"
         @keydown.right.window="if(lightbox) { lightboxIdx = (lightboxIdx + 1) % {{ $gallery->count() }}; lightbox = [{{ $gallery->map(fn($i) => "'" . $i->url . "'")->implode(',') }}][lightboxIdx]; }"
         class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-4 cursor-pointer"
         x-cloak>
        <img :src="lightbox" class="max-w-full max-h-[90vh] rounded-lg object-contain">

        {{-- Navigation Arrows --}}
        @if($gallery->count() > 1)
            <button @click.stop="lightboxIdx = (lightboxIdx - 1 + {{ $gallery->count() }}) % {{ $gallery->count() }}; lightbox = [{{ $gallery->map(fn($i) => "'" . $i->url . "'")->implode(',') }}][lightboxIdx]"
                    class="absolute start-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
            </button>
            <button @click.stop="lightboxIdx = (lightboxIdx + 1) % {{ $gallery->count() }}; lightbox = [{{ $gallery->map(fn($i) => "'" . $i->url . "'")->implode(',') }}][lightboxIdx]"
                    class="absolute end-4 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center text-white transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
            </button>
        @endif

        {{-- Close --}}
        <button @click="lightbox = null" class="absolute top-4 end-4 text-white/60 hover:text-white p-2 transition-colors">
            <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>

        {{-- Counter --}}
        <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-white/60 text-sm">
            <span x-text="lightboxIdx + 1"></span> / {{ $gallery->count() }}
        </div>
    </div>
</div>
