@extends('layouts.public')
@section('title', 'Blog | Anywhere Phone Repair')
@section('content')
<div class="bg-zinc-50 py-16 flex-1">
    <div class="container mx-auto px-4 md:px-8">
        <h1 class="text-3xl md:text-5xl font-black text-zinc-900 mb-12 tracking-tight text-center">Latest News & Tips</h1>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @forelse($posts as $post)
                <a href="{{ route('public.blog.show', $post->slug) }}" class="bg-white border border-zinc-200 rounded-3xl overflow-hidden hover:shadow-xl transition-all">
                    <div class="aspect-[4/3] bg-zinc-200"></div>
                    <div class="p-6">
                        <p class="text-xs font-bold text-zinc-400 uppercase tracking-widest mb-2">{{ \Carbon\Carbon::parse($post->published_at)->format('M d, Y') }}</p>
                        <h3 class="font-bold text-zinc-900 text-lg leading-tight mb-3">{{ $post->title }}</h3>
                        <p class="text-zinc-500 text-sm font-medium line-clamp-3">{{ $post->excerpt }}</p>
                    </div>
                </a>
            @empty
                <div class="col-span-full text-center py-12 text-zinc-500 font-medium">No posts available.</div>
            @endforelse
        </div>
        <div class="mt-12">
            {{ $posts->links() }}
        </div>
    </div>
</div>
@endsection