@php
    $reasons = [
        ['icon' => 'fa-bolt', 'label' => 'Fast Boarding'],
        ['icon' => 'fa-money-bill-wave', 'label' => 'No Cash Needed'],
        ['icon' => 'fa-lock', 'label' => 'Secure Payments'],
        ['icon' => 'fa-microchip', 'label' => 'Trusted Technology'],
        ['icon' => 'fa-landmark', 'label' => 'NRB Licensed'],
        ['icon' => 'fa-leaf', 'label' => 'Eco Friendly'],
        ['icon' => 'fa-wallet', 'label' => 'Easy Recharge'],
        ['icon' => 'fa-headset', 'label' => '24/7 Support'],
    ];
@endphp

<section 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">Why Choose Us</p>
            <h2 class="font-heading text-3xl font-extrabold leading-tight text-slate-900 dark:text-white sm:text-4xl">
                Built for <span class="text-primary dark:text-secondary">Trust &amp; Convenience</span>
            </h2>
        </div>

        <div class="grid grid-cols-2 gap-5 sm:grid-cols-4">
            @foreach ($reasons as $i => $reason)
                <div class="reveal-scale group rounded-2xl border border-slate-100 bg-white p-6 text-center shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-lg dark:border-white/10 dark:bg-panel"
                     style="transition-delay: {{ ($i % 4) * 80 }}ms">
                    <div class="mx-auto mb-3 grid h-14 w-14 place-items-center rounded-2xl bg-gradient-to-br from-primary/10 to-secondary/10 text-primary transition duration-300 group-hover:scale-110 group-hover:rotate-3 dark:text-secondary">
                        <i class="fa-solid {{ $reason['icon'] }} text-xl"></i>
                    </div>
                    <p class="text-sm font-semibold text-slate-700 dark:text-slate-300">{{ $reason['label'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>