@use('Core\Localization\LocalizedDate')

{{--
    @intent Listagem (índice) das notícias publicadas no Portal.
    @description O módulo define **apenas** o conteúdo central e os campos padrão do shell
                 (ADR-016): título, descrição, breadcrumbs e dados estruturados.
--}}
@php
    // Categorias são vocabulário do módulo: o dono do fragmento é dono da tradução (ADR-012).
    $categoryMeta = [
        'infraestrutura' => ['label' => __('noticias::index.categories.infraestrutura'), 'class' => 'bg-civic-ink text-civic-on-ink'],
        'educacao' => ['label' => __('noticias::index.categories.educacao'), 'class' => 'bg-civic-navy text-civic-on-navy'],
        'saude' => ['label' => __('noticias::index.categories.saude'), 'class' => 'bg-civic-yellow text-civic-on-yellow'],
        'cultura' => ['label' => __('noticias::index.categories.cultura'), 'class' => 'bg-civic-surface-high text-civic-ink'],
        'esporte' => ['label' => __('noticias::index.categories.esporte'), 'class' => 'bg-civic-navy-soft text-civic-on-navy-soft'],
        'seguranca' => ['label' => __('noticias::index.categories.seguranca'), 'class' => 'bg-civic-ink text-civic-on-ink'],
        'meio-ambiente' => ['label' => __('noticias::index.categories.meio-ambiente'), 'class' => 'bg-civic-navy-soft text-civic-on-navy-soft'],
        'geral' => ['label' => __('noticias::index.categories.geral'), 'class' => 'bg-civic-surface-high text-civic-ink'],
    ];
@endphp

<x-layout::portal
    preset="padrao"
    :title="__('noticias::index.title')"
    :description="__('noticias::index.description')"
    :breadcrumbs="[['label' => __('layout::shell.home'), 'url' => localized_url('/')], ['label' => __('noticias::index.title')]]"
    :schemas="[[
        '@context' => 'https://schema.org',
        '@type' => 'CollectionPage',
        'name' => __('noticias::index.title'),
        'url' => localized_url('/noticias'),
    ]]"
>
    <div class="flex flex-col gap-2 border-b border-civic-border pb-6">
        <h1 class="text-3xl font-extrabold tracking-tight text-civic-ink">{{ __('noticias::index.title') }}</h1>
        <p class="text-civic-outline">{{ __('noticias::index.lead') }}</p>
    </div>

    @if ($noticias->isEmpty())
        <div class="mt-8 flex flex-col items-center gap-4 rounded-2xl border-2 border-dashed border-civic-border bg-civic-surface-dim px-6 py-16 text-center">
            <x-ui::icon name="newspaper" class="h-10 w-10 text-civic-outline" />
            <div>
                <h2 class="text-xl font-bold text-civic-ink">{{ __('noticias::index.empty_title') }}</h2>
                <p class="mt-1 text-civic-outline">{{ __('noticias::index.empty_lead') }}</p>
            </div>
        </div>
    @else
        <p class="mt-6 text-sm text-civic-outline">
            {{ $noticias->total() }} {{ trans_choice('noticias::index.count', $noticias->total()) }}
        </p>

        <div class="mt-4 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($noticias as $noticia)
                @php
                    $meta = $categoryMeta[$noticia->category] ?? ['label' => ucfirst($noticia->category), 'class' => 'bg-civic-surface-high text-civic-ink'];
                @endphp

                <article class="align-rows group overflow-hidden rounded-2xl border-2 border-civic-border bg-surface shadow-sm transition-shadow hover:shadow-md">
                    <a href="{{ route('noticias.show', ['slug' => $noticia->slug]) }}" class="relative block h-48 w-full overflow-hidden">
                        @include('noticias::partials.cover', [
                            'noticia' => $noticia,
                            'sizes' => '(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw',
                            'class' => 'h-full w-full object-cover transition-transform duration-500 group-hover:scale-105',
                        ])
                        <span class="absolute left-4 top-4 rounded-full px-3 py-1 text-xs font-bold {{ $meta['class'] }}">
                            {{ $meta['label'] }}
                        </span>
                    </a>

                    <div class="flex flex-col gap-3 p-6">
                        <time datetime="{{ $noticia->published_at?->toDateString() }}" class="inline-flex items-center gap-2 text-sm text-civic-outline">
                            <x-ui::icon name="calendar" class="h-4 w-4" />
                            {{ LocalizedDate::long($noticia->published_at) }}
                        </time>

                        <h2 class="text-xl font-bold leading-snug text-civic-ink">
                            {{-- Alvo mínimo: um título de uma linha fica com ~22px de caixa — o
                                 `inline-block min-h-6` garante os 24px (SC 2.5.8) e o ponteiro
                                 grosso exige 2.75rem (ADR-025). --}}
                            <a href="{{ route('noticias.show', ['slug' => $noticia->slug]) }}" class="inline-block min-h-6 transition-colors hover:text-civic-link pointer-coarse:min-h-11">
                                {{ $noticia->title }}
                            </a>
                        </h2>
                    </div>

                    @if ($noticia->summary)
                        <p class="mt-auto p-6 pt-0 text-civic-outline">{{ $noticia->summary }}</p>
                    @endif
                </article>
            @endforeach
        </div>

        @if ($noticias->hasPages())
            <div class="mt-10">
                {{ $noticias->links() }}
            </div>
        @endif
    @endif
</x-layout::portal>