@extends('layouts.marketing')

@section('title', ($activeCategory ? $activeCategory->name.' — ' : '').'Blog · '.config('app.name'))
@section('meta_description', 'Articles, guides and updates from the CC Publisher team.')

@section('content')
<div class="mx-auto max-w-5xl px-4 py-14 sm:px-6">
    <div class="text-center">
        <h1 class="text-4xl font-extrabold tracking-tight text-white sm:text-5xl">The CC Publisher Blog</h1>
        <p class="mx-auto mt-3 max-w-xl text-lg text-slate-400">Guides, product updates and tips on automating your social publishing.</p>
    </div>

    @if ($categories->isNotEmpty())
        <div class="mt-8 flex flex-wrap items-center justify-center gap-2">
            <a href="{{ route('blog.index') }}" class="rounded-full px-4 py-1.5 text-sm font-medium {{ ! $activeCategory ? 'bg-violet-600 text-white' : 'border border-white/10 text-slate-400 hover:text-white' }}">All</a>
            @foreach ($categories as $c)
                <a href="{{ route('blog.index', ['category' => $c->slug]) }}" class="rounded-full px-4 py-1.5 text-sm font-medium {{ $activeCategory?->id === $c->id ? 'bg-violet-600 text-white' : 'border border-white/10 text-slate-400 hover:text-white' }}">{{ $c->name }}</a>
            @endforeach
        </div>
    @endif

    @if ($articles->count())
        <div class="mt-12 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach ($articles as $a)
                <a href="{{ route('blog.show', $a->slug) }}" class="group flex flex-col overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] transition hover:border-white/20 hover:bg-white/[0.06]">
                    @if ($a->coverUrl())
                        <img src="{{ $a->coverUrl() }}" alt="" class="aspect-video w-full object-cover">
                    @else
                        <div class="aspect-video w-full bg-gradient-to-br from-violet-600/25 to-blue-500/15"></div>
                    @endif
                    <div class="flex flex-1 flex-col p-5">
                        @if ($a->category)<span class="mb-2 w-fit rounded-full bg-violet-500/15 px-2.5 py-0.5 text-[11px] font-semibold text-violet-300">{{ $a->category->name }}</span>@endif
                        <h2 class="text-lg font-bold leading-snug text-white group-hover:text-violet-300">{{ $a->title }}</h2>
                        <p class="mt-2 line-clamp-3 flex-1 text-sm text-slate-400">{{ $a->summary() }}</p>
                        <div class="mt-4 flex items-center gap-2 text-xs text-slate-500">
                            <span>{{ $a->published_at?->format('M j, Y') }}</span><span>·</span><span>{{ $a->readingMinutes() }} min read</span>
                        </div>
                    </div>
                </a>
            @endforeach
        </div>
        <div class="mt-10">{{ $articles->links() }}</div>
    @else
        <div class="mt-16 rounded-2xl border border-dashed border-white/10 bg-white/[0.02] py-16 text-center text-slate-500">
            No articles published yet — check back soon.
        </div>
    @endif
</div>
@endsection