{{-- Category showcase component
     Usage: @include('florial::sections.category-showcase-categories', ['sectionKey' => 'homepage_categories'])
--}}
@php
    $ts = themeService()->boot();
    $section = $ts->section($sectionKey ?? '');
    if (!$section) return;

    $settings = $ts->settings($sectionKey);
    $sectionTitle = $ts->trans($sectionKey, 'section_title');
    $viewAllText = $ts->trans($sectionKey, 'view_all_text');
    $viewAllUrl = $ts->config($sectionKey, 'view_all_url', '');

    $categoryId = $settings['category_id'] ?? null;
    $itemsCount = $settings['items_count'] ?? 6;

    $categoriesQuery = \ViartasShop\ProductCategories\Models\Accounting\ProductCategory::where('is_visible', true);

    if ($categoryId) {
        $categoriesQuery->where('product_category_id', $categoryId);
    } else {
        $categoriesQuery->whereNull('product_category_id');
    }

    $categories = $categoriesQuery->orderBy('id')->limit($itemsCount)->get();
@endphp

@if($categories->isNotEmpty())

    {{-- Mobile: wrapping pills --}}
    <div class="sf-cats-mobile d-lg-none">
        @foreach($categories as $category)
            <a href="{{ $category->getRoute() ?? '#' }}" class="sf-cat-pill">
                @if($category->getFirstMediaUrl('default', 'thumb'))
                    <img src="{{ $category->getFirstMediaUrl('default', 'thumb') }}" alt="{{ $category->title }}">
                @endif
                <span>{{ $category->title }}</span>
            </a>
        @endforeach
    </div>

    {{-- Desktop: grid --}}
    <div class="sf-cats-desktop d-none d-lg-block">
        @if($viewAllText && $viewAllUrl)
            <div class="d-flex justify-content-end mb-2">
                <a href="{{ $viewAllUrl }}" class="text-decoration-none fw-medium" style="font-size:13px;color:#0baf9a;">
                    {{ $viewAllText }} →
                </a>
            </div>
        @endif

        <div class="row g-2">
            @foreach($categories as $category)
                <div class="col">
                    <a href="{{ $category->getRoute() ?? '#' }}" class="sf-cat-card">
                        @if($category->getFirstMediaUrl('default', 'thumb'))
                            <img src="{{ $category->getFirstMediaUrl('default', 'thumb') }}" alt="{{ $category->title }}">
                        @else
                            <svg viewBox="0 0 24 24" width="28" height="28" style="fill:none;stroke:#999;stroke-width:1.5;">
                                <path d="M12 21s-7-4.5-7-10a4 4 0 017-2 4 4 0 017 2c0 5.5-7 10-7 10z"/>
                            </svg>
                        @endif
                        <span>{{ $category->title }}</span>
                    </a>
                </div>
            @endforeach
        </div>
    </div>
@endif
