@extends('layouts.public')
@section('title', 'Les nominations')

@section('content')

<section class="bg-navy py-16 sm:py-20">
    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Les nominations</p>
        <h1 class="font-display font-extrabold text-3xl sm:text-5xl text-white">Le mérite au cœur du réseau</h1>
        <p class="text-white/70 mt-5 text-lg leading-relaxed">
            Chez S.M.D, chaque distributeur peut évoluer et être officiellement nommé à un poste de responsabilité selon ses résultats et son engagement.
        </p>
    </div>
</section>

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 grid lg:grid-cols-2 gap-12 items-center">
    <div class="rounded-2xl overflow-hidden shadow-xl">
        <img src="{{ asset('images/team/trophee-appreciation.jpg') }}" alt="Trophée d'appréciation remis lors d'une nomination S.M.D" class="w-full h-full object-cover">
    </div>
    <div>
        <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Reconnaissance</p>
        <h2 class="font-display font-extrabold text-3xl text-navy-dark mb-5">Rencontre entre les gérants et les éléments</h2>
        <p class="text-gray-600 leading-relaxed mb-4">
            Des rencontres régulières réunissent gérants et distributeurs autour du renforcement de capacités, de la motivation et du développement personnel.
        </p>
        <p class="text-gray-600 leading-relaxed">
            À cette occasion, un trophée d'appréciation est remis aux membres qui se sont distingués par leurs efforts exceptionnels et leur dévouement remarquable.
        </p>
    </div>
</section>

{{-- ============== GRANDS LEADERS ============== --}}
<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 sm:pb-20">
    <div class="text-center max-w-2xl mx-auto mb-12">
        <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Les grands leaders</p>
        <h2 class="font-display font-extrabold text-3xl sm:text-4xl text-navy-dark">Nominations officielles</h2>
        <p class="text-gray-500 mt-4 leading-relaxed">
            Chaque nomination officielle de gérant fait l'objet d'une cérémonie, où les leaders du réseau prennent la parole devant les distributeurs et les dignitaires du quartier — comme lors du HDM à Saint-Louis.
        </p>
    </div>
    <div class="grid sm:grid-cols-2 gap-6">
        @foreach([
            ['name' => 'Tété Amadou Ba', 'role' => 'Président du réseau S.M.D'],
            ['name' => 'Omar Diallo', 'role' => 'Nomination officielle à la phase 3 — HDM Saint-Louis'],
            ['name' => 'Pape Momar Ndao', 'role' => 'Gérant principal — B.G.V/T.A.B Kaolack'],
            ['name' => 'Jean Paul Ndiaye', 'role' => 'Gérant principal — B.G.V/T.A.B'],
        ] as $leader)
            <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm flex items-center gap-4">
                <span class="w-11 h-11 rounded-xl bg-gradient-to-br from-navy to-navy-light flex items-center justify-center text-gold shadow-md shrink-0">
                    <x-icon name="user" class="w-5 h-5" />
                </span>
                <div>
                    <p class="font-display font-bold text-navy-dark">{{ $leader['name'] }}</p>
                    <p class="text-sm text-gray-500 mt-0.5">{{ $leader['role'] }}</p>
                </div>
            </div>
        @endforeach
    </div>
    <p class="text-sm text-gray-400 mt-8 text-center max-w-2xl mx-auto">
        Ces nominations ont notamment été célébrées lors de la cérémonie de graduation des leaders de B.G.V/T.A.B, arrivés au stade Lamine Guèye.
    </p>
</section>

<section class="bg-gray-50 py-16 sm:py-20">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-2xl mx-auto mb-14">
            <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Le parcours</p>
            <h2 class="font-display font-extrabold text-3xl sm:text-4xl text-navy-dark">Comment on devient gérant</h2>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-4">
            @php
                $stages = [
                    ['icon' => 'user', 'title' => 'Distributeur', 'text' => "On intègre le réseau et on se forme aux techniques de vente directe."],
                    ['icon' => 'chart-bar', 'title' => 'Résultats', 'text' => "On développe son activité et ses performances au sein de sa succursale."],
                    ['icon' => 'users', 'title' => 'Assistant gérant', 'text' => "On accompagne l'équipe et on prend en charge de premières responsabilités."],
                    ['icon' => 'building', 'title' => 'Gérant nommé', 'text' => "On est officiellement nommé à la tête d'une succursale ou d'une section."],
                ];
            @endphp
            @foreach($stages as $i => $stage)
                <div class="relative bg-white rounded-2xl p-6 border border-gray-100 shadow-sm">
                    <span class="absolute -top-3 -left-3 w-8 h-8 rounded-full bg-navy text-gold text-xs font-display font-extrabold flex items-center justify-center shadow-md">
                        {{ $i + 1 }}
                    </span>
                    <span class="w-11 h-11 rounded-xl bg-gold/10 flex items-center justify-center text-gold mb-4">
                        <x-icon name="{{ $stage['icon'] }}" class="w-5.5 h-5.5" />
                    </span>
                    <h3 class="font-display font-bold text-navy-dark mb-1.5">{{ $stage['title'] }}</h3>
                    <p class="text-sm text-gray-500 leading-relaxed">{{ $stage['text'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">
    <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-navy-dark mb-4">Prêt à écrire votre parcours ?</h2>
    <p class="text-gray-500 mb-8">Rejoignez le réseau et construisez votre propre évolution au sein de S.M.D.</p>
    <a href="{{ route('jobs.index') }}" class="inline-flex items-center gap-2 btn-gold text-navy-dark font-display font-extrabold px-7 py-3.5 rounded-full shadow-lg hover:brightness-105 transition-all">
        Voir les offres d'emploi
        <x-icon name="arrow-right" class="w-4.5 h-4.5" />
    </a>
</section>

@endsection