@php
    $breadcrumbs = collect($ancestors)->mapWithKeys(fn ($ancestor) => [$ancestor->title => $ancestor->url()])->put($page->title, null)->all();
@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 ?: $root->title" :breadcrumbs="$breadcrumbs"
        :image="$root->banner ? Storage::disk('public')->url($root->banner) : null" />

    <div 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">
        {{-- Navigation de la rubrique --}}
        <aside class="lg:col-span-3">
            <nav aria-label="{{ $root->title }}" class="lg:sticky lg:top-28">
                <p class="kicker mb-6 text-rouge"><a href="{{ $root->url() }}">{{ $root->title }}</a></p>
                <ul class="space-y-1 border-l border-filet">
                    @foreach ($root->children as $child)
                        @php $isCurrent = $child->is($page) || $child->children->contains($page); @endphp
                        <li>
                            <a href="{{ $child->url() }}" @class([
                                '-ml-px block border-l py-2 pl-5 font-serif text-lg leading-snug transition-colors',
                                'border-rouge text-encre' => $child->is($page),
                                'border-transparent text-gris hover:text-encre' => ! $child->is($page),
                            ])>{{ $child->menuLabel() }}</a>
                            @if ($child->children->isNotEmpty() && $isCurrent)
                                <ul class="mb-2 space-y-1">
                                    @foreach ($child->children as $grandchild)
                                        <li>
                                            <a href="{{ $grandchild->url() }}" @class([
                                                '-ml-px block border-l py-1.5 pl-9 text-sm transition-colors',
                                                'border-rouge text-encre' => $grandchild->is($page),
                                                'border-transparent text-gris hover:text-encre' => ! $grandchild->is($page),
                                            ])>{{ $grandchild->menuLabel() }}</a>
                                        </li>
                                    @endforeach
                                </ul>
                            @endif
                        </li>
                    @endforeach
                    @if ($root->slug === 'particuliers')
                        <li><a href="{{ route('recipes.index') }}" class="-ml-px block border-l border-transparent py-2 pl-5 font-serif text-lg text-gris hover:text-encre">Carnet de recettes</a></li>
                        <li><a href="{{ route('testimonials.index') }}" class="-ml-px block border-l border-transparent py-2 pl-5 font-serif text-lg text-gris hover:text-encre">Témoignages</a></li>
                    @elseif ($root->slug === 'la-maison')
                        <li><a href="{{ route('news.index') }}" class="-ml-px block border-l border-transparent py-2 pl-5 font-serif text-lg text-gris hover:text-encre">Actualités</a></li>
                    @endif
                </ul>
            </nav>
        </aside>

        <article class="lg:col-span-8 lg:col-start-5">
            @if ($page->image)
                <img src="{{ Storage::disk('public')->url($page->image) }}" alt="" class="mb-12 w-full object-cover">
            @endif
            <div class="prose-maison">
                {!! $page->body !!}
            </div>

            @if ($documents->isNotEmpty())
                <div class="mt-16 border-t border-filet pt-10">
                    <p class="kicker mb-6 text-rouge">À télécharger</p>
                    <ul class="space-y-3">
                        @foreach ($documents as $document)
                            <li><a href="{{ $document->url() }}" class="lien-filet" download>{{ $document->title }} · {{ $document->extension() }}</a></li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @if ($page->children->isNotEmpty())
                <div class="mt-20 grid gap-5 sm:grid-cols-2">
                    @foreach ($page->children as $child)
                        <a href="{{ $child->url() }}" class="group border border-filet p-8 transition-colors hover:border-encre">
                            <h2 class="font-serif text-2xl transition-colors group-hover:text-rouge">{{ $child->title }}</h2>
                            <p class="mt-3 line-clamp-3 text-sm text-gris">{{ $child->excerpt }}</p>
                        </a>
                    @endforeach
                </div>
            @endif

            @if ($siblings->count() > 1)
                @php
                    $index = $siblings->search(fn ($sibling) => $sibling->is($page));
                    $previous = $index > 0 ? $siblings[$index - 1] : null;
                    $next = $index !== false && $index < $siblings->count() - 1 ? $siblings[$index + 1] : null;
                @endphp
                <nav aria-label="Pages voisines" class="mt-24 grid gap-6 border-t border-filet pt-10 sm:grid-cols-2">
                    <div>
                        @if ($previous)
                            <a href="{{ $previous->url() }}" class="group block">
                                <span class="kicker text-gris">← Précédent</span>
                                <span class="mt-2 block font-serif text-xl group-hover:text-rouge">{{ $previous->menuLabel() }}</span>
                            </a>
                        @endif
                    </div>
                    <div class="sm:text-right">
                        @if ($next)
                            <a href="{{ $next->url() }}" class="group block">
                                <span class="kicker text-gris">Suivant →</span>
                                <span class="mt-2 block font-serif text-xl group-hover:text-rouge">{{ $next->menuLabel() }}</span>
                            </a>
                        @endif
                    </div>
                </nav>
            @endif
        </article>
    </div>

    @if ($root->slug === 'professionnels')
        <section class="bg-encre py-20 text-ivoire lg:py-28">
            <div class="mx-auto flex max-w-[1440px] flex-wrap items-center justify-between gap-10 px-5 sm:px-10 lg:px-14">
                <div>
                    <p class="kicker mb-4 text-laiton">Chefs &amp; professionnels</p>
                    <h2 class="font-serif text-[clamp(2rem,3.6vw,3.2rem)] leading-tight">Recevoir notre mercuriale</h2>
                </div>
                <div class="flex flex-wrap items-center gap-x-10 gap-y-6">
                    <a href="{{ route('contact.show') }}" class="bouton bouton-clair">Nous contacter</a>
                    <a href="tel:{{ str_replace(' ', '', app(App\Support\Settings::class)->get('phone')) }}" class="font-serif text-2xl">{{ app(App\Support\Settings::class)->get('phone') }}</a>
                </div>
            </div>
        </section>
    @endif
</x-layouts.app>