@php
    $subjects = [
        ['name' => 'Mathematik', 'icon' => '∑',  'color' => 'primary', 'progress' => 75, 'lessons' => '18 / 24'],
        ['name' => 'Deutsch',    'icon' => 'A',  'color' => 'rose',    'progress' => 65, 'lessons' => '13 / 20'],
        ['name' => 'Englisch',   'icon' => 'E',  'color' => 'violet',  'progress' => 50, 'lessons' => '8 / 16'],
        ['name' => 'Sachkunde',  'icon' => '🌱', 'color' => 'green',   'progress' => 78, 'lessons' => '14 / 18'],
        ['name' => 'Musik',      'icon' => '♪',  'color' => 'amber',   'progress' => 42, 'lessons' => '5 / 12'],
        ['name' => 'Sport',      'icon' => '⚽', 'color' => 'green',   'progress' => 64, 'lessons' => '9 / 14'],
    ];
    $weekDays = [
        ['day' => 'Mo', 'minutes' => 12],
        ['day' => 'Di', 'minutes' => 18],
        ['day' => 'Mi', 'minutes' => 22],
        ['day' => 'Do', 'minutes' => 9],
        ['day' => 'Fr', 'minutes' => 15],
        ['day' => 'Sa', 'minutes' => 6],
        ['day' => 'So', 'minutes' => 4],
    ];
    $maxMin = max(array_column($weekDays, 'minutes')) ?: 1;
@endphp

<div class="flex flex-col gap-6">

    <header class="flex justify-between items-end gap-6">
        <div>
            <div class="text-[11px] uppercase tracking-[0.14em] text-ink-3 font-semibold mb-1.5">Analyse</div>
            <h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Fortschritt</h1>
            <p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">Verlauf, Streaks und Bestleistungen — sieh wie weit du gekommen bist.</p>
        </div>
        <x-btn>
            <x-heroicon-o-arrow-down-tray class="w-3.5 h-3.5" />
            Export
        </x-btn>
    </header>

    {{-- Stats Overview --}}
    <section class="grid grid-cols-4 gap-4">
        <x-stat-tile label="Gesamtpunkte"     value="2.480" trend="+180 diese Woche" />
        <x-stat-tile label="Lernserie"        value="7" unit="Tage" trend="+2 persönlicher Rekord" />
        <x-stat-tile label="Lernzeit gesamt"  value="14h" unit="32 Min." trend="+12% vs. Vormonat" />
        <x-stat-tile label="Erfolgsquote"     value="75 %" trend="Sehr gut" />
    </section>

    {{-- Week Chart + Subjects --}}
    <section class="grid grid-cols-3 gap-5">
        <x-card class="col-span-2 shadow-sm">
            <div class="flex justify-between items-center mb-5">
                <div>
                    <h2 class="font-bold text-base text-ink-1">Diese Woche</h2>
                    <p class="text-xs text-ink-3 mt-0.5">Lernzeit pro Tag in Minuten</p>
                </div>
                <x-pill variant="primary">86 Min. gesamt</x-pill>
            </div>

            <div class="grid grid-cols-7 gap-3 items-end h-48 pt-4">
                @foreach($weekDays as $d)
                    @php $h = (int) round(($d['minutes'] / $maxMin) * 100); @endphp
                    <div class="flex flex-col items-center gap-2 h-full">
                        <div class="flex-1 w-full flex items-end">
                            <div class="w-full bg-primary-soft rounded-t-md relative group transition-all hover:bg-primary-ink/20" style="height:{{ $h }}%;">
                                <div class="absolute -top-6 left-1/2 -translate-x-1/2 text-[10px] font-mono tabular-nums font-bold text-ink-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                    {{ $d['minutes'] }}
                                </div>
                                <div class="absolute inset-0 rounded-t-md bg-primary-ink" style="height:100%;opacity:0.15;"></div>
                            </div>
                        </div>
                        <div class="text-[11px] font-semibold text-ink-3">{{ $d['day'] }}</div>
                    </div>
                @endforeach
            </div>
        </x-card>

        <x-card class="shadow-sm">
            <h2 class="font-bold text-base text-ink-1 mb-3">Streak</h2>

            <div class="text-center py-4">
                <div class="text-5xl font-extrabold tracking-tight text-amber-ink font-mono tabular-nums">7</div>
                <div class="text-xs text-ink-3 mt-1 font-semibold uppercase tracking-wider">Tage am Stück</div>
            </div>

            <div class="grid grid-cols-7 gap-1 mt-2">
                @for($i = 0; $i < 7; $i++)
                    <div class="aspect-square rounded-md bg-amber-soft border border-amber-soft grid place-items-center">
                        <x-heroicon-s-fire class="w-4 h-4 text-amber-ink" />
                    </div>
                @endfor
            </div>

            <div class="text-[11px] text-ink-3 mt-3 text-center">Persönlicher Rekord: 12 Tage</div>
        </x-card>
    </section>

    {{-- Per-Subject Progress --}}
    <section>
        <h2 class="font-bold text-base text-ink-1 mb-4">Fortschritt pro Fach</h2>

        <x-card class="shadow-sm">
            <div class="flex flex-col">
                @foreach($subjects as $s)
                    @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[$s['color']];
                    @endphp
                    <div class="grid grid-cols-[44px_1fr_140px_60px] gap-4 items-center py-3 border-t border-line first:border-t-0">
                        <div class="w-10 h-10 rounded-lg {{ $c['bg'] }} {{ $c['ink'] }} grid place-items-center font-bold">{{ $s['icon'] }}</div>
                        <div class="font-semibold text-sm text-ink-1">{{ $s['name'] }}</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:{{ $s['progress'] }}%;"></div>
                        </div>
                        <div class="font-mono tabular-nums text-xs font-semibold {{ $c['ink'] }} text-right">{{ $s['progress'] }} %</div>
                    </div>
                @endforeach
            </div>
        </x-card>
    </section>

</div>