@php
    $steps = [
        [
            'icon' => 'fa-cart-shopping',
            'title' => 'Purchase Card',
            'desc' => 'Buy a personalized or non-personalized card from any authorized counter.',
            'alt' => 'Rider purchasing a Fintech card at an authorized counter',
            'ctaLabel' => 'View Card Types',
            'ctaRoute' => 'cards',
            'image' => asset('images/brandings/purchase-card.jpeg'),
        ],
        [
            'icon' => 'fa-wallet',
            'title' => 'Recharge Card',
            'desc' => 'Load balance via bank, wallet, QR, or online portal.',
            'alt' => 'Recharging a Fintech balance via mobile wallet',
            'ctaLabel' => 'See Recharge Options',
            'ctaRoute' => 'recharge',
            'image' => asset('images/brandings/about-card.jpeg'),
        ],
        [
            'icon' => 'fa-arrow-right-to-bracket',
            'title' => 'Tap In',
            'desc' => 'Tap your card on the reader as you board the bus.',
            'alt' => 'Rider tapping the Fintech card at a bus door reader',
            'ctaLabel' => 'Explore NFC Features',
            'ctaRoute' => 'features',
            'image' => asset('images/brandings/tap.jpeg'),
        ],
        [
            'icon' => 'fa-bus',
            'title' => 'Travel',
            'desc' => 'Ride to your destination — no tickets, no cash needed.',
            'alt' => 'Passenger travelling on a bus after tapping in with Fintech',
            'ctaLabel' => 'Track Trips in the App',
            'ctaRoute' => 'app',
            'image' => asset('images/brandings/travel.jpeg'),
        ],
        [
            'icon' => 'fa-arrow-right-from-bracket',
            'title' => 'Tap Out',
            'desc' => 'Tap out when you alight; fare is deducted automatically.',
            'alt' => 'Rider tapping out with Fintech while alighting the bus',
            'ctaLabel' => 'How Fares Are Secured',
            'ctaRoute' => 'security',
            'image' => asset('images/brandings/tap.jpeg'),
        ],
    ];
@endphp

<!--
    Desktop (>=1024px, no reduced-motion): resources/js/how-it-works.js pins
    #how-it-works-stage for the height of #how-it-works-pin-wrapper and scrubs
    the active step from continuous scroll progress — the section stays put
    on screen until all 5 steps have been stepped through, then releases to
    the next section. Mobile / reduced-motion: the same module builds a plain
    IntersectionObserver instead (unpinned, normal scroll) — see
    resources/js/how-it-works.js; the two modes are mutually exclusive and
    torn down/rebuilt on every breakpoint crossing. Alpine (`active`) still
    owns all the highlight/show styling in both modes — the JS module only
    ever writes to it via Alpine.$data(), never touches the DOM directly.
-->
<section id="how-it-works" class="how-it-works-section py-20 dark:bg-ink lg:py-28" x-data="{ active: 0 }">
    <div class="mx-auto max-w-7xl px-6">
        <div class="reveal mx-auto mb-16 max-w-2xl text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary-a11y dark:text-secondary">How It
                Works</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Five Simple Steps to <span class="text-primary dark:text-secondary">Cashless Travel</span>
            </h2>
        </div>
    </div>

    <div id="how-it-works-pin-wrapper" class="how-it-works-pin-wrapper">
        <div id="how-it-works-stage" class="how-it-works-stage">
            <div class="mx-auto max-w-7xl px-6">
                <div class="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:items-center lg:gap-16">
                    {{-- Step image — shown first on mobile, right column on desktop. Below lg it's
                         pinned via CSS sticky and swaps as you scroll past each step (static fallback);
                         at lg+ the whole stage above is pinned instead, so this just sits in the
                         centered grid. --}}
                    <div class="sticky top-20 order-first self-start lg:static lg:order-2 lg:top-auto lg:self-auto">
                        <div class="relative mx-auto aspect-[4/5] w-full max-w-sm overflow-hidden rounded-2xl shadow-xl sm:max-w-md lg:h-[60vh] lg:w-auto lg:max-w-full">
                            @foreach ($steps as $i => $step)
                                <img src="{{ $step['image'] }}" sizes="(min-width: 1024px) 480px, 100vw"
                                    alt="{{ $step['alt'] }}" width="700" height="875" loading="lazy"
                                    class="absolute inset-0 h-full w-full object-cover" x-show="active === {{ $i }}"
                                    x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0"
                                    x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300"
                                    x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">
                            @endforeach
                        </div>
                    </div>

                    {{-- Steps — left column on desktop, click a step to update the card --}}
                    <ol class="relative order-2 space-y-8 lg:order-1">
                        <span class="absolute left-8 top-3 bottom-3 w-px bg-gradient-to-b from-secondary via-primary to-accent"
                            aria-hidden="true"></span>

                        @foreach ($steps as $i => $step)
                            <li data-step="{{ $i }}">
                                <div role="button" tabindex="0" @click="active = {{ $i }}"
                                    @keydown.enter="active = {{ $i }}"
                                    @keydown.space.prevent="active = {{ $i }}"
                                    class="group flex w-full cursor-pointer items-start gap-4 rounded-xl p-3 text-left transition duration-300"
                                    :class="active === {{ $i }} ? 'bg-primary/5 dark:bg-secondary/10' :
                                        'hover:bg-slate-50 dark:hover:bg-white/5'">
                                    <span
                                        class="relative z-10 grid h-10 w-10 flex-shrink-0 place-items-center rounded-full border-2 bg-white font-heading text-sm font-bold transition duration-300 dark:bg-ink"
                                        :class="active === {{ $i }} ?
                                            'scale-110 border-primary text-primary shadow-lg dark:border-secondary dark:text-secondary' :
                                            'border-slate-200 text-slate-400 dark:border-white/10 dark:text-slate-500'">
                                        <i class="fa-solid {{ $step['icon'] }} text-sm"
                                            x-show="active !== {{ $i }}"></i>
                                        <span
                                            x-show="active === {{ $i }}">{{ str_pad($i + 1, 2, '0', STR_PAD_LEFT) }}</span>
                                    </span>
                                    <span>
                                        <span
                                            class="mb-1 block font-heading text-xs font-bold uppercase tracking-wide text-accent-a11y dark:text-accent">Step
                                            {{ $i + 1 }}</span>
                                        <span class="mb-1 block font-heading text-base font-bold transition duration-300"
                                            :class="active === {{ $i }} ? 'text-slate-900 dark:text-white' :
                                                'text-slate-400 dark:text-slate-500'">
                                            {{ $step['title'] }}
                                        </span>
                                        <span class="block text-sm leading-relaxed transition duration-300"
                                            :class="active === {{ $i }} ? 'text-slate-500 dark:text-slate-400' :
                                                'text-slate-400/70 dark:text-slate-500/60'">
                                            {{ $step['desc'] }}
                                        </span>
                                    </span>
                                </div>
                            </li>
                        @endforeach
                    </ol>
                </div>
            </div>
        </div>
    </div>
</section>