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

@if($programs->count())
<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-white/60 text-lg">{{ $section->subtitle }}</p>
            @endif
        </div>

        <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 {{ $isReversed ? '' : '' }}">
                    {{-- Image --}}
                    <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-white/10">
                        @else
                            <div class="rounded-xl w-full aspect-[16/10] bg-gradient-to-br from-[var(--site-accent)]/10 to-[var(--site-secondary)] border border-white/10 flex items-center justify-center">
                                <svg class="w-16 h-16 text-white/20" 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>

                    {{-- Content --}}
                    <div class="{{ $isReversed ? 'lg:order-1' : '' }}">
                        <h3 class="text-2xl font-bold text-white">{{ $program->name_ar }}</h3>

                        <div class="flex items-center gap-3 mt-3">
                            @if($program->age_from && $program->age_to)
                                <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)
                                <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-medium bg-white/5 text-white/70 border border-white/10">
                                    {{ $program->duration_months }} شهر
                                </span>
                            @endif
                        </div>

                        @if($program->description_ar)
                            <p class="mt-4 text-white/60 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-gradient-to-l from-transparent via-white/10 to-transparent"></div>
                @endif
            @endforeach
        </div>
    </div>
</div>
@endif
