@php
    $d             = $this->getData();
    $totalLeads    = $d['totalLeads'];
    $wonLeads      = $d['wonLeads'];
    $lostLeads     = $d['lostLeads'];
    $pendingLeads  = $d['pendingLeads'];
    $winRate       = $d['overallWinRate'];
    $staleCount    = $d['staleCount'];
    $conditionStages = $d['conditionStages'];
    $dealBreakdown   = $d['dealBreakdown'];
    $monthlyData     = $d['monthlyData'];
    $momGrowth       = $d['momGrowth'];
    $platformCards   = $d['platformCards'];
    $maxLeads        = $d['maxLeads'];
    $maxRevenue      = $d['maxRevenue'];

    // Tier config reused across tabs
    $tierConfig = [
        'good'    => ['bg' => 'bg-emerald-50', 'border' => 'border-emerald-200', 'badge' => 'bg-emerald-100 text-emerald-700', 'ring' => '#10b981', 'track' => '#d1fae5', 'bar' => 'bg-emerald-400', 'label' => 'Good'],
        'warning' => ['bg' => 'bg-amber-50',   'border' => 'border-amber-200',   'badge' => 'bg-amber-100 text-amber-700',   'ring' => '#f59e0b', 'track' => '#fef3c7', 'bar' => 'bg-amber-400',   'label' => 'Review'],
        'danger'  => ['bg' => 'bg-rose-50',    'border' => 'border-rose-200',    'badge' => 'bg-rose-100 text-rose-700',    'ring' => '#f43f5e', 'track' => '#ffe4e6', 'bar' => 'bg-rose-400',    'label' => 'At Risk'],
    ];

    // Stage colours for pipeline
    $stageConfig = [
        'warm'    => ['dot' => 'bg-emerald-400', 'bar' => 'bg-emerald-400', 'badge' => 'bg-emerald-100 text-emerald-700'],
        'neutral' => ['dot' => 'bg-amber-400',   'bar' => 'bg-amber-400',   'badge' => 'bg-amber-100 text-amber-700'],
        'cold'    => ['dot' => 'bg-rose-400',    'bar' => 'bg-rose-400',    'badge' => 'bg-rose-100 text-rose-700'],
    ];

    // Bar chart max for growth tab
    $maxMonthlyLeads = max(1, collect($monthlyData)->max('leads'));

    // Donut-style deal breakdown totals
    $dealTotal = max(1, array_sum($dealBreakdown));
@endphp

