@extends('news.layout', [
    'metaTitle'       => config('news.rss_title', 'News'),
    'metaDescription' => config('news.rss_description', ''),
    'metaCanonical'   => route('news.index'),
])

@section('news_content')
@php
    $headerBreadcrumbs = collect([
        (object) ['name' => 'Community', 'url' => route('community.activity')],
        (object) ['name' => 'Announcements', 'url' => route('news.index')],
    ]);
@endphp

<x-nova-page-header
    section="Community"
    title="News"
    icon="fa-newspaper"
    :breadcrumbs="$headerBreadcrumbs"
    :description="config('news.rss_description', 'Latest news, feature rollouts, and team updates from Skinbase.')"
    headerClass="pb-6"
>
    <x-slot name="actions">
        <div class="flex flex-wrap items-center gap-2 text-sm">
            @if(($articles->total() ?? 0) > 0)
                <span class="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.04] px-3 py-1.5 text-white/65">
                    <i class="fa-solid fa-file-lines text-xs text-sky-300"></i>
                    {{ number_format($articles->total()) }} articles
                </span>
            @endif
            <a href="{{ route('news.rss') }}" class="inline-flex items-center gap-2 rounded-lg border border-amber-400/20 bg-amber-500/10 px-4 py-2 text-sm font-medium text-amber-200 transition hover:bg-amber-500/15">
                <i class="fa-solid fa-rss text-xs"></i>
                RSS feed
            </a>
        </div>
    </x-slot>
</x-nova-page-header>

<div class="mx-auto max-w-7xl px-6 pt-8 pb-16 md:px-10">
    @if($featured)
        <section class="mb-8">
            <a href="{{ route('news.show', $featured->slug) }}" class="group block overflow-hidden rounded-[32px] border border-white/[0.08] bg-white/[0.03] shadow-[0_24px_60px_rgba(0,0,0,0.24)] transition hover:border-white/[0.12]">
                <div class="grid lg:grid-cols-[1.25fr_0.95fr]">
                    <div class="relative min-h-[280px] overflow-hidden bg-black/20">
                        @if($featured->cover_url)
                            <img src="{{ $featured->cover_url }}" alt="{{ $featured->title }}" class="h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]">
                        @else
                            <div class="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.14),transparent_45%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.98))]"></div>
                        @endif
                        <div class="absolute inset-0 bg-gradient-to-t from-[#020611] via-[#02061166] to-transparent"></div>
                    </div>
                    <div class="flex flex-col justify-between gap-5 p-6 lg:p-8">
                        <div>
                            <div class="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-[0.18em] text-white/45">
                                <span class="text-sky-300">Featured story</span>
                                @if($featured->category)
                                    <span class="rounded-full border border-sky-400/20 bg-sky-500/10 px-2.5 py-1 text-[11px] tracking-[0.12em] text-sky-200">{{ $featured->category->name }}</span>
                                @endif
                            </div>
                            <h2 class="mt-4 text-3xl font-bold leading-tight text-white/95">{{ $featured->title }}</h2>
                            @if($featured->excerpt)
                                <p class="mt-4 text-sm leading-7 text-white/60">{{ Str::limit(strip_tags((string) $featured->excerpt), 220) }}</p>
                            @endif
                        </div>
                        <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-white/45">
                            <span>{{ $featured->author?->name ?? 'Skinbase' }}</span>
                            <span>{{ $featured->published_at?->format('d M Y') }}</span>
                            <span>{{ $featured->reading_time }} min read</span>
                            <span>{{ number_format((int) $featured->views) }} views</span>
                        </div>
                    </div>
                </div>
            </a>
        </section>
    @endif

    <div class="grid gap-8 xl:grid-cols-[minmax(0,1fr)_320px]">
        <section>
            @if($articles->isEmpty())
                <div class="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-8 py-14 text-center text-white/45">
                    No announcements have been published yet.
                </div>
            @else
                <div class="grid gap-5 md:grid-cols-2">
                    @foreach($articles as $article)
                        @include('news._article_card', ['article' => $article])
                    @endforeach
                </div>

                <div class="mt-8 flex justify-center">
                    {{ $articles->links() }}
                </div>
            @endif
        </section>

        <aside class="space-y-4">
            @include('news._sidebar', [
                'categories' => $categories,
                'trending' => $trending,
                'tags' => $tags,
            ])
        </aside>
    </div>
</div>
@endsection