@extends('layouts.child')
@section('content')
<h1 class="text-2xl font-bold text-indigo-700 mb-6 text-center">📚 Welches Fach?</h1>
<div class="grid gap-5">
@foreach($subjects as $s)
@php $colors = ['green'=>'from-green-400 to-emerald-500','blue'=>'from-blue-400 to-indigo-500','orange'=>'from-orange-400 to-amber-500'] @endphp
<a href="{{ route('learn.quiz', $s->slug) }}" class="bg-gradient-to-r {{ $colors[$s->color] ?? 'from-violet-400 to-purple-500' }} rounded-2xl p-6 text-white flex items-center justify-between hover:scale-[1.02] transition-transform shadow-md">
  <div class="flex items-center gap-5">
    <span class="text-5xl">{{ $s->icon }}</span>
    <div>
      <div class="text-2xl font-black">{{ $s->name }}</div>
      <div class="text-white/80 text-sm mt-0.5">{{ $s->total }} Fragen · {{ $s->correct }} richtig beantwortet</div>
    </div>
  </div>
  <div class="text-4xl">▶</div>
</a>
@endforeach
</div>
@endsection