@extends('layouts.app')
@section('title', $post->judul)
@section('meta_description', $post->excerpt)

@section('content')
<div class="bg-primary py-10">
    <div class="max-w-4xl mx-auto px-4">
        <nav class="text-blue-200 text-sm mb-3">
            <a href="{{ route('home') }}" class="hover:text-white">Beranda</a> <span class="mx-2">/</span>
            <a href="{{ route('berita.index') }}" class="hover:text-white">Berita</a> <span class="mx-2">/</span>
            <span class="text-white line-clamp-1">{{ $post->judul }}</span>
        </nav>
    </div>
</div>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    <article class="card overflow-visible">
        @if($post->foto_url)
            <img src="{{ $post->foto_url }}" alt="{{ $post->judul }}" class="w-full aspect-[16/7] object-cover rounded-t-xl">
        @endif
        <div class="p-8">
            <div class="flex items-center gap-3 mb-4">
                <span class="badge badge-blue">Berita</span>
                <span class="text-sm text-gray-400">{{ $post->tanggal->translatedFormat('d F Y') }}</span>
                @if($post->penulis)
                    <span class="text-sm text-gray-400">— {{ $post->penulis }}</span>
                @endif
            </div>
            <h1 class="text-2xl md:text-3xl font-bold text-primary mb-6">{{ $post->judul }}</h1>
            <div class="prose prose-blue max-w-none text-gray-600 leading-relaxed">
                {!! nl2br(e($post->isi)) !!}
            </div>
        </div>
    </article>

    {{-- Related Posts --}}
    @if($related->count() > 0)
    <div class="mt-12">
        <h2 class="text-xl font-semibold text-primary mb-6">Berita Lainnya</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
            @foreach($related as $rel)
            <a href="{{ route('berita.show', $rel->slug) }}" class="card group block p-4">
                <p class="text-xs text-gray-400 mb-1">{{ $rel->tanggal->translatedFormat('d F Y') }}</p>
                <h3 class="font-semibold text-text-main group-hover:text-secondary transition-colors text-sm line-clamp-2">{{ $rel->judul }}</h3>
            </a>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endsection
