@extends('frontend.layouts.app')

@section('title', $category->meta_title ?: $category->name . ' — BrigataFolgore.net')
@section('description', $category->meta_description ?: $category->description)

@section('content')

<div class="bg-folgore text-white py-12 md:py-16">
    <div class="container mx-auto px-4">
        <p class="text-sm uppercase tracking-wider opacity-80 mb-2">{{ __t('category.label', 'Categoria') }}</p>
        <h1 class="text-3xl md:text-5xl font-bold">{{ $category->name }}</h1>
        @if($category->description)
            <p class="mt-3 text-white/90 max-w-3xl">{{ $category->description }}</p>
        @endif
    </div>
</div>

<section class="container mx-auto px-4 py-10">
    @if($articles->isEmpty())
        <p class="text-center text-gray-500 py-12">{{ __t('category.no_articles', 'Nessun articolo in questa categoria.') }}</p>
    @else
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($articles as $article)
                <x-site.article-card :article="$article" variant="default" />
            @endforeach
        </div>
        <div class="mt-10">
            {{ $articles->links() }}
        </div>
    @endif
</section>

@endsection