@props([
    'kicker' => 'Le magasin du domaine',
    'title' => new Illuminate\Support\HtmlString('Nous rendre <em>visite</em>'),
    'text' => 'Nos équipes vous accueillent au magasin, à deux pas de l\'élevage. Nos horaires pouvant varier selon les besoins du domaine, un appel avant de venir de loin est toujours bienvenu.',
    'region' => 'Deux-Sèvres · Bocage gâtinais',
])

@php
    $settings = app(App\Support\Settings::class);
    $storeHours = app(App\Support\StoreHours::class);
    $now = now($settings->get('timezone'));
    $isStoreOpen = $storeHours->isOpenAt($now);
    $storeStatus = $storeHours->statusMessage($now);
    $today = $now->dayOfWeekIso;
    $mapsUrl = 'https://www.google.com/maps/search/?api=1&query='.urlencode($settings->get('company').' '.$settings->get('address.street').' '.$settings->get('address.postcode').' '.$settings->get('address.city'));
        $phoneHref = 'tel:'.str_replace(' ', '', $settings->get('phone'));
@endphp

{{-- Magasin du domaine : adresse, horaires en direct, téléphone. --}}
<section id="visite" class="scroll-mt-20 border-t border-filet py-24 lg:py-40">
        <div class="mx-auto grid max-w-[1440px] gap-16 px-5 sm:px-10 lg:grid-cols-12 lg:px-14">
            <div class="flex flex-col lg:col-span-5">
                <p class="kicker mb-5 text-rouge">{{ $kicker }}</p>
                <h2 class="font-serif text-[clamp(2.4rem,5vw,4.6rem)] leading-[1.02]">{{ $title }}</h2>
                <p class="mt-8 max-w-md leading-relaxed text-gris">{{ $text }}</p>

                <address class="mt-14 border-t border-filet pt-10 not-italic">
                    <p class="font-serif text-[clamp(1.6rem,2.4vw,2.2rem)] leading-snug">
                        {{ $settings->get('address.street') }}<br>
                        {{ $settings->get('address.postcode') }} {{ $settings->get('address.city') }}
                    </p>
                    @if (filled($region))
                        <p class="kicker mt-4 text-gris">{{ $region }}</p>
                    @endif
                </address>

                <div class="mt-12 flex flex-wrap items-center gap-x-10 gap-y-6">
                    <a href="{{ $mapsUrl }}" target="_blank" rel="noopener" class="bouton bouton-plein">Itinéraire</a>
                    <a href="{{ $phoneHref }}" class="lien-filet">Nous appeler</a>
                </div>
            </div>

            <div class="bg-encre p-8 text-ivoire sm:p-14 lg:col-span-6 lg:col-start-7 lg:self-center">
                <div class="flex flex-wrap items-baseline justify-between gap-4 border-b border-ivoire/25 pb-6">
                    <p class="font-serif text-3xl italic">Horaires d'ouverture</p>
                    <p class="kicker flex items-center gap-2.5 text-gris-clair">
                        <span aria-hidden="true" @class(['size-1.5 rounded-full', 'bg-laiton' => $isStoreOpen, 'bg-gris' => ! $isStoreOpen])></span>
                        {{ $isStoreOpen ? 'Ouvert' : 'Fermé' }}
                    </p>
                </div>

                <dl class="mt-10 flex flex-col gap-5">
                    @foreach ($storeHours->schedule() as $row)
                        @php $isToday = in_array($today, $row['days'], true); @endphp
                        <div @class(['ligne-carte', 'text-ivoire' => $isToday, 'text-gris-clair' => ! $isToday])>
                            <dt @class(['font-serif text-lg', 'italic' => $isToday])>
                                {{ $row['label'] }}
                                @if ($isToday)
                                    <span class="kicker ml-2 text-[0.55rem] text-laiton not-italic">Aujourd'hui</span>
                                @endif
                            </dt>
                            <dd class="text-sm tabular-nums">{{ $row['hours'] }}</dd>
                        </div>
                    @endforeach
                </dl>

                <p class="mt-10 text-sm text-gris-clair">{{ $storeStatus }}</p>

                <div class="mt-10 flex flex-wrap items-end justify-between gap-6 border-t border-ivoire/25 pt-8">
                    <div>
                        <p class="kicker mb-3 text-laiton">Par téléphone</p>
                        <a href="{{ $phoneHref }}" class="font-serif text-[clamp(1.8rem,3vw,2.6rem)] leading-none">{{ $settings->get('phone') }}</a>
                    </div>
                    <a href="{{ route('contact.show') }}" class="lien-filet text-ivoire/80 hover:text-ivoire">Nous écrire</a>
                </div>
            </div>
        </div>
    </section>