@php
    $steps = [
        ['icon' => 'fa-cart-shopping', 'title' => 'Purchase Card', 'desc' => 'Buy a personalized or non-personalized card from any authorized counter.'],
        ['icon' => 'fa-wallet', 'title' => 'Recharge Card', 'desc' => 'Load balance via bank, wallet, QR, or online portal.'],
        ['icon' => 'fa-arrow-right-to-bracket', 'title' => 'Tap In', 'desc' => 'Tap your card on the reader as you board the bus.'],
        ['icon' => 'fa-bus', 'title' => 'Travel', 'desc' => 'Ride to your destination — no tickets, no cash needed.'],
        ['icon' => 'fa-arrow-right-from-bracket', 'title' => 'Tap Out', 'desc' => 'Tap out when you alight; fare is deducted automatically.'],
    ];
@endphp

<section id="how-it-works" class="py-20 dark:bg-ink lg:py-28">
    <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">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 class="relative grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-5 lg:gap-6">
            <div class="absolute top-8 right-[10%] left-[10%] hidden h-0.5 bg-gradient-to-r from-primary via-secondary to-accent lg:block"></div>

            @foreach ($steps as $i => $step)
                <div class="reveal-scale relative text-center" style="transition-delay: {{ $i * 100 }}ms">
                    <div class="relative z-10 mx-auto mb-5 grid h-16 w-16 place-items-center rounded-full border-4 border-white bg-gradient-to-br from-primary to-secondary text-white shadow-lg transition duration-300 hover:scale-110 dark:border-ink">
                        <i class="fa-solid {{ $step['icon'] }} text-lg"></i>
                    </div>
                    <span class="mb-2 inline-block font-heading text-xs font-bold uppercase tracking-wide text-accent">Step {{ $i + 1 }}</span>
                    <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>