{{-- id="contact" : cible du menu « Nous contacter » depuis la suppression de la bande de contact --}}
<footer id="contact" class="bg-ink-dark text-white">
    {{-- Bandeau contact --}}
    <div class="border-b border-white/10">
        <div class="container-site grid gap-10 py-14 lg:grid-cols-4">
            <div class="lg:col-span-1">
                <x-site.logo variant="light" img-class="h-16 w-auto rounded-[5px]" />
                <p class="mt-5 text-sm leading-relaxed text-white/60">
                    {{ config('site.baseline') }}<br>à {{ config('site.centre.city') }}.
                </p>

                <div class="mt-6 space-y-3 text-sm">
                    @foreach (config('site.contacts') as $contact)
                        <p class="flex items-start gap-3">
                            <x-icon name="phone" class="mt-0.5 h-5 w-5 shrink-0 text-brand-bright" />
                            <span>
                                {{ $contact['name'] }}
                                <a href="tel:{{ $contact['phone_link'] }}" class="block font-bold hover:text-brand-bright">{{ $contact['phone'] }}</a>
                            </span>
                        </p>
                    @endforeach

                    <a href="mailto:{{ config('site.email') }}" class="flex items-center gap-3 hover:text-brand-bright">
                        <x-icon name="mail" class="h-5 w-5 text-brand-bright" />{{ config('site.email') }}
                    </a>
                    <p class="flex items-center gap-3 text-white/60">
                        <x-icon name="clock" class="h-5 w-5 shrink-0 text-brand-bright" />{{ config('site.hours') }}
                    </p>
                </div>

                <div class="mt-6 flex gap-3">
                    @foreach (config('site.social') as $network => $social)
                        <a href="{{ $social['url'] }}" target="_blank" rel="noopener"
                           aria-label="{{ $social['label'] }}"
                           class="flex h-11 w-11 items-center justify-center border border-white/20 transition-colors
                                  hover:border-brand hover:bg-brand hover:text-ink-dark">
                            <x-site.social-icon :name="$network" class="h-5 w-5" />
                        </a>
                    @endforeach
                </div>
            </div>

            <div>
                <h3 class="mb-5 text-sm font-bold tracking-[0.15em] text-brand-bright uppercase">Navigation</h3>
                <ul class="space-y-2.5 text-sm text-white/70">
                    @foreach (config('site.nav') as $item)
                        <li><a href="{{ $item['url'] }}" class="transition-colors hover:text-brand-bright">{{ $item['label'] }}</a></li>
                    @endforeach
                </ul>

                <h3 class="mt-8 mb-5 text-sm font-bold tracking-[0.15em] text-brand-bright uppercase">Informations</h3>
                <ul class="space-y-2.5 text-sm text-white/70">
                    @foreach (config('site.nav_legal') as $item)
                        <li><a href="{{ $item['url'] }}" class="transition-colors hover:text-brand-bright">{{ $item['label'] }}</a></li>
                    @endforeach
                </ul>
            </div>

            @php $centre = config('site.centre'); @endphp
            <div>
                <h3 class="mb-5 text-sm font-bold tracking-[0.15em] text-brand-bright uppercase">Notre centre de stockage</h3>
                <address class="text-sm leading-relaxed text-white/70 not-italic">
                    <span class="font-bold text-white">{{ $centre['name'] }}</span><br>
                    {{ $centre['street'] }}<br>
                    {{ $centre['postal_code'] }} {{ mb_strtoupper($centre['city']) }}
                    @if (! empty($centre['landmark']))
                        <span class="mt-1 block text-white/50">{{ $centre['landmark'] }}</span>
                    @endif
                </address>
                <p class="mt-4 text-sm text-white/60">{{ $centre['access'] }}</p>

                <h4 class="mt-6 mb-3 text-sm font-bold tracking-[0.15em] text-brand-bright uppercase">Plan d’accès</h4>
                <div class="overflow-hidden border border-white/15">
                    <iframe src="{{ $centre['map_embed'] }}"
                            title="Plan d’accès — {{ $centre['name'] }}, {{ $centre['street'] }}, {{ $centre['postal_code'] }} {{ $centre['city'] }}"
                            class="block h-52 w-full"
                            style="border:0" loading="lazy" allowfullscreen
                            referrerpolicy="no-referrer-when-downgrade"></iframe>
                </div>
                <a href="{{ $centre['map_url'] }}" target="_blank" rel="noopener"
                   class="mt-3 inline-flex items-center gap-2 text-sm font-bold tracking-wider text-brand-bright uppercase hover:underline">
                    <x-icon name="pin" class="h-4 w-4" />Ouvrir dans Google Maps
                </a>
            </div>

            <div>
                <h3 class="mb-5 text-sm font-bold tracking-[0.15em] text-brand-bright uppercase">Être rappelé</h3>
                <p class="mb-5 text-sm text-white/60">Une question sur nos box ou nos tarifs ? Laissez-nous vos coordonnées.</p>

                @if (session('callback.sent'))
                    <p class="border-l-4 border-brand bg-white/5 p-4 text-sm">
                        <span class="block font-bold">Demande envoyée, merci !</span>
                        <span class="text-white/60">Nous vous rappelons rapidement.</span>
                    </p>
                @else
                    @if ($errors->getBag('callback')->any())
                        <ul class="mb-4 space-y-1 border-l-4 border-unavailable bg-white/5 p-4 text-xs">
                            @foreach ($errors->getBag('callback')->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    @endif

                    <form id="rappel" method="POST" action="{{ route('contact.callback') }}" class="space-y-3">
                        @csrf

                        <x-form.antispam />

                        <input type="text" name="name" value="{{ old('name') }}" placeholder="Nom *" required autocomplete="name"
                               class="w-full border border-white/20 bg-white/5 px-4 py-3 text-sm placeholder-white/40 focus:border-brand focus:outline-none">
                        <input type="email" name="email" value="{{ old('email') }}" placeholder="Adresse mail *" required autocomplete="email"
                               class="w-full border border-white/20 bg-white/5 px-4 py-3 text-sm placeholder-white/40 focus:border-brand focus:outline-none">
                        <input type="tel" name="phone" value="{{ old('phone') }}" placeholder="Mobile *" required autocomplete="tel"
                               class="w-full border border-white/20 bg-white/5 px-4 py-3 text-sm placeholder-white/40 focus:border-brand focus:outline-none">

                        <label class="flex gap-3 text-xs leading-relaxed text-white/50">
                            <input type="checkbox" name="consent" value="1" required class="mt-0.5 shrink-0 accent-brand">
                            <span>En soumettant ce formulaire, j’accepte que les informations saisies soient utilisées dans le cadre de ma demande et de la relation commerciale qui peut en découler avec {{ config('site.brand') }}.</span>
                        </label>

                        <button type="submit" class="btn-brand w-full">Être rappelé</button>

                        <p class="text-xs text-white/40">Tous les champs sont obligatoires.</p>
                    </form>
                @endif
            </div>
        </div>
    </div>

    <div class="container-site flex flex-col items-center justify-between gap-2 py-6 text-center text-xs text-white/40 sm:flex-row sm:text-left">
        <div class="space-y-1">
            <p>© {{ date('Y') }} {{ config('site.brand') }} — Tous droits réservés</p>
            <p>Site conçu et développé par Pascal MENETRIER EI - Voryntel</p>
        </div>
        <p>{{ config('site.baseline') }} — location de box en libre service</p>
    </div>
</footer>