@aware(['page'])
<div class="overflow-hidden">
    <div class="theme-max-w mx-auto mb-10 px-5">
        <div class="grid gap-10 mx-auto md:grid-cols-[330px_1fr] justify-items-center md:justify-items-start">
            <div class="text-center md:text-left mx-auto md:my-auto max-w-md px-4 md:px-0">
                <h2 class="text-3xl sm:text-4xl lg:text-4xl font-['Abhaya_Libre'] font-semibold leading-tight mb-2 md:mb-6">New Arrivals</h2>
                <p class="text-slate-600 leading-relaxed text-[15px] md:max-w-[260px] mx-auto md:mx-0 mb-4 md:mb-6">{!!$description!!}</p>
                <a href="#" class="inline-flex justify-center md:justify-start theme-text-blue font-bold text-sm group hover:underline">VIEW ALL</a>
            </div>
            <div class="relative w-full min-w-0">
                <div class="swiper newArrivalsSwiper pb-6 sm:pb-0 overflow-hidden">
                    <div class="swiper-wrapper">
                        @foreach($newarrivals as $arrival)
                            <div class="swiper-slide w-[200px] sm:w-[220px] md:w-[240px] flex-shrink-0">
                                <figure class="space-y-3">
                                    <!-- Fixed image container with proper constraints -->
                                    <div class="w-full h-[240px] sm:h-[260px] md:h-[280px] overflow-hidden rounded-lg bg-gray-100">
                                        <img
                                            src="{{asset('storage/' . $arrival['image'])}}"
                                            alt="{{ $arrival['image_tag'] ?? 'Product image' }}"
                                            class="w-full h-full object-cover object-center"
                                            loading="lazy"
                                        />
                                    </div>
                                    <figcaption class="text-md font-medium">
                                        {{ $arrival['image_tag'] }}
                                    </figcaption>
                                </figure>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="flex flex-col sm:flex-row items-center gap-4 mt-6 sm:mt-8">
                    <div class="flex-1 h-px bg-slate-300 relative w-full max-w-[400px]">
                        <div class="swiper-progress absolute inset-0 bg-slate-800 origin-left scale-x-0"></div>
                    </div>
                    <div class="flex gap-3 mt-4 sm:mt-0">
                        <button type="button" class="prevNewArr flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                            <i class="fa-solid fa-chevron-left text-gray-600"></i>
                        </button>
                        <button type="button" class="nextNewArr flex items-center justify-center w-10 h-10 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                            <i class="fa-solid fa-chevron-right text-gray-600"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push("inlinescript")
    <script>
        const arrivalsSwiper = new Swiper('.newArrivalsSwiper', {
            slidesPerView: 'auto',
            spaceBetween: 16,
            speed: 600,
            grabCursor: true,
            mousewheel: {
                forceToAxis: true,
            },
            freeMode: {
                enabled: true,
                sticky: false,
            },
            // Prevent infinite scaling and respect container bounds
            watchOverflow: true,
            allowTouchMove: true,
            resistance: true,
            resistanceRatio: 0.85,
            navigation: {
                nextEl: '.nextNewArr',
                prevEl: '.prevNewArr',
            },
            on: {
                progress(s, progress) {
                    const progressBar = document.querySelector('.swiper-progress');
                    if (progressBar) {
                        progressBar.style.transform = `scaleX(${progress})`;
                    }
                },
            },
            breakpoints: {
                640: {
                    slidesPerView: 1,
                    spaceBetween: 20,
                },
                768: {
                    slidesPerView: 2,
                    spaceBetween: 24,
                },
                1024: {
                    slidesPerView: 3,
                    spaceBetween: 28,
                },
            },
        });

        // Error handling for images
        document.querySelectorAll('.newArrivalsSwiper img').forEach(img => {
            img.addEventListener('error', function() {
                this.src = '/path/to/placeholder-image.jpg'; // Add your placeholder image path
                this.alt = 'Image not available';
            });
        });
    </script>
@endpush