@props(['stats'])
<section class="tone-deep stats-section" aria-labelledby="stats-heading">
    <h2 id="stats-heading" class="sr-only">Zoshop today</h2>
    <div class="stats-grid" data-stats-grid>
        @foreach ([
            ['icon' => 'store', 'value' => $stats['businesses'] ?? null, 'label' => 'Businesses', 'tilt' => -1.5, 'offset' => 32, 'fd' => 7, 'fdl' => 0, 'delay' => 0],
            ['icon' => 'area', 'value' => $stats['areas'] ?? null, 'label' => 'Areas covered', 'tilt' => 0, 'offset' => 0, 'fd' => 8.4, 'fdl' => -2, 'delay' => .1],
            ['icon' => 'live', 'value' => $stats['active_listings'] ?? null, 'label' => 'Live listings', 'tilt' => 1.5, 'offset' => 48, 'fd' => 6.2, 'fdl' => -1, 'delay' => .2],
        ] as $stat)
            <div class="reveal offset-y" data-reveal data-stat-card style="margin-top:{{ $stat['offset'] }}px;--rd:{{ $stat['delay'] }}s">
                <div class="drift" style="--fd:{{ $stat['fd'] }}s;--fdl:{{ $stat['fdl'] }}s">
                    <div class="glass tilt" style="--tilt:{{ $stat['tilt'] }}deg" tabindex="0">
                        <div class="stat-ghost" aria-hidden="true"><x-marketing.icon :name="$stat['icon']" /></div>
                        <div class="stat-icon"><x-marketing.icon :name="$stat['icon']" /></div>
                        <div class="stat-num" data-count-up="{{ $stat['value'] ?? 0 }}">0</div>
                        <div class="stat-label">{{ $stat['label'] }}</div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</section>