@php
    $pt = $section->settings['padding_top'] ?? '80px';
    $pb = $section->settings['padding_bottom'] ?? '80px';
    $bg = $section->settings['bg_color'] ?? 'transparent';

    $ptStyle = "padding-top: $pt;";
    $pbStyle = "padding-bottom: $pb;";
    $bgStyle = $bg !== 'transparent' ? "background-color: $bg;" : '';
@endphp

<section class="relative border-y border-border-subtle overflow-hidden" 
    style="{{ $ptStyle }} {{ $pbStyle }} {{ $bgStyle }}"
    id="section-{{ $section->id }}" x-data="{ intersected: false }" x-intersect.once="intersected = true">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div class="flex items-end justify-between mb-12">
            <div>
                <h2 class="text-3xl md:text-5xl font-display font-black text-text-base tracking-tighter uppercase mb-4">
                    {{ $title }}
                </h2>
            </div>
            <div class="hidden md:flex items-center gap-3">
                <button class="w-12 h-12 rounded-2xl bg-surface-secondary hover:bg-surface-primary border border-border-subtle flex items-center justify-center text-text-dim hover:text-text-base transition-all click-left shadow-sm">
                    <i data-lucide="chevron-left"></i>
                </button>
                <button class="w-12 h-12 rounded-2xl bg-surface-secondary hover:bg-surface-primary border border-border-subtle flex items-center justify-center text-text-dim hover:text-text-base transition-all click-right shadow-sm">
                    <i data-lucide="chevron-right"></i>
                </button>
            </div>
        </div>

        @if($products->isNotEmpty())
            {{-- Carousel Native Scroll-Snap --}}
            <div id="carousel-{{ $section->id }}" class="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-8 hide-scrollbar">
                @foreach($products as $product)
                    <div class="min-w-[85vw] sm:min-w-[350px] w-full max-w-[400px] snap-center shrink-0">
                        @include('pages.storefront._product-card', ['product' => $product])
                    </div>
                @endforeach
            </div>
        @else
            <div class="p-16 text-center border-2 border-dashed border-border-subtle rounded-3xl opacity-50 bg-surface-secondary">
                <i data-lucide="box" class="w-12 h-12 mx-auto mb-4 text-text-dim"></i>
                <p class="font-black uppercase tracking-widest text-[11px] text-text-muted">No products assigned or available for this carousel.</p>
            </div>
        @endif

    </div>

    <style>
        .hide-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .hide-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const container = document.getElementById('carousel-{{ $section->id }}');
            if(!container) return;
            const leftBtn = container.parentElement.querySelector('.click-left');
            const rightBtn = container.parentElement.querySelector('.click-right');
            
            if(leftBtn) leftBtn.addEventListener('click', () => container.scrollBy({ left: -400, behavior: 'smooth' }));
            if(rightBtn) rightBtn.addEventListener('click', () => container.scrollBy({ left: 400, behavior: 'smooth' }));
        });
    </script>
</sectio