@extends('frontend.layout.navbar')
@section('content')
    <div class="relative w-full h-full -z-10">
        <img src="{{ asset('image/invest/reason to invest Banner.png') }}"
            class="absolute inset-0 object-cover w-full h-full">
        <div class="relative container mx-auto py-[20rem]">
            <div class="flex flex-col justify-center">
                <p class="p-5 text-2xl font-bold text-[#3e4424] md:text-6xl">Village Amenities</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">
            Administration Office and Commercial-Grade Kitchen
        </p>


        <div class="relative">
            <div class="w-auto md:w-[65rem] h-full swiper shadow-2xl shadow-[#accb81]">
                <!-- Additional required wrapper -->
                <div class="swiper-wrapper">
                    <!-- Slides -->
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-01-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-02-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-03-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-04-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-05-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-06-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-07-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/kitchen/Admin-Kitchen-08-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>
    @endsection
    {{-- <img src="{{ asset('image/invest/Map.png') }}" class="absolute inset-0 "> --}}