@php
    $cards = [
        [
            'label' => 'Valor vendido',
            'value' => 'R$ '.number_format((float) ($metrics['sales_paid'] ?? 0), 2, ',', '.'),
            'description' => 'vendas pagas no mês',
            'icon' => '📈',
            'tone' => 'from-slate-950 to-slate-800 text-white',
        ],
        [
            'label' => 'A receber',
            'value' => 'R$ '.number_format((float) ($metrics['commission_approved'] ?? 0), 2, ',', '.'),
            'description' => 'comissão aprovada/liberada',
            'icon' => '💰',
            'tone' => 'from-emerald-600 to-teal-600 text-white',
        ],
        [
            'label' => 'Prevista',
            'value' => 'R$ '.number_format((float) ($metrics['commission_forecasted'] ?? 0), 2, ',', '.'),
            'description' => 'aguardando validação',
            'icon' => '⏳',
            'tone' => 'from-amber-500 to-orange-500 text-white',
        ],
        [
            'label' => 'Paga',
            'value' => 'R$ '.number_format((float) ($metrics['commission_paid'] ?? 0), 2, ',', '.'),
            'description' => 'histórico quitado',
            'icon' => '✅',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
        [
            'label' => 'Usos do cupom',
            'value' => number_format((float) ($metrics['coupon_uses'] ?? 0), 0, ',', '.'),
            'description' => 'movimentações totais',
            'icon' => '🏷️',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
        [
            'label' => 'Vendas confirmadas',
            'value' => number_format((float) ($metrics['orders_paid'] ?? 0), 0, ',', '.'),
            'description' => 'pedidos pagos',
            'icon' => '🛍️',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
        [
            'label' => 'Pendentes',
            'value' => number_format((float) ($metrics['orders_pending'] ?? 0), 0, ',', '.'),
            'description' => 'sem comissão ainda',
            'icon' => '🕒',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
        [
            'label' => 'Canceladas',
            'value' => number_format((float) ($metrics['orders_cancelled'] ?? 0), 0, ',', '.'),
            'description' => 'canceladas/reembolsadas',
            'icon' => '↩️',
            'tone' => 'from-white to-slate-50 text-slate-950',
        ],
    ];
@endphp

<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
    @foreach ($cards as $index => $card)
        <div class="orvox-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>