@extends('layouts.guest')

@section('title', $post->title)

@section('content')
<article class="max-w-3xl mx-auto py-12">
    <a href="{{ route('blog') }}" class="text-sm text-indigo-600 font-medium mb-6 inline-block">← {{ __('Back to blog') }}</a>
    <h1 class="text-4xl font-bold mb-4">{{ $post->title }}</h1>
    <p class="text-gray-500 mb-8">{{ $post->published_at?->format('F d, Y') }} · {{ $post->reading_time }} {{ __('min read') }}</p>
    @if($post->image)
        <img src="{{ asset($post->image) }}" alt="{{ $post->title }}" class="w-full rounded-xl mb-8">
    @endif
    <div class="prose prose-lg max-w-none">
        {!! $post->body !!}
    </div>

    @if($related->isNotEmpty())
        <div class="mt-16 pt-8 border-t border-gray-200">
            <h2 class="text-2xl font-bold mb-6">{{ __('Related posts') }}</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($related as $rel)
                    <a href="{{ route('blog.show', $rel) }}" class="group">
                        <div class="bg-white rounded-xl overflow-hidden border border-gray-100 hover:shadow-md transition p-4">
                            <h3 class="font-semibold group-hover:text-indigo-600 transition">{{ $rel->title }}</h3>
                            <p class="text-sm text-gray-500 mt-1 line-clamp-2">{{ $rel->excerpt }}</p>
                        </div>
                    </a>
                @endforeach
            </div>
        </div>
    @endif
</article>
@endsection