@props(['data' => []])

<section class="section-padding bg-[#030712] text-white">
    <div class="container-page">
        <div class="grid gap-8 sm:grid-cols-2 md:grid-cols-3">
            @foreach($data['stats'] ?? [
                ['value' => '500', 'suffix' => '+', 'label' => 'Professionals placed'],
                ['value' => '98', 'suffix' => '%', 'label' => 'Client retention'],
                ['value' => '48', 'suffix' => 'hr', 'label' => 'Average match time'],
            ] as $stat)
                <div class="text-center">
                    <p class="text-[clamp(2rem,8vw,3rem)] font-bold tracking-tight text-primary">{{ ($stat['value'] ?? 0).($stat['suffix'] ?? '') }}</p>
                    <p class="mt-3 text-sm font-medium uppercase tracking-wider text-slate-400">{{ $stat['label'] ?? '' }}</p>
                </div>
            @endforeach
        </div>
    </div>
</section>