@props(['stats'])
<section class="grid grid-cols-1 border-y border-white/[0.08] py-8 sm:grid-cols-3 sm:py-9">
    <div class="border-l-2 border-blue-500 px-4 py-1 sm:px-5">
        <p class="text-2xl font-semibold tracking-tight">{{ number_format($stats['businesses']) }}</p>
        <p class="mt-1 text-[11px] text-zinc-500">businesses listed</p>
    </div>
    <div class="mt-5 border-l-2 border-emerald-500 px-4 py-1 sm:mt-0 sm:border-l sm:border-white/10 sm:pl-8">
        <p class="text-2xl font-semibold tracking-tight">{{ number_format($stats['areas']) }}</p>
        <p class="mt-1 text-[11px] text-zinc-500">areas covered</p>
    </div>
    <div class="mt-5 border-l-2 border-amber-500 px-4 py-1 sm:mt-0 sm:border-l sm:border-white/10 sm:pl-8">
        <p class="text-2xl font-semibold tracking-tight">{{ number_format($stats['active_listings']) }}</p>
        <p class="mt-1 text-[11px] text-zinc-500">active local listings</p>
    </div>
</section>