@push('structured-data')
    {{-- Article schema (PRD 10.24 / 14.13) --}}
    <script type="application/ld+json">
        {!! json_encode(array_filter([
            '@context' => 'https://schema.org',
            '@type' => 'BlogPosting',
            'headline' => $post->title,
            'description' => $post->short_description,
            'image' => $post->featuredImageUrl(),
            'datePublished' => $post->published_at?->toIso8601String(),
            'dateModified' => $post->updated_at?->toIso8601String(),
            'author' => [
                '@type' => 'Person',
                'name' => $post->author_name,
            ],
            'publisher' => [
                '@type' => 'Organization',
                'name' => config('app.name'),
            ],
            'mainEntityOfPage' => [
                '@type' => 'WebPage',
                '@id' => route('blog.show', $post),
            ],
            'keywords' => $post->tags->pluck('name')->implode(', ') ?: null,
        ]), JSON_UNESCAPED_SLASHES) !!}
    </script>
@endpush

<x-layout :seo="$seo">
    <article>
        {{-- --- Header (PRD 10.7 / 10.8) --------------------------------- --}}
        <header class="section pb-0 bg-pattern-grid" style="background: var(--gradient-white-to-purple);">
            <div class="container-site">
                <x-breadcrumb :items="[
                    ['label' => 'Blog', 'url' => route('blog.index')],
                    ['label' => $post->title],
                ]" />

                <div class="mx-auto" style="max-width: 820px;">
                    @if($post->category)
                        <a
                            href="{{ route('blog.category', $post->category) }}"
                            class="badge rounded-pill px-3 py-2 mb-3 text-decoration-none d-inline-block"
                            style="background: var(--color-light-purple); color: var(--color-primary); font-weight: 600;"
                        >{{ $post->category->name }}</a>
                    @endif

                    <h1 class="hero-heading mb-3" style="font-size: clamp(2rem, 4vw, 3.25rem);">{{ $post->title }}</h1>

                    <p class="mb-4" style="font-size: var(--fs-paragraph); color: var(--color-paragraph);">
                        {{ $post->short_description }}
                    </p>

                    <div class="d-flex flex-wrap align-items-center gap-3 pb-5" style="font-size: var(--fs-small); color: var(--color-paragraph);">
                        <span class="fw-semibold" style="color: var(--color-heading);">{{ $post->author_name }}</span>
                        <span aria-hidden="true">&middot;</span>
                        <time datetime="{{ $post->published_at?->toDateString() }}">{{ $post->published_at?->format('j F Y') }}</time>
                        <span aria-hidden="true">&middot;</span>
                        <span>{{ $post->readingTimeLabel() }}</span>
                        @if($post->updated_at && $post->published_at && $post->updated_at->gt($post->published_at->addDay()))
                            <span aria-hidden="true">&middot;</span>
                            <span>Updated {{ $post->updated_at->format('j M Y') }}</span>
                        @endif
                    </div>
                </div>
            </div>
        </header>

        {{-- --- Featured image ------------------------------------------- --}}
        <div class="container-site">
            <img
                src="{{ $post->featuredImageUrl() }}"
                alt="{{ $post->title }}"
                class="w-100"
                style="border-radius: var(--radius-image); aspect-ratio: 16/9; object-fit: cover;"
                width="1600"
                height="900"
                {{-- Above the fold on this page: eager + high priority so it
                     doesn't hurt Largest Contentful Paint (PRD 13.13). --}}
                fetchpriority="high"
                decoding="async"
            >
        </div>

        {{-- --- Table of contents + body (PRD 10.10) ---------------------- --}}
        <div class="section">
            <div class="container-site">
                <div class="row justify-content-center gx-5 gy-4">
                    @if(!empty($post->table_of_contents))
                        <div class="col-lg-3 order-lg-2">
                            <nav class="article-toc" data-article-toc aria-labelledby="toc-heading">
                                {{-- Collapsible on mobile, sticky on desktop. <details> gives
                                     the collapse behaviour natively, with no JS and correct
                                     semantics; the CSS forces it open above the lg breakpoint. --}}
                                <details class="article-toc__details" open>
                                    <summary id="toc-heading" class="article-toc__summary">
                                        On this page
                                        <i class="fa-solid fa-chevron-down article-toc__chevron" aria-hidden="true"></i>
                                    </summary>
                                    <ul class="article-toc__list">
                                        @foreach($post->table_of_contents as $entry)
                                            <li class="article-toc__item article-toc__item--level-{{ $entry['level'] }}">
                                                <a href="#{{ $entry['id'] }}">{{ $entry['text'] }}</a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </details>
                            </nav>
                        </div>
                    @endif

                    <div class="{{ !empty($post->table_of_contents) ? 'col-lg-8 order-lg-1' : 'col-lg-8' }}">
                        {{-- Article body. The stored HTML comes from the admin's own
                             rich-text editor and is sanitised on save
                             (App\Services\Blog\HtmlSanitizer), which is why it is
                             rendered unescaped here. --}}
                        <div class="article-body" data-article-body>
                            {!! $post->content !!}
                        </div>

                        @if($post->tags->isNotEmpty())
                            <div class="d-flex flex-wrap align-items-center gap-2 mt-5 pt-4 border-top" style="border-color: var(--color-border) !important;">
                                <span style="font-size: var(--fs-small); color: var(--color-paragraph);">Tagged</span>
                                @foreach($post->tags as $tag)
                                    <a
                                        href="{{ route('blog.tag', $tag) }}"
                                        class="badge rounded-pill px-3 py-2 text-decoration-none"
                                        style="background: var(--color-soft-background); color: var(--color-paragraph); border: 1px solid var(--color-border);"
                                    >{{ $tag->name }}</a>
                                @endforeach
                            </div>
                        @endif

                        {{-- Share (PRD 10.16) --}}
                        <x-share-buttons
                            :url="route('blog.show', $post)"
                            :title="$post->title"
                            class="mt-4 pt-4 border-top"
                            style="border-color: var(--color-border) !important;"
                        />
                    </div>
                </div>
            </div>
        </div>
    </article>

    {{-- --- Related articles (PRD 10.15) ------------------------------- --}}
    @if($relatedPosts->isNotEmpty())
        <section class="section" style="background: var(--color-soft-background);">
            <div class="container-site">
                <span class="kicker-rule mb-2 d-inline-flex">Keep Reading</span>
                <h2 class="section-title mb-5">Related articles</h2>
                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
                    @foreach($relatedPosts as $related)
                        <div class="col">
                            <x-blog-card :post="$related" />
                        </div>
                    @endforeach
                </div>
            </div>
        </section>
    @endif

    <x-newsletter-signup />

    <x-cta-banner
        heading="Working on something like this?"
        description="If this article is relevant to a project you're planning, I'm happy to talk it through — no obligation, no sales script."
        :secondary="['label' => 'View portfolio', 'url' => route('portfolio.index')]"
    />

    @push('scripts')
        @vite('resources/js/lib/article-toc.js')
    @endpush
</x-layout>