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

@php
    $hero_title = $post->title;
    $seo = \App\Support\Seo\SeoDataBuilder::fromArray(
        app(\App\Support\Seo\SeoFactory::class)->fromViewData(get_defined_vars())
    )
        ->og(
            type: 'article',
            title: $post->meta_title ?: $post->title,
            description: $post->meta_description ?: $post->excerpt ?: '',
            url: $post->url,
            image: $post->featured_image,
        )
        ->addJsonLd([
            '@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,
            'image' => $post->featured_image,
        ])
        ->build();
@endphp

@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