@push('style')
<style>
    .swiper {
        padding: 20px 0;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: #000;
        background: rgba(255, 255, 255, 0.8);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 20px;
    }

    .swiper-pagination-bullet-active {
        background: #000;
    }
</style>
@endpush
<div class="!bg-luxury-cream pt-7">
    <div class="h-8 w-full !bg-luxury-cream"></div>
    <div class="swiper mySwiper h-[80vh] p-2">
        <div class="swiper-wrapper h-full">
            @foreach ($aboutus->media->all() as $index => $media)
            <div class="swiper-slide h-auto">
                <div class="h-full flex flex-col justify-center border-2 border-gray-200 rounded-lg">
                    <img src="{{ asset(Storage::url($media->path)) }}" alt={{ __("slide ". $index) }} class="w-full h-full object-cover rounded-md">
                </div>
            </div>
            @endforeach
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination !relative !top-3/10"></div>
        <!-- Navigation buttons -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <div class="h-12 w-full !bg-luxury-cream"></div>

    <section class="py-6 bg-white">
        <div class="container mx-auto px-1">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

                {{-- Main content --}}
                <div class="lg:col-span-2">
                    <div class="mb-8">
                        @if ($aboutus->translations->first()->description)
                        <p class="font-inter text-lg text-luxury-charcoal leading-relaxed mb-6">
                            {{ $aboutus->translations->first()->description }}
                        </p>
                        @endif
                    </div>
            </div>
    </section>
</div>





@push('js')
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('livewire:initialized', function() {
        // Wait for Livewire to finish rendering
        setTimeout(() => {
            const swiper = new Swiper('.mySwiper', {
                loop: true,
                slidesPerView: 1,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: {
                    delay: 3500,
                    disableOnInteraction: false,
                    pauseOnMouseEnter: true,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
                breakpoints: {
                    640: {
                        slidesPerView: 1,
                        spaceBetween: 20
                    },
                    1024: {
                        slidesPerView: 1,
                        spaceBetween: 30
                    }
                }
            });
        }, 100);
        lucide.createIcons();
    });
</script>
@endpush