@php
    $activities = $data['activities'] ?? collect();
    $maxItems = $section->getSetting('max_items', 6);
    $layout = $section->getSetting('layout', 'grid_3');
    $gridClass = match($layout) {
        'grid_2' => 'grid grid-cols-1 sm:grid-cols-2 gap-[var(--card-gap,1.5rem)]',
        'grid_4' => 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-[var(--card-gap,1.5rem)]',
        'list' => 'flex flex-col gap-[var(--card-gap,1.5rem)]',
        'carousel' => 'flex overflow-x-auto snap-x snap-mandatory gap-[var(--card-gap,1.5rem)] pb-4 -mx-4 px-4 scrollbar-hide',
        default => 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[var(--card-gap,1.5rem)]',
    };
    $cardExtraClass = $layout === 'carousel' ? 'min-w-[280px] sm:min-w-[320px] snap-start shrink-0' : '';
    $listMode = $layout === 'list';
@endphp

<div class="site-section site-section--alt">
    <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($activities->count())
            <div class="{{ $gridClass }}">
                @foreach($activities->take($maxItems) as $activity)
                    @php
                        $activityImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
                            ->where('academy_id', $academy->id)
                            ->where('collection', 'activity_photo')
                            ->where('mediable_type', 'activity')
                            ->where('mediable_id', $activity->id)
                            ->first();
                    @endphp
                    <div class="site-card {{ $cardExtraClass }} reveal reveal--delay-{{ ($loop->index % 4) + 1 }} {{ $listMode ? 'flex flex-row' : '' }}">
                        <div class="relative overflow-hidden {{ $listMode ? 'w-48 shrink-0' : 'aspect-[4/3]' }}">
                            @if($activityImage)
                                <img src="{{ $activityImage->url }}"
                                     alt="{{ $activity->name_ar }}"
                                     class="site-card__image">
                            @else
                                <div class="w-full h-full bg-gradient-to-br from-[var(--site-accent)]/10 to-gray-100 flex items-center justify-center">
                                    @if($activity->icon ?? null)
                                        <span class="text-5xl">{{ $activity->icon }}</span>
                                    @else
                                        <svg class="w-14 h-14 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                                        </svg>
                                    @endif
                                </div>
                            @endif
                            <div class="site-card__overlay"></div>
                            <div class="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/70 to-transparent">
                                <h3 class="text-white font-bold text-lg">{{ $activity->name_ar }}</h3>
                                @if($activity->description_ar ?? null)
                                    <p class="text-white/80 text-sm mt-1 line-clamp-2">{{ $activity->description_ar }}</p>
                                @endif
                            </div>
                        </div>
                        <div class="h-1 w-full" style="background: {{ $activity->color ?? 'var(--site-accent)' }}"></div>
                    </div>
                @endforeach
            </div>
        @else
            {{-- Empty skeleton state --}}
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                @for($i = 0; $i < 3; $i++)
                    <div class="skeleton-card">
                        <div class="aspect-[4/3] skeleton-block"></div>
                        <div class="p-4 space-y-2">
                            <div class="skeleton-block h-5 w-2/3"></div>
                            <div class="skeleton-block h-3 w-full"></div>
                        </div>
                    </div>
                @endfor
            </div>
            <div class="empty-state mt-6">
                <p class="text-sm">لم تُضف أنشطة بعد</p>
            </div>
        @endif
    </div>
</div>
