@php
    // `lottie` is the filename to drop into public/lottie/why-choose-us/ —
    // see resources/js/lottie-icons.js. Until that file exists, the FA
    // icon behind it just stays visible (checked via a HEAD request, not
    // a broken-animation fallback), so this section looks fine either way.
    $reasons = [
        ['icon' => 'fa-bolt', 'lottie' => 'fast-boarding', 'label' => 'Fast Boarding', 'theme' => 'gold'],
        ['icon' => 'fa-money-bill-wave', 'lottie' => 'no-cash-needed', 'label' => 'No Cash Needed', 'theme' => 'teal'],
        ['icon' => 'fa-lock', 'lottie' => 'secure-payments', 'label' => 'Secure Payments', 'theme' => 'blue'],
        ['icon' => 'fa-microchip', 'lottie' => 'trusted-technology', 'label' => 'Trusted Technology', 'theme' => 'purple'],
        ['icon' => 'fa-landmark', 'lottie' => 'nrb-licensed', 'label' => 'NRB Licensed', 'theme' => 'cyan'],
        ['icon' => 'fa-leaf', 'lottie' => 'eco-friendly', 'label' => 'Eco Friendly', 'theme' => 'emerald'],
        ['icon' => 'fa-wallet', 'lottie' => 'easy-recharge', 'label' => 'Easy Recharge', 'theme' => 'pink'],
        ['icon' => 'fa-headset', 'lottie' => 'support-24-7', 'label' => '24/7 Support', 'theme' => 'rose'],
    ];
@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-a11y dark: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="glow-card glow-card--compact glow-card--{{ $reason['theme'] }} reveal-scale group"
                     style="transition-delay: {{ ($i % 4) * 80 }}ms">
                    <span class="glow-card__glow" aria-hidden="true"></span>
                    <div class="glow-card__icon">
                        <i class="fa-solid {{ $reason['icon'] }}"></i>
                        <div class="lottie-icon" data-lottie="{{ asset('lottie/why-choose-us/' . $reason['lottie'] . '.json') }}" aria-hidden="true"></div>
                    </div>
                    <p class="text-sm font-semibold text-slate-700 dark:text-slate-300">{{ $reason['label'] }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>