{{-- <section id="contact-form" class="py-24 px-4 bg-gray-50">
    <div class="max-w-4xl mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-4xl md:text-5xl font-bold mb-4 text-[#083D7F]">Formulaire de Contact</h2>
            <p class="text-gray-600 text-xl max-w-2xl mx-auto">
                Remplissez le formulaire ci-dessous et notre équipe vous répondra dans les plus brefs délais.
            </p>
        </div>

    @if (session()->has('success'))
        <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-xl mb-4">
            <p class="font-semibold">{{ session('success') }}</p>
        </div>
    @endif

    @if (session()->has('error'))
        <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-xl mb-4">
            <p class="font-semibold">{{ session('error') }}</p>
        </div>
    @endif

        <form wire:submit="submit"  class="bg-white p-12 rounded-3xl shadow-xl space-y-6">
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="first_name">Prénom</label>
                    <input  wire:model="first_name" type="text" id="first_name" name="first_name" placeholder="Votre prénom" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-[#083D7F] focus:outline-none">
                </div>
                <div>
                    <label class="block text-gray-700 font-semibold mb-2" for="last_name">Nom</label>
                    <input wire:model="last_name" type="text" id="last_name" name="last_name" placeholder="Votre nom" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-[#083D7F] focus:outline-none">
                </div>
            </div>
 <div class="grid md:grid-cols-2 gap-6">
            <div>
                <label class="block text-gray-700 font-semibold mb-2" for="email">Email</label>
                <input wire:model="email" type="email" id="email" name="email" placeholder="Votre adresse email" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-[#083D7F] focus:outline-none">
            </div>

            <div>
                <label class="block text-gray-700 font-semibold mb-2" for="email">Téléphone</label>
                <input wire:model="phone" type="tel" id="phone" name="phone" placeholder="Votre téléphone" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-[#083D7F] focus:outline-none">
            </div>
 </div>

            <div>
                <label class="block text-gray-700 font-semibold mb-2" for="subject">Objet</label>
                <select wire:model="subject" id="subject" name="subject" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-[#083D7F] focus:outline-none">
                    <option value="">Sélectionnez le sujet</option>
                    <option value="recrutement">Recrutement</option>
                    <option value="interim">Intérim</option>
                    <option value="externalisation">Externalisation de la paie</option>
                    <option value="autre">Autre</option>
                </select>
            </div>

            <div>
                <label class="block text-gray-700 font-semibold mb-2" for="message">Message</label>
                <textarea wire:model="message" id="message" name="message" rows="6" placeholder="Votre message" class="w-full border border-gray-300 rounded-xl px-4 py-3 focus:ring-2 focus:ring-[#083D7F] focus:outline-none"></textarea>
            </div>

            <div>
                {{-- Cheeck box to subscribe in our newsletter

                <label class="block text-gray-700 font-semibold mb-2" for="newsletter">
                    <input wire:model="subscribe" type="checkbox" id="newsletter" name="newsletter" class="mr-2">
                    S'inscrire à notre newsletter
                </label>
            </div>

            <div class="text-center">
                <button type="submit" class="bg-[#083D7F] text-white px-10 py-4 rounded-2xl font-bold text-lg shadow-xl hover:bg-[#0D5BB8] transition-all transform hover:scale-105">
                    Envoyer
                </button>
            </div>
        </form>
    </div>
</section> --}}



     <div class="bg-white rounded-3xl shadow-xl p-8 lg:p-12">
                    <h2 class="text-3xl font-bold text-slate-900 mb-2">Envoyez-nous un message</h2>
                    <p class="text-slate-600 mb-8">Remplissez ce formulaire et nous vous répondrons dans les plus brefs délais.</p>

                    @if (session()->has('success'))
                        <div class="bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-xl mb-4">
                            <p class="font-semibold">{{ session('success') }}</p>
                        </div>
                    @endif

                    @if (session()->has('error'))
                        <div class="bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-xl mb-4">
                            <p class="font-semibold">{{ session('error') }}</p>
                        </div>
                    @endif

                    {{-- <div id="successMessage" class="hidden bg-green-50 border-2 border-green-200 rounded-xl p-6 mt-6">
                        <div class="flex items-start gap-4">
                            <div class="w-12 h-12 bg-green-500 rounded-full flex items-center justify-center flex-shrink-0">
                                <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <div>
                                <h3 class="font-bold text-green-900 mb-1">Message envoyé avec succès !</h3>
                                <p class="text-sm text-green-700">Nous vous répondrons dans les 24 heures. Vérifiez votre boîte mail.</p>
                            </div>
                        </div>
                    </div> --}}

                    <form class="space-y-6" wire:submit="submit">
                        <!-- Name & Company -->
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-2">Prénom *</label>
                                <input
                                wire:model="first_name"
                                    type="text"
                                    required
                                    placeholder="Votre prénom"
                                    class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-[#083D7F] focus:outline-none transition-all"
                                >
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-2">Nom *</label>
                                <input
                                   wire:model="last_name"
                                    type="text"
                                    required
                                    placeholder="Votre nom"
                                    class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-[#083D7F] focus:outline-none transition-all"
                                >
                            </div>
                        </div>

                        <!-- Email & Phone -->
                        <div class="grid md:grid-cols-2 gap-6">
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-2">Email *</label>
                                <input
                                    wire:model="email"
                                    type="email"
                                    required
                                    placeholder="Votre email"
                                    class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-[#083D7F] focus:outline-none transition-all"
                                >
                            </div>
                            <div>
                                <label class="block text-sm font-semibold text-slate-700 mb-2">Téléphone *</label>
                                <input
                                    wire:model="phone"
                                    type="tel"
                                    required
                                    placeholder="+221 00 000 00 00"
                                    class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-[#083D7F] focus:outline-none transition-all"
                                >
                            </div>
                        </div>

                        <!-- Service -->
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-2">Service concerné *</label>
                            <select
                                wire:model="subject"
                                required
                                class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-[#083D7F] focus:outline-none transition-all"
                            >
                                <option value="">Sélectionnez un service</option>
                                <option value="formation">Formation professionnelle</option>
                                <option value="certification">Certification</option>
                                <option value="team-building">Team Building</option>
                                <option value="consulting">Consulting RH</option>
                                <option value="interim">Intérim & Recrutement</option>
                                <option value="autre">Autre</option>
                            </select>
                        </div>

                        <!-- Message -->
                        <div>
                            <label class="block text-sm font-semibold text-slate-700 mb-2">Votre message *</label>
                            <textarea
                                wire:model="message"
                                required
                                rows="6"
                                placeholder="Décrivez-nous votre projet, vos besoins ou vos questions..."
                                class="w-full px-4 py-3 rounded-xl border-2 border-slate-200 focus:border-[#083D7F] focus:outline-none transition-all resize-none"
                            ></textarea>
                        </div>

                        <!-- Consent -->
                        <div class="flex items-start gap-3">
                            <input
                                wire:model="subscribe"
                                type="checkbox"
                                id="consent"
                                required
                                class="mt-1 w-5 h-5 text-[#083D7F] border-slate-300 rounded focus:ring-[#083D7F]"
                            >
                            <label for="consent" class="text-sm text-slate-600">
                                J'accepte que mes données soient utilisées pour répondre à ma demande. <a href="#privacy" class="text-[#083D7F] hover:underline">Politique de confidentialité</a>
                            </label>
                        </div>

                        <!-- Submit Button -->
                        <button
                            type="submit"
                            class="w-full bg-[#083D7F] text-white px-8 py-4 rounded-xl font-bold text-lg hover:bg-[#0a4a99] transition-all hover:scale-[1.02] shadow-xl flex items-center justify-center gap-3 group"
                        >
                            <span>Envoyer le message</span>
                            <svg class="w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                            </svg>
                        </button>

                        <p class="text-xs text-slate-500 text-center">
                            🔒 Vos données sont protégées et ne seront jamais partagées avec des tiers.
                        </p>
                    </form>



                </div>