@extends('layouts.public')
@section('title', 'M.E.T — Macha Allah Express Trading')

@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 — M.E.T</p>
        <h1 class="font-display font-extrabold text-3xl sm:text-5xl text-white">Macha Allah Express Trading</h1>
        <p class="text-white/70 mt-5 text-lg leading-relaxed">
            Une société de prestations de services, structure de formation et d'appui à la création de micro-entreprises dans le domaine du marketing direct.
        </p>
    </div>
</section>

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20">
    <div class="grid lg:grid-cols-5 gap-12 items-start">
        <div class="lg:col-span-2">
            <div class="rounded-2xl overflow-hidden shadow-xl border border-gray-100">
                <img src="{{ asset('images/structures/met.avif') }}" alt="Macha Allah Express Trading (M.E.T)" class="w-full h-full object-cover">
            </div>
        </div>
        <div class="lg:col-span-3 space-y-5 text-gray-600 leading-relaxed">
            <p>
                Macha Allah Express Trading (M.E.T) est une société de prestations de services. Elle est également une structure de formation et d'appui à la création de micro-entreprises dans le domaine du marketing direct.
            </p>
            <p>
                Macha Allah Express Trading a été créée le <strong class="text-navy-dark">02 juin 2002 à Dakar</strong> par le gérant principal <strong class="text-navy-dark">M. Mamadou Massamba Diop</strong>. Le siège social se trouve à la Sicap Mbao, villa n°357.
            </p>
            <p>Elle compte trois agences :</p>
            <ul class="list-disc list-inside space-y-1">
                <li>MET 1 — Sicap Mbao, villa n°357</li>
                <li>MET 2 — Touba, quartier HLM</li>
                <li>MET 3 — Darou Djolof, en face de la station EDK</li>
            </ul>
            <p>
                Elle compte une soixantaine d'agents composés de gérants, d'assistants gérants, de leaders et de distributeurs.
            </p>
        </div>
    </div>
</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-12">
            <p class="text-gold font-bold text-sm uppercase tracking-wide mb-3">Gouvernance</p>
            <h2 class="font-display font-extrabold text-3xl sm:text-4xl text-navy-dark">Les responsables de M.E.T</h2>
        </div>
        <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach([
                ['name' => 'Mamadou Massamba Diop', 'role' => 'Manager général'],
                ['name' => 'Alé Diop', 'role' => 'Gérant — MET 3 Darou Djolof'],
                ['name' => 'Ndoffe Diouf', 'role' => 'Assistante — MET 1 Sicap Mbao'],
                ['name' => 'Ndèye Awa Diop', 'role' => 'Assistante — MET 3 Darou Djolof'],
                ['name' => 'Ousseynou Sagna', 'role' => 'Assistant responsable — MET 2 Touba'],
            ] as $person)
                <div class="bg-white border border-gray-100 rounded-2xl p-6 shadow-sm">
                    <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">
                        <x-icon name="user" class="w-5 h-5" />
                    </span>
                    <h3 class="font-display font-bold text-navy-dark mt-4">{{ $person['name'] }}</h3>
                    <p class="text-sm text-gray-500 mt-1">{{ $person['role'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>

<section class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20 grid sm:grid-cols-2 gap-8">
    <div class="bg-white border border-gray-100 rounded-2xl p-7 shadow-sm">
        <span class="w-12 h-12 rounded-xl bg-navy/5 flex items-center justify-center text-navy mb-4"><x-icon name="target" class="w-6 h-6" /></span>
        <h3 class="font-display font-bold text-navy-dark mb-2">Nos objectifs</h3>
        <ul class="text-sm text-gray-500 leading-relaxed space-y-2 list-disc list-inside">
            <li>Lutter contre le chômage des jeunes.</li>
            <li>Leur donner l'opportunité d'avoir leur propre entreprise.</li>
        </ul>
    </div>
    <div class="bg-white border border-gray-100 rounded-2xl p-7 shadow-sm">
        <span class="w-12 h-12 rounded-xl bg-navy/5 flex items-center justify-center text-navy mb-4"><x-icon name="building" class="w-6 h-6" /></span>
        <h3 class="font-display font-bold text-navy-dark mb-2">Fiche d'identité</h3>
        <ul class="text-sm text-gray-500 leading-relaxed space-y-1">
            <li>Création : 02 juin 2002, Dakar</li>
            <li>Siège : Sicap Mbao, villa n°357</li>
            <li>3 agences (MET 1, 2 et 3)</li>
            <li>~60 agents : gérants, assistants gérants, leaders et distributeurs</li>
        </ul>
    </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">Rejoignez l'équipe M.E.T</h2>
    <p class="text-gray-500 mb-8">Chômeur, étudiant, qualifié ou sans formation : déposez votre candidature dès aujourd'hui.</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