@php
    $cols = ['2' => 'sm:grid-cols-2', '3' => 'sm:grid-cols-2 md:grid-cols-3', '4' => 'sm:grid-cols-2 md:grid-cols-4', '5' => 'sm:grid-cols-3 md:grid-cols-5', '6' => 'sm:grid-cols-3 md:grid-cols-6'][$block->get('columns', '4')] ?? 'sm:grid-cols-2 md:grid-cols-4';
    $aspect = ['square' => 'aspect-square', 'landscape' => 'aspect-[4/3]', 'portrait' => 'aspect-[3/4]', 'auto' => ''][$block->get('aspect', 'square')] ?? 'aspect-square';
    $lightbox = $block->get('enable_lightbox', true);
    $captions = $block->get('show_captions');
    $src = fn ($img) => is_array($img) ? (data_get($img, 'url') ?: data_get($img, 'path')) : $img;
    $cap = fn ($img) => is_array($img) ? (data_get($img, 'caption') ?: data_get($img, 'alt_text')) : null;
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" @if ($lightbox) x-data="{ open: false, current: '' }" @endif>
    @if ($block->get('title') || $block->get('subtitle'))
        <header class="text-center max-w-3xl mx-auto mb-10">
            @if ($block->get('title'))
                <h2 class="ec-heading text-3xl sm:text-4xl font-bold">{{ $block->get('title') }}</h2>
            @endif
            @if ($block->get('subtitle'))
                <p class="ec-muted mt-3">{{ $block->get('subtitle') }}</p>
            @endif
        </header>
    @endif

    @if ($items->isEmpty())
        <p class="ec-muted text-center py-10">{{ $block->get('empty_message') ?: __('لا توجد صور بعد') }}</p>
    @elseif ($variant === 'masonry')
        <div class="columns-2 md:columns-3 lg:columns-4 gap-4 [&>*]:mb-4">
            @foreach ($items as $img)
                <figure class="ec-stagger-item break-inside-avoid">
                    <img src="{{ $src($img) }}" alt="{{ $cap($img) }}" loading="lazy"
                         class="w-full rounded-xl {{ $lightbox ? 'cursor-zoom-in' : '' }}"
                         @if ($lightbox) x-on:click="current = @js($src($img)); open = true" @endif>
                    @if ($captions && $cap($img))
                        <figcaption class="ec-muted text-sm mt-2">{{ $cap($img) }}</figcaption>
                    @endif
                </figure>
            @endforeach
        </div>
    @elseif (in_array($variant, ['carousel', 'filmstrip', 'marquee'], true))
        <div class="{{ $variant === 'marquee' ? 'ec-marquee overflow-hidden' : 'overflow-x-auto snap-x snap-mandatory' }}">
            <div class="flex gap-4 {{ $variant === 'marquee' ? 'ec-marquee-track' : '' }}">
                @foreach ($items as $img)
                    <figure class="snap-start shrink-0 w-64 sm:w-80">
                        <img src="{{ $src($img) }}" alt="{{ $cap($img) }}" loading="lazy"
                             class="w-full {{ $aspect }} object-cover rounded-xl {{ $lightbox ? 'cursor-zoom-in' : '' }}"
                             @if ($lightbox) x-on:click="current = @js($src($img)); open = true" @endif>
                        @if ($captions && $cap($img))
                            <figcaption class="ec-muted text-sm mt-2">{{ $cap($img) }}</figcaption>
                        @endif
                    </figure>
                @endforeach
            </div>
        </div>
    @else
        <div class="grid grid-cols-2 {{ $cols }} gap-4">
            @foreach ($items as $img)
                <figure class="ec-stagger-item group">
                    <img src="{{ $src($img) }}" alt="{{ $cap($img) }}" loading="lazy"
                         class="w-full {{ $aspect }} object-cover rounded-xl transition group-hover:scale-[1.02] {{ $lightbox ? 'cursor-zoom-in' : '' }}"
                         @if ($lightbox) x-on:click="current = @js($src($img)); open = true" @endif>
                    @if ($captions && $cap($img))
                        <figcaption class="ec-muted text-sm mt-2">{{ $cap($img) }}</figcaption>
                    @endif
                </figure>
            @endforeach
        </div>
    @endif

    @if ($lightbox)
        <div x-show="open" x-cloak x-on:keydown.escape.window="open = false" x-on:click="open = false"
             class="fixed inset-0 z-50 flex items-center justify-center bg-black/85 p-4"
             role="dialog" aria-modal="true" aria-label="{{ __('عرض الصورة') }}">
            <button type="button" x-on:click="open = false"
                    class="absolute top-5 end-5 text-white/80 hover:text-white" aria-label="{{ __('إغلاق') }}">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
            </button>
            <img x-bind:src="current" alt="" class="max-h-[90vh] max-w-full rounded-lg" x-on:click.stop>
        </div>
    @endif
</div>
