@extends('frontend.layout.navbar')
@section('content')
<div class="relative w-full h-full">
        <video autoplay loop muted playsinline class="absolute inset-0 object-cover w-full h-full ">
            <source src="{{ asset('image/amenities/playground/Outdoor Children\'s Playground_1.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>

        <div class="relative container mx-auto py-[25rem]">
            <div class="flex flex-col justify-center">
                <p class="md:text-6xl text-2xl text-[#3e4424] font-bold p-5"></p>
            </div>
        </div>
    </div>


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

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

    <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 mt-10"> Outdoor Children's
            Playgroud
        </p>
<div class=" text-center mt-3 mb-5 text-[#3f4424]">Featuring premium playground equipment surrounded by lush gardens, kids will spend hours
            being active and enjoying outdoor play.
        </div>

        <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/playground/Playground-01-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/playground/Playground-02-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/playground/Playground-03-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/playground/Playground-04-1600x1067 (1).jpg') }}"
                            class="w-full h-full zoomable-image" />
                    </div>
                    <div class="swiper-slide">
                        <img src="{{ asset('image/amenities/playground/Playground-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>
    @endsection
    {{-- <img src="{{ asset('image/invest/Map.png') }}" class="absolute inset-0 "> --}}