@extends('layouts.public')

@section('title', $post->title . ' - ' . config('app.name'))
@section('meta_description', $post->meta_description ?? Str::limit(strip_tags($post->content), 160))

@push('schema')
<script type="application/ld+json">
{!! json_encode(app(\App\Services\SchemaService::class)->generateArticle($post)) !!}
</script>
@endpush

@section('content')
<x-page-hero :title="$post->title" compact>
    @if($post->category)
    <span class="inline-flex items-center px-3 py-1 rounded text-xs font-semibold bg-white/15 text-white mb-4">
        {{ $post->category->name }}
    </span>
    @endif
</x-page-hero>

<section class="section-spacing bg-firm-surface border-t border-slate-200">
    <article class="firm-container max-w-3xl">
        @if($post->featured_image)
        <div class="mb-8 rounded-lg overflow-hidden border border-slate-200">
            <img src="{{ $post->featured_image_url }}" 
                 alt="{{ $post->title }}" 
                 class="w-full h-auto">
        </div>
        @endif

        <p class="text-sm text-slate-500 mb-6">
            <time datetime="{{ $post->published_at?->toIso8601String() }}">
                Published {{ $post->published_at?->format('F j, Y') }}
            </time>
        </p>

        <div class="firm-card">
            <div class="prose-firm prose-lg max-w-none">
                {!! $post->content !!}
            </div>

            <div class="mt-10 pt-6 border-t border-slate-200">
                <a href="{{ route('blog.index') }}" class="btn-secondary inline-flex items-center">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                    </svg>
                    Back to Blog
                </a>
            </div>
        </div>
    </article>
</section>
@endsection