@extends('layouts.child')
@section('content')
<h1 class="text-2xl font-bold text-indigo-700 mb-2">💡 Erinnerung</h1>
<p class="text-slate-500 mb-6">Hier kannst du nachschauen, was du gerade nicht mehr weißt.</p>
@foreach($categories as $key => $label)
@php $group = $articles->get($key, collect()) @endphp
@if($group->count())
<div class="mb-6">
  <h2 class="font-bold text-slate-600 text-sm uppercase tracking-wide mb-3">{{ $label }}</h2>
  <div class="grid gap-3">
    @foreach($group as $a)
    <a href="{{ route('reference.show', $a->slug) }}"
       class="bg-white rounded-2xl border border-slate-200 shadow-sm px-5 py-4 flex items-center gap-4 hover:border-indigo-300 hover:shadow-md transition-all">
      <span class="text-3xl">{{ $a->icon }}</span>
      <span class="font-semibold text-slate-700 text-base">{{ $a->title }}</span>
      <span class="ml-auto text-slate-300 text-lg">›</span>
    </a>
    @endforeach
  </div>
</div>
@endif
@endforeach
@endsection