@extends('public.layout')
@section('title', $post->title)
@section('content')

<section class="max-w-4xl mx-auto px-6 py-24">
    <a href="{{ route('blog') }}" class="text-sm text-gray-400 hover:text-gray-700 transition">← Kembali</a>

    <div class="mt-8">
        <div class="flex items-center gap-3 mb-4">
            <span class="text-xs px-2 py-0.5 rounded-full bg-gray-100 text-gray-600">{{ ucfirst($post->category) }}</span>
            <span class="text-xs text-gray-400">{{ $post->published_at->format('d M Y') }}</span>
        </div>
        <h1 class="text-4xl font-bold mb-3">{{ $post->title }}</h1>
        <p class="text-sm text-gray-400 mb-10">Oleh {{ $post->author->name }}</p>

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

@endsection