@extends('layouts.app')
@section('titre', 'Contact')

@section('titre', 'Contact')
@section('description', 'Contactez HORSE, bureau d\'ingénieurs-conseils au Bénin. Adresse, téléphone, email et formulaire de contact.')

@section('contenu')

<section class="bg-bleu-fonce py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8">
        <div class="text-vert text-sm font-bold uppercase tracking-wide mb-4">Contact</div>
        <h1 class="text-white text-4xl font-bold max-w-2xl">HORSE à votre écoute</h1>
        @include('composants.fil-ariane')
    </div>
</section>

<section class="py-20">
    <div class="max-w-6xl mx-auto px-6 md:px-8 grid md:grid-cols-2 gap-14">

        <div>
    <h2 class="text-xl font-bold text-bleu-fonce mb-6">Coordonnées</h2>
    <div class="space-y-5">
        <div class="flex items-start gap-4">
            <div class="w-11 h-11 rounded-full bg-bleu flex items-center justify-center shrink-0">
                <svg class="w-5 h-5 stroke-white" viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M21 10c0 6-9 12-9 12s-9-6-9-12a9 9 0 0118 0z"/>
                    <circle cx="12" cy="10" r="3"/>
                </svg>
            </div>
            <div class="text-sm text-gray-600 pt-1.5">
                <strong class="block text-bleu-fonce text-xs uppercase mb-1">Adresse</strong>
                C/91, Lot 4328H, Akpakpa Lom Nava, Cotonou<br>02 BP 2146 Cotonou, Bénin
            </div>
        </div>

        <div class="flex items-start gap-4">
            <div class="w-11 h-11 rounded-full bg-bleu flex items-center justify-center shrink-0">
                <svg class="w-5 h-5 stroke-white" viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/>
                </svg>
            </div>
            <div class="text-sm text-gray-600 pt-1.5">
                <strong class="block text-bleu-fonce text-xs uppercase mb-1">Téléphone</strong>
                +229 01 21 33 91 90 / +229 01 60 40 61 15
            </div>
        </div>

        <div class="flex items-start gap-4">
            <div class="w-11 h-11 rounded-full bg-bleu flex items-center justify-center shrink-0">
                <svg class="w-5 h-5 stroke-white" viewBox="0 0 24 24" fill="none" stroke-width="2">
                    <path d="M4 4h16v16H4z"/>
                    <path d="M22 6l-10 7L2 6"/>
                </svg>
            </div>
            <div class="text-sm text-gray-600 pt-1.5">
                <strong class="block text-bleu-fonce text-xs uppercase mb-1">Email</strong>
                <a href="mailto:horse@horse-ic.com" class="hover:text-bleu transition">horse@horse-ic.com</a>
            </div>
        </div>
    </div>

<div class="mt-8">
    <div class="text-xs font-bold uppercase text-bleu-fonce mb-3">Suivez-nous</div>
    <div class="flex gap-3">
        <a href="https://www.linkedin.com/company/horse-ic/posts/?feedView=all" aria-label="LinkedIn" class="w-9 h-9 rounded-full bg-bleu-fonce hover:bg-vert flex items-center justify-center transition">
            <svg class="w-4 h-4 fill-white" viewBox="0 0 24 24">
                <path d="M19 3a2 2 0 012 2v14a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h14zM8.34 18.34V10.4H5.67v7.94h2.67zM7 9.28a1.55 1.55 0 100-3.1 1.55 1.55 0 000 3.1zm11.34 9.06v-4.36c0-2.33-1.24-3.42-2.9-3.42a2.5 2.5 0 00-2.27 1.25v-1.07H10.5c.04.75 0 7.94 0 7.94h2.67v-4.43c0-.24.02-.47.09-.64.19-.48.63-.98 1.36-.98.96 0 1.35.73 1.35 1.8v4.25h2.67z"/>
            </svg>
        </a>
        <a href="#" aria-label="Facebook" class="w-9 h-9 rounded-full bg-bleu-fonce hover:bg-vert flex items-center justify-center transition">
            <svg class="w-4 h-4 fill-white" viewBox="0 0 24 24">
                <path d="M22 12a10 10 0 10-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0022 12z"/>
            </svg>
        </a>
    </div>
</div>

            <div class="mt-8 aspect-video border border-gray-300 overflow-hidden">
    <iframe
        src="https://www.google.com/maps?q=C/91,+Lot+4328H,+Akpakpa+Lom+Nava,+Cotonou,+Benin&output=embed"
        class="w-full h-full border-0"
        loading="lazy"
        referrerpolicy="no-referrer-when-downgrade">
    </iframe>
