@extends('frontend.layout.navbar')
@section('content')
    <div class="relative w-full h-full -z-10">
        <video autoplay loop muted playsinline class="absolute inset-0 object-contain md:object-cover w-full h-full ">
            <source src="{{ asset('image/amenities/entrance/Grand Entrance Gate_1.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="relative container mx-auto py-[10rem] md:py-[25rem]">
            <div class="flex flex-col justify-center">
                <p class="p-5 text-2xl font-bold text-[#3e4424] md:text-6xl"></p>
            </div>
        </div>
    </div>

    <div class="container max-w-screen-xl mx-auto mb-10">
        <p class="lg:text-5xl text-[#3f4424] text-center font-bold text-2xl dancing-script my-10"> The Grand Entrance Gate
        </p>


        <div class="relative">
            <div class="w-auto mx-20 h-full swiper shadow-2xl shadow-[#accb81] ">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide ">
                        <img src="{{ asset('image/amenities/entrance/Entrance-01-1600x1067 (1).jpg') }}"
                            class="w-full h-full " />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/entrance/Entrance-02-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/entrance/Entrance-03-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/entrance/Entrance-04-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/entrance/Entrance-05-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    ...
                </div>
                <!-- If we need pagination -->
                <div class="swiper-pagination"></div>

                <!-- If we need navigation buttons -->


                <!-- If we need scrollbar -->
                <div class="swiper-scrollbar"></div>
            </div>
            <div id="swiper-button-prev"
                class=" absolute top-1/2 left-0 z-50 bg-[#649d14] px-4  py-3 rounded-full  text-white">< </div>
                    <div id="swiper-button-next"
                        class="absolute top-1/2 right-0 z-50 bg-[#649d14] px-4  py-3 rounded-full text-white"> ></div>


                    <script>
                        const swiper = new Swiper('.swiper', {
                            // Optional parameters
                            direction: 'horizontal',
                            loop: true,

                            // If we need pagination
                            pagination: {
                                el: '.swiper-pagination',
                            },

                            // Navigation arrows
                            navigation: {
                                nextEl: '#swiper-button-next',
                                prevEl: '#swiper-button-prev',
                            },

                            // And if we need scrollbar
                            scrollbar: {
                                el: '.swiper-scrollbar',
                            },
                        });
                    </script>


            </div>
        </div>
    </div>
@endsection
{{-- <img src="{{ asset('image/invest/Map.png') }}" class="absolute inset-0 "> --}}