@php
    $title = $page->title ?? 'Sitemap';
    $subtitle = $page->excerpt ?? 'Every public page on this site, organised by section.';
@endphp

<x-layouts.app :seo="$seo" :schema="$schema ?? []">
    <x-public.page-hero
        :title="$title"
        :subtitle="$subtitle"
        eyebrow="Site map"
        :breadcrumbs="[['label' => 'Sitemap']]"
        compact
    />

    <section class="home-section home-section--compact bg-white border-b border-slate-100">
        <div class="container-page">
            <nav aria-label="Sitemap sections">
                <ul class="flex flex-wrap gap-x-5 gap-y-2">
                    @foreach($sections as $section)
                        <li>
                            <a href="#sitemap-{{ $section['id'] }}" class="text-sm font-medium text-slate-600 transition hover:text-primary">
                                {{ $section['title'] }}
                            </a>
                        </li>
                    @endforeach
                </ul>
            </nav>
        </div>
    </section>

    <div class="home-section bg-white">
        <div class="container-page space-y-14 md:space-y-16">
            @foreach($sections as $section)
                <section id="sitemap-{{ $section['id'] }}" class="scroll-mt-28">
                    <div class="flex flex-wrap items-end justify-between gap-3 border-b border-slate-200 pb-4">
                        <h2 class="text-xl font-semibold tracking-tight text-secondary md:text-2xl">{{ $section['title'] }}</h2>
                        @if(!empty($section['hub']))
                            <a href="{{ $section['hub']['url'] }}" class="home-text-link text-sm">{{ $section['hub']['label'] }}</a>
                        @endif
                    </div>

                    @if(empty($section['groups']))
                        <p class="mt-5 text-sm text-slate-500">No pages in this section yet.</p>
                    @else
                        <div @class([
                            'mt-6 grid gap-8',
                            'md:grid-cols-2 xl:grid-cols-3' => count($section['groups']) > 1,
                        ])>
                            @foreach($section['groups'] as $group)
                                <div>
                                    @if(!empty($group['label']))
                                        <h3 class="mb-3 text-[0.6875rem] font-semibold uppercase tracking-wider text-slate-400">
                                            {{ $group['label'] }}
                                        </h3>
                                    @endif

                                    <ul class="space-y-2">
                                        @foreach($group['links'] as $link)
                                            <li>
                                                <a href="{{ $link['url'] }}" class="text-sm font-medium text-secondary transition hover:text-primary">
                                                    {{ $link['label'] }}
                                                </a>

                                                @if(!empty($link['children']))
                                                    <ul class="mt-2 space-y-1.5 border-l border-slate-200 pl-3">
                                                        @foreach($link['children'] as $child)
                                                            <li>
                                                                <a href="{{ $child['url'] }}" class="text-sm text-slate-600 transition hover:text-primary">
                                                                    {{ $child['label'] }}
                                                                </a>

                                                                @if(!empty($child['children']))
                                                                    <ul class="mt-1.5 space-y-1 border-l border-slate-100 pl-3">
                                                                        @foreach($child['children'] as $grand)
                                                                            <li>
                                                                                <a href="{{ $grand['url'] }}" class="text-xs text-slate-500 transition hover:text-primary">
                                                                                    {{ $grand['label'] }}
                                                                                </a>
                                                                            </li>
                                                                        @endforeach
                                                                    </ul>
                                                                @endif
                                                            </li>
                                                        @endforeach
                                                    </ul>
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </section>
            @endforeach
        </div>
    </div>

    <x-public.cta-band />
</x-layouts.app>