@extends('layouts.app')

@section('title', $category->name)
@section('meta_description', $category->meta_description ?? 'Latest ' . $category->name . ' news from AIT Broadcasting Network')

@section('content')
<div class="px-6 py-4">
    <div class="grid grid-cols-[1fr_280px] gap-5">

        {{-- MAIN COLUMN --}}
        <div>
            {{-- CATEGORY HEADER --}}
            <div class="bg-white border border-[#e2e2dc] rounded overflow-hidden mb-5">
                <div class="p-5 border-l-4" style="border-color:{{ $category->color }}">
                    <div class="text-xs font-bold tracking-widest uppercase mb-1" style="color:{{ $category->color }}">
                        Section
                    </div>
                    <h1 class="text-2xl font-bold text-[#111110] font-serif">{{ $category->name }}</h1>
                    @if($category->description)
                        <p class="text-sm text-gray-500 mt-1">{{ $category->description }}</p>
                    @endif
                </div>
            </div>

            {{-- ARTICLES GRID --}}
            @if($articles->count() > 0)
                <div class="grid grid-cols-3 gap-px bg-[#e2e2dc] border border-[#e2e2dc] rounded overflow-hidden mb-5">
                    @foreach($articles as $article)
                        <a href="{{ route('article.show', $article->slug) }}" class="bg-white hover:bg-[#fafaf7] transition block">
                            <div class="h-40 bg-[#1a2f48] overflow-hidden">
                                @if($article->featured_image_url)
                                    <img src="{{ asset('storage/' . $article->featured_image_url) }}"
                                         alt="{{ $article->title }}"
                                         class="w-full h-full object-cover object-center">
                                @endif
                            </div>
                            <div class="p-3">
                                @if($article->region)
                                    <div class="text-[8.5px] font-bold tracking-widest uppercase mb-1 text-[#0a3828]">
                                        {{ $article->region->flag_emoji }} {{ $article->region->name }}
                                    </div>
                                @endif
                                <div class="text-sm font-bold text-[#111110] font-serif leading-tight mb-1">
                                    {{ Str::limit($article->title, 100) }}
                                </div>
                                <div class="text-xs text-[#3d3d3a] leading-relaxed mb-2">
                                    {{ Str::limit($article->excerpt, 120) }}
                                </div>
                                <div class="text-[9.5px] text-[#767670]">
                                    {{ $article->author?->name ?? 'AIT Newsroom' }}
                                    · {{ $article->published_at_human }}
                                    · {{ $article->reading_time_label }}
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>

                {{-- PAGINATION --}}
                <div class="mt-4">
                    {{ $articles->links() }}
                </div>
            @else
                <div class="bg-white border border-[#e2e2dc] rounded p-8 text-center">
                    <div class="text-gray-400 text-sm">No articles found in this category yet.</div>
                    <a href="{{ route('home') }}" class="text-[#0a3828] text-sm font-bold mt-2 inline-block hover:underline">
                        Back to homepage
                    </a>
                </div>
            @endif
        </div>

        {{-- SIDEBAR --}}
        @include('partials.sidebar')

    </div>
</div>
@endsection