@extends('layouts.app')
@section('title', 'Berita')

@section('content')
<div class="bg-primary py-10">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <nav class="text-blue-200 text-sm mb-2">
            <a href="{{ route('home') }}" class="hover:text-white">Beranda</a> <span class="mx-2">/</span>
            <span class="text-white">Berita Desa</span>
        </nav>
        <h1 class="text-3xl font-bold text-white">Berita Desa</h1>
        <p class="text-blue-200 mt-1 text-sm">Informasi dan kegiatan terkini Desa Suka Baru</p>
    </div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    @if($posts->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($posts as $post)
            <a href="{{ route('berita.show', $post->slug) }}" class="card group block h-full flex flex-col justify-between bg-white border border-gray-100 rounded-2xl shadow-sm hover:shadow-xl transition-all duration-300">
                <!-- Frame Foto Berita Rapi Inset -->
                <div class="p-2 bg-gray-50/80 border-b border-gray-100 rounded-t-2xl">
                    <div class="aspect-[16/9] overflow-hidden rounded-xl bg-blue-50 relative border border-gray-200/70 shadow-xs">
                        @if($post->foto_url)
                            <img src="{{ $post->foto_url }}" alt="{{ $post->judul }}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" loading="lazy">
                        @else
                            <div class="w-full h-full flex items-center justify-center bg-blue-100 text-blue-300">
                                <svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="p-5 flex-1 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center gap-2 mb-2">
                            <span class="badge badge-blue">Berita</span>
                            <span class="text-xs text-gray-400 font-medium">{{ $post->tanggal->translatedFormat('d F Y') }}</span>
                        </div>
                        <h2 class="font-bold text-text-main group-hover:text-secondary transition-colors line-clamp-2 leading-snug">{{ $post->judul }}</h2>
                        <p class="text-gray-500 text-xs sm:text-sm mt-2 line-clamp-2 leading-relaxed">{{ $post->excerpt }}</p>
                    </div>
                    @if($post->penulis)
                        <p class="text-xs text-gray-400 mt-3 pt-3 border-t border-gray-100 font-medium">Oleh: {{ $post->penulis }}</p>
                    @endif
                </div>
            </a>
            @endforeach
        </div>
        <div class="mt-8">{{ $posts->links() }}</div>
    @else
        <div class="text-center py-16 text-gray-400">
            <div class="w-16 h-16 bg-blue-50 text-blue-300 rounded-2xl flex items-center justify-center mx-auto mb-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"/></svg>
            </div>
            <p>Belum ada berita yang dipublikasikan.</p>
        </div>
    @endif
</div>
@endsection
