@php
    $stats = [
        ['count' => 100000, 'suffix' => '+', 'label' => 'Cards Issued', 'icon' => 'fa-id-card'],
        ['count' => 500, 'suffix' => '+', 'label' => 'Buses Onboard', 'icon' => 'fa-bus'],
        ['count' => 150, 'suffix' => '+', 'label' => 'Recharge Centers', 'icon' => 'fa-shop'],
        ['count' => 24, 'suffix' => '/7', 'label' => 'Customer Support', 'icon' => 'fa-headset'],
    ];
@endphp

<section class="border-y border-slate-100 bg-white py-14 dark:border-white/10 dark:bg-ink">
    <div class="mx-auto grid max-w-7xl grid-cols-2 gap-8 px-6 lg:grid-cols-4">
        @foreach ($stats as $i => $stat)
            <div class="reveal-scale text-center" style="transition-delay: {{ $i * 100 }}ms">
                <div class="mx-auto mb-3 grid h-12 w-12 place-items-center rounded-xl bg-primary/10 text-primary dark:bg-secondary/10 dark:text-secondary">
                    <i class="fa-solid {{ $stat['icon'] }}"></i>
                </div>
                <p class="font-heading text-3xl font-extrabold text-slate-900 dark:text-white sm:text-4xl">
                    <span class="counter" data-count="{{ $stat['count'] }}">0</span>{{ $stat['suffix'] }}
                </p>
                <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">{{ $stat['label'] }}</p>
            </div>
        @endforeach
    </div>
</section>