@extends('layouts.public')

@section('title', 'Blog - ' . config('app.name'))
@section('meta_description', 'Legal insights and articles from Shavhani Attorneys.')

@section('content')
<x-page-hero title="Legal Insights" subtitle="Practical articles on your rights, legal processes, and matters we handle at the firm." image="images/sections/justice.jpg" />

<section class="section-spacing bg-firm-surface border-t border-slate-200">
    <div class="firm-container">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        @forelse($posts as $index => $post)
        <a href="{{ route('blog.show', $post->slug) }}" 
           class="group block focus:outline-none focus:ring-2 focus:ring-firm-red-500 rounded-lg">
            <article class="firm-card overflow-hidden p-0 hover:border-firm-red-500 transition-colors">
                @if($post->featured_image)
                <img src="{{ $post->featured_image_url }}" 
                     alt="{{ $post->title }}" 
                     class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-500">
                @endif
                <div class="p-6">
                    @if($post->category)
                    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold bg-slate-100 text-firm-ink mb-2">
                        {{ $post->category->name }}
                    </span>
                    @endif
                    <h2 class="text-xl font-semibold text-slate-900 mt-1 mb-3 group-hover:text-firm-red-500 transition-colors">
                        {{ $post->title }}
                    </h2>
                    <p class="text-slate-600 mb-4">{{ Str::limit(strip_tags($post->content), 120) }}</p>
                    <div class="flex items-center justify-between text-sm text-slate-500">
                        <time datetime="{{ $post->published_at?->toIso8601String() }}">
                            {{ $post->published_at?->format('F j, Y') }}
                        </time>
                        <span class="inline-flex items-center text-firm-red-500 font-semibold">
                            Read more
                            <svg class="ml-1 w-4 h-4 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                            </svg>
                        </span>
                    </div>
                </div>
            </article>
        </a>
        @empty
        <div class="col-span-full text-center py-12">
            <p class="text-slate-600">Blog posts coming soon.</p>
        </div>
        @endforelse
    </div>

    @if($posts->hasPages())
    <div class="mt-12">
        {{ $posts->links() }}
    </div>
    @endif
</div>
</section>
@endsection