@extends('layouts.main')

@section('title', $post->title . ' | PPNI DPK BaliMéd')
@section('meta_description', $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 155))
@section('og_title', $post->title . ' | PPNI DPK BaliMéd')
@section('og_description', $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->content), 155))
@section('og_image', $post->image ? asset($post->image) : asset('assets/images/logo-ppni.png'))

@section('content')
<section class="bg-gradient-to-r from-blue-950 via-blue-900 to-blue-700 text-white">
    <div class="max-w-5xl mx-auto px-4 py-20">
        <p class="text-blue-200 font-semibold mb-3">Detail Berita</p>
        <h1 class="text-4xl md:text-5xl font-extrabold mb-4">{{ $post->title }}</h1>
        <p class="text-blue-100 text-lg">
            {{ optional($post->published_at)->format('d F Y') ?? $post->created_at->format('d F Y') }}
        </p>
    </div>
</section>

<section class="max-w-7xl mx-auto px-4 py-16 grid lg:grid-cols-3 gap-10">
    <article class="lg:col-span-2">
        <div class="bg-white rounded-3xl shadow-sm overflow-hidden">
            @if($post->image)
            <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="w-full h-[420px] object-cover">
            @endif

            <div class="p-8">
                @if($post->excerpt)
                <p class="text-lg text-slate-600 leading-8 mb-6 border-l-4 border-blue-700 pl-4 italic">
                    {{ $post->excerpt }}
                </p>
                @endif

                <div class="prose max-w-none text-slate-700 leading-8">
                    {!! $post->content !!}
                </div>

                <div class="mt-8">
                    <a href="{{ route('berita') }}"
                        class="inline-block bg-blue-900 text-white px-5 py-3 rounded-xl hover:bg-blue-800">
                        ← Kembali ke Berita
                    </a>
                </div>
            </div>
        </div>
    </article>

    <aside>
        <div class="bg-white rounded-3xl shadow-sm p-6">
            <h3 class="text-2xl font-bold mb-6">Berita Lainnya</h3>

            <div class="space-y-5">
                @forelse($latestPosts as $item)
                <div class="border-b pb-4 last:border-b-0">
                    <a href="{{ route('berita.show', $item->slug) }}" class="font-bold text-blue-900 hover:underline">
                        {{ $item->title }}
                    </a>
                    <p class="text-sm text-slate-500 mt-1">
                        {{ optional($item->published_at)->format('d M Y') ?? $item->created_at->format('d M Y') }}
                    </p>
                </div>
                @empty
                <p class="text-slate-500">Belum ada berita lainnya.</p>
                @endforelse
            </div>
        </div>
    </aside>
</section>
@endsection