@extends('layouts.layout')

@section('header.title', "Contactez LCRH – Démarrons ensemble votre projet RH")
@section('meta.description', "Contactez-nous pour discuter de vos projets RH. Notre équipe est à votre écoute par téléphone, email ou via le formulaire en ligne. Réponse rapide assurée.")

@section('content')
    <div class="page-content">
        <div class="container flex flex-col gap-10 md:gap-20">
            <h1 class="bordered text-black">Contactez-nous</h1>
            <section>
                <div class="container mx-auto px-4">
                    <div class="flex flex-col md:grid grid-cols-2 gap-6 md:gap-12 items-start md:items-center">
                        <div class="w-full">
                            {{-- Message de succès --}}
                            @if (session('message_success'))
                                <div class="mb-6 p-4 rounded-lg bg-light-dark text-primary border-b-teal-800 border-primary-200">
                                    {!! session('message_success') !!}
                                </div>
                            @endif

                            {{-- Message d’erreur global --}}
                            @if (session('message_error'))
                                <div class="mb-6 p-4 rounded-lg bg-red-100 text-red-800 border border-red-200">
                                    {!! session('message_error') !!}
                                </div>
                            @endif

                            {{-- Formulaire (si pas de succès) --}}
                            @unless (session('message_success'))
                                <form id="contact-form"
                                      class="flex flex-col gap-3 md:gap-6 max-w-md"
                                      method="POST"
                                      action="{{ route('contact.send', app()->getLocale()) }}">
                                    @csrf

                                    <!-- Nom / Prénom -->
                                    <div class="flex flex-col gap-2">
                                        <label class="font-medium text-gray-700">Nom / Prénom <span class="text-red-600">*</span></label>
                                        <input required
                                               type="text"
                                               name="fullname"
                                               value="{{ old('fullname') }}"
                                               class="w-full bg-light text-dark mb-2 p-2 rounded-xl border" />
                                        @error('fullname')
                                        <div class="p-2 rounded bg-red-100 text-red-700 text-sm">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Email -->
                                    <div class="flex flex-col gap-2">
                                        <label class="font-medium text-gray-700">Email <span class="text-red-600">*</span></label>
                                        <input required
                                               type="text"
                                               name="email"
                                               value="{{ old('email') }}"
                                               class="w-full bg-light text-dark mb-2 p-2 rounded-xl border" />
                                        @error('email')
                                        <div class="p-2 rounded bg-red-100 text-red-700 text-sm">{!! $message !!}</div>
                                        @enderror
                                    </div>

                                    <!-- Téléphone -->
                                    <div class="flex flex-col gap-2">
                                        <label class="font-medium text-gray-700">Téléphone</label>
                                        <input type="text"
                                               name="phone"
                                               value="{{ old('phone') }}"
                                               class="w-full bg-light text-dark mb-2 p-2 rounded-xl border" />
                                        @error('phone')
                                        <div class="p-2 rounded bg-red-100 text-red-700 text-sm">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Message -->
                                    <div class="flex flex-col gap-2">
                                        <label class="font-medium text-gray-700">Message <span class="text-red-600">*</span></label>
                                        <textarea required
                                                  rows="4"
                                                  name="message"
                                                  class="w-full bg-light text-dark mb-2 p-2 rounded-xl border">{{ old('message') }}</textarea>
                                        @error('message')
                                        <div class="p-2 rounded bg-red-100 text-red-700 text-sm">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <!-- Consentement -->
                                    <div class="flex gap-3 items-start">
                                        <input required
                                               type="checkbox"
                                               name="accept"
                                               {{ old('accept') ? 'checked' : '' }}
                                               class="mt-1 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" />
                                        <label class="text-sm text-gray-600 leading-snug">
                                            En cochant cette case, j’accepte que mes informations soient utilisées exclusivement dans le cadre de ma demande et de la relation commerciale éthique et personnalisée qui pourrait en découler, si je le souhaite.
                                        </label>
                                    </div>
                                    @error('accept')
                                    <div class="p-2 rounded bg-red-100 text-red-700 text-sm">{{ $message }}</div>
                                    @enderror

                                    <hr class="border-gray-200">

                                    <!-- Bouton -->
                                    <div class="flex justify-end">
                                        <button type="submit"
                                                class="btn"
                                                onclick="this.disabled=true; this.form.submit();">
                                            Envoyer
                                        </button>
                                    </div>

                                    <!-- Champ caché anti-spam -->
                                    <div class="hidden">
                                        <label>Nice Field</label>
                                        <input type="text"
                                               name="nice_field"
                                               class="w-full bg-light text-dark mb-2 p-2 rounded-xl border" />
                                    </div>
                                </form>
                            @endunless
                        </div>

                        <div class="w-full flex flex-col gap-20">
                            <div class="hidden lg:block relative" style="width: 100%; height: 225px; max-height: 85vh;">
                                <img class="absolute r5-4 st-rounded" style="width: 40%; top: 0; left: 13%;" alt="Équipe LCRH" src="{{ asset('images/recrutement/section3-1.jpg') }}" />
                                <img class="absolute r5-4 st-rounded" style="width: 33%; top: initial; bottom: 5%; left: 50%;" alt="Équipe LCRH" src="{{ asset('images/recrutement/section3-2.jpg') }}" />
                                <img class="absolute r16-9 st-rounded" style="width: 33%; bottom: 0; left: 0;" alt="Équipe LCRH" src="{{ asset('images/recrutement/section3-3.jpg') }}" />
                            </div>
                            <div class="flex flex-col sm:grid md:flex lg:grid grid-cols-2 gap-12 justify-between bg-light-dark p-6 rounded-xl">
                                <div>
                                    <h2 class="text-xl font-bold border-b-2 border-b-secondary w-50 mb-2">Email</h2>
                                    <div>
                                        <p>Pour toutes vos questions</p>
                                        <a class="underline" href="mailto:guillaume.deschamps@lcrh.fr">guillaume.deschamps@lcrh.fr</a>
                                    </div>
                                </div>

                                <div>
                                    <h2 class="text-xl font-bold border-b-2 border-b-secondary w-50 mb-2">Téléphone</h2>
                                    <p>Pour plus d'informations</p>
                                    <a href="tel:+33616228484">06 16 22 84 84</a>
                                </div>

                                <div>
                                    <h2 class="text-xl font-bold border-b-2 border-b-secondary w-50 mb-2">Le Cabinet</h2>
                                    <p>60 Rue du Pensionnat</p>
                                    <p>69003 Lyon</p>
                                </div>

                                <div>
                                    <h2 class="text-xl font-bold border-b-2 border-b-secondary w-50 mb-2">2<sup>ème</sup> site</h2>
                                    <p>53 Rue du Boichot</p>
                                    <p>39100 DOLE</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
@endsection