@extends('layouts.public')

@section('title', 'Blog | CEPI Pakistan')

@section('content')
<section class="bg-[linear-gradient(135deg,#071330_0%,#0c1f4f_55%,#132868_100%)] py-20 text-white">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <p class="text-sm font-semibold uppercase tracking-[0.3em] text-amber-300">CEPI Blog</p>
        <div class="mt-5 grid gap-8 lg:grid-cols-[1fr,320px] lg:items-end">
            <div>
                <h1 class="text-4xl font-extrabold leading-tight sm:text-5xl">Insights, exam strategy, and Pakistani current-affairs guidance for serious aspirants.</h1>
                <p class="mt-6 max-w-3xl text-lg leading-8 text-white/75">
                    Read CEPI articles on CSS, PMS, one-paper exams, Pakistan Affairs, current affairs, essay writing, and disciplined preparation.
                </p>
            </div>

            <form method="GET" action="{{ route('blog.index') }}" class="rounded-[28px] border border-white/10 bg-white/10 p-5 backdrop-blur">
                <label class="mb-3 block text-sm font-semibold text-white/80">Search blog</label>
                <div class="flex gap-3">
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="CSS, current affairs, interview..." class="w-full rounded-2xl border border-white/10 bg-white px-4 py-3 text-sm text-slate-700 shadow-sm focus:border-amber-300 focus:ring-amber-300">
                    <button type="submit" class="rounded-2xl bg-amber-400 px-5 py-3 text-sm font-semibold text-slate-950 transition hover:bg-amber-300">Search</button>
                </div>
            </form>
        </div>
    </div>
</section>

<section class="bg-slate-50 py-16">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        @if($featuredPost)
            <div class="mb-12 overflow-hidden rounded-[32px] border border-slate-200 bg-white shadow-theme-lg">
                <div class="grid gap-0 lg:grid-cols-[1.05fr,0.95fr]">
                    <div class="order-2 p-8 lg:order-1 lg:p-10">
                        <p class="text-sm font-semibold uppercase tracking-[0.24em] text-brand-600">Featured Article</p>
                        <h2 class="mt-4 text-3xl font-extrabold leading-tight text-slate-900">{{ $featuredPost->title }}</h2>
                        <p class="mt-4 text-base leading-8 text-slate-600">{{ $featuredPost->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($featuredPost->detail), 220) }}</p>

                        <div class="mt-6 flex flex-wrap items-center gap-5 text-sm text-slate-500">
                            <span>{{ $featuredPost->author?->name ?: 'CEPI Editorial' }}</span>
                            <span>{{ $featuredPost->published_at?->format('d M Y') }}</span>
                        </div>

                        <a href="{{ route('blog.show', $featuredPost->slug) }}" class="mt-8 inline-flex items-center rounded-2xl bg-brand-600 px-5 py-3 text-sm font-semibold text-white transition hover:bg-brand-700">
                            Read Article
                        </a>
                    </div>

                    <div class="order-1 min-h-[280px] bg-slate-100 lg:order-2">
                        @if($featuredPost->featuredImage)
                            <img src="{{ $featuredPost->featuredImage->urlFor('large') ?? $featuredPost->featuredImage->urlFor() }}" alt="{{ $featuredPost->featuredImage->alt_text ?: $featuredPost->title }}" class="h-full w-full object-cover">
                        @else
                            <div class="flex h-full items-center justify-center bg-[linear-gradient(135deg,#eff6ff_0%,#dbeafe_45%,#e0e7ff_100%)] text-brand-700">
                                <span class="rounded-2xl border border-white/60 bg-white/75 px-4 py-2 text-sm font-semibold">CEPI Blog</span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        @endif

        <div class="mb-6 flex items-center justify-between gap-4">
            <div class="text-sm text-slate-500">
                @if(request('search'))
                    Search results for <span class="font-semibold text-slate-700">"{{ request('search') }}"</span>
                @else
                    Latest articles for Pakistani competitive exam preparation
                @endif
            </div>
            <div class="text-sm text-slate-500">{{ $posts->total() }} article{{ $posts->total() === 1 ? '' : 's' }}</div>
        </div>

        @if ($posts->isNotEmpty())
            <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
                @foreach ($posts as $post)
                    <article class="overflow-hidden rounded-[30px] border border-slate-200 bg-white shadow-theme-xs transition hover:-translate-y-1 hover:shadow-theme-sm">
                        <a href="{{ route('blog.show', $post->slug) }}" class="block aspect-[16/10] overflow-hidden bg-slate-100">
                            @if ($post->featuredImage)
                                <img src="{{ $post->featuredImage->urlFor('medium') ?? $post->featuredImage->urlFor() }}" alt="{{ $post->featuredImage->alt_text ?: $post->title }}" class="h-full w-full object-cover transition duration-500 hover:scale-105">
                            @else
                                <div class="flex h-full items-center justify-center bg-[linear-gradient(135deg,#eff6ff_0%,#dbeafe_45%,#e0e7ff_100%)] text-brand-700">
                                    <span class="rounded-2xl border border-white/60 bg-white/70 px-4 py-2 text-sm font-semibold">CEPI Blog</span>
                                </div>
                            @endif
                        </a>

                        <div class="p-6">
                            <div class="flex flex-wrap items-center gap-3 text-xs font-semibold uppercase tracking-[0.18em] text-slate-400">
                                <span>{{ $post->published_at?->format('d M Y') }}</span>
                                <span>{{ $post->author?->name ?: 'CEPI Editorial' }}</span>
                            </div>

                            <h2 class="mt-4 text-2xl font-bold leading-snug text-slate-900">
                                <a href="{{ route('blog.show', $post->slug) }}" class="transition hover:text-brand-700">{{ $post->title }}</a>
                            </h2>
                            <p class="mt-4 text-sm leading-7 text-slate-600">{{ $post->excerpt ?: \Illuminate\Support\Str::limit(strip_tags($post->detail), 145) }}</p>

                            <a href="{{ route('blog.show', $post->slug) }}" class="mt-6 inline-flex items-center text-sm font-semibold text-brand-600 hover:text-brand-700">
                                Continue reading
                            </a>
                        </div>
                    </article>
                @endforeach
            </div>

            <div class="mt-10">
                {{ $posts->links() }}
            </div>
        @else
            <div class="rounded-[30px] border border-dashed border-slate-300 bg-white px-6 py-16 text-center text-sm text-slate-500">
                No blog articles matched your search.
            </div>
        @endif
    </div>
</section>
@endsection