@extends('layouts.public')
@section('title', 'Nos membres')

@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">Nos membres</p>
        <h1 class="font-display font-extrabold text-3xl sm:text-5xl text-white">Un réseau porté par ses équipes</h1>
        <p class="text-white/70 mt-5 text-lg leading-relaxed">
            Distributeurs, commerciaux, superviseurs et gérants de succursales : ensemble, ils font vivre S.M.D au Sénégal et en Gambie.
        </p>
    </div>
</section>

<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
    <div class="grid sm:grid-cols-2 gap-6 mb-16">
        <div class="rounded-2xl overflow-hidden shadow-sm border border-gray-100">
            <img src="{{ asset('images/team/inter-meeting-guediawaye.jpg') }}" alt="Inter Meeting SMD AF Guédiawaye" class="w-full h-56 object-cover">
            <div class="p-5">
                <p class="font-display font-bold text-navy-dark">Inter Meeting SMD AF</p>
                <p class="text-sm text-gray-500 mt-1">Guédiawaye TSA et Malika Place</p>
            </div>
        </div>
        <div class="rounded-2xl overflow-hidden shadow-sm border border-gray-100">
            <img src="{{ asset('images/team/meeting-louga.jpg') }}" alt="Meeting SMD section HTM Louga" class="w-full h-56 object-cover">
            <div class="p-5">
                <p class="font-display font-bold text-navy-dark">Section HTM</p>
                <p class="text-sm text-gray-500 mt-1">Meeting de l'équipe de Louga</p>
            </div>
        </div>
    </div>

    <div class="text-center max-w-2xl mx-auto mb-12">
        <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Le personnel de S.M.D</p>
        <h2 class="font-display font-extrabold text-3xl sm:text-4xl text-navy-dark">615 agents commerciaux</h2>
        <p class="text-gray-500 mt-4 leading-relaxed">
            L'ensemble du personnel de SMD est composé de :
        </p>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
        <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm text-center">
            <p class="font-display font-extrabold text-3xl text-navy">19</p>
            <p class="text-sm text-gray-500 font-bold mt-2">Gérants</p>
        </div>
        <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm text-center">
            <p class="font-display font-extrabold text-3xl text-navy">20</p>
            <p class="text-sm text-gray-500 font-bold mt-2">Assistants gérants</p>
        </div>
        <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm text-center">
            <p class="font-display font-extrabold text-3xl text-navy">∞</p>
            <p class="text-sm text-gray-500 font-bold mt-2">Leaders (évolution perpétuelle)</p>
        </div>
        <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm text-center">
            <p class="font-display font-extrabold text-3xl text-navy">∞</p>
            <p class="text-sm text-gray-500 font-bold mt-2">Distributeurs (évolution perpétuelle)</p>
        </div>
    </div>

    <div class="text-center max-w-2xl mx-auto mb-12">
        <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Nos structures</p>
        <h2 class="font-display font-extrabold text-3xl sm:text-4xl text-navy-dark">M.E.T, F.G.V et B.G.V/T.A.B</h2>
    </div>

    <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <a href="{{ route('met') }}" class="group bg-white border border-gray-100 rounded-2xl p-7 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
            <span class="w-12 h-12 rounded-xl bg-gradient-to-br from-navy to-navy-light flex items-center justify-center text-gold shadow-md">
                <x-icon name="building" class="w-6 h-6" />
            </span>
            <h3 class="font-display font-bold text-lg text-navy-dark mt-4">M.E.T</h3>
            <p class="text-xs font-bold text-gold uppercase tracking-wide">Macha Allah Express Trading</p>
            <p class="text-sm text-gray-500 mt-3 leading-relaxed">Créée le 02 juin 2002 à Dakar par M. Mamadou Massamba Diop. Trois agences : Sicap Mbao, Touba et Darou Djolof.</p>
            <span class="inline-flex items-center gap-1 text-sm font-bold text-gold mt-4 group-hover:gap-2.5 transition-all">En savoir plus <x-icon name="arrow-right" class="w-4 h-4" /></span>
        </a>
        <a href="{{ route('fgv') }}" class="group bg-white border border-gray-100 rounded-2xl p-7 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
            <span class="w-12 h-12 rounded-xl bg-gradient-to-br from-navy to-navy-light flex items-center justify-center text-gold shadow-md">
                <x-icon name="sparkles" class="w-6 h-6" />
            </span>
            <h3 class="font-display font-bold text-lg text-navy-dark mt-4">F.G.V</h3>
            <p class="text-xs font-bold text-gold uppercase tracking-wide">Fusée à Grande Vitesse</p>
            <p class="text-sm text-gray-500 mt-3 leading-relaxed">Organisme commercial d'appui à la création et au développement de micro-entreprises. Devise : « Une équipe, un but, une foi ».</p>
            <span class="inline-flex items-center gap-1 text-sm font-bold text-gold mt-4 group-hover:gap-2.5 transition-all">En savoir plus <x-icon name="arrow-right" class="w-4 h-4" /></span>
        </a>
        <a href="{{ route('bgv-tab') }}" class="group bg-white border border-gray-100 rounded-2xl p-7 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
            <span class="w-12 h-12 rounded-xl bg-gradient-to-br from-navy to-navy-light flex items-center justify-center text-gold shadow-md">
                <x-icon name="chart-bar" class="w-6 h-6" />
            </span>
            <h3 class="font-display font-bold text-lg text-navy-dark mt-4">B.G.V/T.A.B</h3>
            <p class="text-xs font-bold text-gold uppercase tracking-wide">Bureau à Grande Vitesse — Travail Application Business</p>
            <p class="text-sm text-gray-500 mt-3 leading-relaxed">Restructuré le 03 janvier 2011 par Tété Amadou Ba. 450 commerciaux, 5 succursales à Dakar, Thiès et Kaolack.</p>
            <span class="inline-flex items-center gap-1 text-sm font-bold text-gold mt-4 group-hover:gap-2.5 transition-all">En savoir plus <x-icon name="arrow-right" class="w-4 h-4" /></span>
        </a>
    </div>
</section>

<section class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 text-center">
    <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-navy-dark mb-4">Envie de rejoindre nos membres ?</h2>
    <p class="text-gray-500 mb-8">Nous accueillons régulièrement de nouveaux distributeurs dans nos succursales.</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