@extends('layouts.front.app')

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

@section('meta')
@if($blog->meta_description)
<meta name="description" content="{{ $blog->meta_description }}">
@endif
@if($blog->meta_keywords)
<meta name="keywords" content="{{ $blog->meta_keywords }}">
@endif
@endsection
@section('content')
<x-common.page-banner :title="$blog->title">
    @if($blog->short_description)
    <p class="mt-4 text-base leading-relaxed text-muted-foreground sm:text-lg">
        {{ $blog->short_description }}
    </p>
    @endif
</x-common.page-banner>

<main class="container pb-16 space-y-10">
    <div class="max-w-6xl mx-auto">
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">
            @if($blog->image_url)
            <div class="lg:col-span-5">
                <div class="sticky top-24 relative w-full overflow-hidden rounded-2xl shadow-card border border-border bg-card">
                    <img src="{{ $blog->image_url }}" alt="{{ $blog->title }}" class="w-full h-auto object-cover" />
                </div>
            </div>

            <div class="lg:col-span-7">
                <article class="prose prose-slate dark:prose-invert max-w-none">
                    {!! $blog->content !!}
                </article>
            </div>
            @else
            <div class="lg:col-span-12">
                <article class="prose prose-slate dark:prose-invert max-w-none">
                    {!! $blog->content !!}
                </article>
            </div>
            @endif
        </div>
    </div>
</main>
@endsection