@component('layouts.app', [
    'title' => 'How It Works',
    'metaDescription' => 'How Yatra Card works — purchase, recharge, tap in, travel, and tap out. See the full journey behind every fare.',
])
    @include('partials.page-hero', [
        'eyebrow' => 'Product',
        'title' => 'From Purchase to Journey in 5 Steps',
        'subtitle' => 'Getting started with Yatra Card takes minutes. Here is exactly what happens from the moment you buy your card to the moment you tap out.',
    ])

    @include('partials.home.how-it-works')

    <section class="pb-16 dark:bg-ink">
        <div class="reveal mx-auto grid max-w-7xl grid-cols-1 gap-4 px-6 sm:grid-cols-3">
            <img src="https://picsum.photos/seed/yatra-tap-1/500/360"
                 srcset="https://picsum.photos/seed/yatra-tap-1/500/360 500w, https://picsum.photos/seed/yatra-tap-1/1000/720 1000w"
                 sizes="(min-width: 640px) 33vw, 100vw"
                 alt="Rider tapping Yatra Card at a bus terminal"
                 width="500" height="360" loading="lazy" class="h-52 w-full rounded-2xl object-cover shadow-sm">
            <img src="https://picsum.photos/seed/yatra-tap-2/500/360"
                 srcset="https://picsum.photos/seed/yatra-tap-2/500/360 500w, https://picsum.photos/seed/yatra-tap-2/1000/720 1000w"
                 sizes="(min-width: 640px) 33vw, 100vw"
                 alt="NFC reader mounted at the bus door"
                 width="500" height="360" loading="lazy" class="h-52 w-full rounded-2xl object-cover shadow-sm">
            <img src="https://picsum.photos/seed/yatra-tap-3/500/360"
                 srcset="https://picsum.photos/seed/yatra-tap-3/500/360 500w, https://picsum.photos/seed/yatra-tap-3/1000/720 1000w"
                 sizes="(min-width: 640px) 33vw, 100vw"
                 alt="Recharge counter processing a top-up"
                 width="500" height="360" loading="lazy" class="h-52 w-full rounded-2xl object-cover shadow-sm">
        </div>
    </section>

    @php
        $walkthrough = [
            ['icon' => 'fa-cart-shopping', 'title' => 'Purchase Card', 'desc' => 'You pick up a card at any authorized counter — personalized or non-personalized.', 'balance' => 0, 'status' => 'No balance yet'],
            ['icon' => 'fa-wallet', 'title' => 'Recharge Card', 'desc' => 'You top up NPR 500 via eSewa, bank transfer, or a recharge counter.', 'balance' => 100, 'status' => 'NPR 500 loaded'],
            ['icon' => 'fa-arrow-right-to-bracket', 'title' => 'Tap In', 'desc' => 'You tap on the bus reader. The card and terminal handshake in milliseconds.', 'balance' => 100, 'status' => 'Verified — boarding'],
            ['icon' => 'fa-bus', 'title' => 'Travel', 'desc' => 'You ride to your stop. No ticket, no cash, no conversation with the conductor.', 'balance' => 70, 'status' => 'Fare: NPR 25 pending'],
            ['icon' => 'fa-arrow-right-from-bracket', 'title' => 'Tap Out', 'desc' => 'You tap again to alight. The exact fare is deducted and a receipt is logged.', 'balance' => 65, 'status' => 'NPR 25 deducted'],
        ];
    @endphp

    <section class="py-20 dark:bg-ink lg:py-28" x-data="{ active: 0 }">
        <div class="mx-auto max-w-6xl px-6">
            <div class="reveal mx-auto mb-14 max-w-2xl text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Try It Yourself</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    Click Through a <span class="text-primary dark:text-secondary">Real Trip</span>
                </h2>
            </div>

            <div class="reveal grid grid-cols-1 gap-10 lg:grid-cols-5">
                <div class="space-y-2 lg:col-span-2">
                    @foreach ($walkthrough as $i => $step)
                        <button type="button" @click="active = {{ $i }}"
                                :class="active === {{ $i }} ? 'border-primary bg-primary/5 dark:border-secondary dark:bg-secondary/10' : 'border-slate-100 dark:border-white/10'"
                                class="flex w-full items-center gap-4 rounded-xl border bg-white p-4 text-left transition duration-300 dark:bg-panel">
                            <span :class="active === {{ $i }} ? 'bg-primary text-white dark:bg-secondary dark:text-ink' : 'bg-slate-100 text-slate-500 dark:bg-white/5 dark:text-slate-400'"
                                  class="grid h-9 w-9 flex-shrink-0 place-items-center rounded-full text-xs font-bold transition duration-300">
                                {{ $i + 1 }}
                            </span>
                            <span class="text-sm font-semibold text-slate-800 dark:text-white">{{ $step['title'] }}</span>
                        </button>
                    @endforeach
                </div>

                <div class="lg:col-span-3">
                    @foreach ($walkthrough as $i => $step)
                        <div x-show="active === {{ $i }}" x-cloak
                             x-transition:enter="transition ease-out duration-300"
                             x-transition:enter-start="opacity-0 translate-y-2"
                             x-transition:enter-end="opacity-100 translate-y-0"
                             class="h-full rounded-2xl border border-slate-100 bg-white p-8 shadow-sm dark:border-white/10 dark:bg-panel">
                            <div class="mb-5 grid h-14 w-14 place-items-center rounded-2xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                                <i class="fa-solid {{ $step['icon'] }} text-xl"></i>
                            </div>
                            <h3 class="mb-2 font-heading text-lg font-bold text-slate-900 dark:text-white">{{ $step['title'] }}</h3>
                            <p class="mb-6 text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $step['desc'] }}</p>

                            <div class="rounded-xl bg-slate-50 p-4 dark:bg-surface">
                                <div class="mb-2 flex items-center justify-between text-xs">
                                    <span class="font-semibold text-slate-600 dark:text-slate-300">Card Balance</span>
                                    <span class="text-secondary">{{ $step['status'] }}</span>
                                </div>
                                <div class="h-2 overflow-hidden rounded-full bg-slate-200 dark:bg-white/10">
                                    <div class="h-full rounded-full bg-gradient-to-r from-primary to-secondary transition-all duration-500" style="width: {{ $step['balance'] }}%"></div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <section class="bg-slate-50 py-20 dark:bg-surface lg:py-28">
        <div class="mx-auto max-w-7xl px-6">
            <div class="reveal mx-auto mb-14 max-w-2xl text-center">
                <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Behind the Tap</p>
                <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                    What Happens in <span class="text-primary dark:text-secondary">Under a Second</span>
                </h2>
            </div>

            <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                @foreach ([
                    ['icon' => 'fa-wave-square', 'title' => 'NFC Handshake', 'desc' => 'The reader and your card exchange an encrypted signal the instant they touch — no PIN, no delay.'],
                    ['icon' => 'fa-calculator', 'title' => 'Fare Calculation', 'desc' => 'The system checks your route, zone, and any applicable student or senior discount in real time.'],
                    ['icon' => 'fa-receipt', 'title' => 'Instant Receipt', 'desc' => 'Your balance updates immediately, and a digital receipt is logged to your transaction history.'],
                ] as $i => $step)
                    <div class="reveal-scale rounded-2xl border border-slate-100 bg-white p-7 text-center shadow-sm dark:border-white/10 dark:bg-panel"
                         style="transition-delay: {{ $i * 100 }}ms">
                        <div class="mx-auto mb-4 grid h-14 w-14 place-items-center rounded-2xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                            <i class="fa-solid {{ $step['icon'] }} text-xl"></i>
                        </div>
                        <h3 class="mb-2 font-heading text-base font-bold text-slate-900 dark:text-white">{{ $step['title'] }}</h3>
                        <p class="text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $step['desc'] }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    @include('partials.home.cta')
@endcomponent