@extends('layouts.app')

@section('title', $blog->meta_title ?: $blog->title)
@section('meta_description', $blog->meta_description ?: $blog->excerpt)

@section('content')
<main class="bg-white">
    <article class="pt-24 lg:pt-28 pb-20">
        <div class="container mx-auto px-4 lg:px-8 max-w-4xl">
            <a href="{{ route('home') }}#blog" class="inline-flex items-center gap-2 text-sm font-semibold text-primary-600 hover:text-primary-700 mb-8">
                <i class="fas fa-arrow-left"></i>
                <span>Back to blogs</span>
            </a>

            <div class="mb-8">
                <div class="flex flex-wrap items-center gap-3 text-sm text-gray-500 mb-4">
                    <span class="inline-flex items-center gap-2">
                        <i class="fas fa-calendar-alt text-primary-500"></i>
                        {{ optional($blog->published_at)->format('M j, Y') }}
                    </span>
                    <span class="inline-flex items-center gap-2">
                        <i class="fas fa-user text-primary-500"></i>
                        {{ $blog->author->name ?? 'Angel Care Team' }}
                    </span>
                </div>
                <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 leading-tight">{{ $blog->title }}</h1>
                @if($blog->excerpt)
                <p class="mt-5 text-lg text-gray-600 leading-relaxed">{{ $blog->excerpt }}</p>
                @endif
            </div>

            <img src="{{ $blog->featured_image_url }}"
                 alt="{{ $blog->title }}"
                 class="w-full aspect-[16/9] object-cover rounded-3xl shadow-lg mb-10"
                 loading="eager">

            <div class="prose prose-lg max-w-none prose-a:text-primary-600 prose-headings:text-gray-900">
                {!! $blog->content !!}
            </div>
        </div>
    </article>
</main>
@endsection