@extends('layouts.public')

@section('title', ($post->seo_title ?: $post->title) . ' | CEPI Pakistan')

@section('content')
<section class="bg-[linear-gradient(135deg,#071330_0%,#0c1f4f_55%,#132868_100%)] py-16 text-white">
    <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
        <a href="{{ route('blog.index') }}" class="text-sm font-semibold uppercase tracking-[0.24em] text-amber-300 transition hover:text-amber-200">Back to Blog</a>
        <div class="mt-6 flex flex-wrap items-center gap-3 text-xs font-semibold uppercase tracking-[0.18em] text-white/55">
            <span>{{ $post->author?->name ?: 'CEPI Editorial' }}</span>
            <span>{{ $post->published_at?->format('d M Y') }}</span>
        </div>
        <h1 class="mt-5 text-4xl font-extrabold leading-tight sm:text-5xl">{{ $post->title }}</h1>
        @if($post->excerpt)
            <p class="mt-6 max-w-4xl text-lg leading-8 text-white/75">{{ $post->excerpt }}</p>
        @endif
    </div>
</section>

<section class="bg-white py-14">
    <div class="mx-auto grid max-w-7xl gap-10 px-4 sm:px-6 lg:grid-cols-[minmax(0,1fr),320px] lg:px-8">
        <article class="min-w-0">
            @if($post->featuredImage)
                <div class="overflow-hidden rounded-[32px] border border-slate-200 bg-slate-100 shadow-theme-xs">
                    <img src="{{ $post->featuredImage->urlFor('large') ?? $post->featuredImage->urlFor() }}" alt="{{ $post->featuredImage->alt_text ?: $post->title }}" class="h-full w-full object-cover">
                </div>
            @endif

            <div class="prose prose-slate mt-10 max-w-none prose-headings:font-extrabold prose-headings:tracking-tight prose-p:leading-8 prose-li:leading-8 prose-blockquote:border-l-brand-500 prose-blockquote:text-slate-700">
                {!! $post->detail !!}
            </div>
        </article>

        <aside>
            <div class="sticky top-28 space-y-6">
                <div class="rounded-[28px] border border-slate-200 bg-slate-50 p-6 shadow-theme-xs">
                    <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Article Summary</p>
                    <div class="mt-5 space-y-4 text-sm text-slate-600">
                        <div>
                            <p class="font-semibold text-slate-900">Published</p>
                            <p class="mt-1">{{ $post->published_at?->format('d M Y, h:i A') }}</p>
                        </div>
                        <div>
                            <p class="font-semibold text-slate-900">Author</p>
                            <p class="mt-1">{{ $post->author?->name ?: 'CEPI Editorial' }}</p>
                        </div>
                        @if($post->seo_keywords)
                            <div>
                                <p class="font-semibold text-slate-900">Topics</p>
                                <p class="mt-1">{{ $post->seo_keywords }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                @if($relatedPosts->isNotEmpty())
                    <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-theme-xs">
                        <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">More from CEPI</p>
                        <div class="mt-5 space-y-5">
                            @foreach($relatedPosts as $related)
                                <a href="{{ route('blog.show', $related->slug) }}" class="block rounded-2xl border border-slate-200 p-4 transition hover:border-brand-200 hover:bg-brand-50/40">
                                    <p class="text-sm font-semibold leading-6 text-slate-900">{{ $related->title }}</p>
                                    <p class="mt-2 text-xs uppercase tracking-[0.18em] text-slate-400">{{ $related->published_at?->format('d M Y') }}</p>
                                </a>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </aside>
    </div>
</section>
@endsection