@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();
    $layout = $section->getSetting('layout', 'grid_4');
    $gridClass = match($layout) {
        'grid_2' => 'grid grid-cols-1 sm:grid-cols-2 gap-8',
        'grid_3' => 'grid grid-cols-2 md:grid-cols-3 gap-6',
        'carousel' => 'flex overflow-x-auto snap-x snap-mandatory gap-6 pb-4 -mx-4 px-4 scrollbar-hide',
        'list' => 'flex flex-col gap-6',
        default => 'grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6',
    };
    $cardExtraClass = $layout === 'carousel' ? 'min-w-[200px] 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(count($trainers))
            <div class="{{ $gridClass }}">
                @foreach($trainers as $index => $trainer)
                    <div class="{{ $cardExtraClass }} {{ $listMode ? 'flex items-center gap-5 p-4 bg-white rounded-xl border border-gray-100 shadow-sm' : 'text-center' }} reveal reveal--delay-{{ ($index % 4) + 1 }}">
                        <div class="relative {{ $listMode ? '' : 'mx-auto' }} {{ $listMode ? 'w-20 h-20 shrink-0' : '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="{{ $listMode ? 'w-8 h-8' : '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>
                        <div class="{{ $listMode ? '' : '' }}">
                            <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 {{ $listMode ? '' : 'line-clamp-2' }}">{{ $trainer['bio'] }}</p>
                            @endif
                        </div>
                    </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>
