@php
    $programs = $data['programs'] ?? collect();
    $maxItems = $section->getSetting('max_items', 6);
    $layout = $section->getSetting('layout', 'list');
    $isGrid = str_starts_with($layout, 'grid_') || $layout === 'carousel';
    $gridClass = match($layout) {
        'grid_2' => 'grid grid-cols-1 sm:grid-cols-2 gap-[var(--card-gap,1.5rem)]',
        'grid_3' => 'grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 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)]',
        'carousel' => 'flex overflow-x-auto snap-x snap-mandatory gap-[var(--card-gap,1.5rem)] pb-4 -mx-4 px-4 scrollbar-hide',
        default => '', // list layout handled separately
    };
    $cardExtraClass = $layout === 'carousel' ? 'min-w-[300px] sm:min-w-[350px] snap-start shrink-0' : '';
@endphp

<div class="site-section">
    <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($programs->count())
            @if($isGrid)
                {{-- Grid/Carousel Layout --}}
                <div class="{{ $gridClass }}">
                    @foreach($programs->take($maxItems) as $program)
                        @php
                            $programImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
                                ->where('academy_id', $academy->id)
                                ->where('collection', 'section_image')
                                ->where('mediable_type', 'training_program')
                                ->where('mediable_id', $program->id)
                                ->first();
                        @endphp
                        <div class="site-card {{ $cardExtraClass }} reveal reveal--delay-{{ ($loop->index % 4) + 1 }}">
                            <div class="relative overflow-hidden aspect-[16/10]">
                                @if($programImage)
                                    <img src="{{ $programImage->url }}" alt="{{ $program->name_ar }}" class="site-card__image">
                                @else
                                    <div class="w-full h-full bg-gradient-to-br from-[var(--site-accent)]/5 to-gray-50 flex items-center justify-center">
                                        <svg class="w-12 h-12 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                        </svg>
                                    </div>
                                @endif
                            </div>
                            <div class="p-5">
                                <h3 class="text-lg font-bold text-gray-900">{{ $program->name_ar }}</h3>
                                <div class="flex items-center gap-2 mt-2 flex-wrap">
                                    @if(($program->age_from ?? null) && ($program->age_to ?? null))
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-[var(--site-accent)]/10 text-[var(--site-accent)]">
                                            {{ $program->age_from }}-{{ $program->age_to }} سنة
                                        </span>
                                    @endif
                                    @if($program->duration_months ?? null)
                                        <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600">
                                            {{ $program->duration_months }} شهر
                                        </span>
                                    @endif
                                </div>
                                @if($program->description_ar ?? null)
                                    <p class="mt-3 text-gray-500 text-sm line-clamp-3">{{ $program->description_ar }}</p>
                                @endif
                                <a href="#section-contact" class="inline-flex items-center gap-1.5 mt-4 text-sm text-[var(--site-accent)] font-medium hover:gap-2.5 transition-all">
                                    سجّل الآن
                                    <svg class="w-3.5 h-3.5 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                                </a>
                            </div>
                        </div>
                    @endforeach
                </div>
            @else
                {{-- List Layout (alternating split) --}}
                <div class="space-y-8">
                    @foreach($programs->take($maxItems) as $program)
                        @php
                            $programImage = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
                                ->where('academy_id', $academy->id)
                                ->where('collection', 'section_image')
                                ->where('mediable_type', 'training_program')
                                ->where('mediable_id', $program->id)
                                ->first();
                            $isReversed = $loop->index % 2 !== 0;
                        @endphp
                        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center reveal">
                            <div class="{{ $isReversed ? 'lg:order-2' : '' }}">
                                @if($programImage)
                                    <img src="{{ $programImage->url }}" alt="{{ $program->name_ar }}" class="rounded-xl w-full aspect-[16/10] object-cover border border-gray-200">
                                @else
                                    <div class="rounded-xl w-full aspect-[16/10] bg-gradient-to-br from-[var(--site-accent)]/5 to-gray-50 border border-gray-200 flex items-center justify-center">
                                        <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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                        </svg>
                                    </div>
                                @endif
                            </div>
                            <div class="{{ $isReversed ? 'lg:order-1' : '' }}">
                                <h3 class="text-2xl font-bold text-gray-900">{{ $program->name_ar }}</h3>
                                <div class="flex items-center gap-3 mt-3">
                                    @if(($program->age_from ?? null) && ($program->age_to ?? null))
                                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-[var(--site-accent)]/10 text-[var(--site-accent)] border border-[var(--site-accent)]/20">
                                            {{ $program->age_from }} - {{ $program->age_to }} سنة
                                        </span>
                                    @endif
                                    @if($program->duration_months ?? null)
                                        <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-600 border border-gray-200">
                                            {{ $program->duration_months }} شهر
                                        </span>
                                    @endif
                                </div>
                                @if($program->description_ar ?? null)
                                    <p class="mt-4 text-gray-500 leading-relaxed">{{ Str::limit($program->description_ar, 200) }}</p>
                                @endif
                                <a href="#section-contact" class="inline-flex items-center gap-2 mt-6 text-[var(--site-accent)] font-medium hover:gap-3 transition-all">
                                    سجّل الآن
                                    <svg class="w-4 h-4 rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
                                </a>
                            </div>
                        </div>
                        @if(!$loop->last)
                            <div class="h-px w-full bg-gray-100"></div>
                        @endif
                    @endforeach
                </div>
            @endif
        @else
            {{-- Empty skeleton state --}}
            <div class="space-y-8">
                @for($i = 0; $i < 2; $i++)
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
                        <div class="{{ $i % 2 !== 0 ? 'lg:order-2' : '' }}">
                            <div class="rounded-xl w-full aspect-[16/10] skeleton-block"></div>
                        </div>
                        <div class="{{ $i % 2 !== 0 ? 'lg:order-1' : '' }} space-y-3">
                            <div class="skeleton-block h-7 w-1/2"></div>
                            <div class="skeleton-block h-4 w-full"></div>
                            <div class="skeleton-block h-4 w-3/4"></div>
                        </div>
                    </div>
                @endfor
            </div>
            <div class="empty-state mt-6">
                <p class="text-sm">لم تُضف برامج تدريبية بعد</p>
            </div>
        @endif
    </div>
</div>
