@php
    $gallery = $data['gallery'] ?? collect();
@endphp

<div class="site-section" x-data="{ lightbox: null }">
    <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())
            <div class="gallery-grid reveal">
                @foreach($gallery as $image)
                    <div class="gallery-item" @click="lightbox = '{{ $image->url }}'">
                        <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>
                    </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 --}}
    <div x-show="lightbox"
         x-transition.opacity
         @click.self="lightbox = null"
         @keydown.escape.window="lightbox = null"
         class="fixed inset-0 z-[200] bg-black/95 flex items-center justify-center p-4 cursor-pointer"
         style="display: none;">
        <img :src="lightbox" class="max-w-full max-h-[90vh] rounded-lg object-contain">
        <button @click="lightbox = null" class="absolute top-4 end-4 text-white/60 hover:text-white p-2">
            <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>
    </div>
</div>
