@php
    $breadcrumbs = collect($ancestors)->mapWithKeys(fn ($ancestor) => [$ancestor->title => $ancestor->url()])->put($page->title, null)->all();
    $extras = match ($page->slug) {
        'particuliers' => [
            ['title' => 'Carnet de recettes', 'excerpt' => 'Nos recettes de caille, de pigeonneau et d\'œufs de caille, et les fiches à télécharger.', 'url' => route('recipes.index')],
            ['title' => 'Témoignages', 'excerpt' => 'Ils ont goûté nos volailles et nous racontent.', 'url' => route('testimonials.index')],
            ['title' => 'La boutique en ligne', 'excerpt' => 'Commandez vos cailles, pigeonneaux, œufs et terrines, à retirer ou livrés au froid.', 'url' => route('shop.index')],
        ],
        'la-maison' => [
            ['title' => 'Actualités', 'excerpt' => 'Horaires, distinctions, presse : les nouvelles du domaine.', 'url' => route('news.index')],
        ],
        default => [],
    };
@endphp

<x-layouts.app :title="$page->meta_title ?: $page->title" :description="$page->meta_description ?: $page->excerpt">
    <x-page-hero :title="$page->title" :kicker="$page->kicker" :intro="$page->excerpt" :breadcrumbs="$breadcrumbs"
        :image="$root->banner ? Storage::disk('public')->url($root->banner) : null" />

    <section class="mx-auto max-w-[1440px] px-5 py-20 sm:px-10 lg:px-14 lg:py-32">
        @if ($page->body)
            <div class="prose-maison mb-20">{!! $page->body !!}</div>
        @endif

        <ol class="grid gap-px border border-filet bg-filet md:grid-cols-2 xl:grid-cols-3">
            @foreach ($page->children as $index => $child)
                <li class="bg-ivoire">
                    <a href="{{ $child->url() }}" class="group flex h-full flex-col p-8 transition-colors hover:bg-ivoire-2 lg:p-12">
                        <span class="font-serif text-4xl text-laiton italic">{{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}</span>
                        <h2 class="mt-6 font-serif text-[1.9rem] leading-tight transition-colors group-hover:text-rouge">{{ $child->title }}</h2>
                        @if ($child->excerpt)
                            <p class="mt-4 line-clamp-4 leading-relaxed text-gris">{{ $child->excerpt }}</p>
                        @endif
                        @if ($child->children->isNotEmpty())
                            <ul class="mt-6 space-y-1 text-sm text-gris">
                                @foreach ($child->children as $grandchild)
                                    <li>— {{ $grandchild->menuLabel() }}</li>
                                @endforeach
                            </ul>
                        @endif
                        <span class="lien-filet mt-auto pt-10">Découvrir</span>
                    </a>
                </li>
            @endforeach
            @foreach ($extras as $extra)
                <li class="bg-ivoire">
                    <a href="{{ $extra['url'] }}" class="group flex h-full flex-col p-8 transition-colors hover:bg-ivoire-2 lg:p-12">
                        <span class="font-serif text-4xl text-laiton italic">◆</span>
                        <h2 class="mt-6 font-serif text-[1.9rem] leading-tight transition-colors group-hover:text-rouge">{{ $extra['title'] }}</h2>
                        <p class="mt-4 leading-relaxed text-gris">{{ $extra['excerpt'] }}</p>
                        <span class="lien-filet mt-auto pt-10">Découvrir</span>
                    </a>
                </li>
            @endforeach
        </ol>
    </section>

    @if ($page->slug === 'particuliers' || $page->slug === 'la-maison')
        <x-visit />
    @endif
</x-layouts.app>