@php
    $cards = [
        [
            'label' => 'Influencers',
            'value' => number_format((float) ($metrics['influencers'] ?? 0), 0, ',', '.'),
            'description' => 'ativos na operação',
            'icon' => '✨',
            'tone' => 'from-slate-950 to-slate-800 text-white',
        ],
        [
            'label' => 'Pedidos pagos',
            'value' => number_format((float) ($metrics['orders_paid'] ?? 0), 0, ',', '.'),
            'description' => 'vendas válidas',
            'icon' => '🛍️',
            'tone' => 'from-emerald-600 to-teal-600 text-white',
        ],
        [
            'label' => 'Vendas',
            'value' => 'R$ '.number_format((float) ($metrics['sales_amount'] ?? 0), 2, ',', '.'),
            'description' => 'base de pedidos pagos',
            'icon' => '📈',
            'tone' => 'from-amber-500 to-orange-500 text-white',
        ],
        [
            'label' => 'Previstas',
            'value' => 'R$ '.number_format((float) ($metrics['forecasted_commission'] ?? 0), 2, ',', '.'),
            'description' => 'aguardando validação',
            'icon' => '⏳',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
        [
            'label' => 'Aprovadas',
            'value' => 'R$ '.number_format((float) ($metrics['approved_commission'] ?? 0), 2, ',', '.'),
            'description' => 'prontas para fechamento',
            'icon' => '✅',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
        [
            'label' => 'Pagas',
            'value' => 'R$ '.number_format((float) ($metrics['paid_commission'] ?? 0), 2, ',', '.'),
            'description' => 'já quitadas',
            'icon' => '💰',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
    ];
@endphp

<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-6">
    @foreach ($cards as $index => $card)
        <div class="orvox-admin-slide-up group relative overflow-hidden rounded-[1.75rem] border border-white/70 bg-gradient-to-br {{ $card['tone'] }} p-5 shadow-xl shadow-slate-950/5 transition duration-300 hover:-translate-y-1 hover:shadow-2xl hover:shadow-slate-950/10" style="animation-delay: {{ $index * 40 }}ms">
            <div class="pointer-events-none absolute -right-8 -top-8 h-24 w-24 rounded-full bg-white/20 blur-2xl transition group-hover:scale-125"></div>
            <div class="relative flex items-start justify-between gap-4">
                <div>
                    <p class="text-xs font-black uppercase tracking-[0.18em] opacity-70">{{ $card['label'] }}</p>
                    <p class="mt-3 text-2xl font-black tracking-tight">{{ $card['value'] }}</p>
                    <p class="mt-1 text-sm font-medium opacity-70">{{ $card['description'] }}</p>
                </div>
                <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-white/20 text-2xl shadow-lg shadow-black/5">{{ $card['icon'] }}</span>
            </div>
        </div>
    @endforeach
</div>