Scroll Spy

@php
    $items = [
        ['id' => 'spy-introduction', 'label' => __('Introduction')],
        ['id' => 'spy-features',     'label' => __('Features')],
        ['id' => 'spy-conclusion',   'label' => __('Conclusion')],
    ];
@endphp

<div class="grid gap-8 md:grid-cols-[1fr_200px]">
    {{-- Scrollable content pane --}}
    <div class="space-y-0 overflow-auto" style="max-height: 320px;" tabindex="0" role="region" aria-label="Sections">
        <section id="spy-introduction" class="min-h-[200px] space-y-2 py-4">
            <h2 class="text-xl font-semibold text-foreground">{{ __('Introduction') }}</h2>
            <p class="text-muted-foreground">{{ __('Scroll Spy tracks which section of the page is currently in view and highlights the matching navigation link automatically. Scroll down to see the active item change.') }}</p>
            <p class="text-muted-foreground">{{ __('The component uses an IntersectionObserver under the hood so there is no scroll event polling — it is efficient and accurate even at high frame rates.') }}</p>
        </section>

        <section id="spy-features" class="min-h-[200px] space-y-2 py-4">
            <h2 class="text-xl font-semibold text-foreground">{{ __('Features') }}</h2>
            <p class="text-muted-foreground">{{ __('Supports an optional pixel offset to account for sticky headers, full RTL layout via logical CSS properties, and reduced-motion-safe smooth scrolling.') }}</p>
            <p class="text-muted-foreground">{{ __('The active section is exposed as aria-current="location" for assistive technologies and the start border indicator provides a clear visual cue.') }}</p>
        </section>

        <section id="spy-conclusion" class="min-h-[200px] space-y-2 py-4">
            <h2 class="text-xl font-semibold text-foreground">{{ __('Conclusion') }}</h2>
            <p class="text-muted-foreground">{{ __('Drop the component into any multi-section page and pass the matching ids and labels. The observer wires everything up automatically on mount and tears itself down on destroy.') }}</p>
            <p class="text-muted-foreground">{{ __('Click any link in the navigation to smooth-scroll directly to that section.') }}</p>
        </section>
    </div>

    {{-- Scroll Spy navigation --}}
    <x-ui.scroll-spy :items="$items" class="md:sticky md:top-4 md:self-start">
        {{ __('On this page') }}
    </x-ui.scroll-spy>
</div>