@extends('layouts.app')

@section('title', 'Categories')

@section('content')
<div class="container mx-auto px-4 py-8">
    <x-breadcrumbs :items="[
        ['label' => 'Home', 'url' => route('home')],
        ['label' => 'Categories']
    ]" />
    <h1 class="text-5xl font-serif font-bold mb-12 text-center text-[#524438]">Our Categories</h1>
    
    @if($categories->count() > 0)
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            @foreach($categories as $category)
                <a href="{{ route('products.index', ['category' => $category->id]) }}" class="bg-white rounded-2xl shadow-md overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-[#e8ddd0] group">
                    @if($category->image_base64)
                        <img src="{{ $category->image_data_url }}" alt="{{ $category->name }}" class="w-full h-56 object-cover group-hover:scale-105 transition-transform duration-300">
                    @else
                        <div class="w-full h-56 bg-gradient-to-br from-[#f5f0e8] to-[#e8ddd0] flex flex-col items-center justify-center">
                            <svg class="w-20 h-20 text-[#9d8566] mb-2" fill="currentColor" viewBox="0 0 24 24">
                                <!-- Cupcake Icon -->
                                <g>
                                    <!-- Cupcake Base -->
                                    <path d="M12 18 L8 22 L16 22 Z" fill="#f5f0e8" stroke="#7d6a52" stroke-width="1.5"/>
                                    <path d="M8 22 L9 24 L15 24 L16 22 Z" fill="#e8ddd0" stroke="#7d6a52" stroke-width="1.5"/>
                                    
                                    <!-- Frosting -->
                                    <path d="M8 18 Q9 14 12 14 Q15 14 16 18" fill="#c97d60" stroke="#9d8566" stroke-width="1.5"/>
                                    <path d="M9 17 Q12 15 15 17" fill="#e8b4a0"/>
                                    
                                    <!-- Cherry on top -->
                                    <circle cx="12" cy="12" r="3" fill="#c97d60"/>
                                    <circle cx="12.5" cy="11.5" r="1.2" fill="#ff6b6b"/>
                                    <path d="M12 9 L12 12" stroke="#7d6a52" stroke-width="1.5" stroke-linecap="round"/>
                                    
                                    <!-- Sprinkles -->
                                    <circle cx="10" cy="16" r="0.8" fill="#ffd93d"/>
                                    <circle cx="14" cy="17" r="0.8" fill="#6bcf7f"/>
                                    <circle cx="11" cy="15.5" r="0.8" fill="#4d96ff"/>
                                    <circle cx="13" cy="15.5" r="0.8" fill="#ff6b6b"/>
                                </g>
                            </svg>
                            <span class="text-[#7d6a52] text-sm font-medium">No Image</span>
                        </div>
                    @endif
                    <div class="p-6">
                        <h3 class="text-2xl font-serif font-bold mb-3 text-[#524438] group-hover:text-[#9d8566] transition-colors">{{ $category->name }}</h3>
                        <p class="text-[#645443] text-sm mb-4 leading-relaxed line-clamp-2">{{ $category->description }}</p>
                        <p class="text-[#7d6a52] font-semibold">{{ $category->products_count ?? 0 }} products</p>
                    </div>
                </a>
            @endforeach
        </div>
    @else
        <div class="bg-white p-12 rounded-2xl shadow-md text-center border border-[#e8ddd0]">
            <p class="text-[#645443] text-lg">No categories available.</p>
        </div>
    @endif
</div>
@endsection