<?php
use Livewire\Component;
use Livewire\WithPagination;
use App\Models\Category;
use App\Models\Post;
?>

<main class="max-w-7xl mx-auto px-4 md:px-6 py-10 font-odia">
    <div class="mb-12">
        <h1 class="text-4xl md:text-6xl font-black text-slate-900 tracking-tight uppercase">
            {{ $category->name }} <span class="text-brand-blue">ନିୟୁଜ୍</span>
        </h1>
        <div class="h-1 w-24 bg-brand-blue mt-4"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
        <div class="lg:col-span-8">
            @if($posts->count() > 0)
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                @foreach($posts as $post)
                <article class="group news-card-v2 rounded-lg">
                    <div class="aspect-[16/10] overflow-hidden relative border-b border-slate-100">
                        <img src="{{ $post->featured_image ? (Str::startsWith($post->featured_image, 'http') ? $post->featured_image : asset('storage/'.$post->featured_image)) : 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800' }}" class="w-full h-full object-cover">
                        <div class="absolute top-3 left-3">
                            <span class="bg-white text-brand-blue text-[9px] font-black px-2 py-0.5 rounded-sm border border-slate-200 shadow-sm uppercase tracking-wider">{{ $category->name }}</span>
                        </div>
                    </div>
                    <div class="p-5">
                        <h2 class="text-lg font-bold text-slate-800 leading-snug group-hover:text-brand-blue transition-colors mb-4 line-clamp-2">
                            {{ $post->title }}
                        </h2>
                        <div class="flex items-center justify-between pt-3 border-t border-slate-100">
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-widest">{{ $post->created_at->diffForHumans() }}</span>
                            <a href="{{ route('article', $post->slug) }}" class="text-brand-blue text-[10px] font-black uppercase tracking-widest flex items-center gap-2 group/btn">
                                {{ __('ui.read_more') }} <i class="fa-solid fa-arrow-right group-hover/btn:translate-x-1 transition-transform"></i>
                            </a>
                        </div>
                    </div>
                </article>
                @endforeach
            </div>
            <div class="mt-12">
                {{ $posts->links() }}
            </div>
            @else
            <div class="bg-slate-50 p-12 text-center rounded-lg border border-slate-100">
                <p class="text-slate-400 font-odia">{{ __('category.no_posts') }}</p>
            </div>
            @endif
        </div>

        <aside class="lg:col-span-4 space-y-10">
            <!-- Trending Topics -->
            <div class="bg-slate-50 p-6 rounded-lg border border-slate-200">
                <h3 class="text-sm font-bold mb-6 uppercase tracking-widest text-slate-900">{{ __('category.trending') }}</h3>
                <div class="flex flex-wrap gap-2">
                    <a href="#" class="px-3 py-1.5 bg-white border border-slate-200 rounded-sm text-[10px] font-bold text-slate-600 hover:bg-brand-blue hover:text-white transition-all shadow-sm">#OdishaElections</a>
                    <a href="#" class="px-3 py-1.5 bg-white border border-slate-200 rounded-sm text-[10px] font-bold text-slate-600 hover:bg-brand-blue hover:text-white transition-all shadow-sm">#PuriTourism</a>
                    <a href="#" class="px-3 py-1.5 bg-white border border-slate-200 rounded-sm text-[10px] font-bold text-slate-600 hover:bg-brand-blue hover:text-white transition-all shadow-sm">#SmartCity</a>
                    <a href="#" class="px-3 py-1.5 bg-white border border-slate-200 rounded-sm text-[10px] font-bold text-slate-600 hover:bg-brand-blue hover:text-white transition-all shadow-sm">#Chilika</a>
                </div>
            </div>

            <!-- Trending Stories -->
            <div>
                <h3 class="text-sm font-bold mb-6 flex items-center gap-3 uppercase tracking-widest text-slate-900">
                    <span class="w-1 h-5 bg-brand-red inline-block"></span>
                    {{ __('category.trending') }}
                </h3>
                <div class="space-y-5">
                    @foreach($trendingPosts as $post)
                    <a href="{{ route('article', $post->slug) }}" class="group flex gap-4 border-b border-slate-100 pb-4">
                        <span class="text-2xl font-black text-slate-200 font-sans flex-shrink-0">{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span>
                        <div>
                            <h4 class="text-sm font-bold text-slate-800 font-odia leading-snug group-hover:text-brand-red transition-colors mb-1">{{ $post->title }}</h4>
                            <span class="text-[9px] font-bold text-slate-400 uppercase tracking-wider">{{ $post->category->name }} | {{ $post->created_at->diffForHumans() }}</span>
                        </div>
                    </a>
                    @endforeach
                </div>
            </div>

            <!-- Newsletter -->
            <div class="bg-brand-blue p-6 rounded-lg text-white">
                <h3 class="text-lg font-black mb-2">{{ __('ui.newsletter_title') }}</h3>
                <p class="text-white/80 text-xs mb-4 leading-relaxed">{{ __('nav.newsletter_footer') }}</p>
                <form class="flex">
                    <input type="email" placeholder="{{ __('ui.email_placeholder') }}" class="flex-1 bg-white/10 border border-white/20 rounded-l-sm px-3 py-2 text-xs focus:outline-none focus:bg-white focus:text-slate-900 transition-all placeholder:text-white/50">
                    <button type="submit" class="bg-slate-900 px-4 py-2 rounded-r-sm hover:bg-black transition-colors">
                        <i class="fa-solid fa-paper-plane text-xs"></i>
                    </button>
                </form>
            </div>
        </aside>
    </div>
</main>