</div>
        </div>

        <form method="POST" action="{{ route('contact.envoyer') }}"
      
      class="bg-white border border-gray-200 p-8 rounded-lg shadow-sm">
    @csrf
    {{-- Piège anti-spam invisible --}}
    <input type="text" name="site_web" class="hidden" tabindex="-1" autocomplete="off">

    <div class="flex items-center gap-3 mb-1">
        <div class="w-10 h-10 rounded-full bg-bleu/10 flex items-center justify-center">
            <svg class="w-5 h-5 stroke-bleu" viewBox="0 0 24 24" fill="none" stroke-width="2">
                <path d="M4 4h16v16H4z"/><path d="M22 6l-10 7L2 6"/>
            </svg>
        </div>
        <h3 class="text-xl font-bold text-bleu-fonce">Envoyez-nous un message</h3>
    </div>
    <p class="text-sm text-gray-500 mb-6 ml-[52px]">Réponse sous 48h ouvrées.</p>

    @if (session('succes'))
        <div class="bg-green-50 border border-vert text-green-800 text-sm p-4 mb-5 rounded flex items-start gap-2">
            <span>✓</span>
            <span>Merci, votre message a bien été envoyé. Nous vous répondrons sous 48h.</span>
        </div>
    @endif

    @error('message')
        @if ($message === 'Trop de tentatives. Réessayez dans quelques minutes.')
            <div class="bg-red-50 border border-rouge text-rouge-fonce text-sm p-4 mb-5 rounded">{{ $message }}</div>
        @endif
    @enderror

    <div class="grid md:grid-cols-2 gap-4 mb-4">
    <div>
        <label class="block text-xs font-bold uppercase text-bleu-fonce mb-1.5">Nom complet <span class="text-rouge">*</span></label>
        <input type="text" name="nom" value="{{ old('nom') }}" required
            placeholder="Ex : Jean Dupont"
            class="w-full rounded border border-gray-300 px-3 py-2.5 text-sm transition focus:border-bleu focus:ring-2 focus:ring-bleu/20 outline-none placeholder:text-gray-400 @error('nom') border-rouge @enderror">
        @error('nom') <p class="text-rouge text-xs mt-1">{{ $message }}</p> @enderror
    </div>
    <div>
        <label class="block text-xs font-bold uppercase text-bleu-fonce mb-1.5">Email <span class="text-rouge">*</span></label>
        <input type="email" name="email" value="{{ old('email') }}" required
            placeholder="exemple@domaine.com"
            class="w-full rounded border border-gray-300 px-3 py-2.5 text-sm transition focus:border-bleu focus:ring-2 focus:ring-bleu/20 outline-none placeholder:text-gray-400 @error('email') border-rouge @enderror">
        @error('email') <p class="text-rouge text-xs mt-1">{{ $message }}</p> @enderror
    </div>
</div>

    <div class="grid md:grid-cols-2 gap-4 mb-4">
        <div>
    <label class="block text-xs font-bold uppercase text-bleu-fonce mb-1.5">Téléphone <span class="text-gray-400 normal-case font-normal">(optionnel)</span></label>
    <input type="tel" name="telephone" value="{{ old('telephone') }}"
        placeholder="+229 00 00 00 00"
        inputmode="numeric"
        oninput="this.value = this.value.replace(/[^0-9+\s-]/g, '')"
        class="w-full rounded border border-gray-300 px-3 py-2.5 text-sm transition focus:border-bleu focus:ring-2 focus:ring-bleu/20 outline-none placeholder:text-gray-400 @error('telephone') border-rouge @enderror">
    @error('telephone') <p class="text-rouge text-xs mt-1">{{ $message }}</p> @enderror
</div>
        <div>
<label class="block text-xs font-bold uppercase text-bleu-fonce mb-1.5">Type de demande <span class="text-rouge">*</span></label>
        <select name="type_demande" required
                class="w-full rounded border border-gray-300 px-3 py-2.5 text-sm transition focus:border-bleu focus:ring-2 focus:ring-bleu/20 outline-none bg-white @error('type_demande') border-rouge @enderror">
                <option value="">Sélectionnez...</option>
                <option value="Demande de devis" {{ old('type_demande') == 'Demande de devis' ? 'selected' : '' }}>Demande de devis</option>
                <option value="Question générale" {{ old('type_demande') == 'Question générale' ? 'selected' : '' }}>Question générale</option>
                <option value="Partenariat" {{ old('type_demande') == 'Partenariat' ? 'selected' : '' }}>Partenariat</option>
                <option value="Recrutement" {{ old('type_demande') == 'Recrutement' ? 'selected' : '' }}>Recrutement</option>
                <option value="Autre" {{ old('type_demande') == 'Autre' ? 'selected' : '' }}>Autre</option>
            </select>
            @error('type_demande') <p class="text-rouge text-xs mt-1">{{ $message }}</p> @enderror
        </div>
    </div>

    <div class="mb-4">
        <label class="block text-xs font-bold uppercase text-bleu-fonce mb-1.5">Sujet <span class="text-gray-400 normal-case font-normal">(optionnel)</span></label>
        <input type="text" name="sujet" value="{{ old('sujet') }}"
            class="w-full rounded border border-gray-300 px-3 py-2.5 text-sm transition focus:border-bleu focus:ring-2 focus:ring-bleu/20 outline-none">
    </div>

    <div class="mb-2">
<label class="block text-xs font-bold uppercase text-bleu-fonce mb-1.5">Message <span class="text-rouge">*</span></label>        
        <textarea name="message" rows="5" required maxlength="2000" 
            class="w-full rounded border border-gray-300 px-3 py-2.5 text-sm transition focus:border-bleu focus:ring-2 focus:ring-bleu/20 outline-none @error('message') border-rouge @enderror">{{ old('message') }}</textarea>
        @error('message')
            @if ($message !== 'Trop de tentatives. Réessayez dans quelques minutes.')
                <p class="text-rouge text-xs mt-1">{{ $message }}</p>
            @endif
        @enderror
    </div>

    <label class="flex items-start gap-2.5 mb-6 mt-4 cursor-pointer">
       <input type="checkbox" name="consentement" value="1" required
    class="mt-0.5 w-4 h-4 accent-gray-400 cursor-pointer @error('consentement') outline outline-2 outline-rouge @enderror">
        <span class="text-xs text-gray-500 leading-relaxed">
            J'accepte que mes informations soient utilisées pour me recontacter, conformément à notre
            <a href="{{ route('politique-confidentialite') }}" class="text-bleu underline" target="_blank">politique de confidentialité</a>.
        </span>
    </label>
    @error('consentement') <p class="text-rouge text-xs -mt-4 mb-4">{{ $message }}</p> @enderror

    <button type="submit" class="w-full bg-rouge hover:bg-rouge-fonce text-white font-bold py-3.5 rounded transition">
    Envoyer le message →
</button>
</form>

    </div>
</section>

@endsection