@php($seoHead = $category->seo_head)
@extends('layouts.app')

@section('content')
    <div class="max-w-6xl mx-auto px-4 py-10">
        <h1 class="font-display text-4xl font-bold text-[var(--color-brand)] mb-2">{{ $category->name }}</h1>
        @if($category->description)
            <p class="text-gray-600 mb-8">{{ $category->description }}</p>
        @endif

        <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
            @foreach($posts as $post)
                <a href="{{ \App\Http\Controllers\ContentController::encodeUri($post->uri) }}"
                   class="block bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden hover:shadow-md transition">
                    @if($post->featured_image_path)
                        <img src="/{{ ltrim($post->featured_image_path, '/') }}" alt="{{ $post->title }}" class="w-full h-44 object-cover">
                    @endif
                    <div class="p-5">
                        <h2 class="font-display text-lg font-bold text-[var(--color-brand)] mb-2 leading-snug">{{ $post->title }}</h2>
                        <div class="text-sm text-gray-600 line-clamp-3">{!! \Illuminate\Support\Str::limit(strip_tags($post->excerpt ?: $post->content), 140) !!}</div>
                    </div>
                </a>
            @endforeach
        </div>

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