@php
    $methods = [
        ['icon' => 'fa-credit-card', 'title' => 'Debit / Credit Card', 'desc' => 'Recharge instantly using any Nepali bank card.'],
        ['icon' => 'fa-building-columns', 'title' => 'Bank Transfer', 'desc' => 'Direct transfer from your linked bank account.'],
        ['icon' => 'fa-mobile-screen', 'title' => 'Mobile Wallet', 'desc' => 'Top up via eSewa, Khalti, or IME Pay.'],
        ['icon' => 'fa-shop', 'title' => 'Authorized Counters', 'desc' => 'Cash recharge at 150+ partner counters citywide.'],
        ['icon' => 'fa-globe', 'title' => 'Online Portal', 'desc' => 'Recharge anytime from the Yatra Card web portal.'],
        ['icon' => 'fa-qrcode', 'title' => 'QR Payment', 'desc' => 'Scan and pay using any QR-enabled banking app.'],
    ];
@endphp

<section id="recharge" x-data="{ selected: 0 }" 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-16 max-w-2xl text-center">
            <p class="mb-3 text-xs font-bold uppercase tracking-widest text-secondary">Recharge Methods</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Top Up Your Card, <span class="text-primary dark:text-secondary">Your Way</span>
            </h2>
        </div>

        <div class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($methods as $i => $method)
                <button
                    type="button"
                    @click="selected = {{ $i }}; showToast('{{ $method['title'] }} Selected', 'Follow the on-screen steps in the app to complete your recharge.', 'fa-wallet')"
                    :class="selected === {{ $i }}
                        ? 'border-secondary bg-secondary/5 dark:bg-secondary/10'
                        : 'border-slate-100 bg-white hover:-translate-y-1 hover:shadow-lg dark:border-white/10 dark:bg-panel'"
                    class="reveal group relative flex items-start gap-4 rounded-2xl border p-6 text-left shadow-sm transition duration-300"
                    style="transition-delay: {{ ($i % 3) * 80 }}ms"
                >
                    <span x-show="selected === {{ $i }}" x-cloak
                          class="absolute top-3 right-3 grid h-5 w-5 place-items-center rounded-full bg-secondary text-[10px] text-white">
                        <i class="fa-solid fa-check"></i>
                    </span>
                    <div class="grid h-12 w-12 flex-shrink-0 place-items-center rounded-xl bg-secondary/10 text-secondary transition duration-300 group-hover:scale-110">
                        <i class="fa-solid {{ $method['icon'] }}"></i>
                    </div>
                    <div>
                        <h3 class="mb-1 font-heading text-base font-bold text-slate-900 dark:text-white">{{ $method['title'] }}</h3>
                        <p class="text-sm leading-relaxed text-slate-500 dark:text-slate-400">{{ $method['desc'] }}</p>
                    </div>
                </button>
            @endforeach
        </div>
    </div>
</section>