@extends('layouts.public')
@section('title', 'À propos')

@section('content')

{{-- ============== HERO SECTION ABOUT ============== --}}
<section class="relative bg-navy py-16 sm:py-24 overflow-hidden">
    {{-- Motifs & Lumières d'arrière-plan --}}
    <div class="absolute inset-0 opacity-10 bg-[radial-gradient(#eab308_1px,transparent_1px)] [background-size:16px_16px] 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-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
        <span class="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/10 border border-white/15 backdrop-blur-md text-gold text-xs font-bold uppercase tracking-wider mb-4 shadow-inner">
            <x-icon name="sparkles" class="w-4 h-4 text-gold" />
            <span>À propos de nous</span>
        </span>

        <h1 class="font-display font-extrabold text-3xl sm:text-5xl text-white tracking-tight">
            Sunu Marketing Direct <span class="text-gold">(S.M.D)</span>
        </h1>

        <p class="text-white/80 mt-6 text-base sm:text-xl font-medium leading-relaxed max-w-2xl mx-auto italic">
            « Changez votre vie, fixez vos objectifs, vivez cette opportunité. »
        </p>
    </div>
</section>

{{-- ============== HISTORIQUE ET PHOTO DE L'ÉQUIPE ============== --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
    <div class="grid lg:grid-cols-12 gap-12 items-center">
        
        {{-- Texte Historique (Gauche) --}}
        <div class="lg:col-span-6 space-y-6">
            <div>
                <span class="text-gold font-bold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full">
                    Notre Histoire
                </span>
                <h2 class="font-display font-extrabold text-2xl sm:text-4xl text-navy-dark mt-3 leading-snug">
                    Fondé le 08 avril 2008
                </h2>
            </div>

            <div class="space-y-4 text-gray-600 leading-relaxed text-sm sm:text-base">
                <p>
                    <strong class="text-navy-dark">Sunu Marketing Direct (S.M.D)</strong> est reconnu comme un acteur de premier plan dans la recherche d'un monde socialement plus stable sur le plan économique. En s'appuyant sur un nouveau paradigme commercial, notre réseau cherche à transcender les frontières sociales et économiques.
                </p>
                <p>
                    En utilisant des produits innovants et un modèle commercial éprouvé de vente directe, S.M.D aide les populations à transformer leur vie et leurs moyens de subsistance.
                </p>
                <p class="p-4 rounded-2xl bg-gray-50 border-l-4 border-gold text-gray-700">
                    Avec son siège à Zac Mbao (villa N°35) et un réseau de <strong class="text-navy-dark">15 succursales au Sénégal</strong> et <strong class="text-navy-dark">03 succursales en Gambie</strong>, S.M.D se distingue comme un leader en forte croissance dans le marketing de réseau.
                </p>
            </div>
        </div>

        {{-- Photo de l'Équipe (Droite) --}}
        <div class="lg:col-span-6">
            <div class="relative group">
                {{-- Effet d'ombre colorée --}}
                <div class="absolute -inset-2 bg-gradient-to-r from-gold via-navy to-navy-dark rounded-3xl blur-xl opacity-30 group-hover:opacity-50 transition duration-500"></div>
                
                <div class="relative rounded-3xl overflow-hidden shadow-2xl border-4 border-white bg-white">
                    <img src="{{ asset('images/equipe-smd.jpg') }}" alt="Équipe Sunu Marketing Direct" class="w-full h-auto object-cover transform group-hover:scale-105 transition duration-700">
                    
                    <div class="absolute bottom-0 inset-x-0 bg-gradient-to-t from-navy/90 via-navy/40 to-transparent p-6 text-white">
                        <p class="font-display font-bold text-lg text-white">L'équipe SMD sur le terrain</p>
                        <p class="text-xs text-white/80 mt-1">Des commerciaux passionnés et engagés à travers tout le réseau.</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

{{-- ============== LES MEMBRES ET EFFECTIFS ============== --}}
<section class="bg-gray-50/70 border-y border-gray-100 py-16 sm:py-20 relative">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="text-center max-w-3xl mx-auto mb-12">
            <span class="text-gold font-bold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full">
                Capital Humain
            </span>
            <h2 class="font-display font-extrabold text-2xl sm:text-4xl text-navy-dark mt-3">
                Les membres de notre réseau
            </h2>
            <p class="text-sm text-gray-500 mt-3 leading-relaxed">
                SMD réunit une équipe dynamique maîtrisant le marketing direct avec motivation, rapidité et efficacité.
            </p>
        </div>

        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
            <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md border border-gray-100 text-center transition-all group">
                <p class="font-display font-extrabold text-4xl text-navy group-hover:text-gold transition-colors">19</p>
                <p class="text-xs text-gray-500 font-bold uppercase tracking-wider mt-2">Gérants</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md border border-gray-100 text-center transition-all group">
                <p class="font-display font-extrabold text-4xl text-navy group-hover:text-gold transition-colors">20</p>
                <p class="text-xs text-gray-500 font-bold uppercase tracking-wider mt-2">Assistants gérants</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md border border-gray-100 text-center transition-all group">
                <p class="font-display font-extrabold text-4xl text-navy group-hover:text-gold transition-colors">∞</p>
                <p class="text-xs text-gray-500 font-bold uppercase tracking-wider mt-2">Leaders actifs</p>
            </div>
            <div class="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md border border-gray-100 text-center transition-all group">
                <p class="font-display font-extrabold text-4xl text-navy group-hover:text-gold transition-colors">∞</p>
                <p class="text-xs text-gray-500 font-bold uppercase tracking-wider mt-2">Distributeurs</p>
            </div>
        </div>

        <div class="bg-navy text-white rounded-2xl p-6 sm:p-8 flex flex-col sm:flex-row items-center justify-between gap-6 shadow-lg">
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-gold/20 flex items-center justify-center text-gold shrink-0">
                    <x-icon name="users" class="w-6 h-6" />
                </div>
                <div>
                    <p class="font-display font-bold text-lg text-white">Un effectif global en constante expansion</p>
                    <p class="text-xs text-white/70 mt-0.5">Répartis dans les différentes structures et annexes régionales.</p>
                </div>
            </div>
            <div class="bg-white/10 px-6 py-3 rounded-xl border border-white/15 text-center shrink-0">
                <span class="font-display font-black text-2xl text-gold">615</span>
                <span class="block text-[10px] uppercase font-bold text-white/80">Agents commerciaux</span>
            </div>
        </div>

    </div>
</section>

{{-- ============== NOTRE BUT & ENGAGEMENTS ============== --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
    <div class="grid lg:grid-cols-12 gap-12 items-start">
        
        <div class="lg:col-span-5 space-y-6">
            <span class="text-gold font-bold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full">
                Notre Raison d'Être
            </span>
            <h2 class="font-display font-extrabold text-2xl sm:text-4xl text-navy-dark leading-snug">
                Un GIE représentatif au service du développement
            </h2>
            <p class="text-gray-600 text-sm leading-relaxed">
                Notre but est de regrouper les acteurs de la distribution autour d'une structure forte, créant un pont solide entre les entreprises, les producteurs locaux et les consommateurs.
            </p>
        </div>

        <div class="lg:col-span-7 bg-white rounded-3xl border border-gray-100 shadow-xl p-6 sm:p-8">
            <h3 class="font-display font-bold text-lg text-navy-dark mb-4">Nos Objectifs Majeurs</h3>
            <div class="grid sm:grid-cols-2 gap-4">
                @foreach([
                    'Susciter le goût de la distribution et promouvoir la vente directe.',
                    'Promouvoir la production et la consommation de produits locaux.',
                    'Offrir des opportunités d\'insertion professionnelle aux jeunes.',
                    'Défendre les intérêts matériels et moraux des membres du réseau.',
                    'Favoriser l\'émergence d\'un entrepreneuriat local dynamique.',
                    'Renforcer les compétences techniques et managériales des agents.'
                ] as $objectif)
                    <div class="flex items-start gap-3 p-3.5 rounded-xl bg-gray-50/80 border border-gray-100">
                        <x-icon name="check-circle" class="w-5 h-5 text-gold shrink-0 mt-0.5" />
                        <span class="text-xs font-semibold text-gray-700 leading-snug">{{ $objectif }}</span>
                    </div>
                @endforeach
            </div>
        </div>

    </div>
</section>

{{-- ============== PROMOTION DE VOS PRODUITS ============== --}}
<section class="bg-gradient-to-br from-navy via-navy-dark to-black text-white py-16 sm:py-20 relative overflow-hidden">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div class="max-w-3xl mb-12">
            <span class="text-gold font-bold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full">
                Service Entreprises
            </span>
            <h2 class="font-display font-extrabold text-2xl sm:text-4xl text-white mt-3">
                La promotion efficace de vos produits
            </h2>
            <p class="text-gold italic font-medium mt-2 text-sm sm:text-base">
                « Nous donnons une véritable personnalité à votre marque et à vos produits. »
            </p>
        </div>

        <div class="grid lg:grid-cols-12 gap-8 items-center mb-12">
            <div class="lg:col-span-7 space-y-4 text-white/80 text-sm sm:text-base leading-relaxed">
                <p>
                    Imaginez disposer d'une force de frappe de <strong class="text-white">50 commerciaux</strong>, prospectant chacun au moins 40 foyers par jour. Avec une moyenne de 5 clients par foyer, ce sont plus de <strong class="text-gold">10 000 consommateurs</strong> touchés quotidiennement.
                </p>
                <p>
                    Notre réseau agit comme un véritable canal de communication direct pour dynamiser vos ventes et faire face ponctuellement à la concurrence.
                </p>
            </div>

            <div class="lg:col-span-5 bg-white/5 border border-white/10 rounded-2xl p-6 backdrop-blur-md">
                <p class="font-display font-bold text-gold text-sm uppercase tracking-wider mb-4">Nos valeurs ajoutées</p>
                <ul class="space-y-3 text-xs text-white/80">
                    <li class="flex items-center gap-2"><x-icon name="sparkles" class="w-4 h-4 text-gold shrink-0" /> Formation produit quotidienne des équipes</li>
                    <li class="flex items-center gap-2"><x-icon name="sparkles" class="w-4 h-4 text-gold shrink-0" /> Nombre massif de consommateurs ciblés</li>
                    <li class="flex items-center gap-2"><x-icon name="sparkles" class="w-4 h-4 text-gold shrink-0" /> Image professionnelle et crédible</li>
                    <li class="flex items-center gap-2"><x-icon name="sparkles" class="w-4 h-4 text-gold shrink-0" /> Ciblage géographique sur-mesure</li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{-- ============== STRUCTURES DU RÉSEAU ============== --}}
<section class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
    <div class="text-center max-w-2xl mx-auto mb-12">
        <span class="text-gold font-bold text-xs uppercase tracking-widest px-3 py-1 bg-gold/10 rounded-full">
            Écosystème
        </span>
        <h2 class="font-display font-extrabold text-2xl sm:text-4xl text-navy-dark mt-3">
            Les entités de notre réseau
        </h2>
    </div>

    <div class="grid md:grid-cols-3 gap-6">
        <div class="bg-white border border-gray-100 rounded-3xl p-7 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col justify-between">
            <div>
                <span class="text-[10px] font-black uppercase tracking-wider text-gold bg-gold/10 px-2.5 py-1 rounded-md">Filiale</span>
                <h3 class="font-display font-extrabold text-xl text-navy-dark mt-4">M.E.T</h3>
                <p class="text-xs font-bold text-navy/70 mb-3">Macha Allah Express Trading</p>
                <p class="text-xs text-gray-500 leading-relaxed">Pôle de prestations de services et d'appui à la création de micro-entreprises dans le marketing direct. Fondé en 2002 avec 3 agences principales.</p>
            </div>
            <a href="{{ route('met') }}" class="mt-6 text-xs font-bold text-navy hover:text-gold flex items-center gap-1 transition-colors">
                En savoir plus →
            </a>
        </div>

        <div class="bg-white border border-gray-100 rounded-3xl p-7 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col justify-between">
            <div>
                <span class="text-[10px] font-black uppercase tracking-wider text-navy bg-navy/5 px-2.5 py-1 rounded-md">Développement</span>
                <h3 class="font-display font-extrabold text-xl text-navy-dark mt-4">F.G.V</h3>
                <p class="text-xs font-bold text-navy/70 mb-3">Fusée à Grande Vitesse</p>
                <p class="text-xs text-gray-500 leading-relaxed">Organisme commercial axé sur l'accompagnement et le développement de compétences pour lutter activement contre la précarité.</p>
            </div>
            <a href="{{ route('fgv') }}" class="mt-6 text-xs font-bold text-navy hover:text-gold flex items-center gap-1 transition-colors">
                En savoir plus →
            </a>
        </div>

        <div class="bg-white border border-gray-100 rounded-3xl p-7 shadow-sm hover:shadow-xl transition-all duration-300 flex flex-col justify-between">
            <div>
                <span class="text-[10px] font-black uppercase tracking-wider text-gold bg-gold/10 px-2.5 py-1 rounded-md">Réseau</span>
                <h3 class="font-display font-extrabold text-xl text-navy-dark mt-4">B.G.V / T.A.B</h3>
                <p class="text-xs font-bold text-navy/70 mb-3">Bureau à Grande Vitesse / TAB</p>
                <p class="text-xs text-gray-500 leading-relaxed">Structure d'encadrement regroupant 500 commerciaux qualifiés et formés aux techniques de vente sur le terrain.</p>
            </div>
            <a href="{{ route('bgv-tab') }}" class="mt-6 text-xs font-bold text-navy hover:text-gold flex items-center gap-1 transition-colors">
                En savoir plus →
            </a>
        </div>
    </div>
</section>

{{-- ============== APPEL À L'ACTION (CTA) ============== --}}
<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pb-16 text-center">
    <div class="bg-gradient-to-r from-navy to-navy-dark rounded-3xl p-8 sm:p-12 text-white shadow-2xl relative overflow-hidden">
        <h2 class="font-display font-extrabold text-2xl sm:text-3xl text-white mb-3">Prêt à rejoindre l'aventure SMD ?</h2>
        <p class="text-xs sm:text-sm text-white/70 max-w-xl mx-auto mb-8">
            Que ce soit pour promouvoir vos produits ou démarrer votre carrière commerciale, nous vous accompagnons.
        </p>
        <div class="flex flex-wrap justify-center gap-4">
            <a href="{{ route('contact.index') }}" class="bg-gold text-navy-dark font-display font-extrabold text-sm px-8 py-3.5 rounded-full shadow-lg hover:brightness-105 transition-all">
                Nous contacter
            </a>
            <a href="{{ route('jobs.index') }}" class="bg-white/10 border border-white/20 text-white font-display font-bold text-sm px-8 py-3.5 rounded-full hover:bg-white/20 transition-all">
                Rejoindre nos équipes
            </a>
        </div>
    </div>
</section>

@endsection