@extends('layouts.master')

@section('content')
<div class="container mx-auto px-4 py-12">
    <!-- Title -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-extrabold text-gray-800 tracking-tight mb-4">Explore Our Categories</h1>
        <p class="text-gray-600 text-lg">Dive into a world of knowledge, tips, and insights curated just for you.</p>
    </div>

    <!-- category Grid -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
        @foreach ($categories as $category)
        <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300">
            <!-- Image Section -->
            <img 
                src="{{ $category->image_url }}" 
                alt="{{ $category->title }}" 
                class="w-full h-56 object-cover">
            
            <!-- Content Section -->
            <div class="p-6">
                <h2 class="text-2xl font-semibold text-gray-800 mb-3">
                    {{ $category->title }}
                </h2>
                <p class="text-gray-600 mb-5 text-sm leading-relaxed">
                    {{ Str::limit($category->description, 120) }}
                </p>
                <a 
                    href="{{ route('categories.show', $category->id) }}" 
                    class="inline-block text-blue-600 font-medium text-sm hover:text-blue-800 transition duration-200">
                    Read More →
                </a>
            </div>

            <!-- Footer Section -->
            <div class="border-t px-6 py-3 flex justify-between items-center bg-gray-50">
                <span class="text-gray-500 text-sm">{{ $category->created_at->format('M d, Y') }}</span>
                {{-- <span class="text-gray-500 text-sm">{{ $category->author->name }}</span> --}}
            </div>
        </div>
        @endforeach
    </div>

    <!-- Pagination -->
    <div class="mt-12">
        {{ $categories->links('pagination::tailwind') }}
    </div>
</div>
@endsection