<div class="mx-auto max-w-[1120px] space-y-8">
    <header class="animate-rise">
        <p class="lbl">{{ __('setup.eyebrow') }}</p>
        <h1 class="mt-[7px] text-[23px] font-bold leading-[1.12] tracking-[-0.03em] text-ink min-[901px]:text-[30px]">
            {{ __('setup.title') }}
        </h1>
        <p class="mt-2 max-w-[76ch] text-sm leading-relaxed text-muted">{{ __('setup.subtitle') }}</p>
    </header>

    @foreach ($groups as $gruppe => $kacheln)
        <section class="animate-rise" style="animation-delay: {{ $loop->index * 30 + 20 }}ms">
            <h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('setup.group.'.$gruppe) }}</h2>
            <p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('setup.group_hint.'.$gruppe) }}</p>

            {{-- Kacheln statt einer Reiterleiste: neun Reiter waeren wieder
                 die Wurst, die hier gerade abgeschafft wird. Und Kacheln
                 tragen einen Satz darueber, WAS die Seite einrichtet — in
                 einer Leiste steht nur ihr Name. --}}
            <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($kacheln as [$route, $icon, $key, $capability])
                    <a href="{{ route($route) }}" wire:key="setup-{{ $key }}"
                       class="group flex min-h-[5.5rem] gap-3.5 rounded-lg border border-line bg-surface p-4 shadow-xs transition-colors hover:border-line-strong hover:bg-surface-hover">
                        {{-- R18: Symbol neben dem Text, nie darueber, size-5. --}}
                        <span class="mt-0.5 grid size-9 shrink-0 place-items-center rounded-md bg-surface-2 text-muted group-hover:text-ink">
                            <x-ui.icon :name="$icon" class="size-5" />
                        </span>
                        <span class="min-w-0">
                            <span class="block text-sm font-semibold text-ink">{{ __('admin.nav.'.$key) }}</span>
                            <span class="mt-1 block text-xs leading-relaxed text-muted">{{ __('setup.tile.'.$key) }}</span>
                        </span>
                    </a>
                @endforeach
            </div>
        </section>
    @endforeach
</div>
