@props([
    'items' => [],        // [['src' => ..., 'caption' => ..., 'meta' => ...], ...]
    'heading' => null,
    'eyebrow' => null,
])

{{--
    Horizontal scroll gallery. On desktop the section pins and the track slides
    sideways as the visitor scrolls (GSAP). On tablet and mobile — and whenever
    reduced motion is requested — it stays a plain swipeable overflow scroller,
    so the content is always reachable.
--}}
<section {{ $attributes->merge(['class' => 'relative overflow-hidden bg-dark py-16 lg:py-0']) }} data-hscroll>
    <div class="lg:flex lg:h-screen lg:flex-col lg:justify-center">
        @if ($heading || $eyebrow)
            <div class="container-page mb-10 lg:mb-12">
                @if ($eyebrow)
                    <p class="eyebrow mb-3 text-white/60">{{ $eyebrow }}</p>
                @endif

                @if ($heading)
                    <h2 class="font-display text-headline font-bold text-white">{{ $heading }}</h2>
                @endif
            </div>
        @endif

        <div class="overflow-x-auto pb-4 lg:overflow-visible lg:pb-0">
            <div class="flex w-max gap-5 px-5 sm:px-8 lg:px-10" data-hscroll-track>
                @foreach ($items as $index => $item)
                    <figure class="w-[19rem] shrink-0 sm:w-[26rem] lg:w-[32rem]">
                        <div class="relative overflow-hidden rounded-2xl bg-dark-surface">
                            <img src="{{ image_url($item['src'] ?? null) }}"
                                 alt="{{ $item['caption'] ?? '' }}" loading="lazy" decoding="async"
                                 class="aspect-4/3 w-full object-cover">

                            <span class="absolute left-4 top-4 font-mono text-[0.625rem] tracking-[0.18em] text-white/80">
                                {{ str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT) }}
                            </span>
                        </div>

                        @if (! empty($item['caption']) || ! empty($item['meta']))
                            <figcaption class="mt-4">
                                @if (! empty($item['caption']))
                                    <p class="text-sm text-white/85">{{ $item['caption'] }}</p>
                                @endif

                                @if (! empty($item['meta']))
                                    <p class="meta-label mt-1 text-white/45">{{ $item['meta'] }}</p>
                                @endif
                            </figcaption>
                        @endif
                    </figure>
                @endforeach
            </div>
        </div>
    </div>
</section>