@php
    $shopName = $site->string('shop.name', config('app.name'));
    $address = $site->fullAddress();
    $hours = $chrome->openingHours();
    $socials = $chrome->socialLinks();
    $footerPages = $chrome->footerPages();
@endphp

{{--
    Pied de page sur le fond de la page, séparé par un simple filet : l'aplat
    sable est réservé au bloc d'appel à l'action juste au-dessus, sans quoi les
    deux se confondraient.
--}}
<footer class="relative z-1 hairline">
    <div class="site-container grid gap-x-12 gap-y-14 py-section-sm md:grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr_1fr]">
        <div>
            <p class="font-display text-2xl">{{ $shopName }}</p>

            @if ($tagline = $site->get('shop.tagline'))
                <p class="mt-3 max-w-xs text-sm leading-relaxed text-ink-muted">{{ $tagline }}</p>
            @endif

            @if ($socials !== [])
                <x-site.social-links :links="$socials" class="mt-7" />
            @endif
        </div>

        <div>
            <h2 class="kicker kicker-quiet">Le salon</h2>

            <address class="mt-6 space-y-2 text-sm not-italic text-ink-muted">
                @if ($address)
                    <p>{{ $address }}</p>
                @endif

                @if ($phone = $site->get('shop.phone'))
                    <p>
                        <a href="tel:{{ preg_replace('/\s+/', '', (string) $phone) }}" class="transition-colors hover:text-ink">
                            {{ $phone }}
                        </a>
                    </p>
                @endif

                @if ($email = $site->get('shop.email'))
                    <p>
                        <a href="mailto:{{ $email }}" class="transition-colors hover:text-ink">{{ $email }}</a>
                    </p>
                @endif
            </address>

            @if ($maps = $site->get('shop.maps_url'))
                <a href="{{ $maps }}" target="_blank" rel="noopener" class="mt-5 inline-block text-sm text-ink transition-colors hover:text-accent">
                    Voir l’itinéraire
                </a>
            @endif
        </div>

        <div>
            <h2 class="kicker kicker-quiet">Horaires</h2>

            <x-site.opening-hours :hours="$hours" class="mt-6" />

            @if ($note = $site->get('shop.hours_note'))
                <p class="mt-5 text-xs leading-relaxed text-ink-subtle">{{ $note }}</p>
            @endif
        </div>

        <div>
            <h2 class="kicker kicker-quiet">Informations</h2>

            <ul class="mt-6 space-y-2.5 text-sm text-ink-muted">
                <li><a href="{{ route('site.testimonials') }}" class="transition-colors hover:text-ink">Avis clients</a></li>
                <li><a href="{{ route('site.faq') }}" class="transition-colors hover:text-ink">Questions fréquentes</a></li>
                <li><a href="{{ route('site.contact') }}" class="transition-colors hover:text-ink">Nous contacter</a></li>

                @foreach ($footerPages as $page)
                    <li>
                        <a href="{{ route('site.page', $page) }}" class="transition-colors hover:text-ink">{{ $page->title }}</a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>

    <div class="site-container">
        <div class="hairline flex flex-wrap items-center justify-between gap-x-8 gap-y-2 py-7 text-xs text-ink-subtle">
            <p>© {{ now()->year }} {{ $shopName }}</p>
            <p>Prestations réalisées sous le contrôle d’un titulaire du brevet professionnel</p>
        </div>
    </div>
</footer>