{{-- Article detail (PRD §16.1, MP §11.4): breadcrumbs, cover, meta, content, tags, share, related, sticky contact. --}}
@php($cover = $article->getFirstMedia(\App\Domain\Media\MediaCollection::Cover->value))
<x-layouts.site :seo="$seo" :sticky-contact="true" :preview="$preview">
    <article>
        <div class="container-site pt-6"><x-breadcrumbs :trail="$breadcrumbs" /></div>
        <header class="container-site max-w-4xl pb-8 pt-6 lg:pt-10">
            <p class="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-muted">
                @if ($article->category)
                    <a href="{{ route('insights.category', $article->category->slug) }}" class="no-underline"><x-tag>{{ $article->category->name }}</x-tag></a>
                @endif
                @if ($article->published_at)<time datetime="{{ $article->published_at->toDateString() }}">{{ $article->published_at->format('j F Y') }}</time>@endif
                <span>{{ __('portfolio.ui.min_read', ['minutes' => $article->readingTime()]) }}</span>
            </p>
            <h1 class="mt-4 text-h1">{{ $article->title }}</h1>
            @if ($article->excerpt)<p class="mt-5 text-lead text-muted">{{ $article->excerpt }}</p>@endif
            <p class="mt-6 text-sm">{{ __('portfolio.ui.by_author', ['name' => $article->author->name]) }}@if ($article->author->title) · <span class="text-muted">{{ $article->author->title }}</span>@endif</p>
        </header>
        @if ($cover)
            <div class="container-site max-w-5xl">
                <x-media.image :media="$cover" conversion="hero" :priority="true" sizes="(min-width: 1024px) 1000px, 100vw" class="w-full rounded-[var(--radius-card)] object-cover" />
            </div>
        @endif
        <div class="container-site py-10">
            <x-rich-text :html="$article->content" class="mx-auto" />
        </div>
        @include('partials.blocks', ['blocks' => $blocks, 'location' => 'article', 'allowHeroH1' => false])
        <footer class="container-site mx-auto max-w-[var(--container-prose)] space-y-6 border-t border-line py-8">
            @if ($article->topics->isNotEmpty())
                <ul class="flex flex-wrap gap-2">
                    @foreach ($article->topics as $topic)
                        <li><a href="{{ route('insights.index', ['tag' => $topic->slug]) }}" class="no-underline"><x-tag>{{ $topic->name }}</x-tag></a></li>
                    @endforeach
                </ul>
            @endif
            <x-share-links :url="route('insights.show', $article->slug)" :title="$article->title" />
        </footer>
    </article>

    @if ($related->isNotEmpty())
        <section class="section-y bg-surface" aria-labelledby="related-articles">
            <div class="container-site">
                <h2 id="related-articles" class="mb-8 text-h2">{{ __('portfolio.ui.related_articles') }}</h2>
                <div class="grid-cards">
                    @foreach ($related as $item)<x-article-card :article="$item" source="related" />@endforeach
                </div>
            </div>
        </section>
    @endif
</x-layouts.site>