@extends('layouts.public')

@section('title', __('Alle Befehle & Funktionen') . ' — TacForce Pro')
@section('meta_description', 'Alle Befehle von TacForce Operator: Musik, Moderation, Utility, Fun, Tickets & Bewerbungen, Reaction-Roles und mehr — die komplette Funktionsliste des Discord-Bots.')

@section('content')
  <section class="border-b border-zinc-200 dark:border-zinc-800">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-16 text-center">
      <span class="inline-flex items-center gap-2 rounded-full border border-zinc-200 dark:border-zinc-800 bg-white/60 dark:bg-zinc-900/60 px-3.5 py-1.5 text-xs font-medium text-zinc-600 dark:text-zinc-300">{{ __('Funktionen') }}</span>
      <h1 class="mt-5 text-4xl font-extrabold tracking-tight text-zinc-900 dark:text-white sm:text-5xl">{{ __('Alle Befehle & Funktionen') }}</h1>
      <p class="mx-auto mt-4 max-w-2xl text-lg text-zinc-600 dark:text-zinc-400">{{ __('Was TacForce Operator kann') }} — <strong>{{ $total }}</strong> {{ __('Befehle') }}. {{ __('Wird automatisch aktuell gehalten.') }}</p>
    </div>
  </section>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12 space-y-12">
    @forelse ($grouped as $category => $cmds)
      <section>
        <h2 class="mb-4 flex items-center gap-2 text-lg font-bold tracking-tight text-zinc-900 dark:text-white">
          <span class="font-mono text-[13px] text-blue-500">//</span> {{ __($category) }}
          <span class="rounded-full bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 text-[11px] font-medium text-zinc-500 dark:text-zinc-400">{{ count($cmds) }}</span>
        </h2>
        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
          @foreach ($cmds as $cmd)
            <div class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4">
              <p class="font-mono text-sm font-semibold text-blue-600 dark:text-blue-400">/{{ $cmd['name'] }}</p>
              <p class="mt-1 text-[13px] leading-relaxed text-zinc-500 dark:text-zinc-400">{{ $cmd['description'] }}</p>
              @if (! empty($cmd['subcommands']))
                <div class="mt-2 flex flex-wrap gap-1">
                  @foreach ($cmd['subcommands'] as $s)
                    <span class="rounded bg-zinc-100 dark:bg-zinc-800 px-1.5 py-0.5 font-mono text-[11px] text-zinc-600 dark:text-zinc-300">{{ $s['name'] }}</span>
                  @endforeach
                </div>
              @endif
            </div>
          @endforeach
        </div>
      </section>
    @empty
      <p class="text-center text-zinc-500 dark:text-zinc-400">{{ __('Noch keine Befehle gelistet.') }}</p>
    @endforelse

    <div class="rounded-xl border border-blue-500/20 bg-blue-500/5 px-5 py-4 text-center text-[14px] text-blue-800 dark:text-blue-200">
      {{ __('Im Discord jederzeit') }} <span class="font-mono">/commands</span> {{ __('tippen — zeigt dieselbe Liste live.') }}
    </div>
  </div>
@endsection