@extends('store.layouts.app')

@section('title', 'Categories')
@section('meta_description', 'Browse categories – ' . ($store_name ?? config('app.name')))

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <h1 class="text-2xl font-bold text-gray-800 mb-6">Categories</h1>
    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
        @forelse($categories as $category)
        <a href="{{ route('categories.show', $category->slug) }}" class="card p-6 text-center group hover:border-primary/30 transition">
            @if($category->image)
            <img src="{{ \App\Helpers\ImageHelper::urlOrPlaceholder($category->image) }}" alt="{{ $category->name }}" class="w-20 h-20 mx-auto rounded-2xl object-cover group-hover:scale-105 transition" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
            @else
            <div class="w-20 h-20 mx-auto rounded-2xl bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary/20 transition">
                <i class="fas fa-leaf text-3xl"></i>
            </div>
            @endif
            <h2 class="mt-3 font-semibold text-gray-800 group-hover:text-primary transition">{{ $category->name }}</h2>
            @if($category->activeChildren->isNotEmpty())
            <p class="text-xs text-gray-500 mt-1">{{ $category->activeChildren->count() }} subcategories</p>
            @endif
        </a>
        @empty
        <p class="col-span-full text-gray-500">No categories yet.</p>
        @endforelse
    </div>
</div>
@endsection