@php
    $cols = ['1' => '', '2' => 'sm:grid-cols-2', '3' => 'sm:grid-cols-2 lg:grid-cols-3', '4' => 'sm:grid-cols-2 lg:grid-cols-4'][$block->get('columns', '4')] ?? 'sm:grid-cols-2 lg:grid-cols-4';
    $round = $variant === 'circles';
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    @include('website.blocks._header')
    @if ($items->isEmpty())
        @include('website.blocks._empty')
    @else
        <div class="grid grid-cols-2 {{ $cols }} gap-6">
            @foreach ($items as $trainer)
                @php $name = $trainer->full_name ?? $trainer->name ?? ''; @endphp
                <article class="ec-stagger-item flex flex-col {{ $round ? 'items-center text-center' : 'ec-surface rounded-2xl overflow-hidden shadow-sm' }} gap-3">
                    @if ($block->get('show_image', true))
                        <img src="{{ $trainer->photo_path ?? asset('images/avatar-placeholder.png') }}" alt="{{ $name }}" loading="lazy"
                             class="{{ $round ? 'w-32 h-32 rounded-full' : 'w-full aspect-square' }} object-cover">
                    @endif
                    <div class="{{ $round ? '' : 'px-5 pb-5' }} flex flex-col gap-1">
                        <h3 class="font-semibold">{{ $name }}</h3>
                        @if ($block->get('show_role', true) && ($trainer->job_title ?? $trainer->role ?? null))
                            <p class="ec-accent text-sm">{{ $trainer->job_title ?? $trainer->role }}</p>
                        @endif
                        @if ($block->get('show_bio') && ($trainer->bio ?? null))
                            <p class="ec-muted text-sm line-clamp-3 mt-1">{{ $trainer->bio }}</p>
                        @endif
                    </div>
                </article>
            @endforeach
        </div>
    @endif
    @include('website.blocks._footer_buttons')
</div>
