@php
    $trainers = json_decode($section->getSetting('trainers', '[]'), true) ?? [];
    $teamPhotos = \App\Domain\Website\Models\Media::withoutGlobalScope('academy')
        ->where('academy_id', $academy->id)
        ->where('collection', 'team_photo')
        ->orderBy('sort_order')
        ->get();
@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(count($trainers))
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                @foreach($trainers as $index => $trainer)
                    <div class="text-center reveal reveal--delay-{{ ($index % 4) + 1 }}">
                        <div class="relative mx-auto w-32 h-32 mb-4">
                            @php $photo = $teamPhotos->get($index); @endphp
                            @if($photo)
                                <img src="{{ $photo->url }}"
                                     alt="{{ $trainer['name'] ?? '' }}"
                                     class="w-full h-full rounded-full object-cover border-3 border-[var(--site-accent)] shadow-lg shadow-[var(--site-accent)]/10">
                            @else
                                <div class="w-full h-full rounded-full bg-gradient-to-br from-[var(--site-accent)]/10 to-gray-100 border-3 border-gray-200 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                                    </svg>
                                </div>
                            @endif
                        </div>
                        <h4 class="text-gray-900 font-bold">{{ $trainer['name'] ?? '' }}</h4>
                        @if(!empty($trainer['role']))
                            <p class="text-[var(--site-accent)] text-sm mt-1">{{ $trainer['role'] }}</p>
                        @endif
                        @if(!empty($trainer['bio']))
                            <p class="text-gray-500 text-sm mt-1">{{ $trainer['bio'] }}</p>
                        @endif
                    </div>
                @endforeach
            </div>
        @else
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                @for($i = 0; $i < 4; $i++)
                    <div class="text-center">
                        <div class="mx-auto w-32 h-32 mb-4 skeleton-block !rounded-full"></div>
                        <div class="skeleton-block h-4 w-20 mx-auto"></div>
                        <div class="skeleton-block h-3 w-16 mx-auto mt-2"></div>
                    </div>
                @endfor
            </div>
            <div class="empty-state mt-4">
                <p class="text-sm">لم يُضف مدربون بعد</p>
            </div>
        @endif
    </div>
</div>
