@extends('layouts.site')
@section('title', $activeCategory ? $activeCategory->name . ' · Journal' : 'Journal')

@section('content')
    <section class="bg-slate-950 py-14 text-center text-white">
        <p class="text-xs font-bold uppercase tracking-[0.3em] text-gold-400">The Epelcon Journal</p>
        <h1 class="mt-2 font-serif text-4xl font-bold">Stories, rituals & recipes</h1>
        <p class="mx-auto mt-3 max-w-xl px-4 text-slate-300">Insider guides to our rooms, dining, wellness and the little details that make each stay feel like home.</p>
    </section>

    <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6">
        {{-- Category chips --}}
        <div class="no-scrollbar mb-8 flex gap-2 overflow-x-auto pb-1">
            <a href="{{ route('site.blog.index') }}"
               class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ ! $activeCategory ? 'bg-slate-950 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">All stories</a>
            @foreach ($categories as $category)
                <a href="{{ route('site.blog.index', ['category' => $category->slug]) }}"
                   class="shrink-0 rounded-full px-4 py-2 text-xs font-bold {{ $activeCategory && $activeCategory->id === $category->id ? 'bg-slate-950 text-white' : 'bg-white text-slate-600 ring-1 ring-slate-200' }}">
                    {{ $category->name }} <span class="ml-1 text-slate-400">{{ $category->posts_count }}</span>
                </a>
            @endforeach
        </div>

        {{-- Post grid --}}
        <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            @forelse ($posts as $post)
                <article class="group overflow-hidden rounded-3xl bg-white shadow-sm ring-1 ring-slate-200 transition hover:shadow-xl">
                    <a href="{{ route('site.blog.show', $post) }}" class="block">
                        @if ($post->cover_image)
                            <img src="{{ asset($post->cover_image) }}" alt="{{ $post->title }}" class="h-48 w-full object-cover transition group-hover:scale-105">
                        @else
                            <div class="flex h-48 w-full items-center justify-center bg-gradient-to-br from-slate-900 via-slate-800 to-gold-600 text-5xl">📖</div>
                        @endif
                        <div class="p-6">
                            <div class="mb-2 flex items-center gap-2 text-[10px] font-bold uppercase tracking-wider">
                                @if ($post->category)
                                    <span class="rounded-full bg-gold-400/20 px-2.5 py-1 text-gold-600">{{ $post->category->name }}</span>
                                @endif
                                <span class="text-slate-400">{{ $post->readingMinutes() }} min read</span>
                            </div>
                            <h2 class="font-serif text-xl font-bold text-slate-900 group-hover:text-gold-600">{{ $post->title }}</h2>
                            @if ($post->excerpt)
                                <p class="mt-2 line-clamp-3 text-sm leading-relaxed text-slate-600">{{ $post->excerpt }}</p>
                            @endif
                            <p class="mt-4 text-xs text-slate-400">
                                {{ $post->author?->name ?? 'Epelcon Editorial' }} · {{ $post->published_at?->format('M j, Y') }}
                            </p>
                        </div>
                    </a>
                </article>
            @empty
                <p class="col-span-full rounded-3xl bg-white p-10 text-center text-slate-400 ring-1 ring-slate-200">No stories published yet. Please check back soon.</p>
            @endforelse
        </div>

        <div class="mt-10">{{ $posts->links() }}</div>
    </section>
@endsection
