@component('layouts.app', [
    'title' => $post['title'],
    'metaDescription' => $post['excerpt'],
])
    @include('partials.page-hero', [
        'eyebrow' => $post['category'] . ' · ' . $post['date'],
        'title' => $post['title'],
        'subtitle' => $post['excerpt'],
    ])

    <section class="pb-20 dark:bg-ink lg:pb-28">
        <div class="mx-auto max-w-3xl px-6">
            <a href="{{ route('blog') }}" class="reveal mb-8 inline-flex items-center gap-2 text-sm font-semibold text-slate-500 transition hover:text-primary dark:text-slate-400 dark:hover:text-secondary">
                <i class="fa-solid fa-arrow-left text-xs" aria-hidden="true"></i> Back to Blog
            </a>

            <div class="reveal mb-8 aspect-[16/9] overflow-hidden rounded-2xl">
                <img src="https://picsum.photos/seed/{{ $post['img'] }}/1000/560"
                     srcset="https://picsum.photos/seed/{{ $post['img'] }}/700/392 700w, https://picsum.photos/seed/{{ $post['img'] }}/1000/560 1000w"
                     sizes="(min-width: 768px) 700px, 100vw"
                     width="1000" height="560" alt="{{ $post['title'] }}"
                     class="h-full w-full object-cover" loading="lazy">
            </div>

            <div class="reveal mb-8 flex flex-wrap items-center justify-between gap-4 border-b border-slate-100 pb-6 dark:border-white/10">
                <div class="flex items-center gap-3">
                    <span class="grid h-11 w-11 flex-shrink-0 place-items-center rounded-full bg-primary/10 text-sm font-bold text-primary dark:bg-secondary/10 dark:text-secondary">
                        {{ collect(explode(' ', $post['author']))->map(fn ($n) => mb_substr($n, 0, 1))->join('') }}
                    </span>
                    <div>
                        <p class="text-sm font-semibold text-slate-800 dark:text-white">{{ $post['author'] }}</p>
                        <p class="text-xs text-slate-500 dark:text-slate-400">{{ $post['authorRole'] }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-4 text-xs text-slate-500 dark:text-slate-400">
                    <span><i class="fa-regular fa-calendar mr-1.5 text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>{{ $post['date'] }}</span>
                    <span><i class="fa-regular fa-clock mr-1.5 text-secondary-a11y dark:text-secondary" aria-hidden="true"></i>{{ $post['readTime'] }}</span>
                </div>
            </div>

            <article class="reveal prose prose-slate max-w-none dark:prose-invert">
                @foreach ($post['body'] as $paragraph)
                    <p class="mb-5 text-[15px] leading-relaxed text-slate-600 dark:text-slate-300">{{ $paragraph }}</p>
                @endforeach
            </article>

            <!-- Share -->
            <div class="reveal mt-10 flex flex-wrap items-center gap-3 border-y border-slate-100 py-6 dark:border-white/10">
                <span class="text-xs font-bold uppercase tracking-wide text-slate-400 dark:text-slate-500">Share this article</span>
                @foreach ([
                    ['icon' => 'fa-brands fa-facebook-f', 'label' => 'Facebook'],
                    ['icon' => 'fa-brands fa-x-twitter', 'label' => 'X (Twitter)'],
                    ['icon' => 'fa-brands fa-linkedin-in', 'label' => 'LinkedIn'],
                    ['icon' => 'fa-solid fa-link', 'label' => 'Copy Link'],
                ] as $share)
                    <button type="button" aria-label="Share on {{ $share['label'] }}"
                            onclick="window.showToast && window.showToast('Link Ready to Share', 'Sharing to {{ $share['label'] }} would open here.', 'fa-share-nodes')"
                            class="grid h-11 w-11 place-items-center rounded-full border border-slate-200 text-slate-500 transition duration-300 hover:border-primary hover:text-primary dark:border-white/10 dark:text-slate-300 dark:hover:border-secondary dark:hover:text-secondary">
                        <i class="{{ $share['icon'] }}" aria-hidden="true"></i>
                    </button>
                @endforeach
            </div>

            <!-- Related posts -->
            @if ($related->count())
                <div class="mt-12">
                    <h2 class="reveal mb-6 font-heading text-lg font-bold text-slate-900 dark:text-white">Related Articles</h2>
                    <div class="grid grid-cols-1 gap-6 sm:grid-cols-3">
                        @foreach ($related as $r)
                            <a href="{{ route('blog.show', $r['slug']) }}"
                               class="reveal group overflow-hidden rounded-2xl border border-slate-100 bg-white shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-white/10 dark:bg-panel">
                                <div class="aspect-[16/10] overflow-hidden">
                                    <img src="https://picsum.photos/seed/{{ $r['img'] }}/400/250" width="400" height="250"
                                         alt="{{ $r['title'] }}" loading="lazy"
                                         class="h-full w-full object-cover transition duration-500 group-hover:scale-110">
                                </div>
                                <div class="p-4">
                                    <span class="text-[11px] font-semibold text-secondary-a11y dark:text-secondary">{{ $r['category'] }}</span>
                                    <h3 class="mt-1 font-heading text-sm font-bold text-slate-900 dark:text-white">{{ $r['title'] }}</h3>
                                </div>
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>
    </section>

    @include('frontend.partials.home.cta')
@endcomponent