@php
 $items   = $section->items ?? collect();
    $layout  = (int)($section->layout ?? 1);
    $title   = $section->title ?? 'Products';
    $desc    = $section->description ?? null;
 
    // Responsive column class per layout
    $colClass = match($layout) {
        2       => 'col-6 col-md-3 col-lg-2',
        3       => 'col-6 col-md-4 col-lg-3',
        default => 'col-6 col-lg-2',   // layouts 1, 4, 5
    };
@endphp
 
<section class="featured featured-products reveal">
    <div class="container-fluid px-3 px-lg-5">
 
        {{-- Section header --}}
        <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.product_list', ['section_id' => $section->id]) }}">
                <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="top-selling-wrapper">
            @if($layout == 5)
            {{-- Layout 5: Horizontal scroll row --}}
            <div class="d-flex gap-3 flex-nowrap overflow-auto product-horizontal-scroll pb-2">
                @forelse($items as $product)
                    <div style="min-width:180px;max-width:220px;flex:0 0 auto;">
                        @include('frontend::home.sections._product_card', ['product' => $product, 'cardClass' => ''])
                    </div>
                @empty
                    <p class="text-muted py-3">{{ webTrans('no_products_available', 'home') }}</p>
                @endforelse
            </div>
 
            @else
            {{-- Standard Grid Views (Layouts 1, 2, 3, 4) --}}
            <div class="row g-4 g-md-4">
                @forelse($items as $product)
                    <div class="{{ $colClass }}">
                        @include('frontend::home.sections._product_card', ['product' => $product, 'cardClass' => ''])
                    </div>
                @empty
                    <div class="col-12">
                        <p class="text-muted py-3 px-3">{{ webTrans('no_products_available', 'home') }}</p>
                    </div>
                @endforelse
            </div>
            @endif
        </div>
 
    </div>
</section>