@php
    $methods = [
        ['icon' => 'fa-mobile-screen', 'title' => 'Mobile Application', 'desc' => 'Recharge instantly anytime, anywhere through the Fintech mobile app.', 'theme' => 'blue'],
        ['icon' => 'fa-shop', 'title' => 'Authorized Agent', 'desc' => 'Cash recharge through our network of 150+ authorized agents citywide.', 'theme' => 'gold'],
    ];
@endphp

<section id="recharge" 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-a11y dark: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="mx-auto grid max-w-2xl grid-cols-1 gap-5 sm:grid-cols-2">
            @foreach ($methods as $i => $method)
                <div
                    class="glow-card glow-card--{{ $method['theme'] }} reveal group relative flex w-full items-start gap-4 text-left"
                    style="transition-delay: {{ ($i % 3) * 80 }}ms"
                >
                    <span class="glow-card__glow" aria-hidden="true"></span>
                    <div class="glow-card__icon glow-card__icon--inline flex-shrink-0">
                        <i class="fa-solid {{ $method['icon'] }}"></i>
                    </div>
                    <div>
                        <h3 class="glow-card__title mb-1 text-base 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>
                </div>
            @endforeach
        </div>
    </div>
</section>