@php
    $activities = $data['activities'] ?? collect();
    $maxItems = $section->getSetting('max_items', 6);
@endphp

@if($activities->count())
<div class="site-section site-section--dark site-section--pattern">
    <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-white/60 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @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 reveal reveal--delay-{{ ($loop->index % 4) + 1 }}">
                    <div class="relative overflow-hidden 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)]/30 to-[var(--site-secondary)] flex items-center justify-center">
                                @if($activity->icon)
                                    <span class="text-5xl">{{ $activity->icon }}</span>
                                @else
                                    <svg class="w-16 h-16 text-white/30" 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>

                        {{-- Activity Name Overlay --}}
                        <div class="absolute bottom-0 inset-x-0 p-4 bg-gradient-to-t from-black/80 to-transparent">
                            <h3 class="text-white font-bold text-lg">{{ $activity->name_ar }}</h3>
                            @if($activity->description_ar)
                                <p class="text-white/70 text-sm mt-1 line-clamp-2">{{ $activity->description_ar }}</p>
                            @endif
                        </div>
                    </div>

                    @if($activity->color)
                        <div class="h-1 w-full" style="background: {{ $activity->color }}"></div>
                    @else
                        <div class="h-1 w-full bg-[var(--site-accent)]"></div>
                    @endif
                </div>
            @endforeach
        </div>
    </div>
</div>
@endif
