@extends('layouts.nova')

@section('content')
<main class="min-h-screen bg-slate-950 px-4 py-10" aria-labelledby="forum-page-title">
    <div class="mx-auto max-w-7xl">
        <header class="mb-8">
            <h1 id="forum-page-title" class="text-3xl font-semibold text-white">Forum</h1>
            <p class="mt-2 text-sm text-white/60">Browse forum sections and latest activity.</p>
        </header>

        @if (($categories ?? collect())->isEmpty())
            <div class="rounded-xl border border-white/10 bg-slate-900/60 p-8 text-center text-white/70">
                No forum categories available yet.
            </div>
        @else
            <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3" role="list" aria-label="Forum categories">
                @foreach ($categories as $category)
                    <x-forum.category-card :category="$category" />
                @endforeach
            </div>
        @endif
    </div>
</main>
@endsection