@php
    $animate = $block->get('animate_count', true);
    $wrapper = match ($variant) {
        'cards'    => 'ec-surface rounded-2xl p-8 shadow-sm',
        'bordered' => 'px-6 border-e last:border-e-0',
        default    => 'px-4',
    };
@endphp
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    @if ($block->get('title'))
        <h2 class="ec-heading text-3xl font-bold text-center mb-10">{{ $block->get('title') }}</h2>
    @endif
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-6 text-center">
        @foreach ($items as $i => $item)
            <div class="ec-stagger-item {{ $wrapper }} flex flex-col gap-2 items-center">
                @if (data_get($item, 'icon'))
                    <x-website.icon :name="data_get($item, 'icon')" class="w-8 h-8 ec-accent mb-1" />
                @endif
                <div class="ec-heading font-extrabold {{ $variant === 'big_numbers' ? 'text-5xl sm:text-6xl' : 'text-4xl' }}" dir="ltr">
                    <span @if ($animate) data-counter="{{ preg_replace('/\D/', '', (string) data_get($item, 'value')) }}" @endif>{{ data_get($item, 'value') }}</span><span class="ec-accent">{{ data_get($item, 'suffix') }}</span>
                </div>
                <p class="ec-muted text-sm sm:text-base">{{ $block->get("items.{$i}.label") ?: data_get($item, 'label') }}</p>
            </div>
        @endforeach
    </div>
</div>
