@php
    $salesAmount = (float) data_get($progress, 'sales_amount', 0);
    $percentToNext = (int) data_get($progress, 'percent_to_next', 0);
    $currentRule = data_get($progress, 'current_rule');
    $nextRule = data_get($progress, 'next_rule');
    $badges = $influencer->achievements ?? collect();
@endphp

<div class="orvox-slide-up relative overflow-hidden rounded-[2rem] bg-slate-950 p-6 text-white shadow-2xl shadow-slate-950/20">
    <div class="absolute inset-0 bg-[radial-gradient(circle_at_18%_12%,rgba(251,191,36,.28),transparent_32%),radial-gradient(circle_at_92%_84%,rgba(255,255,255,.12),transparent_35%)]"></div>

    <div class="relative z-10">
        <div class="flex items-start justify-between gap-4">
            <div>
                <p class="text-xs font-black uppercase tracking-[0.22em] text-amber-200">Gamificação</p>
                <h2 class="mt-2 text-2xl font-black tracking-tight">Sua jornada de metas</h2>
                <p class="mt-2 text-sm leading-6 text-slate-300">
                    Vendas válidas do mês: <strong class="text-white">R$ {{ number_format($salesAmount, 2, ',', '.') }}</strong>
                </p>
            </div>

            @if ($currentRule)
                <span class="rounded-full border border-emerald-300/30 bg-emerald-300/15 px-4 py-2 text-xs font-black text-emerald-100">
                    {{ $currentRule->name }}
                </span>
            @else
                <span class="rounded-full border border-white/10 bg-white/10 px-4 py-2 text-xs font-black text-slate-200">
                    Começando
                </span>
            @endif
        </div>

        <div class="mt-8">
            <div class="mb-3 flex items-center justify-between text-xs font-black uppercase tracking-wide text-slate-300">
                <span>{{ $percentToNext }}% da próxima meta</span>
                <span>
                    @if ($nextRule)
                        Próxima: {{ $nextRule->name }}
                    @else
                        Todas batidas 🎉
                    @endif
                </span>
            </div>

            <div class="h-5 overflow-hidden rounded-full bg-white/10 p-1">
                <div class="h-3 rounded-full bg-gradient-to-r from-amber-200 via-amber-400 to-orange-500 shadow-lg shadow-amber-500/30 transition-all duration-700" style="width: {{ min(100, max(0, $percentToNext)) }}%"></div>
            </div>

            <p class="mt-3 text-sm text-slate-300">
                @if ($nextRule)
                    Meta alvo: <strong class="text-white">R$ {{ number_format((float) $nextRule->threshold_value, 2, ',', '.') }}</strong>
                @else
                    Você já atingiu a melhor meta configurada para este período.
                @endif
            </p>
        </div>

        <div class="mt-8 rounded-3xl border border-white/10 bg-white/10 p-5 backdrop-blur">
            <div class="flex items-center justify-between gap-4">
                <div>
                    <p class="text-xs font-black uppercase tracking-[0.2em] text-amber-200">Badges</p>
                    <h3 class="mt-1 font-black">Conquistas desbloqueadas</h3>
                </div>
                <span class="rounded-full bg-white px-3 py-1 text-xs font-black text-slate-950">{{ $badges->count() }}</span>
            </div>

            <div class="mt-4 flex flex-wrap gap-2">
                @forelse ($badges as $achievement)
                    <span class="rounded-full border border-white/15 bg-white px-4 py-2 text-sm font-black text-slate-950 shadow-lg shadow-black/10">
                        {{ $achievement->badge->icon }} {{ $achievement->badge->name }}
                    </span>
                @empty
                    <span class="rounded-2xl border border-dashed border-white/20 px-4 py-3 text-sm text-slate-300">
                        Nenhuma badge conquistada ainda. A primeira venda paga já começa a mover sua jornada.
                    </span>
                @endforelse
            </div>
        </div>
    </div>
</div>