@php
$items = $section->items ?? collect();
$title = $section->title ?? 'Featured Category';
$desc = $section->description ?? '';
@endphp

<section class="featured featured-category reveal">
    <div class="container-fluid px-3 px-lg-5">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex flex-column">
                <h1 class="section-title mb-0">{{ $title }}</h1>
                @if($desc)
                <small class="sub-text-muted">{{ $desc }}</small>
                @endif
            </div>
            <a class="see-all-link" href="{{ route('frontend.category_list') }}">
                <span>{{ webTrans('see_all', 'home') }}</span>
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1 6H13M13 6L8 1M13 6L8 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </a>
        </div>

        <div class="category-wrapper">
            @forelse($items as $category)
            <a href="{{ route('frontend.product_list', ['category' => $category->id]) }}" class="cat-link">
                <div class="category-item">
                    <img src="{{ uploadedAsset($category->icon) }}" class="img-fluid" alt="{{ translate($category->name) }}">
                    <p>{{ $category->getTranslation('name', $langCode, true) }}</p>
                </div>
            </a>
            @empty
            <p class="text-muted py-3">{{ webTrans('no_categories_available', 'home') }}</p>
            @endforelse
        </div>
    </div>
</section>