<x-filament-widgets::widget>
    <x-filament::section>
        <x-slot name="heading">Leads Overview</x-slot>
        <x-slot name="description">Pipeline health, market growth trends and platform performance.</x-slot>

        {{-- ── Summary Banner ─────────────────────────────────────────────── --}}
        <div class="mb-6 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
            {{-- Total Leads --}}
            <div class="flex flex-col gap-1 rounded-xl border border-gray-200 bg-gray-50 px-4 py-3">
                <span class="text-[11px] font-medium uppercase tracking-wide text-gray-500">Total Leads</span>
                <span class="text-2xl font-bold text-gray-900 tabular-nums">{{ number_format($totalLeads) }}</span>
            </div>
            {{-- Won --}}
            <div class="flex flex-col gap-1 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3">
                <span class="text-[11px] font-medium uppercase tracking-wide text-emerald-600">Won</span>
                <span class="text-2xl font-bold text-emerald-700 tabular-nums">{{ number_format($wonLeads) }}</span>
            </div>
            {{-- Lost --}}
            <div class="flex flex-col gap-1 rounded-xl border border-rose-200 bg-rose-50 px-4 py-3">
                <span class="text-[11px] font-medium uppercase tracking-wide text-rose-600">Lost</span>
                <span class="text-2xl font-bold text-rose-700 tabular-nums">{{ number_format($lostLeads) }}</span>
            </div>
            {{-- Pending --}}
            <div class="flex flex-col gap-1 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3">
                <span class="text-[11px] font-medium uppercase tracking-wide text-amber-600">Pending</span>
                <span class="text-2xl font-bold text-amber-700 tabular-nums">{{ number_format($pendingLeads) }}</span>
            </div>
            {{-- Win Rate --}}
            <div class="flex flex-col gap-1 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3">
                <span class="text-[11px] font-medium uppercase tracking-wide text-sky-600">Win Rate</span>
                <span class="text-2xl font-bold text-sky-700 tabular-nums">{{ $winRate }}%</span>
            </div>
            {{-- Stale --}}
            <div @class([
                'flex flex-col gap-1 rounded-xl border px-4 py-3',
                'border-rose-200 bg-rose-50' => $staleCount > 0,
                'border-gray-200 bg-gray-50' => $staleCount === 0,
            ])>
                <span @class([
                    'text-[11px] font-medium uppercase tracking-wide',
                    'text-rose-600' => $staleCount > 0,
                    'text-gray-500' => $staleCount === 0,
                ])>Stale Leads</span>
                <div class="flex items-center gap-1.5">
                    <span @class([
                        'text-2xl font-bold tabular-nums',
                        'text-rose-700' => $staleCount > 0,
                        'text-gray-700' => $staleCount === 0,
                    ])>{{ $staleCount }}</span>
                    @if ($staleCount > 0)
                        <x-heroicon-s-exclamation-circle class="h-4 w-4 text-rose-500" />
                    @endif
                </div>
            </div>
        </div>

        {{-- ── Alpine Tabs ─────────────────────────────────────────────────── --}}
        <div
            x-data="{ tab: 'pipeline' }"
            x-cloak
        >
            {{-- Tab Nav --}}
            <div class="mb-5 flex gap-1 rounded-xl border border-gray-200 bg-gray-100 p-1 w-fit">
                <button
                    @click="tab = 'pipeline'"
                    :class="tab === 'pipeline' ? 'bg-white shadow text-gray-900' : 'text-gray-500 hover:text-gray-700'"
                    class="flex items-center gap-1.5 rounded-lg px-4 py-1.5 text-sm font-medium transition-all"
                >
                    <x-heroicon-o-funnel class="h-4 w-4" />
                    Pipeline
                </button>
                <button
                    @click="tab = 'growth'"
                    :class="tab === 'growth' ? 'bg-white shadow text-gray-900' : 'text-gray-500 hover:text-gray-700'"
                    class="flex items-center gap-1.5 rounded-lg px-4 py-1.5 text-sm font-medium transition-all"
                >
                    <x-heroicon-o-arrow-trending-up class="h-4 w-4" />
                    Growth
                </button>
                <button
                    @click="tab = 'platforms'"
                    :class="tab === 'platforms' ? 'bg-white shadow text-gray-900' : 'text-gray-500 hover:text-gray-700'"
                    class="flex items-center gap-1.5 rounded-lg px-4 py-1.5 text-sm font-medium transition-all"
                >
                    <x-heroicon-o-squares-2x2 class="h-4 w-4" />
                    Platforms
                </button>
            </div>

            {{-- ════════════════════════════════════════════════════════════ --}}
            {{-- TAB 1: PIPELINE                                              --}}
            {{-- ════════════════════════════════════════════════════════════ --}}
            <div x-show="tab === 'pipeline'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0">
                @if ($totalLeads === 0)
                    <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                        <x-heroicon-o-funnel class="h-12 w-12 mb-3 opacity-40" />
                        <p class="text-sm font-medium">No lead data for this period</p>
                        <p class="text-xs mt-1">Add leads or adjust the date range filter</p>
                    </div>
                @else
                    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">

                        {{-- Stage Funnel --}}
                        <div class="lg:col-span-2 rounded-xl border border-gray-200 bg-white p-5">
                            <h3 class="mb-4 text-sm font-semibold text-gray-700 flex items-center gap-2">
                                <x-heroicon-s-funnel class="h-4 w-4 text-gray-400" />
                                Lead Stages
                            </h3>
                            <div class="space-y-3">
                                @foreach ($conditionStages as $stage)
                                    @php $sc = $stageConfig[$stage['type']]; @endphp
                                    <div>
                                        <div class="mb-1.5 flex items-center justify-between">
                                            <div class="flex items-center gap-2">
                                                <span class="h-2 w-2 rounded-full {{ $sc['dot'] }} shrink-0"></span>
                                                <span class="text-sm font-medium text-gray-700">{{ $stage['name'] }}</span>
                                                <span class="rounded-full px-2 py-0.5 text-[10px] font-semibold {{ $sc['badge'] }}">
                                                    {{ ucfirst($stage['type']) }}
                                                </span>
                                            </div>
                                            <div class="flex items-center gap-2 text-xs tabular-nums">
                                                <span class="font-semibold text-gray-800">{{ $stage['count'] }}</span>
                                                <span class="text-gray-400">{{ $stage['pct'] }}%</span>
                                            </div>
                                        </div>
                                        <div class="h-2 w-full overflow-hidden rounded-full bg-gray-100">
                                            <div
                                                class="h-full rounded-full {{ $sc['bar'] }} transition-all duration-500"
                                                style="width: {{ $stage['pct'] }}%"
                                            ></div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            {{-- Stage legend --}}
                            <div class="mt-5 flex flex-wrap gap-4 border-t border-gray-100 pt-4 text-xs text-gray-500">
                                <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-emerald-400 inline-block"></span>Warm (Active)</div>
                                <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-amber-400 inline-block"></span>Neutral (Waiting)</div>
                                <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-rose-400 inline-block"></span>Cold (Dead)</div>
                            </div>
                        </div>

                        {{-- Right column: deal breakdown + stale alert --}}
                        <div class="flex flex-col gap-4">

                            {{-- Deal Status Donut Summary --}}
                            <div class="rounded-xl border border-gray-200 bg-white p-5">
                                <h3 class="mb-4 text-sm font-semibold text-gray-700 flex items-center gap-2">
                                    <x-heroicon-s-chart-pie class="h-4 w-4 text-gray-400" />
                                    Deal Breakdown
                                </h3>
                                @php
                                    $dealColors = [
                                        'Won'     => ['bg' => 'bg-emerald-500', 'text' => 'text-emerald-700', 'light' => 'bg-emerald-100'],
                                        'Lost'    => ['bg' => 'bg-rose-500',    'text' => 'text-rose-700',    'light' => 'bg-rose-100'],
                                        'Pending' => ['bg' => 'bg-amber-400',   'text' => 'text-amber-700',   'light' => 'bg-amber-100'],
                                        '—'       => ['bg' => 'bg-gray-300',    'text' => 'text-gray-500',    'light' => 'bg-gray-100'],
                                    ];
                                    // Build CSS gradient segments for the "donut"
                                    $gradientStops = [];
                                    $hardColors = ['Won' => '#10b981', 'Lost' => '#f43f5e', 'Pending' => '#f59e0b', '—' => '#d1d5db'];
                                    $cumPct = 0;
                                    foreach ($dealBreakdown as $status => $count) {
                                        $pct = $dealTotal > 0 ? round($count / $dealTotal * 100, 1) : 0;
                                        $color = $hardColors[$status] ?? '#d1d5db';
                                        $gradientStops[] = "{$color} {$cumPct}% " . ($cumPct + $pct) . "%";
                                        $cumPct += $pct;
                                    }
                                    $gradientCss = 'conic-gradient(' . implode(', ', $gradientStops) . ')';
                                @endphp

                                {{-- CSS conic-gradient donut --}}
                                <div class="flex items-center gap-5 mb-4">
                                    <div class="relative shrink-0" style="width:80px;height:80px;">
                                        <div style="width:80px;height:80px;border-radius:50%;background:{{ $gradientCss }};"></div>
                                        <div style="position:absolute;inset:14px;background:white;border-radius:50%;"></div>
                                        <div class="absolute inset-0 flex items-center justify-center">
                                            <span class="text-xs font-bold text-gray-700">{{ $totalLeads }}</span>
                                        </div>
                                    </div>
                                    <div class="space-y-2 flex-1 min-w-0">
                                        @foreach ($dealBreakdown as $status => $count)
                                            @php
                                                $dc = $dealColors[$status] ?? $dealColors['—'];
                                                $pct = $dealTotal > 0 ? round($count / $dealTotal * 100) : 0;
                                            @endphp
                                            <div class="flex items-center justify-between gap-2 text-xs">
                                                <div class="flex items-center gap-1.5 min-w-0">
                                                    <span class="h-2 w-2 rounded-full {{ $dc['bg'] }} shrink-0"></span>
                                                    <span class="truncate text-gray-600">{{ $status }}</span>
                                                </div>
                                                <div class="flex items-center gap-1.5 shrink-0 tabular-nums">
                                                    <span class="font-semibold text-gray-800">{{ $count }}</span>
                                                    <span class="text-gray-400">{{ $pct }}%</span>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>

                            {{-- Stale Leads Alert --}}
                            @if ($staleCount > 0)
                                <div class="rounded-xl border border-rose-200 bg-rose-50 p-4">
                                    <div class="flex items-start gap-2 mb-2">
                                        <x-heroicon-s-exclamation-circle class="h-4 w-4 shrink-0 text-rose-500 mt-0.5" />
                                        <p class="text-sm font-semibold text-rose-700">Stale Lead Alert</p>
                                    </div>
                                    <p class="text-xs text-rose-600">
                                        <span class="font-bold">{{ $staleCount }}</span>
                                        pending {{ $staleCount === 1 ? 'lead has' : 'leads have' }} had no interaction for over 7 days. Follow up before they go cold.
                                    </p>
                                </div>
                            @else
                                <div class="rounded-xl border border-emerald-200 bg-emerald-50 p-4 flex items-center gap-2">
                                    <x-heroicon-s-check-circle class="h-4 w-4 shrink-0 text-emerald-500" />
                                    <p class="text-xs text-emerald-700 font-medium">All pending leads are being actively followed up.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                @endif
            </div>

            {{-- ════════════════════════════════════════════════════════════ --}}
            {{-- TAB 2: GROWTH                                                --}}
            {{-- ════════════════════════════════════════════════════════════ --}}
            <div x-show="tab === 'growth'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0">
                <div class="rounded-xl border border-gray-200 bg-white p-5">

                    {{-- Header row with MoM badge --}}
                    <div class="mb-5 flex flex-wrap items-center justify-between gap-3">
                        <h3 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                            <x-heroicon-s-arrow-trending-up class="h-4 w-4 text-gray-400" />
                            Monthly Lead Volume — Last 6 Months
                        </h3>
                        @if ($momGrowth !== null)
                            <div @class([
                                'flex items-center gap-1.5 rounded-full px-3 py-1 text-xs font-semibold',
                                'bg-emerald-100 text-emerald-700' => $momGrowth >= 0,
                                'bg-rose-100 text-rose-700'       => $momGrowth < 0,
                            ])>
                                @if ($momGrowth >= 0)
                                    <x-heroicon-s-arrow-up class="h-3 w-3" />
                                @else
                                    <x-heroicon-s-arrow-down class="h-3 w-3" />
                                @endif
                                MoM: {{ $momGrowth > 0 ? '+' : '' }}{{ $momGrowth }}%
                            </div>
                        @else
                            <span class="rounded-full bg-gray-100 px-3 py-1 text-xs text-gray-500">Insufficient data for MoM</span>
                        @endif
                    </div>

                    {{-- Bar Chart --}}
                    <div class="flex items-end gap-3 h-44 px-1 mb-1">
                        @foreach ($monthlyData as $month)
                            @php
                                $barHeightPct = $maxMonthlyLeads > 0 ? round($month['leads'] / $maxMonthlyLeads * 100) : 0;
                                $wonHeightPct = $maxMonthlyLeads > 0 ? round($month['won']   / $maxMonthlyLeads * 100) : 0;
                            @endphp
                            <div class="flex flex-1 flex-col items-center gap-1 group" title="{{ $month['label'] }} {{ $month['year'] }}: {{ $month['leads'] }} leads, {{ $month['won'] }} won">
                                {{-- Bars stacked side-by-side in a row --}}
                                <div class="relative flex w-full items-end justify-center gap-0.5" style="height:160px;">
                                    {{-- Total leads bar --}}
                                    <div
                                        class="w-5/12 rounded-t-md bg-sky-200 group-hover:bg-sky-300 transition-all duration-300"
                                        style="height: {{ max(2, $barHeightPct) }}%;"
                                        title="{{ $month['leads'] }} leads"
                                    ></div>
                                    {{-- Won bar --}}
                                    <div
                                        class="w-5/12 rounded-t-md bg-emerald-400 group-hover:bg-emerald-500 transition-all duration-300"
                                        style="height: {{ max(0, $wonHeightPct) }}%;"
                                        title="{{ $month['won'] }} won"
                                    ></div>
                                </div>
                                {{-- Month label --}}
                                <span class="text-[11px] text-gray-500 font-medium">{{ $month['label'] }}</span>
                            </div>
                        @endforeach
                    </div>

                    {{-- Chart legend --}}
                    <div class="flex flex-wrap gap-4 mt-2 mb-6 text-xs text-gray-500">
                        <div class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm bg-sky-200 inline-block"></span>Total Leads</div>
                        <div class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm bg-emerald-400 inline-block"></span>Won Deals</div>
                    </div>

                    {{-- Monthly detail table --}}
                    <div class="overflow-x-auto rounded-lg border border-gray-100">
                        <table class="min-w-full text-sm">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-2.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Month</th>
                                    <th class="px-4 py-2.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide">Leads</th>
                                    <th class="px-4 py-2.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide">Won</th>
                                    <th class="px-4 py-2.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide">Win Rate</th>
                                    <th class="px-4 py-2.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide">MoM</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-100 bg-white">
                                @foreach ($monthlyData as $idx => $month)
                                    @php
                                        $prevLeads = $idx > 0 ? ($monthlyData[$idx - 1]['leads'] ?? 0) : null;
                                        $rowMom = null;
                                        if ($prevLeads !== null && $prevLeads > 0) {
                                            $rowMom = round((($month['leads'] - $prevLeads) / $prevLeads) * 100, 1);
                                        } elseif ($prevLeads !== null && $month['leads'] > 0) {
                                            $rowMom = 100.0;
                                        }
                                    @endphp
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-4 py-2.5 text-gray-800 font-medium">{{ $month['label'] }} {{ $month['year'] }}</td>
                                        <td class="px-4 py-2.5 text-right tabular-nums text-gray-700">{{ $month['leads'] }}</td>
                                        <td class="px-4 py-2.5 text-right tabular-nums text-emerald-600 font-medium">{{ $month['won'] }}</td>
                                        <td class="px-4 py-2.5 text-right">
                                            <span @class([
                                                'rounded-full px-2 py-0.5 text-xs font-semibold tabular-nums',
                                                'bg-emerald-100 text-emerald-700' => $month['winRate'] >= 30,
                                                'bg-amber-100 text-amber-700'     => $month['winRate'] >= 10 && $month['winRate'] < 30,
                                                'bg-rose-100 text-rose-700'       => $month['winRate'] < 10,
                                            ])>{{ $month['winRate'] }}%</span>
                                        </td>
                                        <td class="px-4 py-2.5 text-right tabular-nums">
                                            @if ($rowMom !== null)
                                                <span @class([
                                                    'text-xs font-semibold',
                                                    'text-emerald-600' => $rowMom >= 0,
                                                    'text-rose-600'    => $rowMom < 0,
                                                ])>{{ $rowMom > 0 ? '+' : '' }}{{ $rowMom }}%</span>
                                            @else
                                                <span class="text-xs text-gray-400">—</span>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- ════════════════════════════════════════════════════════════ --}}
            {{-- TAB 3: PLATFORMS                                             --}}
            {{-- ════════════════════════════════════════════════════════════ --}}
            <div x-show="tab === 'platforms'" x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 translate-y-1" x-transition:enter-end="opacity-100 translate-y-0">

                {{-- Summary banners --}}
                @php
                    $topPlatform  = collect($platformCards)->sortByDesc('score')->first();
                    $atRiskCount  = collect($platformCards)->where('tier', 'danger')->count();
                    $warnCount    = collect($platformCards)->where('tier', 'warning')->count();
                @endphp

                @if (count($platformCards) > 0)
                    <div class="mb-5 flex flex-wrap gap-3">
                        @if ($topPlatform)
                            <div class="flex items-center gap-2 rounded-lg bg-emerald-50 border border-emerald-200 px-4 py-2 text-sm">
                                <x-heroicon-s-trophy class="h-4 w-4 text-emerald-600" />
                                <span class="text-emerald-800 font-medium">Top platform:</span>
                                <span class="text-emerald-700">{{ $topPlatform['name'] }} — score {{ $topPlatform['score'] }}</span>
                            </div>
                        @endif
                        @if ($atRiskCount > 0)
                            <div class="flex items-center gap-2 rounded-lg bg-rose-50 border border-rose-200 px-4 py-2 text-sm">
                                <x-heroicon-s-exclamation-circle class="h-4 w-4 text-rose-500" />
                                <span class="text-rose-700 font-medium">{{ $atRiskCount }} platform{{ $atRiskCount > 1 ? 's' : '' }} at risk</span>
                            </div>
                        @endif
                        @if ($warnCount > 0)
                            <div class="flex items-center gap-2 rounded-lg bg-amber-50 border border-amber-200 px-4 py-2 text-sm">
                                <x-heroicon-s-exclamation-triangle class="h-4 w-4 text-amber-500" />
                                <span class="text-amber-700 font-medium">{{ $warnCount }} under review</span>
                            </div>
                        @endif
                    </div>
                @endif

                @if (count($platformCards) === 0)
                    <div class="flex flex-col items-center justify-center py-16 text-gray-400">
                        <x-heroicon-o-squares-2x2 class="h-12 w-12 mb-3 opacity-40" />
                        <p class="text-sm font-medium">No platform data for this period</p>
                        <p class="text-xs mt-1">Add platforms or adjust the date range filter</p>
                    </div>
                @else
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
                        @foreach ($platformCards as $card)
                            @php
                                $tc            = $tierConfig[$card['tier']];
                                $circumference = 2 * M_PI * 28; // r=28
                                $offset        = $circumference - ($card['score'] / 100) * $circumference;
                                $leadPct       = $maxLeads > 0 ? min(100, round($card['leadCount'] / $maxLeads * 100)) : 0;
                                $revPct        = $maxRevenue > 0 ? min(100, round($card['revenue'] / $maxRevenue * 100)) : 0;
                            @endphp

                            <div class="rounded-xl border {{ $tc['border'] }} {{ $tc['bg'] }} p-4 flex flex-col gap-4 transition-shadow hover:shadow-md">

                                {{-- Card Header --}}
                                <div class="flex items-start justify-between gap-2">
                                    <div>
                                        <p class="font-semibold text-gray-900 text-sm leading-tight">{{ $card['name'] }}</p>
                                        <span class="mt-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium {{ $tc['badge'] }}">
                                            {{ $tc['label'] }}
                                        </span>
                                    </div>

                                    {{-- Score Ring --}}
                                    <div class="relative shrink-0" title="Performance score {{ $card['score'] }}/100">
                                        <svg width="72" height="72" viewBox="0 0 72 72" class="-rotate-90">
                                            <circle cx="36" cy="36" r="28" fill="none" stroke="{{ $tc['track'] }}" stroke-width="7"/>
                                            <circle
                                                cx="36" cy="36" r="28"
                                                fill="none"
                                                stroke="{{ $tc['ring'] }}"
                                                stroke-width="7"
                                                stroke-linecap="round"
                                                stroke-dasharray="{{ $circumference }}"
                                                stroke-dashoffset="{{ $offset }}"
                                            />
                                        </svg>
                                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                                            <span class="text-base font-bold text-gray-800 leading-none">{{ $card['score'] }}</span>
                                            <span class="text-[10px] text-gray-500 leading-none mt-0.5">/ 100</span>
                                        </div>
                                    </div>
                                </div>

                                {{-- Key Stats Grid --}}
                                <div class="grid grid-cols-2 gap-2">
                                    <div class="rounded-lg bg-white/60 px-3 py-2">
                                        <p class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Leads</p>
                                        <p class="text-lg font-bold text-gray-800 tabular-nums">{{ $card['leadCount'] }}</p>
                                    </div>
                                    <div class="rounded-lg bg-white/60 px-3 py-2">
                                        <p class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Won</p>
                                        <p class="text-lg font-bold text-emerald-700 tabular-nums">{{ $card['wonCount'] }}</p>
                                    </div>
                                    <div class="rounded-lg bg-white/60 px-3 py-2">
                                        <p class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Win Rate</p>
                                        <p class="text-lg font-bold text-sky-700 tabular-nums">{{ $card['winRate'] }}%</p>
                                    </div>
                                    <div class="rounded-lg bg-white/60 px-3 py-2">
                                        <p class="text-[10px] text-gray-500 uppercase tracking-wide font-medium">Revenue</p>
                                        <p class="text-base font-bold text-gray-800 tabular-nums truncate">
                                            ${{ number_format($card['revenue'], 0) }}
                                        </p>
                                    </div>
                                </div>

                                {{-- Progress Bars --}}
                                <div class="space-y-2.5">
                                    {{-- Lead volume bar --}}
                                    <div>
                                        <div class="flex items-center justify-between mb-1">
                                            <span class="text-xs text-gray-600 font-medium">Lead Volume</span>
                                            <span class="text-xs font-semibold text-gray-700 tabular-nums">{{ $card['leadCount'] }}</span>
                                        </div>
                                        <div class="h-1.5 w-full rounded-full bg-white/70 overflow-hidden">
                                            <div class="h-full rounded-full {{ $tc['bar'] }} transition-all duration-500" style="width: {{ $leadPct }}%"></div>
                                        </div>
                                    </div>
                                    {{-- Revenue bar --}}
                                    <div>
                                        <div class="flex items-center justify-between mb-1">
                                            <span class="text-xs text-gray-600 font-medium">Revenue</span>
                                            <span class="text-xs font-semibold text-gray-700 tabular-nums">${{ number_format($card['revenue'], 0) }}</span>
                                        </div>
                                        <div class="h-1.5 w-full rounded-full bg-white/70 overflow-hidden">
                                            <div class="h-full rounded-full {{ $tc['bar'] }} transition-all duration-500" style="width: {{ $revPct }}%"></div>
                                        </div>
                                    </div>
                                    {{-- Win rate bar --}}
                                    <div>
                                        <div class="flex items-center justify-between mb-1">
                                            <span class="text-xs text-gray-600 font-medium">Win Rate</span>
                                            <span @class([
                                                'text-[10px] rounded px-1 py-0.5 font-medium tabular-nums',
                                                'bg-emerald-100 text-emerald-600' => $card['winRate'] >= 30,
                                                'bg-amber-100 text-amber-600'     => $card['winRate'] >= 10 && $card['winRate'] < 30,
                                                'bg-rose-100 text-rose-600'       => $card['winRate'] < 10,
                                            ])>{{ $card['winRate'] }}%</span>
                                        </div>
                                        <div class="h-1.5 w-full rounded-full bg-white/70 overflow-hidden">
                                            <div class="h-full rounded-full {{ $tc['bar'] }} transition-all duration-500" style="width: {{ min(100, $card['winRate']) }}%"></div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Avg deal value --}}
                                @if ($card['wonCount'] > 0)
                                    <div class="flex items-center gap-2 rounded-lg bg-white/50 px-3 py-2 text-xs">
                                        <x-heroicon-s-currency-dollar class="h-3.5 w-3.5 text-gray-400 shrink-0" />
                                        <span class="text-gray-600">Avg deal value:</span>
                                        <span class="font-semibold text-gray-800 tabular-nums">${{ number_format($card['avgPrice'], 0) }}</span>
                                    </div>
                                @endif

                                {{-- Insights --}}
                                @if (count($card['insights']) > 0)
                                    <div class="border-t border-white/50 pt-3 space-y-1">
                                        @foreach ($card['insights'] as $insight)
                                            <div class="flex items-start gap-1.5 text-xs text-gray-600">
                                                <x-heroicon-s-light-bulb class="mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-500" />
                                                <span>{{ $insight }}</span>
                                            </div>
                                        @endforeach
                                    </div>
                                @else
                                    <div class="border-t border-white/50 pt-3 flex items-center gap-1.5 text-xs text-emerald-600">
                                        <x-heroicon-s-check-circle class="h-3.5 w-3.5 shrink-0" />
                                        <span>Platform performing well across all metrics</span>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>

                    {{-- Scoring legend --}}
                    <div class="mt-4 flex flex-wrap gap-4 text-xs text-gray-500">
                        <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-emerald-400 inline-block"></span> Good (score ≥ 70)</div>
                        <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-amber-400 inline-block"></span> Review (score 40–69)</div>
                        <div class="flex items-center gap-1.5"><span class="h-2 w-2 rounded-full bg-rose-400 inline-block"></span> At Risk (score &lt; 40)</div>
                        <span class="ml-auto text-gray-400">Score = win rate (45%) + volume (30%) + avg price (25%). Bars relative to best performer.</span>
                    </div>
                @endif
            </div>
        </div>
    </x-filament::section>
</x-filament-widgets::widget>