Scroll Reveal

@props([
    'items' => null,
])

@php
    // Scroll-reveal content (abui "Scroll Reveal Content A" shape): a sticky
    // media panel on one side that swaps as the reader scrolls through numbered
    // content parts on the other. The active part is emphasised while the rest
    // dim, and a vertical accent line lights up section by section. Driven by an
    // IntersectionObserver; reduced-motion users see every part at full opacity
    // with the media swapping instantly (no transitions).
    $items ??= [
        [
            'title' => 'Join the community',
            'description' => 'Join over a billion people around the world who come to build, connect and ship together.',
            'media' => 'from-info/30 via-info/10 to-primary/20',
            'icon' => 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8 M22 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
        ],
        [
            'title' => 'Bask in the spotlight',
            'description' => 'This is where attention locks in — your brand placed directly in the action, front and centre.',
            'media' => 'from-warning/30 via-warning/10 to-success/20',
            'icon' => 'M12 2v4 M12 18v4 M4.93 4.93l2.83 2.83 M16.24 16.24l2.83 2.83 M2 12h4 M18 12h4 M4.93 19.07l2.83-2.83 M16.24 7.76l2.83-2.83',
        ],
        [
            'title' => 'Drive big results',
            'description' => 'Reach massive, high-intent audiences — and turn attention into awareness, engagement and sales.',
            'media' => 'from-success/30 via-success/10 to-info/20',
            'icon' => 'M3 3v18h18 M7 16l4-4 3 3 5-6',
        ],
    ];

    $reveal = <<<'JS'
    {
        active: 0,
        reduced: window.matchMedia('(prefers-reduced-motion: reduce)').matches,
        init() {
            const sections = Array.from(this.$el.querySelectorAll('[data-reveal-index]'));
            const observer = new IntersectionObserver((entries) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        this.active = Number(entry.target.dataset.revealIndex);
                    }
                });
            }, { rootMargin: '-45% 0px -45% 0px', threshold: 0 });
            sections.forEach((section) => observer.observe(section));
        },
    }
    JS;
@endphp

<x-ui.section
    x-data="{{ $reveal }}"
    space="xl" {{ $attributes }}
>
    <div class="mx-auto grid max-w-6xl gap-10 px-4 lg:grid-cols-2 lg:gap-16">
        {{-- Content parts --}}
        <div class="flex flex-col gap-16 sm:gap-28">
            @foreach ($items as $i => $item)
                <div
                    data-reveal-index="{{ $i }}"
                    class="flex gap-6 transition-opacity duration-500 motion-reduce:transition-none"
                    :class="(reduced || active === {{ $i }}) ? 'opacity-100' : 'opacity-40'"
                >
                    <span
                        class="text-3xl font-bold tabular-nums transition-colors duration-500 motion-reduce:transition-none sm:text-4xl"
                        :class="active === {{ $i }} ? 'text-foreground' : 'text-muted-foreground'"
                        aria-hidden="true"
                    >{{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}</span>

                    <div
                        class="border-s-2 ps-6 transition-colors duration-500 motion-reduce:transition-none"
                        :class="active === {{ $i }} ? 'border-primary' : 'border-border'"
                    >
                        <h3 class="text-balance text-3xl font-bold tracking-tight sm:text-4xl">{{ __($item['title']) }}</h3>
                        <p class="mt-4 text-pretty text-base text-muted-foreground sm:text-lg">{{ __($item['description']) }}</p>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Sticky media that swaps with the active part --}}
        <div class="order-first lg:order-last">
            <x-ui.card class="relative aspect-[4/5] overflow-hidden p-0 lg:sticky lg:top-24">
                @foreach ($items as $i => $item)
                    <div
                        class="absolute inset-0 flex items-center justify-center bg-gradient-to-br {{ $item['media'] }} transition-opacity duration-700 ease-out motion-reduce:transition-none"
                        :class="active === {{ $i }} ? 'opacity-100' : 'opacity-0'"
                        @if (! $loop->first) x-cloak @endif
                        aria-hidden="true"
                    >
                        <span class="flex size-20 items-center justify-center rounded-lg border border-border bg-card/70 text-foreground shadow-sm backdrop-blur">
                            <svg class="size-9" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
                                @foreach (explode(' M', ltrim($item['icon'], 'M')) as $seg)
                                    <path d="M{{ $seg }}" />
                                @endforeach
                            </svg>
                        </span>
                        <span class="absolute bottom-4 end-5 text-5xl font-bold tabular-nums text-foreground/15">{{ str_pad((string) ($i + 1), 2, '0', STR_PAD_LEFT) }}</span>
                    </div>
                @endforeach
            </x-ui.card>
        </div>
    </div>
</x-ui.section>