@php
    $contactBanners = \App\Models\ContactBanner::get();
@endphp

<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />

<section class="relative px-3 py-20">
    <div class="relative w-full h-auto mx-auto max-w-screen">

        <div class="swiper heroBannerSwiper">
            <div class="swiper-wrapper">
                @forelse ($contactBanners as $banner)
                    <div class="swiper-slide w-full h-[400px] md:h-full relative p-5 md:p-12">
                        <img src="{{ asset($banner['image']) }}" alt="{{ $banner['title'] }}"
                            class="absolute top-0 left-0 object-cover w-full h-full">

                        <div
                            class="relative z-10 flex flex-col items-start justify-center h-full max-w-3xl px-4 mx-auto md:px-0">
                            <h3 class="text-lg font-bold text-blue-500 inter-font">{{ $banner['title'] }}</h3>
                            <h1 class="mt-2 text-3xl font-bold text-black md:text-5xl sofia-font">
                                {{ $banner['context'] }}</h1>
                            <p class="mt-4 text-base font-semibold text-black md:text-lg sofia-font">
                                {{ $banner['subcontext'] }}</p>
                            <a href="{{ route('contact') }}"
                                class="px-4 py-2 mt-6 text-blue-500 transition-all duration-300 border border-blue-700 rounded-full bg-primary hover:scale-105 hover:shadow-lg">
                                Contact Us Today
                            </a>
                        </div>
                    </div>
                @empty
                    <!-- Default banner when no banners exist -->
                    <div class="swiper-slide w-full h-[400px] md:h-full relative p-5 md:p-12">
                        <img src="{{ asset('assets/images/contact us banner.webp') }}" alt="Default Banner"
                            class="absolute top-0 left-0 object-cover w-full h-full">

                        <div
                            class="relative z-10 flex flex-col items-start justify-center h-full max-w-3xl px-4 mx-auto md:px-0">
                            <h3 class="text-lg font-bold text-blue-500 inter-font">Welcome!</h3>
                            <h1 class="mt-2 text-3xl font-bold text-black md:text-5xl sofia-font">
                                Our Services & Solutions</h1>
                            <p class="mt-4 text-base font-semibold text-black md:text-lg sofia-font">
                                We provide the best services to meet your needs.</p>
                            <a href="{{ route('contact') }}"
                                class="px-4 py-2 mt-6 text-blue-500 transition-all duration-300 border border-blue-700 rounded-full bg-primary hover:scale-105 hover:shadow-lg">
                                Contact Us Today
                            </a>
                        </div>
                    </div>
                @endforelse
            </div>

            <!-- Navigation -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>

    </div>
</section>

<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const heroBannerSwiper = new Swiper(".heroBannerSwiper", {
            loop: true,
            slidesPerView: 1,
            spaceBetween: 0,
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
        });
    });
</script>

<style>
    .heroBannerSwiper {
        touch-action: pan-y;
    }
</style>