@php
    $subjects = [
        ['key' => 'math',    'name' => 'Mathematik', 'icon' => '∑',  'color' => 'primary', 'lessons' => '18 / 24', 'progress' => 75, 'next' => 'Schriftliches Multiplizieren', 'level' => 'Klasse 4 · Niveau B'],
        ['key' => 'german',  'name' => 'Deutsch',    'icon' => 'A',  'color' => 'rose',    'lessons' => '13 / 20', 'progress' => 65, 'next' => 'Wortarten erkennen',           'level' => 'Klasse 4 · Niveau B'],
        ['key' => 'english', 'name' => 'Englisch',   'icon' => 'E',  'color' => 'violet',  'lessons' => '8 / 16',  'progress' => 50, 'next' => 'Past Simple üben',             'level' => 'Klasse 4 · Niveau A'],
        ['key' => 'science', 'name' => 'Sachkunde',  'icon' => '🌱', 'color' => 'green',   'lessons' => '14 / 18', 'progress' => 78, 'next' => 'Wasserkreislauf',              'level' => 'Klasse 4 · Niveau B'],
        ['key' => 'music',   'name' => 'Musik',      'icon' => '♪',  'color' => 'amber',   'lessons' => '5 / 12',  'progress' => 42, 'next' => 'Notenlehre Grundlagen',        'level' => 'Klasse 4 · Niveau A'],
        ['key' => 'art',     'name' => 'Kunst',      'icon' => '🎨', 'color' => 'violet',  'lessons' => '4 / 10',  'progress' => 40, 'next' => 'Farbenlehre',                  'level' => 'Klasse 4 · Niveau A'],
        ['key' => 'sport',   'name' => 'Sport',      'icon' => '⚽', 'color' => 'green',   'lessons' => '9 / 14',  'progress' => 64, 'next' => 'Koordinationsübungen',         'level' => 'Klasse 4 · Niveau B'],
        ['key' => 'philo',   'name' => 'Philosophie','icon' => '?',  'color' => 'amber',   'lessons' => '3 / 8',   'progress' => 38, 'next' => 'Was ist Freundschaft?',        'level' => 'Klasse 4 · Niveau A'],
    ];
@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">Lernbereich</div>
            <h1 class="text-[28px] leading-tight font-extrabold tracking-tight text-ink-1">Meine Fächer</h1>
            <p class="text-sm text-ink-2 mt-2 max-w-xl leading-relaxed">{{ count($subjects) }} Fächer · Klick auf ein Fach für Details und nächste Lektionen.</p>
        </div>
        <div class="flex gap-2 items-center">
            <x-pill>Klasse 4 · Niveau B</x-pill>
            <x-btn>
                <x-heroicon-o-funnel class="w-3.5 h-3.5" />
                Filter
            </x-btn>
        </div>
    </header>

    <section class="grid grid-cols-4 gap-4">
        @foreach($subjects as $s)
            <x-subject-card
                :name="$s['name']"
                :icon="$s['icon']"
                :color="$s['color']"
                :lessons="$s['lessons']"
                :progress="$s['progress']"
                :next="$s['next']"
                wire:click="$dispatch('openModal', { component: 'subjects.modals.detail', arguments: { subject: {{ \Illuminate\Support\Js::from($s) }} } })"
            />
        @endforeach
    </section>

</div>