@php
    $cols = ['1' => '', '2' => 'sm:grid-cols-2', '3' => 'sm:grid-cols-2 lg:grid-cols-3', '4' => 'sm:grid-cols-2 lg:grid-cols-4'][$block->get('columns', '3')] ?? 'sm:grid-cols-2 lg:grid-cols-3';
    $ar = app()->getLocale() === 'ar';
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    @include('website.blocks._header')

    @if ($items->isEmpty())
        @include('website.blocks._empty')
    @else
        <div class="grid grid-cols-2 {{ $cols }} gap-5">
            @foreach ($items as $activity)
                @php
                    $name = $ar ? ($activity->name_ar ?? $activity->name) : ($activity->name ?? $activity->name_ar);
                    $img = $activity->image_path ?? $activity->photo_path ?? null;
                @endphp
                <article class="ec-stagger-item group relative overflow-hidden rounded-2xl {{ $variant === 'image_overlay' ? 'aspect-[4/5]' : 'ec-surface shadow-sm' }}">
                    @if ($block->get('show_image', true) && $img)
                        <img src="{{ $img }}" alt="{{ $name }}" loading="lazy"
                             class="{{ $variant === 'image_overlay' ? 'absolute inset-0 h-full w-full' : 'w-full aspect-[4/3]' }} object-cover transition duration-500 group-hover:scale-105">
                        @if ($variant === 'image_overlay')
                            <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" aria-hidden="true"></div>
                        @endif
                    @elseif ($activity->icon ?? null)
                        <div class="p-6 flex justify-center"><x-website.icon :name="$activity->icon" class="w-10 h-10 ec-accent" /></div>
                    @endif

                    <div class="{{ $variant === 'image_overlay' ? 'absolute inset-x-0 bottom-0 p-5 text-white' : 'p-5' }}">
                        <h3 class="font-semibold text-lg">{{ $name }}</h3>
                        @if ($block->get('show_description', true) && ($activity->description_ar ?? $activity->description ?? null))
                            <p class="{{ $variant === 'image_overlay' ? 'text-white/80' : 'ec-muted' }} text-sm mt-1 line-clamp-2">
                                {{ $ar ? ($activity->description_ar ?? $activity->description) : ($activity->description ?? $activity->description_ar) }}
                            </p>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif

    @include('website.blocks._footer_buttons')
</div>
