@extends('layouts.public')
@section('title', 'Accueil')

@section('content')

{{-- ============== HERO SECTION ============== --}}
<section class="relative bg-navy overflow-hidden">
    {{-- Motifs et lueurs d'arrière-plan --}}
    <div class="absolute inset-0 hero-pattern opacity-15 pointer-events-none"></div>
    <div class="absolute -top-24 -right-24 w-96 h-96 bg-gold/20 rounded-full blur-[100px] pointer-events-none"></div>
    <div class="absolute bottom-0 -left-20 w-80 h-80 bg-navy-light/40 rounded-full blur-[90px] pointer-events-none"></div>

    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-10 sm:pt-16 pb-12 sm:pb-20 grid lg:grid-cols-12 gap-8 lg:gap-12 items-center">
        
        {{-- Textes & CTA --}}
        <div class="lg:col-span-6 order-2 lg:order-1 text-center lg:text-left">
            

            <h1 class="font-display font-extrabold text-3xl sm:text-5xl lg:text-5xl text-white leading-[1.15] tracking-tight">
                Changez votre vie, 
                <span class="relative inline-block text-gold">
                    fixez vos objectifs
                    <svg class="absolute -bottom-1.5 left-0 w-full h-2.5 text-gold/80" viewBox="0 0 200 9" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M2 7C50 2 150 2 198 7" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                </span>, 
                vivez cette opportunité.
            </h1>

            <p class="mt-5 text-sm sm:text-base text-white/80 max-w-lg mx-auto lg:mx-0 leading-relaxed font-normal">
                Rejoignez un réseau dynamique présent au Sénégal et en Gambie. Développez vos compétences et construisez des revenus durables à nos côtés.
            </p>

            <div class="mt-7 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3.5">
                <a href="{{ route('jobs.index') }}" class="w-full sm:w-auto bg-gradient-to-r from-gold via-gold/90 to-yellow-500 text-navy-dark font-display font-extrabold text-sm px-7 py-3.5 rounded-xl shadow-lg shadow-gold/20 hover:shadow-xl hover:shadow-gold/30 hover:-translate-y-0.5 transition-all duration-300 inline-flex items-center justify-center gap-2 group">
                    <span>Rejoindre le réseau</span>
                    <x-icon name="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform" />
                </a>
                <a href="{{ route('about') }}" class="w-full sm:w-auto bg-white/5 border border-white/15 backdrop-blur-md text-white font-display font-bold text-sm px-6 py-3.5 rounded-xl hover:bg-white/15 hover:border-white/30 transition-all duration-300 text-center">
                    Découvrir notre histoire
                </a>
            </div>
        </div>

        {{-- Slider / Carrousel Hero --}}
        <div class="lg:col-span-6 order-1 lg:order-2 relative" x-data="{ slide: 0 }" x-init="setInterval(() => slide = (slide + 1) % 3, 5000)">
            <div class="absolute -inset-3 bg-gradient-to-tr from-gold/20 via-navy-light/10 to-transparent rounded-[2rem] blur-xl"></div>

            <div class="relative rounded-2xl overflow-hidden shadow-2xl border border-white/15 bg-navy-dark aspect-[16/10]">
                @php
                    $heroSlides = [
                        ['src' => asset('images/hero/hero-1.jpg'), 'caption' => 'Inter Meeting SMD AF — Guédiawaye TSA & Malika Place'],
                        ['src' => asset('images/hero/hero-2.jpg'), 'caption' => 'Meeting SMD section HTM — Louga'],
                        ['src' => asset('images/hero/hero-3.jpg'), 'caption' => 'Rencontre Gérants & Éléments — renforcement de capacités'],
                    ];
                @endphp

                @foreach($heroSlides as $i => $s)
                    <div x-show="slide === {{ $i }}"
                         x-transition:enter="transition ease-out duration-700 transform"
                         x-transition:enter-start="opacity-0 scale-105"
                         x-transition:enter-end="opacity-100 scale-100"
                         x-transition:leave="transition ease-in duration-500 transform"
                         x-transition:leave-end="opacity-0"
                         class="absolute inset-0">
                        <img src="{{ $s['src'] }}" alt="{{ $s['caption'] }}" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-navy-dark via-navy-dark/40 to-transparent"></div>
                        <div class="absolute bottom-8 left-5 right-5">
                            <p class="text-white text-xs sm:text-sm font-display font-bold leading-snug drop-shadow-md">{{ $s['caption'] }}</p>
                        </div>
                    </div>
                @endforeach

                {{-- Puces du Carrousel --}}
                <div class="absolute bottom-3 left-5 flex items-center gap-1.5 z-10">
                    @foreach($heroSlides as $i => $s)
                        <button type="button" @click="slide = {{ $i }}" 
                                class="h-1.5 rounded-full transition-all duration-300" 
                                :class="slide === {{ $i }} ? 'bg-gold w-6' : 'bg-white/40 w-1.5 hover:bg-white/70'"></button>
                    @endforeach
                </div>
            </div>

            {{-- Floating Badges (Mini-Stats) --}}
            <div class="absolute -bottom-4 -left-3 bg-white/95 backdrop-blur-xl rounded-xl p-3 shadow-xl border border-gray-100 flex items-center gap-3 hover:scale-105 transition-transform duration-300">
                <div class="w-9 h-9 rounded-lg bg-gold/15 flex items-center justify-center text-gold-dark shrink-0">
                    <x-icon name="users" class="w-5 h-5 text-gold" />
                </div>
                <div>
                    <p class="font-display font-extrabold text-base text-navy leading-none">+500</p>
                    <p class="text-[11px] text-gray-500 font-medium mt-0.5">Distributeurs formés</p>
                </div>
            </div>

            <div class="absolute -top-3 -right-3 bg-gold rounded-xl px-3.5 py-2 shadow-xl flex items-center gap-2.5 border border-white/20 hover:scale-105 transition-transform duration-300">
                <div class="w-7 h-7 rounded-md bg-navy/10 flex items-center justify-center text-navy-dark">
                    <x-icon name="building" class="w-4 h-4 text-navy-dark" />
                </div>
                <p class="font-display font-extrabold text-navy-dark text-xs tracking-wide">18 Succursales</p>
            </div>
        </div>

    </div>
</section>

{{-- ============== BANDE RÉSEAU (Compact) ============== --}}
{{-- ============== STRUCTURES DU RÉSEAU (Cartes Modernes) ============== --}}
{{-- ============== STRUCTURES DU RÉSEAU (Cartes avec Logos) ============== --}}
<section class="bg-gray-50/70 border-y border-gray-100 py-12 sm:py-16 relative overflow-hidden">
    {{-- Effets de fond --}}
    <div class="absolute -top-12 -left-12 w-64 h-64 bg-gold/10 rounded-full blur-3xl pointer-events-none"></div>
    <div class="absolute -bottom-12 -right-12 w-64 h-64 bg-navy/5 rounded-full blur-3xl pointer-events-none"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="text-center max-w-xl mx-auto mb-10">
            <span class="inline-block text-gold font-extrabold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full mb-2">
                Nos Entités
            </span>
            <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-navy-dark tracking-tight">
                Les structures de notre réseau
            </h2>
            <p class="text-xs sm:text-sm text-gray-500 mt-2">
                Découvrez les entités spécialisées qui composent l'écosystème SMD
            </p>
        </div>

        <div class="grid md:grid-cols-3 gap-6">
            
            {{-- Carte M.E.T --}}
            <a href="{{ route('met') }}" class="group relative bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1.5 transition-all duration-300 flex flex-col justify-between overflow-hidden">
                <div class="absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl from-navy/5 to-transparent rounded-bl-full group-hover:from-gold/20 transition-all duration-500"></div>
                
                <div>
                    {{-- Badge & En-tête --}}
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-[10px] font-black uppercase tracking-wider text-gold bg-gold/10 px-2.5 py-1 rounded-md">Filiale</span>
                        <x-icon name="arrow-right" class="w-4 h-4 text-gray-300 group-hover:text-gold group-hover:translate-x-1 transition-all" />
                    </div>

                    {{-- Vignette Logo --}}
                    <div class="w-full h-28 bg-white rounded-xl border border-gray-100 p-3 flex items-center justify-center shadow-inner mb-5 overflow-hidden group-hover:border-gold/30 transition-colors">
                        <img src="{{ asset('images/logos/MET.avif') }}" alt="Macha Allah Express Trading Logo" class="max-h-full max-w-full object-contain group-hover:scale-105 transition-transform duration-300">
                    </div>

                    {{-- Titres & Contenu --}}
                    <h3 class="font-display font-extrabold text-xl text-navy-dark group-hover:text-navy transition-colors">
                        M.E.T
                    </h3>
                    <p class="text-xs text-navy/70 font-bold mb-2">Macha Allah Express Trading</p>
                    <p class="text-xs text-gray-500 leading-relaxed line-clamp-2">
                        Pôle commercial axé sur l'import-export et la distribution rapide à travers nos succursales.
                    </p>
                </div>

                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-xs font-bold text-navy group-hover:text-gold transition-colors">
                    <span>En savoir plus</span>
                    <span class="text-xs">→</span>
                </div>
            </a>

            {{-- Carte FGV --}}
            <a href="{{ route('fgv') }}" class="group relative bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1.5 transition-all duration-300 flex flex-col justify-between overflow-hidden">
                <div class="absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl from-gold/10 to-transparent rounded-bl-full group-hover:from-navy/20 transition-all duration-500"></div>
                
                <div>
                    {{-- Badge & En-tête --}}
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-[10px] font-black uppercase tracking-wider text-navy bg-navy/5 px-2.5 py-1 rounded-md">Développement</span>
                        <x-icon name="arrow-right" class="w-4 h-4 text-gray-300 group-hover:text-gold group-hover:translate-x-1 transition-all" />
                    </div>

                    {{-- Vignette Logo --}}
                    <div class="w-full h-28 bg-white rounded-xl border border-gray-100 p-3 flex items-center justify-center shadow-inner mb-5 overflow-hidden group-hover:border-gold/30 transition-colors">
                        <img src="{{ asset('images/logos/FGV.avif') }}" alt="Fusée à Grande Vitesse Logo" class="max-h-full max-w-full object-contain group-hover:scale-105 transition-transform duration-300">
                    </div>

                    {{-- Titres & Contenu --}}
                    <h3 class="font-display font-extrabold text-xl text-navy-dark group-hover:text-navy transition-colors">
                        FGV
                    </h3>
                    <p class="text-xs text-navy/70 font-bold mb-2">Fusée à Grande Vitesse</p>
                    <p class="text-xs text-gray-500 leading-relaxed line-clamp-2">
                        Accélérateur de compétences dédié à la formation intensive et au dynamisme des équipes.
                    </p>
                </div>

                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-xs font-bold text-navy group-hover:text-gold transition-colors">
                    <span>En savoir plus</span>
                    <span class="text-xs">→</span>
                </div>
            </a>

            {{-- Carte B.G.V / T.A.B --}}
            <a href="{{ route('bgv-tab') }}" class="group relative bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1.5 transition-all duration-300 flex flex-col justify-between overflow-hidden">
                <div class="absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl from-navy/5 to-transparent rounded-bl-full group-hover:from-gold/20 transition-all duration-500"></div>
                
                <div>
                    {{-- Badge & En-tête --}}
                    <div class="flex items-center justify-between mb-4">
                        <span class="text-[10px] font-black uppercase tracking-wider text-gold bg-gold/10 px-2.5 py-1 rounded-md">Réseau</span>
                        <x-icon name="arrow-right" class="w-4 h-4 text-gray-300 group-hover:text-gold group-hover:translate-x-1 transition-all" />
                    </div>

                    {{-- Vignette Logo --}}
                    <div class="w-full h-28 bg-white rounded-xl border border-gray-100 p-3 flex items-center justify-center shadow-inner mb-5 overflow-hidden group-hover:border-gold/30 transition-colors">
                        <img src="{{ asset('images/logos/Logo BGVTAB---for printing.avif') }}" alt="B.G.V / T.A.B Logo" class="max-h-full max-w-full object-contain group-hover:scale-105 transition-transform duration-300">
                    </div>

                    {{-- Titres & Contenu --}}
                    <h3 class="font-display font-extrabold text-xl text-navy-dark group-hover:text-navy transition-colors">
                        B.G.V / T.A.B
                    </h3>
                    <p class="text-xs text-navy/70 font-bold mb-2">Bureau à Grande Vitesse / Travail-Application-Business</p>
                    <p class="text-xs text-gray-500 leading-relaxed line-clamp-2">
                        Structures d'encadrement et de suivi sur le terrain pour booster les performances du réseau.
                    </p>
                </div>

                <div class="mt-6 pt-4 border-t border-gray-100 flex items-center justify-between text-xs font-bold text-navy group-hover:text-gold transition-colors">
                    <span>En savoir plus</span>
                    <span class="text-xs">→</span>
                </div>
            </a>

        </div>
    </div>
</section>

{{-- ============== POURQUOI SMD & PILIERS ============== --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-20 grid lg:grid-cols-12 gap-10 items-center">
    <div class="lg:col-span-6">
        <span class="inline-block text-gold font-extrabold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full mb-3">Pourquoi choisir SMD</span>
        <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-navy-dark mb-6 tracking-tight">Un nouveau paradigme commercial</h2>
        
        <div class="space-y-4">
            <div class="flex gap-3.5 p-3.5 rounded-xl hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-100">
                <div class="w-10 h-10 shrink-0 rounded-xl bg-navy flex items-center justify-center text-gold shadow-sm">
                    <x-icon name="users" class="w-5 h-5" />
                </div>
                <div>
                    <h4 class="font-display font-bold text-base text-navy-dark">Vente directe éprouvée</h4>
                    <p class="text-xs text-gray-500 mt-0.5 leading-relaxed">Des produits innovants et un système moderne accessible à tous sans distinction.</p>
                </div>
            </div>

            <div class="flex gap-3.5 p-3.5 rounded-xl hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-100">
                <div class="w-10 h-10 shrink-0 rounded-xl bg-navy flex items-center justify-center text-gold shadow-sm">
                    <x-icon name="chart-bar" class="w-5 h-5" />
                </div>
                <div>
                    <h4 class="font-display font-bold text-base text-navy-dark">Encadrement &amp; Formation</h4>
                    <p class="text-xs text-gray-500 mt-0.5 leading-relaxed">Une équipe expérimentée pour vous former et vous accompagner vers le succès.</p>
                </div>
            </div>

            <div class="flex gap-3.5 p-3.5 rounded-xl hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-100">
                <div class="w-10 h-10 shrink-0 rounded-xl bg-navy flex items-center justify-center text-gold shadow-sm">
                    <x-icon name="building" class="w-5 h-5" />
                </div>
                <div>
                    <h4 class="font-display font-bold text-base text-navy-dark">Présence Sous-Régionale</h4>
                    <p class="text-xs text-gray-500 mt-0.5 leading-relaxed">Siège à Zac Mbao, 15 succursales au Sénégal et 3 succursales en Gambie.</p>
                </div>
            </div>
        </div>
    </div>

    {{-- Cartes de présentation rapides --}}
    <div class="lg:col-span-6 grid grid-cols-2 gap-3.5 sm:gap-4">
        <div class="bg-gradient-to-br from-navy to-navy-dark rounded-2xl p-5 h-36 flex flex-col justify-end shadow-md relative overflow-hidden group">
            <x-icon name="target" class="w-7 h-7 text-gold mb-2 relative" />
            <p class="text-white font-display font-bold text-sm sm:text-base relative">Vente Directe</p>
        </div>
        
        <div class="bg-gradient-to-br from-gold to-yellow-500 rounded-2xl p-5 h-36 flex flex-col justify-end shadow-md relative overflow-hidden">
            <x-icon name="phone" class="w-7 h-7 text-navy-dark mb-2 relative" />
            <p class="text-navy-dark font-display font-extrabold text-sm sm:text-base relative">Formation Continue</p>
        </div>

        <div class="bg-gray-900 rounded-2xl p-5 h-36 flex flex-col justify-end shadow-md relative overflow-hidden group">
            <x-icon name="building" class="w-7 h-7 text-gold mb-2 relative" />
            <p class="text-white font-display font-bold text-sm sm:text-base relative">Micro-Entreprises</p>
        </div>

        <div class="bg-navy-light rounded-2xl p-5 h-36 flex flex-col justify-end shadow-md relative overflow-hidden group">
            <x-icon name="chart-bar" class="w-7 h-7 text-gold mb-2 relative" />
            <p class="text-white font-display font-bold text-sm sm:text-base relative">Sénégal &amp; Gambie</p>
        </div>
    </div>
</section>

{{-- ============== COMMENT ÇA MARCHE ============== --}}
<section class="bg-gray-50/80 border-y border-gray-100 py-14 sm:py-20 relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="text-center max-w-xl mx-auto mb-12">
            <span class="inline-block text-gold font-extrabold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full mb-2">Méthodologie</span>
            <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-navy-dark tracking-tight">Comment nous vous accompagnons</h2>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-5">
            @php
            $steps = [
                ['icon' => 'chat-bubble', 'title' => '1. Échange', 'text' => "Un premier entretien pour comprendre vos besoins et vous présenter le réseau."],
                ['icon' => 'target', 'title' => '2. Formation', 'text' => "Apprentissage des techniques de vente et de la gestion de votre activité."],
                ['icon' => 'users', 'title' => '3. Encadrement', 'text' => "Un accompagnement de proximité au sein de nos succursales."],
                ['icon' => 'chart-bar', 'title' => '4. Réussite', 'text' => "Développement de vos revenus et opportunités d'évolution."],
            ];
            @endphp
            @foreach($steps as $step)
                <div class="relative bg-white rounded-xl p-6 border border-gray-100 shadow-sm hover:shadow-md transition-shadow">
                    <div class="w-10 h-10 rounded-lg bg-gold/15 flex items-center justify-center text-gold-dark mb-4">
                        <x-icon name="{{ $step['icon'] }}" class="w-5 h-5 text-gold" />
                    </div>
                    <h3 class="font-display font-bold text-base text-navy-dark mb-1.5">{{ $step['title'] }}</h3>
                    <p class="text-xs text-gray-500 leading-relaxed">{{ $step['text'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

{{-- ============== RÉALISATIONS COMPACTES ============== --}}
@if($portfolioItems->isNotEmpty())
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-20">
    <div class="flex items-end justify-between mb-8 flex-wrap gap-4">
        <div>
            <span class="inline-block text-gold font-extrabold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full mb-2">Réalisations</span>
            <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-navy-dark tracking-tight">Nos dernières campagnes</h2>
        </div>
        <a href="{{ route('portfolio.index') }}" class="font-bold text-xs text-navy hover:text-gold transition-colors inline-flex items-center gap-1.5 bg-gray-50 border border-gray-200 px-4 py-2 rounded-full">
            <span>Voir tout</span>
            <x-icon name="arrow-right" class="w-3.5 h-3.5" />
        </a>
    </div>
    
    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        @foreach($portfolioItems->take(3) as $item)
            <a href="{{ route('portfolio.show', $item) }}" class="group block rounded-xl overflow-hidden bg-white border border-gray-100 shadow-sm hover:shadow-xl transition-all duration-300">
                <div class="h-44 bg-gradient-to-br from-navy to-navy-light overflow-hidden relative">
                    @if($item->cover_image)
                        <img src="{{ Storage::url($item->cover_image) }}" alt="{{ $item->title }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                    @else
                        <div class="w-full h-full flex items-center justify-center text-gold/30">
                            <x-icon name="sparkles" class="w-10 h-10" />
                        </div>
                    @endif
                </div>
                <div class="p-4">
                    @if($item->category)
                        <span class="text-[10px] font-extrabold text-gold uppercase tracking-wider">{{ $item->category }}</span>
                    @endif
                    <h3 class="font-display font-bold text-base text-navy-dark mt-0.5 group-hover:text-gold transition-colors line-clamp-1">{{ $item->title }}</h3>
                </div>
            </a>
        @endforeach
    </div>
</section>
@endif

{{-- ============== TÉMOIGNAGES ============== --}}
@if($testimonials->isNotEmpty())
<section class="relative bg-navy py-14 sm:py-20 overflow-hidden">
    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-xl mx-auto mb-10">
            <span class="inline-block text-gold font-extrabold text-xs uppercase tracking-widest px-3 py-1 bg-white/10 rounded-full mb-2">Témoignages</span>
            <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-white tracking-tight">Ce que nos partenaires en disent</h2>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($testimonials->take(3) as $testimonial)
                <div class="bg-white/5 border border-white/10 rounded-xl p-6 backdrop-blur-md flex flex-col justify-between">
                    <div>
                        <div class="flex gap-1 mb-4">
                            @for($i = 0; $i < $testimonial->rating; $i++)
                                <x-icon name="star" class="w-3.5 h-3.5 text-gold fill-gold" />
                            @endfor
                        </div>
                        <p class="text-white/90 text-xs sm:text-sm leading-relaxed italic">"{{ $testimonial->quote }}"</p>
                    </div>
                    <div class="flex items-center gap-3 mt-6 pt-4 border-t border-white/10">
                        @if($testimonial->client_photo)
                            <img src="{{ Storage::url($testimonial->client_photo) }}" class="w-9 h-9 rounded-full object-cover ring-2 ring-gold/50" alt="{{ $testimonial->client_name }}">
                        @else
                            <div class="w-9 h-9 rounded-full bg-gold/20 ring-2 ring-gold/50 flex items-center justify-center text-gold">
                                <x-icon name="user" class="w-4 h-4" />
                            </div>
                        @endif
                        <div>
                            <p class="font-bold text-white text-xs sm:text-sm">{{ $testimonial->client_name }}</p>
                            @if($testimonial->client_role)
                                <p class="text-[11px] text-white/50">{{ $testimonial->client_role }}</p>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
@endif

{{-- ============== CTA RECRUTEMENT (Pied de page) ============== --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14 sm:py-20">
    <div class="relative bg-gradient-to-r from-gold via-gold/95 to-yellow-500 rounded-2xl p-8 sm:p-12 text-center overflow-hidden shadow-xl">
        <div class="relative max-w-xl mx-auto">
            <span class="inline-flex items-center gap-1.5 bg-navy-dark text-gold text-[11px] font-bold uppercase tracking-wider px-3.5 py-1 rounded-full mb-4 shadow-sm">
                <x-icon name="briefcase" class="w-3.5 h-3.5" /> Recrutement Ouvert
            </span>
            <h2 class="font-display font-extrabold text-2xl sm:text-4xl text-navy-dark tracking-tight mb-3">
                Envie de rejoindre l'aventure SMD ?
            </h2>
            <p class="text-navy-dark/80 text-xs sm:text-sm mb-6 leading-relaxed font-medium">
                Nous recrutons régulièrement des distributeurs, superviseurs et commerciaux au Sénégal et en Gambie.
            </p>
            <a href="{{ route('jobs.index') }}" class="inline-flex items-center gap-2 bg-navy text-white hover:bg-navy-dark font-display font-extrabold text-sm px-7 py-3.5 rounded-xl shadow-md hover:-translate-y-0.5 transition-all duration-300 group">
                <span>Voir nos offres d'emploi</span>
                <x-icon name="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform" />
            </a>
        </div>
    </div>
</section>

@endsection