{{-- Stats Grid Component --}}
@php
    $stats = $component['content']['stats'] ?? [];
@endphp

<div class="row g-4">
    @foreach($stats as $stat)
        <div class="col-lg-3 col-md-6">
            <div class="stat-card text-center">
                @if(!empty($stat['icon']))
                    <div class="stat-icon mb-3">
                        <i class="{{ $stat['icon'] }}" style="font-size: 48px; color: var(--primary-color);"></i>
                    </div>
                @endif

                @if(!empty($stat['number']))
                    <div class="stat-number mb-2" style="font-family: var(--heading-font);">
                        <span class="display-4 fw-bold" style="color: var(--primary-color);">
                            {{ $stat['number'] }}
                        </span>
                        @if(!empty($stat['suffix']))
                            <span class="h3">{{ $stat['suffix'] }}</span>
                        @endif
                    </div>
                @endif

                @if(!empty($stat['label']))
                    <p class="stat-label text-muted mb-0" style="font-family: var(--body-font);">
                        {{ $stat['label'] }}
                    </p>
                @endif
            </div>
        </div>
    @endforeach
</div>

<style>
    .stat-card {
        padding: 2rem 1rem;
        border-radius: 12px;
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        transition: all 0.3s ease;
        height: 100%;
    }

    .stat-card:hover {
        background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        transform: translateY(-5px);
    }

    .stat-icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .stat-number {
        line-height: 1;
    }

    .stat-label {
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
    }
</style>