{{-- Category Icons Navigation --}}
@props(['categories'])

@php
    // Define icon and color mappings for known categories
    $categoryStyles = [
        'cameras' => ['color' => 'indigo', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>'],
        'lenses' => ['color' => 'purple', 'icon' => '<circle cx="12" cy="12" r="10" stroke-width="1.5"/><circle cx="12" cy="12" r="6" stroke-width="1.5"/><circle cx="12" cy="12" r="2" stroke-width="1.5"/>'],
        'tripods' => ['color' => 'emerald', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 2v4m0 0l-3 14m3-14l3 14m-6 0l-2 4m8-4l2 4M7 6h10"/>'],
        'lighting' => ['color' => 'amber', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>'],
        'audio' => ['color' => 'rose', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>'],
        'bags' => ['color' => 'cyan', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"/>'],
        'filters' => ['color' => 'violet', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"/>'],
        'accessories' => ['color' => 'sky', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/>'],
        'video' => ['color' => 'red', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>'],
        'flashes' => ['color' => 'yellow', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>'],
    ];

    // Default style for unknown categories
    $defaultStyle = ['color' => 'zinc', 'icon' => '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>'];

    // Color classes mapped by color name
    $colorClasses = [
        'indigo' => ['bg' => 'group-hover:bg-indigo-50 dark:group-hover:bg-indigo-900/30', 'text' => 'group-hover:text-indigo-600 dark:group-hover:text-indigo-400'],
        'purple' => ['bg' => 'group-hover:bg-purple-50 dark:group-hover:bg-purple-900/30', 'text' => 'group-hover:text-purple-600 dark:group-hover:text-purple-400'],
        'emerald' => ['bg' => 'group-hover:bg-emerald-50 dark:group-hover:bg-emerald-900/30', 'text' => 'group-hover:text-emerald-600 dark:group-hover:text-emerald-400'],
        'amber' => ['bg' => 'group-hover:bg-amber-50 dark:group-hover:bg-amber-900/30', 'text' => 'group-hover:text-amber-600 dark:group-hover:text-amber-400'],
        'rose' => ['bg' => 'group-hover:bg-rose-50 dark:group-hover:bg-rose-900/30', 'text' => 'group-hover:text-rose-600 dark:group-hover:text-rose-400'],
        'cyan' => ['bg' => 'group-hover:bg-cyan-50 dark:group-hover:bg-cyan-900/30', 'text' => 'group-hover:text-cyan-600 dark:group-hover:text-cyan-400'],
        'violet' => ['bg' => 'group-hover:bg-violet-50 dark:group-hover:bg-violet-900/30', 'text' => 'group-hover:text-violet-600 dark:group-hover:text-violet-400'],
        'sky' => ['bg' => 'group-hover:bg-sky-50 dark:group-hover:bg-sky-900/30', 'text' => 'group-hover:text-sky-600 dark:group-hover:text-sky-400'],
        'red' => ['bg' => 'group-hover:bg-red-50 dark:group-hover:bg-red-900/30', 'text' => 'group-hover:text-red-600 dark:group-hover:text-red-400'],
        'yellow' => ['bg' => 'group-hover:bg-yellow-50 dark:group-hover:bg-yellow-900/30', 'text' => 'group-hover:text-yellow-600 dark:group-hover:text-yellow-400'],
        'zinc' => ['bg' => 'group-hover:bg-zinc-100 dark:group-hover:bg-zinc-700', 'text' => 'group-hover:text-zinc-600 dark:group-hover:text-zinc-300'],
    ];
@endphp

@if($categories->count() > 0)
<section class="py-16 bg-zinc-50 dark:bg-zinc-900/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {{-- Section Header --}}
        <div class="text-center mb-12">
            <h2 class="text-3xl sm:text-4xl font-bold text-zinc-900 dark:text-white mb-4">
                Choose your Category
            </h2>
            <p class="text-lg text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
                Browse our extensive collection of professional photography equipment organized by category
            </p>
        </div>

        {{-- Category Icons Grid --}}
        <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-{{ min($categories->count() + 1, 8) }} gap-6 justify-items-center">
            @foreach($categories as $category)
                @php
                    $slug = strtolower($category->slug ?? Str::slug($category->name));
                    $style = $categoryStyles[$slug] ?? $defaultStyle;
                    $color = $style['color'];
                    $classes = $colorClasses[$color] ?? $colorClasses['zinc'];
                @endphp
                <a
                    href="/?category={{ $slug }}#inventory"
                    class="group flex flex-col items-center gap-3 cursor-pointer"
                    title="{{ $category->name }} ({{ $category->items_count }} {{ Str::plural('item', $category->items_count) }})"
                >
                    <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-white dark:bg-zinc-800 shadow-md group-hover:shadow-xl transition-all duration-300 flex items-center justify-center group-hover:-translate-y-1 {{ $classes['bg'] }} border border-zinc-100 dark:border-zinc-700">
                        <svg class="w-8 h-8 sm:w-10 sm:h-10 text-zinc-600 dark:text-zinc-400 {{ $classes['text'] }} transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            {!! $style['icon'] !!}
                        </svg>
                    </div>
                    <span class="text-xs sm:text-sm font-medium text-zinc-700 dark:text-zinc-300 text-center {{ $classes['text'] }} transition-colors">{{ $category->name }}</span>
                </a>
            @endforeach

            {{-- View All Button --}}
            <a
                href="/#inventory"
                class="group flex flex-col items-center gap-3 cursor-pointer"
                title="View All Products"
            >
                <div class="w-16 h-16 sm:w-20 sm:h-20 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-md group-hover:shadow-xl transition-all duration-300 flex items-center justify-center group-hover:-translate-y-1 group-hover:from-indigo-400 group-hover:to-purple-500">
                    <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                    </svg>
                </div>
                <span class="text-xs sm:text-sm font-medium text-zinc-700 dark:text-zinc-300 text-center">View All</span>
            </a>
        </div>
    </div>
</section>
@endif