{{--
    Liste des formateurs — grille de cartes formateur réutilisant le composant
    <x-instructor-card>. Données fournies par InstructorController@index.

    @var \Illuminate\Support\Collection $instructors  Formateurs actifs.
--}}
@extends('layouts.app')

@section('title', 'Nos formateurs — ' . config('app.name'))
@section('meta_description', 'Rencontrez les formateurs et consultants de HR Consulting & Co : des experts hautement qualifiés et expérimentés au service du développement humain.')

@section('content')
    <x-page-header
        eyebrow="L'équipe"
        title="Nos formateurs"
        subtitle="Des experts et consultants hautement qualifiés et expérimentés, engagés pour le développement des compétences de vos équipes."
        :breadcrumbs="[['label' => 'Nos Formateurs']]"
    />

    <section class="py-20">
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            @if ($instructors->isNotEmpty())
                <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($instructors as $instructor)
                        <x-reveal :delay="($loop->index % 3) * 100" class="h-full">
                            <x-instructor-card :instructor="$instructor" class="h-full" />
                        </x-reveal>
                    @endforeach
                </div>
            @else
                {{-- État vide élégant si aucun formateur n'est encore publié. --}}
                <div class="mx-auto max-w-md rounded-card border border-line bg-surface p-12 text-center shadow-soft">
                    <span class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-500/10 text-brand-600">
                        @svg('heroicon-o-user-group', 'h-7 w-7')
                    </span>
                    <h2 class="mt-5 font-display text-lg font-semibold text-navy-900">Notre équipe se dévoile bientôt</h2>
                    <p class="mt-3 text-slate-600">Les profils de nos formateurs seront présentés ici très prochainement.</p>
                </div>
            @endif
        </div>
    </section>
@endsection