@extends('layouts.app')

@section('title', 'Kategori: ' . $category->name)

@section('content')
<!-- Premium Breadcrumbs -->
<nav class="mb-6 md:mb-8 flex items-center gap-2 md:gap-3 text-[10px] md:text-xs font-black uppercase tracking-widest text-gray-400 italic overflow-x-auto whitespace-nowrap pb-2 md:pb-0 scroll-hide">
    <a href="/" class="hover:text-green-700 transition flex items-center gap-1.5 shrink-0">
        <i class="fa-solid fa-house-chimney text-[10px]"></i> Beranda
    </a>
    <i class="fa-solid fa-chevron-right text-[8px] opacity-40 shrink-0"></i>
    <span class="text-green-800 opacity-70 shrink-0">
        Kategori: {{ $category->name }}
    </span>
</nav>

<div class="mb-10">
        <h2 class="text-3xl font-black text-gray-800 uppercase tracking-tighter">
            ARSIP KATEGORI: <span class="text-green-600">{{ $category->name }}</span>
        </h2>
        <div class="h-1 w-20 bg-green-600 mt-2 rounded-full"></div>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
        @forelse($posts as $post)
            <article class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100 flex flex-col h-full group">
                <a href="{{ route('post.show', $post->slug) }}" class="block overflow-hidden aspect-video">
                    <img src="{{ Storage::url($post->thumbnail) }}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                </a>
                <div class="p-5 md:p-6 flex flex-col flex-1">
                    <h3 class="text-lg md:text-xl font-bold mb-3 leading-snug line-clamp-2">
                        <a href="{{ route('post.show', $post->slug) }}" class="hover:text-green-700 transition">{{ $post->title }}</a>
                    </h3>
                    <p class="text-gray-500 text-xs md:text-sm mb-6 line-clamp-3 leading-relaxed flex-1 font-medium">{{ $post->excerpt }}</p>
                    <div class="flex items-center justify-between mt-auto pt-5 border-t border-gray-50 text-[10px] uppercase font-black text-gray-400 tracking-widest">
                        <span>{{ $post->created_at->format('d M Y') }}</span>
                        <a href="{{ route('post.show', $post->slug) }}" class="text-green-700 hover:tracking-widest transition-all">Baca →</a>
                    </div>
                </div>
            </article>
        @empty
            <div class="col-span-2 py-20 lg:py-32 px-6 text-center flex flex-col items-center justify-center min-h-[400px]">
                <div class="w-20 h-20 md:w-24 md:h-24 bg-gray-100 rounded-full flex items-center justify-center mb-8">
                    <i class="fa-solid fa-folder-open text-gray-300 text-2xl md:text-3xl"></i>
                </div>
                <h3 class="text-xl md:text-3xl font-black text-gray-800 uppercase tracking-tighter mb-4 px-4">Belum ada berita di kategori ini</h3>
                <p class="text-gray-500 text-base font-medium max-w-md mx-auto leading-relaxed">Maaf, saat ini belum ada informasi terbaru yang diterbitkan untuk kategori ini. Silakan kembali lagi nanti.</p>
            </div>
        @endforelse
    </div>

    <div class="mt-12 flex justify-center md:justify-start">
        {{ $posts->links() }}
    </div>
@endsection