@extends('layouts.main-app')

@section('title', 'Venues')

@section('content')

@include('layouts.navbar')

<div class="relative h-[25rem] w-full pt-[10rem]">
    <img class="absolute inset-0 object-cover object-bottom w-full h-full" src="{{asset('images/venues/bg-header.jpg')}}" alt="">
    <div class="container relative max-w-screen-xl mx-auto">
        <h1 class="text-4xl font-bold text-center text-[#ffd916]">Power at Your Fingertips</h1>
    </div>
</div>

<div class="relative h-full md:h-[80rem] w-full">
    <img class="absolute inset-0 object-cover object-top w-full h-full" src="{{asset('images/venues/bg-content-1.jpg')}}" alt="">
    <div data-aos="fade-up" data-aos-duration="1000" class="container relative max-w-screen-xl px-4 py-12 mx-auto md:py-0">
        <div class="flex flex-col items-center justify-center">
            <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-center space-y-8">
                <img src="{{asset('images/homepage/img-venue-1.png')}}" alt="">
                <h1 class="text-4xl font-bold text-white">Experience the Charge Cycle Difference</h1>
            </div>
            <div class="relative container max-w-screen-xl mx-auto mt-[5rem]">
                <div data-aos="zoom-in" data-aos-duration="1000" class="flex flex-col items-center justify-center py-12 space-y-2">
                    <h1 class="text-white text-md">Power Up in 3 Easy Steps</h1>
                    <h2 class="text-[#ffd916] text-4xl">How It Works?</h2>
                </div>
                <div class="grid grid-cols-1 gap-20 md:grid-cols-4">
                    <div data-aos="zoom-in"
                        data-aos-duration="1000" class="flex flex-col items-center space-y-8 text-center">
                        <img src="{{asset('images/homepage/icon-hiw-1.png')}}" alt="">
                        <h1 class="text-[#ffd916] text-2xl">Scan and Download</h1>
                        <p class="text-white">Simply scan the QR code to download the ChargeCycle app.</p>
                    </div>
                    <div data-aos="zoom-in"
                        data-aos-duration="1000" class="flex flex-col items-center space-y-8 text-center">
                        <img src="{{asset('images/homepage/icon-hiw-2.png')}}" alt="">
                        <h1 class="text-[#ffd916] text-2xl">Stay Powered Up</h1>
                        <p class="text-white">Unlock a power bank and enjoy uninterrupted charging with built-in Micro USB, iOS, and Type-C cables. There's no need to carry extra accessories—just plug in and power up your device wherever you are.</p>
                    </div>
                    <div data-aos="zoom-in"
                        data-aos-duration="1000" class="flex flex-col items-center space-y-8 text-center">
                        <img src="{{asset('images/new_resources/icon-easyreturn.png')}}" alt="">
                        <h1 class="text-[#ffd916] text-2xl">Easy Return</h1>
                        <p class="text-white">Returning your power bank is a breeze! Simply drop it off at any ChargeCycle location. Enjoy the convenience of flexible returns and keep your charging experience hassle-free.</p>
                    </div>
                    <div data-aos="zoom-in"
                        data-aos-duration="1000" class="flex flex-col items-center space-y-8 text-center">
                        <img src="{{asset('images/new_resources/icon-automaticbilling.png')}}" alt="">
                        <h1 class="text-[#ffd916] text-2xl">Automatic Billing</h1>
                        <p class="text-white">You only pay for the time you use the power bank, ensuring you get the best value for your convenience. No hidden fees—just simple, transparent pricing.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="relative w-full h-full py-20 bg-[#595959]">
    <img class="absolute bottom-0 object-contain object-bottom w-full h-full" src="{{asset('images/homepage/bg-home-2.png')}}" alt="">
    <div data-aos="fade-up" data-aos-duration="1000">
        <div data-aos="zoom-in" data-aos-duration="1000" class="container relative max-w-screen-xl px-4 mx-auto">
            <div class="flex flex-col items-center justify-center space-y-8">
                <div class="flex flex-col items-center">
                    <h1 class="text-white">Power Up Your Business</h1>
                    <h1 class="text-[#ffd916] text-3xl md:text-5xl font-bold text-center">Partner with us to offer convenient charging solutions to your customers.</h1>
                </div>

            </div>
        </div>
        <div data-aos="zoom-in" data-aos-duration="1000" class="relative w-full my-12">
            <div class="relative swiper centered-slide-carousel swiper-container ">
                <div class="swiper-wrapper">
                    @foreach ($venues as $venue)
                    <div class="swiper-slide">
                        <div class="flex flex-col items-center py-12 space-x-8 md:flex-row">
                            <h1 class="text-[#ffd916] text-2xl">{{$venue->title}}</h1>
                            <p class="text-white">{{$venue->description}}</p>
                        </div>
                        <img class="border-2 border-[#ffd916] rounded-[6rem] w-full h-full object-cover" src="{{asset($venue->image)}}" alt="">
                    </div>
                    @endforeach


                </div>
            </div>
        </div>
        <div data-aos="zoom-in" data-aos-duration="1000" class="relative my-12">
            <div class="flex flex-col items-center justify-center">
                <div class="flex flex-col items-center">
                    <h1 class="text-[#ffd916] text-3xl font-bold text-center">Testimonials</h1>
                </div>
            </div>
        </div>
        <div class="relative w-full">
            <div class="relative swiper coverflow-carousel swiper-container ">
                <div class="swiper-wrapper">
                    @foreach ($testimonials as $testimonial)
                    <div data-aos="zoom-in" data-aos-duration="1000" class="swiper-slide">
                        <div class="flex justify-center w-full">
                            <div class="relative h-full md:h-[40rem] w-full md:w-[40rem]">
                                <img class="absolute inset-0 w-full h-full" src="{{asset('images/venues/bg-testi-1.png')}}" alt="">
                                <div class="relative h-full w-full p-12 md:p-[6rem]">
                                    <div class="flex flex-col justify-between h-full">
                                        <div class="flex flex-col items-center justify-center space-y-12">
                                            <img src="{{asset('images/venues/icon-testimonial-big.png')}}" alt="">
                                            <p class="text-sm text-white md:text-lg">{{$testimonial->quote}}</p>
                                        </div>
                                        <div class="flex flex-col items-center justify-center space-y-4">
                                            <img src="{{asset($testimonial->profile_picture)}}" alt="">
                                            <p class=" text-[#ffd916]">{{$testimonial->name}}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach


                </div>
            </div>
        </div>
    </div>

