{{-- KPIs do dia (estilo Stripe/Whop): valor grande, variação vs ontem,
     sparkline de 14 dias desenhada em SVG puro. --}}
@php
    $kpi = $this->painelHoje;
    $q = $this->serieQuinzena;
@endphp
@if ($kpi)
    <div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
        @foreach ([
            ['rotulo' => __('Corridas hoje'), 'dado' => $kpi['corridas'], 'spark' => $q['sparkCorridas'] ?? '', 'cor' => '#15803d'],
            ['rotulo' => __('Receita hoje'), 'dado' => $kpi['receita'], 'spark' => $q['sparkReceita'] ?? '', 'cor' => '#047857'],
            ['rotulo' => __('Motoristas online'), 'dado' => $kpi['online'], 'spark' => '', 'cor' => '#1d4ed8'],
            ['rotulo' => __('Conclusão hoje'), 'dado' => $kpi['conclusao'], 'spark' => '', 'cor' => '#6b7280'],
        ] as $c)
            <div class="p-4 bg-white border rounded-lg">
                <p class="text-xs text-gray-500">{{ $c['rotulo'] }}</p>
                <div class="flex items-center gap-2 mt-1">
                    <p class="font-bold text-gray-900" style="font-size:26px;line-height:1.1;font-variant-numeric:tabular-nums">
                        {{ $c['dado']['valor'] }}
                    </p>
                    @if (!empty($c['dado']['delta']))
                        @php $d = $c['dado']['delta']; @endphp
                        <span class="px-1.5 text-xs font-bold rounded-full"
                            style="padding-top:2px;padding-bottom:2px;{{ $d['dir'] === 'sobe' ? 'background:#dcfce7;color:#15803d' : ($d['dir'] === 'desce' ? 'background:#fee2e2;color:#b91c1c' : 'background:#f1f5f9;color:#64748b') }}">
                            {{ $d['texto'] }}
                        </span>
                    @endif
                </div>
                @if ($c['spark'])
                    <svg class="w-full mt-2" style="height:30px" viewBox="0 0 100 30" preserveAspectRatio="none" aria-hidden="true">
                        <polygon points="2,28 {{ $c['spark'] }} 98,28" fill="{{ $c['cor'] }}" opacity=".08" />
                        <polyline points="{{ $c['spark'] }}" fill="none" stroke="{{ $c['cor'] }}" stroke-width="1.6"
                            vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
                    </svg>
                    <div class="flex justify-between mt-1 text-[10px] text-gray-400">
                        <span>{{ now()->subDays(13)->format('d/m') }}</span>
                        <span>{{ __('hoje') }}</span>
                    </div>
                @endif
            </div>
        @endforeach
    </div>
@endif