@props(['stats'])

<section class="relative border-y border-gold/10 bg-navy-deep/60" aria-label="Chiffres clés">
    <div class="mx-auto grid max-w-7xl grid-cols-2 gap-8 px-6 py-14 md:grid-cols-4">
        @foreach ($stats as $i => $stat)
            @php $parts = $stat->counterParts(); @endphp
            <div class="reveal group text-center md:text-left" @if($i > 0) data-delay="{{ $i * 0.08 }}" @endif>
                <div class="font-serif text-4xl md:text-5xl">
                    <span class="text-gradient-gold"><span data-counter="{{ $parts['nombre'] }}" data-decimals="{{ $parts['decimales'] }}" class="counter-value">0</span>@if($parts['suffixe']){{ $parts['colle'] ? $parts['suffixe'] : ' '.$parts['suffixe'] }}@endif</span>
                </div>
                <div class="mt-2 text-xs uppercase tracking-[0.18em] text-cream/60">{{ $stat->trad('label') }}</div>
            </div>
        @endforeach
    </div>
</section>