@php
    $colorMap = [
        'primary' => ['bg' => 'bg-primary-soft', 'ink' => 'text-primary-ink', 'bar' => 'bg-primary-ink'],
        'rose'    => ['bg' => 'bg-rose-soft',    'ink' => 'text-rose-ink',    'bar' => 'bg-rose-ink'],
        'violet'  => ['bg' => 'bg-violet-soft',  'ink' => 'text-violet-ink',  'bar' => 'bg-violet-ink'],
        'green'   => ['bg' => 'bg-green-soft',   'ink' => 'text-green-ink',   'bar' => 'bg-green-ink'],
        'amber'   => ['bg' => 'bg-amber-soft',   'ink' => 'text-amber-ink',   'bar' => 'bg-amber-ink'],
    ];
    $c = $colorMap[$subject['color'] ?? 'primary'] ?? $colorMap['primary'];
@endphp

<div>
    <header class="flex items-start justify-between gap-4 p-6 border-b border-line">
        <div class="flex items-center gap-3">
            <div class="w-12 h-12 rounded-lg grid place-items-center font-bold text-xl {{ $c['bg'] }} {{ $c['ink'] }}">
                {{ $subject['icon'] ?? '?' }}
            </div>
            <div>
                <div class="font-bold text-lg text-ink-1">{{ $subject['name'] ?? '' }}</div>
                <div class="text-xs text-ink-3 mt-0.5">{{ $subject['level'] ?? '' }}</div>
            </div>
        </div>
        <button type="button" wire:click="closeModal" aria-label="Schließen" class="text-ink-3 hover:text-ink-1 transition-colors p-1">
            <x-heroicon-o-x-mark class="w-5 h-5" />
        </button>
    </header>

    <div class="p-6 flex flex-col gap-5">
        <div>
            <div class="text-[11px] uppercase tracking-[0.12em] text-ink-3 font-semibold mb-2">Fortschritt</div>
            <div class="flex justify-between items-baseline mb-2">
                <span class="text-sm text-ink-2 font-mono tabular-nums">{{ $subject['lessons'] ?? '0 / 0' }} Lektionen</span>
                <span class="text-2xl font-bold tracking-tight text-ink-1 font-mono tabular-nums">{{ (int) ($subject['progress'] ?? 0) }} %</span>
            </div>
            <div class="h-2 rounded-full bg-bg-base overflow-hidden">
                <div class="h-full rounded-full {{ $c['bar'] }} transition-all duration-500" style="width:{{ (int) ($subject['progress'] ?? 0) }}%;"></div>
            </div>
        </div>

        <div class="bg-bg-tint rounded-lg p-4 border border-line">
            <div class="text-[11px] uppercase tracking-[0.12em] text-ink-3 font-semibold mb-1">Nächste Lektion</div>
            <div class="font-semibold text-sm text-ink-1">{{ $subject['next'] ?? '—' }}</div>
        </div>

        <div class="flex gap-2 pt-2">
            <x-btn variant="primary" class="flex-1 justify-center">
                <x-heroicon-s-play class="w-4 h-4" />
                Lektion starten
            </x-btn>
            <x-btn class="flex-1 justify-center" wire:click="closeModal">
                <x-heroicon-o-list-bullet class="w-4 h-4" />
                Alle Lektionen
            </x-btn>
        </div>
    </div>
</div>