@extends('layouts.public')

@section('content')
    <!-- Bannière Hero - Reproduction exacte du design -->
    <!-- Hero Section - Design Premium & Ultra-Professionnel -->
    <section id="accueil" class="relative min-h-[160vh] flex flex-col items-center justify-center overflow-hidden" style="background-color: #0a0f1a;">
        <!-- Fond Immersif -->
        <div class="absolute inset-0 z-0">
            <img src="{{ asset('Images/bannier1.jpg') }}" alt="Bannière principale"
                class="w-full h-full object-cover scale-105 animate-slow-zoom" decoding="async" fetchpriority="high">
            <!-- Overlays Sophistiqués -->
            <div class="absolute inset-0 bg-black/70 z-10"></div>
            <div
                class="absolute inset-0 bg-gradient-to-br from-slate-900/90 via-[#0d4f3c]/70 to-emerald-900/40 mix-blend-multiply transition-opacity duration-700">
            </div>
            <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
        </div>

        <!-- Décorations Lumineuses (Effet Glassmorphism) -->
        <div class="absolute top-1/4 -left-20 w-80 h-80 bg-emerald-500/20 rounded-full blur-[120px] animate-blob"></div>
        <div class="absolute bottom-1/4 -right-20 w-80 h-80 bg-amber-500/10 rounded-full blur-[120px] animate-blob animation-delay-2000"></div>

        <div class="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 flex flex-col items-center">



            <div class="max-w-4xl mx-auto text-center animate-fade-in-up mt-40">
                <!-- Contenu Principal Descendu - Position Définitive -->
                <div class="space-y-8 md:space-y-12">
                    <!-- Titre Iconique -->
                    <div class="space-y-6">
                        <div class="flex items-center justify-center gap-4">
                            <div class="h-px w-12 bg-white/30 hidden md:block"></div>
                            <h1 class="text-xl md:text-3xl font-extrabold text-white uppercase tracking-[0.1em]">
                                Association Sénégalaise de la valls icamp
                            </h1>
                            <div class="h-px w-12 bg-white/30 hidden md:block"></div>
                        </div>
                    </div>

                    <!-- Description Raffinée -->
                    <p class="text-lg md:text-2xl text-white max-w-2xl mx-auto leading-relaxed font-light italic">
                        "Bâtir ensemble un avenir solidaire et durable pour notre communauté."
                    </p>
                </div>

                <!-- Actions Ultimate Professional (v15 - Increased Spacing) -->
                <div class="flex flex-col sm:flex-row gap-4 justify-center items-center mt-12">
                    <a href="{{ route('home') }}#contact"
                        style="min-width: 280px; padding-left: 4rem; padding-right: 4rem; padding-top: 1rem; padding-bottom: 1rem;"
                        class="group bg-white/10 backdrop-blur-md hover:bg-white/20 text-white rounded-xl text-sm font-bold uppercase tracking-widest transition-all duration-300 shadow-[0_10px_30px_-5px_rgba(255,255,255,0.1)] hover:shadow-[0_20px_40px_-10px_rgba(255,255,255,0.2)] transform hover:-translate-y-1 flex items-center justify-center gap-3 border border-white/20 mx-2 text-center">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                        </svg>
                        <span>Nous rejoindre</span>
                    </a>


                    <a href="{{ route('home') }}#realisations"
                        style="min-width: 280px; padding-left: 4rem; padding-right: 4rem; padding-top: 1rem; padding-bottom: 1rem;"
                        class="group bg-white/10 backdrop-blur-md hover:bg-white/20 text-white rounded-xl text-sm font-bold uppercase tracking-widest transition-all duration-300 shadow-[0_10px_30px_-5px_rgba(255,255,255,0.1)] hover:shadow-[0_20px_40px_-10px_rgba(255,255,255,0.2)] transform hover:-translate-y-1 border border-white/20 text-center mx-2 flex items-center justify-center gap-3">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                        </svg>
                        <span>Nos Réalisations</span>
                    </a>
                </div>
            </div>
        </div>

        <!-- Décoration de bas de section -->
        <div class="absolute bottom-0 left-0 w-full h-24 bg-gradient-to-t from-white to-transparent z-10"></div>
    </section>



    <section id="a-propos" class="bg-slate-50 relative overflow-hidden" style="padding-top: 0; padding-bottom: 6rem;">
        <!-- Background Glow Sync with Header/Footer -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[radial-gradient(circle_at_center,rgba(245,158,11,0.03)_0%,transparent_70%)] pointer-events-none"></div>
        <!-- Section Statistiques Premium - Full Width -->
        <div class="w-full relative z-30 transform -translate-y-12">
            <div class="bg-white overflow-hidden border-y border-slate-100">
                <div class="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-slate-100">
                    
                    <!-- Statistique 1 -->
                    <div class="p-8 md:p-10 flex flex-col items-center justify-center text-center transition-colors duration-300">
                        <div class="mb-4 p-4 rounded-full transition-all duration-300" style="background-color: #10b981;">
                            <svg class="w-8 h-8 transition-colors duration-300" style="color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                            </svg>
                        </div>
                        <div class="text-5xl font-black text-slate-900 tracking-tight mb-2">18+</div>
                        <div class="text-sm font-bold text-slate-500 uppercase tracking-widest">Ans d'existence</div>
                    </div>

                    <!-- Statistique 2 -->
                    <div class="p-8 md:p-10 flex flex-col items-center justify-center text-center transition-colors duration-300">
                        <div class="mb-4 p-4 rounded-full transition-all duration-300" style="background-color: #fbbf24;">
                            <svg class="w-8 h-8 transition-colors duration-300" style="color: black;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <div class="text-5xl font-black text-slate-900 tracking-tight mb-2">2</div>
                        <div class="text-sm font-bold text-slate-500 uppercase tracking-widest">Continents</div>
                    </div>

                    <!-- Statistique 3 -->
                    <div class="p-8 md:p-10 flex flex-col items-center justify-center text-center transition-colors duration-300">
                        <div class="mb-4 p-4 rounded-full transition-all duration-300" style="background-color: #ef4444;">
                            <svg class="w-8 h-8 transition-colors duration-300" style="color: white;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                            </svg>
                        </div>
                        <div class="text-5xl font-black text-slate-900 tracking-tight mb-2">{{ $userCount }}</div>
                        <div class="text-sm font-bold text-slate-500 uppercase tracking-widest">Membres</div>
                    </div>

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

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <!-- Header aligned with Realisations -->
            <div class="text-center mb-12" style="margin-top: 5rem;">
                <h2 class="text-4xl font-black mb-4 uppercase tracking-wider" style="color: black;">
                    À propos
                </h2>
                <div class="w-24 h-1.5 mx-auto mb-6 rounded-full shadow-lg" style="background-color: #fbbf24 !important;"></div>
                <p class="text-xl text-gray-600">Infrastructure de gestion moderne au service des sénégalais de la valls icamp</p>
            </div>

            <!-- Correction Responsive Style Réalisations -->
            <style>
                .about-stack {
                    display: flex;
                    flex-direction: column;
                    gap: 2rem;
                }

                .about-img-box {
                    width: 100%;
                    order: 1;
                }

                .about-txt-box {
                    width: 100%;
                    order: 2;
                }

                @media (min-width: 768px) {
                    .about-stack {
                        flex-direction: row;
                        gap: 3rem;
                        align-items: center;
                    }

                    .about-img-box {
                        width: 42%;
                        flex-shrink: 0;
                        order: 1;
                    }

                    .about-txt-box {
                        width: 58%;
                        order: 2;
                    }
                }
            </style>

            <div class="about-stack">
                <!-- Bloc Image (Haut sur Mobile, Gauche sur Desktop) -->
                <div class="about-img-box">
                    <div class="overflow-hidden shadow-lg border border-slate-200 bg-white">
                        <img src="{{ asset('Images/Banniere _Principale.jpg') }}" alt="Présentation de l'Association Sénégalaise de la Valls Icamp (Sénévalls)"
                            class="w-full h-[250px] md:h-[350px] object-cover" decoding="async" fetchpriority="high" loading="eager" width="800"
                            height="350" style="content-visibility: auto;">
                    </div>
                </div>

                <!-- Bloc Texte (Bas sur Mobile, Droite sur Desktop) -->
                <div class="about-txt-box">
                    <div class="max-w-prose">
                        <!-- Paragraphes (space-y-4) -->
                        <div class="space-y-6 text-lg text-slate-600 leading-relaxed">
                            <p>
                                <span class="font-bold text-slate-900">L'Association Sénévalls</span> est l'organe d'exécution
                                privilégié de l'Association Sénégalaise de la valls icamp. Notre mission est d'assurer une gestion
                                rigoureuse et transparente des ressources, tout en apportant une aide active aux immigrés
                                sénégalais de la valls icamp à travers diverses actions sociales.
                            </p>
                            <p>
                                Au-delà du développement local, nous offrons un cadre de soutien mutuel où chaque membre peut
                                bénéficier de mécanismes d'entraide financière, tels que des prêts solidaires à rembourser.
                                Nous transformons ainsi la solidarité collective en levier concret d'épanouissement pour tous
                                nos membres.
                            </p>
                        </div>

                        <!-- Footer de Bloc / Localisation -->
                        <div class="mt-8 pt-8 border-t border-slate-200">
                            <div class="flex items-center gap-3 text-slate-500 font-bold uppercase tracking-tight text-sm">
                                <div class="p-2 rounded-lg shadow-md" style="background-color: #fbbf24 !important;">
                                    <svg class="w-5 h-5 text-black" fill="none" stroke="currentColor"
                                        viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                            d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                                    </svg>
                                </div>
                                <span style="color: #fbbf24 !important;">Sénégal & Espagne — Engagement et Transparence</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Section Activités -->
    <section id="activites" class="bg-slate-50 relative overflow-hidden" style="padding: 4.5rem 0 6rem 0;">
        <!-- Background Texture -->
        <div class="absolute inset-0 pointer-events-none" style="background: radial-gradient(ellipse at 80% 50%, rgba(245,158,11,0.05) 0%, transparent 60%), radial-gradient(ellipse at 10% 80%, rgba(251,191,36,0.03) 0%, transparent 50%);"></div>

        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">

            <!-- Section Header -->
            <div class="text-center mb-24">
                <h2 class="text-4xl md:text-5xl font-black text-black mb-8 uppercase tracking-wider">Nos Activités</h2>
                <div class="w-24 h-1.5 mx-auto mb-10 rounded-full shadow-lg" style="background-color: #fbbf24 !important;"></div>
                <p class="text-xl text-slate-600 max-w-lg mx-auto leading-relaxed">L'association Sénévalls organise régulièrement des activités pour renforcer les liens entre ses membres et soutenir des projets communs.</p>
            </div>

            <!-- Activity Cards (full width, 3 columns) -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-16">

                <!-- Activity 1 -->
                <div class="flex flex-col items-center text-center gap-5 p-8 rounded-2xl bg-white shadow-sm">
                    <div class="w-14 h-14 rounded-xl flex items-center justify-center" style="background: rgba(251,191,36,0.12);">
                        <svg class="w-7 h-7" style="color: #fbbf24;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">Cotisations & Épargne collective</h3>
                        <p class="text-gray-600 leading-relaxed">Les membres cotisent régulièrement pour constituer un fonds commun destiné à financer des projets individuels et collectifs au sein de l'association.</p>
                    </div>
                </div>

                <!-- Activity 2 -->
                <div class="flex flex-col items-center text-center gap-5 p-8 rounded-2xl bg-white shadow-sm">
                    <div class="w-14 h-14 rounded-xl flex items-center justify-center" style="background: rgba(16,185,129,0.12);">
                        <svg class="w-7 h-7" style="color: #10b981;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">Gestion de Projets communs</h3>
                        <p class="text-gray-600 leading-relaxed">L'association accompagne ses membres dans la réalisation de projets concrets : habitat, santé, éducation ou entrepreneuriat, avec un suivi transparent des fonds mobilisés.</p>
                    </div>
                </div>

                <!-- Activity 3 -->
                <div class="flex flex-col items-center text-center gap-5 p-8 rounded-2xl bg-white shadow-sm">
                    <div class="w-14 h-14 rounded-xl flex items-center justify-center" style="background: rgba(139,92,246,0.12);">
                        <svg class="w-7 h-7" style="color: #a78bfa;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-900 mb-3">Événements & Solidarité</h3>
                        <p class="text-gray-600 leading-relaxed">Rencontres culturelles, célébrations, soutien aux membres en difficulté : Sénévalls cultive un esprit de solidarité et de cohésion au sein de sa communauté.</p>
                    </div>
                </div>

            </div>


        </div>
    </section>


    <!-- Section Réalisations -->
    <section id="realisations" class="py-20 bg-white relative overflow-hidden">
        <!-- Background Glow Sync -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[radial-gradient(circle_at_center,rgba(245,158,11,0.02)_0%,transparent_70%)] pointer-events-none"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-black text-black mb-4 uppercase tracking-wider">
                    Nos Réalisations
                </h2>
                <div class="w-24 h-1.5 mx-auto mb-6 rounded-full shadow-lg" style="background-color: #fbbf24 !important;"></div>
                <p class="text-xl text-gray-600">Découvrez les projets que nous avons menés à bien</p>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Réalisation 1 -->
                <div class="bg-white shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-slate-100">
                    <div class="relative h-48 overflow-hidden group">
                        <img src="{{ asset('Images/Developpement communautaire.png') }}" alt="Réalisation 1"
                            class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="192">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-3">Projet de Développement Communautaire</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Mise en place d'un projet communautaire visant à améliorer les conditions de vie des membres à
                            travers des initiatives durables et innovantes.
                        </p>
                    </div>
                </div>

                <!-- Réalisation 2 -->
                <div class="bg-white shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-slate-100">
                    <div class="relative h-48 overflow-hidden group">
                        <img src="{{ asset('Images/construction_siege.png') }}" alt="Projet de Bien Immobilier"
                            class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="192">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-3">Projet de Bien Immobilier</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Projet ambitieux de construction immobilière permettant à l'association d'acquérir ses propres biens
                            et d'assurer une base solide et pérenne à ses activités sociales.
                        </p>
                    </div>
                </div>

                <!-- Réalisation 3 -->
                <div class="bg-white shadow-sm hover:shadow-md transition-shadow duration-300 overflow-hidden border border-slate-100">
                    <div class="relative h-48 overflow-hidden group">
                        <img src="{{ asset('Images/Initiative Économique Durable.jpg') }}" alt="Réalisation 3"
                            class="w-full h-full object-cover" loading="lazy" decoding="async" width="400" height="192">
                        <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-3">Initiative Économique Durable</h3>
                        <p class="text-gray-600 leading-relaxed">
                            Lancement d'une initiative économique durable favorisant l'autonomie financière et le
                            développement local des membres de l'association.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Section Contact -->
    <section id="contact" class="py-20 bg-slate-50 relative overflow-hidden">
        <!-- Background Glow Sync -->
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full h-full bg-[radial-gradient(circle_at_center,rgba(245,158,11,0.03)_0%,transparent_70%)] pointer-events-none"></div>
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-4xl font-black text-black mb-4 uppercase tracking-wider">Contactez-nous</h2>
                <div class="w-24 h-1.5 mx-auto mb-6 rounded-full shadow-lg" style="background-color: #fbbf24 !important;"></div>
                <p class="text-lg text-slate-600 max-w-2xl mx-auto">
                    Une question ? Un projet ? N'hésitez pas à nous contacter, nous vous répondrons dans les plus brefs
                    délais.
                </p>
            </div>

            <div class="max-w-3xl mx-auto">
                @if (session('success'))
                    <div class="mb-6 p-4 bg-green-50 border border-green-200 text-green-800 rounded-lg flex items-center gap-3">
                        <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd"
                                d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                                clip-rule="evenodd" />
                        </svg>
                        <span>{{ session('success') }}</span>
                    </div>
                @endif

                @if ($errors->any())
                    <div class="mb-6 p-4 bg-red-50 border border-red-200 text-red-800 rounded-lg">
                        <p class="font-semibold mb-2">Veuillez corriger les erreurs suivantes :</p>
                        <ul class="list-disc list-inside space-y-1">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form action="{{ route('contact.store') }}" method="POST"
                    class="bg-white rounded-xl shadow-md p-8 border border-slate-100">
                    @csrf

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Nom -->
                        <div>
                            <label for="name" class="block text-sm font-semibold text-slate-700 mb-2">
                                Nom complet <span class="text-red-500">*</span>
                            </label>
                            <input type="text" id="name" name="name" value="{{ old('name') }}" required
                                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all"
                                placeholder="Votre nom">
                            @error('name')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Email -->
                        <div>
                            <label for="email" class="block text-sm font-semibold text-slate-700 mb-2">
                                Email <span class="text-red-500">*</span>
                            </label>
                            <input type="email" id="email" name="email" value="{{ old('email') }}" required
                                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all"
                                placeholder="votre@email.com">
                            @error('email')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                        <!-- Téléphone -->
                        <div>
                            <label for="phone" class="block text-sm font-semibold text-slate-700 mb-2">
                                Téléphone
                            </label>
                            <input type="tel" id="phone" name="phone" value="{{ old('phone') }}"
                                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all"
                                placeholder="+221 XX XXX XX XX">
                            @error('phone')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Sujet -->
                        <div>
                            <label for="subject" class="block text-sm font-semibold text-slate-700 mb-2">
                                Sujet
                            </label>
                            <input type="text" id="subject" name="subject" value="{{ old('subject') }}"
                                class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all"
                                placeholder="Objet de votre message">
                            @error('subject')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                        </div>
                    </div>

                    <!-- Message -->
                    <div class="mb-6">
                        <label for="message" class="block text-sm font-semibold text-slate-700 mb-2">
                            Message <span class="text-red-500">*</span>
                        </label>
                        <textarea id="message" name="message" rows="6" required
                            class="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-transparent outline-none transition-all resize-none"
                            placeholder="Écrivez votre message ici...">{{ old('message') }}</textarea>
                        @error('message')
                            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Bouton submit -->
                    <div class="flex justify-center mt-12">
                        <button type="submit"
                            style="background-color: #000000; color: #ffffff;"
                            class="group px-8 py-3 rounded-full font-bold text-sm uppercase tracking-widest transition-all duration-300 flex items-center gap-2 relative z-10 border border-black hover:scale-105 active:scale-95 shadow-xl">
                            <div class="absolute inset-0 bg-amber-500 rounded-full opacity-0 group-hover:opacity-10 transition-opacity duration-300"></div>
                            <svg class="w-5 h-5 text-amber-500 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            <span class="group-hover:text-amber-500 transition-colors duration-300">Envoyer</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection