@extends('layouts.app')

@section('title', $article->title . ' - JobifyGarden Blog')
@section('description', $article->excerpt ?? Str::limit(strip_tags($article->body), 155))
@section('canonical', route('blog.show', $article))

@push('structured_data')
<script type="application/ld+json">
{!! json_encode([
    '@context' => 'https://schema.org',
    '@type'    => 'BlogPosting',
    'headline' => $article->title,
    'description' => $article->excerpt ?? Str::limit(strip_tags($article->body), 155),
    'datePublished' => $article->published_at->toIso8601String(),
    'dateModified'  => $article->updated_at->toIso8601String(),
    'url' => route('blog.show', $article),
    'publisher' => ['@type' => 'Organization', 'name' => 'JobifyGarden'],
], JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) !!}
</script>
@endpush

@section('content')
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
    <!-- Back -->
    <div class="mb-8">
        <a href="{{ route('blog.index') }}" class="inline-flex items-center text-emerald-600 hover:text-emerald-700 text-sm">
            <svg class="w-4 h-4 mr-1" 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"/>
            </svg>
            Back to Blog
        </a>
    </div>

    <article class="bg-white rounded-lg shadow-sm border border-gray-200 p-8 sm:p-12">
        <header class="mb-8 pb-8 border-b border-gray-200">
            <div class="text-sm text-gray-500 mb-3">{{ $article->published_at->format('F j, Y') }}</div>
            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 leading-tight">{{ $article->title }}</h1>
            @if($article->excerpt)
            <p class="mt-4 text-xl text-gray-600 leading-relaxed">{{ $article->excerpt }}</p>
            @endif
        </header>

        <div class="prose prose-emerald max-w-none text-gray-700 leading-relaxed">
            {!! nl2br(e($article->body)) !!}
        </div>
    </article>
</div>
@endsection