@extends('layouts.app')

@php
$news = \App\Models\NewsArticle::published()->orderBy('published_at', 'desc')->paginate(12);
@endphp

@section('title', 'Notícias — Mangolê')
@section('description', 'Acompanhe as novidades, campanhas e iniciativas da Mangolê. Fique por dentro do que acontece na maior rede de supermercados de Angola.')

@section('content')
<section class="bg-gradient-to-br from-brand via-brand-800 to-brand-900 text-white">
    <x-container class="py-20 lg:py-28">
        <div class="max-w-2xl">
            <h1 class="mt-2 text-4xl font-bold tracking-tight sm:text-5xl">Fique por dentro</h1>
            <p class="mt-3 text-lg text-brand-100">Acompanhe as novidades, campanhas e iniciativas da Mangolê.</p>
        </div>
    </x-container>
</section>

<section class="bg-white py-16 lg:py-24">
    <x-container>
        @if ($news->isNotEmpty())
        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($news as $article)
            <article class="group rounded-2xl bg-white p-6 shadow-sm ring-1 ring-gray-100 hover:shadow-md hover:ring-brand/20 transition-all duration-200 flex flex-col">
                @if ($article->image)
                <div class="-mx-6 -mt-6 mb-4 overflow-hidden rounded-t-2xl">
                    <img src="{{ asset('storage/' . $article->image) }}" alt="{{ $article->title }}" loading="lazy" class="h-48 w-full object-cover group-hover:scale-105 transition-transform duration-300">
                </div>
                @endif
                <div class="flex items-center gap-3 text-xs text-gray-400">
                    @if ($article->category)
                    <span class="rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-medium text-brand">{{ $article->category }}</span>
                    @endif
                    @if ($article->reading_time)
                    <span>{{ $article->reading_time }} min leitura</span>
                    @endif
                </div>
                <h2 class="mt-3 font-semibold text-gray-900 group-hover:text-brand transition-colors duration-150">
                    <a href="{{ url('noticias/' . $article->slug) }}" class="no-underline">{{ $article->title }}</a>
                </h2>
                @if ($article->excerpt)
                <p class="mt-2 text-sm text-gray-500 leading-relaxed line-clamp-3 flex-1">{{ strip_tags($article->excerpt) }}</p>
                @endif
                <div class="mt-4 flex items-center gap-3 text-xs text-gray-400 pt-4 border-t border-gray-100">
                    @if ($article->author)
                    <span>{{ $article->author }}</span>
                    <span>·</span>
                    @endif
                    <span>{{ $article->published_at?->diffForHumans() }}</span>
                </div>
            </article>
            @endforeach
        </div>
        <div class="mt-12">
            {{ $news->links() }}
        </div>
        @else
        <div class="text-center py-20">
            <p class="text-gray-400 text-lg">Nenhuma notícia publicada ainda.</p>
        </div>
        @endif
    </x-container>
</section>
@endsection
