<div class="rounded-2xl p-3 ring-1 {{ $panel }}">
    <p class="text-[10px] font-black uppercase tracking-wide {{ $label }}">Win/Loss</p>
    <div class="mt-2 flex items-center gap-3">
        <svg viewBox="0 0 120 120" class="{{ $isStory ? 'h-20 w-20' : 'h-16 w-16' }} shrink-0" aria-label="Win loss donut chart">
            <circle cx="60" cy="60" r="42" fill="none" stroke="#94a3b8" stroke-width="18" pathLength="100" opacity="0.9" />
            <circle cx="60" cy="60" r="42" fill="none" stroke="#ef4444" stroke-width="18" pathLength="100" stroke-dasharray="{{ $lossPercent }} {{ 100 - $lossPercent }}" stroke-dashoffset="-{{ $winPercent }}" stroke-linecap="round" transform="rotate(-90 60 60)" />
            <circle cx="60" cy="60" r="42" fill="none" stroke="#22c55e" stroke-width="18" pathLength="100" stroke-dasharray="{{ $winPercent }} {{ 100 - $winPercent }}" stroke-linecap="round" transform="rotate(-90 60 60)" />
            <circle cx="60" cy="60" r="28" fill="{{ $isLight ? '#ffffff' : '#020617' }}" />
            <text x="60" y="64" text-anchor="middle" font-size="18" font-weight="900" fill="{{ $isLight ? '#0f172a' : '#ffffff' }}">{{ $report['winRate'] }}%</text>
        </svg>
        <div class="space-y-1 text-[10px] font-bold">
            <p class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-green-400"></span> W {{ $report['wins'] }}</p>
            <p class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-red-400"></span> L {{ $report['losses'] }}</p>
            <p class="flex items-center gap-1"><span class="h-2 w-2 rounded-full bg-slate-400"></span> BE {{ $report['breakeven'] }}</p>
        </div>
    </div>
</div>

<div class="rounded-2xl p-3 ring-1 {{ $panel }} {{ $isFacebook ? '' : ($isStory ? '' : 'col-span-1') }}">
    <p class="text-[10px] font-black uppercase tracking-wide {{ $label }}">Equity Curve</p>
    <svg viewBox="0 0 100 82" class="mt-1 h-16 w-full overflow-visible" aria-label="Mini equity curve chart">
        <polyline points="{{ $equityPoints }}" fill="none" stroke="{{ $isLight ? $brandColor : '#ffffff' }}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
        <line x1="0" y1="76" x2="100" y2="76" stroke="{{ $isLight ? 'rgba(37,99,235,.22)' : 'rgba(255,255,255,.25)' }}" stroke-width="2" />
    </svg>
</div>

<div class="rounded-2xl p-3 ring-1 {{ $panel }} {{ $isStory ? 'col-span-2' : '' }}">
    <div class="flex items-start justify-between gap-2">
        <div>
            <p class="text-[10px] font-black uppercase tracking-wide {{ $label }}">Profit/Loss</p>
            @if ($showProfit)
                <p class="mt-1 {{ $isStory ? 'text-2xl' : 'text-xl' }} font-black {{ $report['totalProfitLoss'] >= 0 ? ($isLight ? 'text-blue-700' : 'text-blue-100') : 'text-red-400' }}">
                    {{ $report['totalProfitLoss'] >= 0 ? '+' : '' }}{{ number_format($report['totalProfitLoss'], 2) }}
                </p>
            @else
                <p class="mt-1 text-lg font-black {{ $isLight ? 'text-slate-500' : 'text-white/70' }}">Hidden</p>
            @endif
        </div>
        <div class="flex h-12 items-end gap-1" aria-label="Trades by session bar chart">
            @foreach ($report['sessionBreakdown'] as $session => $count)
                <div class="w-2 rounded-full {{ $isLight ? 'bg-blue-600' : 'bg-white' }}" style="height: {{ max(8, ($count / $sessionMax) * 48) }}px"></div>
            @endforeach
        </div>
    </div>
</div>
