@php $settings = app(App\Support\Settings::class); @endphp

<x-layouts.app title="Contact" description="Contactez Le Renard Rouge à Gourgé : téléphone, email et formulaire de contact.">
    <x-page-hero title="Nous contacter" kicker="Contact" intro="Une question sur nos produits, une commande particulière ou une demande de mercuriale ? Il nous tient à cœur de rester disponibles et à l'écoute." :breadcrumbs="['Contact' => null]" />

    <section class="mx-auto grid max-w-[1440px] gap-16 px-5 py-20 sm:px-10 lg:grid-cols-12 lg:px-14 lg:py-28">
        <div class="lg:col-span-4">
            <p class="kicker mb-5 text-rouge">Par téléphone</p>
            <a href="tel:{{ str_replace(' ', '', $settings->get('phone')) }}" class="font-serif text-4xl">{{ $settings->get('phone') }}</a>
            @if ($settings->get('phone_breeding'))
                <p class="mt-3 text-gris">Élevage (volailles vivantes) : <a href="tel:{{ str_replace(' ', '', $settings->get('phone_breeding')) }}" class="text-encre">{{ $settings->get('phone_breeding') }}</a></p>
            @endif
            <p class="kicker mt-12 mb-5 text-rouge">Par email</p>
            <a href="mailto:{{ $settings->get('email') }}" class="font-serif text-2xl">{{ $settings->get('email') }}</a>
            <p class="kicker mt-12 mb-5 text-rouge">Au domaine</p>
            <address class="font-serif text-2xl leading-snug not-italic">{{ $settings->get('address.street') }}<br>{{ $settings->get('address.postcode') }} {{ $settings->get('address.city') }}</address>
        </div>

        <div class="lg:col-span-7 lg:col-start-6">
            @if (session('contact_sent'))
                <div class="bg-ivoire-2 p-10 lg:p-14">
                    <p class="kicker text-laiton">Message envoyé</p>
                    <p class="mt-4 font-serif text-3xl">Merci, nous revenons vers vous très vite.</p>
                </div>
            @else
                <form method="POST" action="{{ route('contact.store') }}" class="grid gap-x-8 gap-y-10 sm:grid-cols-2">
                    @csrf
                    @foreach ([['last_name', 'Nom', 'text', 'family-name'], ['first_name', 'Prénom', 'text', 'given-name'], ['phone', 'Téléphone', 'tel', 'tel'], ['email', 'Email', 'email', 'email']] as [$name, $label, $type, $autocomplete])
                        <div>
                            <label for="{{ $name }}" class="champ-label">{{ $label }} *</label>
                            <input id="{{ $name }}" name="{{ $name }}" type="{{ $type }}" autocomplete="{{ $autocomplete }}" value="{{ old($name, auth()->user()?->{$name}) }}" required class="champ">
                            @error($name)<p class="champ-erreur">{{ $message }}</p>@enderror
                        </div>
                    @endforeach
                    <div class="sm:col-span-2">
                        <label for="address" class="champ-label">Adresse</label>
                        <textarea id="address" name="address" rows="2" class="champ">{{ old('address') }}</textarea>
                    </div>
                    <div class="sm:col-span-2">
                        <label for="message" class="champ-label">Message *</label>
                        <textarea id="message" name="message" rows="6" required class="champ" placeholder="Votre message">{{ old('message') }}</textarea>
                        @error('message')<p class="champ-erreur">{{ $message }}</p>@enderror
                    </div>
                    <div class="sm:col-span-2">
                        <label class="flex items-start gap-3 text-sm text-gris">
                            <input type="checkbox" name="rgpd" value="1" required class="case mt-0.5" @checked(old('rgpd'))>
                            <span>En soumettant ce formulaire, j'accepte que les informations saisies soient exploitées dans le cadre de ma demande de contact et de la relation commerciale qui peut en découler. Pour connaître et exercer vos droits, consultez notre <a href="{{ url('politique-de-confidentialite') }}" class="underline underline-offset-4">politique de confidentialité</a>.</span>
                        </label>
                        @error('rgpd')<p class="champ-erreur">{{ $message }}</p>@enderror
                    </div>
                    <input type="text" name="website" tabindex="-1" autocomplete="off" class="hidden" aria-hidden="true">
                    <div class="sm:col-span-2">
                        <div class="h-captcha" data-sitekey="{{ config('services.hcaptcha.site_key') }}"></div>
                        @error('h-captcha-response')<p class="champ-erreur">{{ $message }}</p>@enderror
                    </div>
                    <div class="flex items-center justify-between gap-6 sm:col-span-2">
                        <p class="text-xs text-gris">* Champs obligatoires</p>
                        <button type="submit" class="bouton bouton-plein">Envoyer le message</button>
                    </div>
                </form>
                <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
            @endif
        </div>
    </section>

    {{-- Carte de localisation, pleine largeur --}}
    @php
        $mapQuery = urlencode($settings->get('company').', '.$settings->get('address.street').', '.$settings->get('address.postcode').' '.$settings->get('address.city'));
    @endphp
    <section aria-label="Plan d'accès" class="relative h-[420px] bg-ivoire-2 lg:h-[560px]">
        {{-- La carte Google n'est chargée qu'avec le consentement « Contenus externes ». --}}
        <iframe
            data-consent-src="https://www.google.com/maps?q={{ $mapQuery }}&z=14&output=embed"
            data-consent="external"
            title="Plan d'accès au domaine du Renard Rouge, {{ $settings->get('address.city') }}"
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
            hidden
            class="absolute inset-0 size-full border-0 grayscale-[0.85] sepia-[0.15] contrast-[1.05]"></iframe>
        <div data-consent-placeholder="external" class="absolute inset-0 flex items-center justify-center bg-[radial-gradient(ellipse_at_center,#e9e3d9_0%,#dcd3c5_100%)] px-5 pb-44 lg:pb-0">
            <div class="max-w-md text-center">
                <p class="kicker text-rouge">Plan d'accès</p>
                <p class="mt-4 font-serif text-2xl leading-snug">La carte est fournie par Google Maps, qui peut déposer des cookies.</p>
                <button type="button" data-consent-grant="external" class="bouton bouton-plein mt-8">Afficher la carte</button>
            </div>
        </div>
        <div class="pointer-events-none absolute inset-x-0 bottom-0 z-10 mx-auto max-w-[1440px] px-5 pb-8 sm:px-10 lg:px-14 lg:pb-12">
            <div class="pointer-events-auto inline-block bg-encre px-8 py-7 text-ivoire shadow-[0_24px_60px_-20px_rgb(21_17_15/0.5)]">
                <p class="kicker text-laiton">Le domaine</p>
                <p class="mt-3 font-serif text-2xl leading-snug">{{ $settings->get('address.street') }}<br>{{ $settings->get('address.postcode') }} {{ $settings->get('address.city') }}</p>
                <a href="https://www.google.com/maps/dir/?api=1&destination={{ $mapQuery }}" target="_blank" rel="noopener" class="lien-filet mt-5 text-ivoire/80 hover:text-ivoire">Itinéraire</a>
            </div>
        </div>
    </section>

    <x-visit />
</x-layouts.app>