@extends('layouts.main')

@section('content')
    @extends('layouts.main')

    @section('content')
        <section class="bg-gradient-to-r from-blue-950 via-blue-900 to-blue-700 text-white">
            <div class="max-w-7xl mx-auto px-4 py-20">
                <p class="text-blue-200 font-semibold mb-3">Publikasi</p>
                <h1 class="text-4xl md:text-5xl font-extrabold mb-4">Berita dan Kegiatan</h1>
                <p class="text-lg text-blue-100 max-w-3xl leading-8">
                    Informasi terbaru seputar kegiatan organisasi, pelatihan, rapat, dan aktivitas profesi.
                </p>
            </div>
        </section>

        <section class="max-w-7xl mx-auto px-4 py-16">
            <div class="grid md:grid-cols-3 gap-6">
                @forelse($posts as $post)
                    <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-100">
                        @if($post->image)
                            <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="h-56 w-full object-cover">
                        @else
                            <div class="h-56 bg-blue-100 flex items-center justify-center font-bold text-blue-900">
                                Foto Berita
                            </div>
                        @endif

                        <div class="p-6">
                            <p class="text-sm text-slate-500 mb-2">
                                {{ optional($post->published_at)->format('d M Y') ?? $post->created_at->format('d M Y') }}
                            </p>

                            <h3 class="text-xl font-bold mb-3">{{ $post->title }}</h3>

                            <p class="text-slate-600 leading-7 mb-4">
                                {{ $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 120) }}
                            </p>

                            <a href="{{ route('berita.show', $post->slug) }}"
                                class="inline-block text-blue-700 font-semibold hover:underline">
                                Baca Selengkapnya →
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="md:col-span-3 text-center text-slate-500">
                        Belum ada berita dipublikasikan.
                    </div>
                @endforelse
            </div>

            <div class="mt-8">
                {{ $posts->links() }}
            </div>
        </section>
    @endsection

    <section class="max-w-7xl mx-auto px-4 py-16">
        <div class="grid md:grid-cols-3 gap-6">
            @forelse($posts as $post)
                <div class="bg-white rounded-3xl overflow-hidden shadow-sm border border-slate-100">
                    @if($post->image)
                        <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="h-56 w-full object-cover">
                    @else
                        <div class="h-56 bg-blue-100 flex items-center justify-center font-bold text-blue-900">Foto Berita</div>
                    @endif

                    <div class="p-6">
                        <p class="text-sm text-slate-500 mb-2">
                            {{ optional($post->published_at)->format('d M Y') ?? $post->created_at->format('d M Y') }}
                        </p>
                        <h3 class="text-xl font-bold mb-3">{{ $post->title }}</h3>
                        <p class="text-slate-600 leading-7">
                            {{ $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 120) }}
                        </p>
                    </div>
                </div>
            @empty
                <div class="md:col-span-3 text-center text-slate-500">
                    Belum ada berita dipublikasikan.
                </div>
            @endforelse
        </div>

        <div class="mt-8">
            {{ $posts->links() }}
        </div>
    </section>
@endsection