@php
    $sections = array_values(array_filter($document['sections'], fn (array $section): bool => ! str_starts_with($section['slug'], 'faq-')));
    $faqs = array_values(array_filter($document['sections'], fn (array $section): bool => str_starts_with($section['slug'], 'faq-')));
@endphp

<x-store.layout :title="$document['seo_title']" :description="$document['meta_description']" :canonical="$canonical">
    <x-store.header />
    <x-store.category-nav :items="$navItems" />
    <main class="info-page mx-auto w-full max-w-6xl px-4 py-6 lg:py-8">
        <p class="text-[12px] text-muted"><a href="{{ route('home') }}" class="font-medium text-brand">{{ __('ui.home') }}</a> / {{ $document['title'] }}</p>
        <h1 class="mt-2 text-[26px] font-bold leading-tight text-navy lg:text-4xl">{{ $document['title'] }}</h1>
        <p class="mt-1 max-w-2xl text-sm leading-relaxed text-muted">{{ $document['subtitle'] }}</p>
        @if ($document['updated_at'])
            <p class="mt-2 text-[12px] font-medium text-brand">{{ __('ui.last_updated') }} {{ $document['updated_at'] }}</p>
        @endif

        <div class="mt-6 lg:grid lg:grid-cols-[14rem_minmax(0,1fr)] lg:gap-8">
            <aside>
                <details class="rounded-2xl border border-[#E6E2F6] bg-[#F4F1FF] px-3 py-2 lg:hidden" open>
                    <summary class="cursor-pointer text-sm font-bold text-navy">{{ __('ui.on_page') }}</summary>
                    <nav class="mt-2 flex flex-col gap-1 pb-1" aria-label="On this page">
                        @foreach ($sections as $section)
                            <a data-toc-link href="#{{ $section['slug'] }}" class="toc-link">{{ $section['heading'] }}</a>
                        @endforeach
                    </nav>
                </details>
                <nav class="sticky top-24 hidden lg:block" aria-label="On this page">
                    <p class="text-[11px] font-semibold uppercase tracking-[0.12em] text-brand">{{ __('ui.on_page') }}</p>
                    <div class="mt-2 flex flex-col gap-1">
                        @foreach ($sections as $section)
                            <a data-toc-link href="#{{ $section['slug'] }}" class="toc-link">{{ $section['heading'] }}</a>
                        @endforeach
                    </div>
                </nav>
            </aside>
            <article class="mt-4 max-w-3xl lg:mt-0">
                @foreach ($sections as $section)
                    <section id="{{ $section['slug'] }}" class="info-section border-b border-[#E6E2F6] py-4">
                        <h2 class="text-base font-bold text-navy">{{ $section['heading'] }}</h2>
                        @foreach (preg_split("/\n\s*\n/", trim($section['body'])) as $paragraph)
                            <p class="mt-2 text-sm leading-relaxed text-[#3d4663]">{{ $paragraph }}</p>
                        @endforeach
                    </section>
                @endforeach

                @if ($faqs !== [])
                    <h2 class="mt-6 text-lg font-bold text-navy">{{ __('ui.shipping_questions') }}</h2>
                    <div class="mt-3 flex flex-col gap-2">
                        @foreach ($faqs as $faq)
                            <div class="rounded-xl border border-[#EEF1F6] bg-white">
                                <h3>
                                    <button type="button" data-faq-toggle class="flex w-full items-center justify-between gap-3 px-3.5 py-3 text-left text-sm font-semibold text-navy" aria-expanded="false" aria-controls="ship-{{ $faq['slug'] }}">
                                        <span>{{ $faq['heading'] }}</span>
                                        <x-store.icon name="chevron-down" class="faq-chevron text-brand" width="16" height="16" />
                                    </button>
                                </h3>
                                <div id="ship-{{ $faq['slug'] }}" data-faq-panel>
                                    <p class="px-3.5 pb-3 text-sm leading-relaxed text-muted">{{ $faq['body'] }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </article>
        </div>
    </main>
    <x-store.footer />
    <x-store.mobile-bottom-nav />
    <x-store.drawers :categories="$categories" />
</x-store.layout>