{{--
    Blog post — uses ContentLayout.
--}}
@extends('layouts.nova.content-layout')

@php
    $hero_title = $post->title;
@endphp

@push('head')
    {{-- Article structured data --}}
    <script type="application/ld+json">
    {!! json_encode([
        '@context'      => 'https://schema.org',
        '@type'         => 'Article',
        'headline'      => $post->title,
        'datePublished' => $post->published_at?->toIso8601String(),
        'dateModified'  => $post->updated_at?->toIso8601String(),
        'author'        => [
            '@type' => 'Organization',
            'name'  => 'Skinbase',
        ],
        'publisher'     => [
            '@type' => 'Organization',
            'name'  => 'Skinbase',
        ],
        'description'   => $post->meta_description ?: $post->excerpt ?: '',
        'mainEntityOfPage' => $post->url,
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}
    </script>
@endpush

@section('page-content')

<article class="max-w-3xl">
    @if($post->featured_image)
        <div class="rounded-xl overflow-hidden mb-8">
            <img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full" />
        </div>
    @endif

    @if($post->published_at)
        <time class="block text-sm text-white/40 mb-4" datetime="{{ $post->published_at->toIso8601String() }}">
            {{ $post->published_at->format('F j, Y') }}
        </time>
    @endif

    <div class="prose prose-invert prose-headings:text-white prose-a:text-sky-400 prose-p:text-white/70 max-w-none">
        {!! $post->body !!}
    </div>

    <div class="mt-12 pt-8 border-t border-white/10">
        <a href="/blog" class="inline-flex items-center gap-2 text-sm text-sky-400 hover:text-sky-300 transition-colors">
            <i class="fa-solid fa-arrow-left text-xs"></i>
            Back to Blog
        </a>
    </div>
</article>

@endsection