@extends("frontend.layouts.app")

@section("title")
    {{ app_name() }} | {{ $blog->title }}
@endsection

@section("content")
<section class="bg-gray-50 py-16">
    <div class="container mx-auto px-4 max-w-4xl">

        {{-- Featured Image --}}
        <div class="mb-10 rounded-xl overflow-hidden shadow-md">
            <img src="{{ asset($blog->featured_image) }}" alt="{{ $blog->title }}" class="w-full h-96 object-cover">
        </div>

        {{-- Title and Metadata --}}
        <div class="mb-8 text-center">
            <h1 class="text-4xl font-extrabold text-gray-900 leading-tight mb-4">{{ $blog->title }}</h1>
            <p class="text-sm text-gray-500">
                Published on {{ date('F d, Y', strtotime($blog->published_at)) }}
            </p>
        </div>

        {{-- Blog Content --}}
        <article class="prose prose-lg prose-red max-w-none text-gray-800 mx-auto">
            {!! $blog->content !!}
        </article>

        {{-- Optional Tags or Categories --}}
        @if(!empty($blog->tags))
            <div class="mt-12">
                <h4 class="text-lg font-semibold text-gray-700 mb-2">Tags:</h4>
                <div class="flex flex-wrap gap-2">
                    @foreach(explode(',', $blog->tags) as $tag)
                        <span class="inline-block bg-red-100 text-red-700 text-sm px-3 py-1 rounded-full shadow-sm">{{ trim($tag) }}</span>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Back to Blog List --}}
        <div class="mt-12 text-center">
            <a href="{{ route('blog') }}" class="inline-block bg-red-600 hover:bg-red-700 text-white font-medium px-6 py-3 rounded-lg transition duration-300 shadow">
                ← Back to Blogs
            </a>
        </div>

    </div>
</section>
@endsection