</div>

<script>
    var swiper = new Swiper(".coverflow-carousel", {
        centeredSlides: true,
        loop: true,
        spaceBetween: 0,
        slideToClickedSlide: true,
        effect: "coverflow",
        coverflowEffect: {
            rotate: 0,
            stretch: 80,
            depth: 200,
            modifier: 1,
            slideShadows: false,
        },
        pagination: {
            el: ".coverflow-carousel .swiper-pagination",
            clickable: true,
        },
        autoplay: {
            delay: 3000, // Change the delay to your desired value in milliseconds
            disableOnInteraction: false, // Optional: If true, autoplay will be disabled after user interactions
        },
        breakpoints: {
            1920: {
                slidesPerView: 2,
                spaceBetween: 50
            },
            1028: {
                slidesPerView: 2,
                spaceBetween: 10
            },
            990: {
                slidesPerView: 1,
                spaceBetween: 0
            }
        }
    });
</script>
<script>
    var swiper = new Swiper(".centered-slide-carousel", {
        centeredSlides: true,
        paginationClickable: true,
        loop: true,
        spaceBetween: 30,
        slideToClickedSlide: true,
        pagination: {
            el: ".centered-slide-carousel .swiper-pagination",
            clickable: true,
        },
        autoplay: {
            delay: 3000, // Change the delay to your desired value in milliseconds
            disableOnInteraction: false, // Optional: If true, autoplay will be disabled after user interactions
        },
        breakpoints: {
            1920: {
                slidesPerView: 2,
                spaceBetween: 30
            },
            1028: {
                slidesPerView: 2,
                spaceBetween: 10
            },
            990: {
                slidesPerView: 1,
                spaceBetween: 0
            }
        }
    });
</script>


@include('layouts.station')
@include('layouts.footer')

@endsection