@extends('layouts.app')

@section('title', $post['title'] . ' | IBS Blog')
@section('description', $post['description'])

@section('content')

<x-subpage-hero 
    title="{{ $post['title'] }}" 
    description="{{ $post['description'] }}"
/>

<x-breadcrumbs :items="$breadcrumbs" />

<section class="bg-gray-100 py-20">
    <div class="max-w-4xl mx-auto px-6">
        <img src="{{ asset('storage/images/blogs/' . $post->image) }}" alt="{{ $post->title }}" class="w-full h-96 object-cover rounded-lg shadow-lg mb-10" loading="lazy">
        
        <div class="bg-white rounded-lg shadow-lg p-8 prose max-w-none">
            <p class="text-gray-600 text-sm mb-6">{{ $post->published_at->format('F d, Y') }}</p>
            {!! $post->content !!}
        </div>
    </div>
</section>

@endsection