@extends('layouts.main-app')

@section('title', 'Home')

@section('content')

@include('layouts.navbar')


<div class="relative w-full">
    <div class="swiper default-carousel swiper-container">
        <div class="swiper-wrapper">
            @foreach ( $banner as $banners)
            <div class="swiper-slide">
                <div class="relative h-full lg:h-[55rem] w-full pt-[15rem]">
                    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset($banners->banner_image)}}" alt="">
                    <div class="container relative max-w-screen-xl mx-auto overflow-hidden">
                        <div class="grid grid-cols-1 gap-8 px-4 md:grid-cols-2">
                            <div data-aos="fade-right"
                                data-aos-duration="1000" class="space-y-8">
                                <div class="space-y-2">
                                    <h1 class="text-white">
                                        {{$banners->title}}
                                    </h1>
                                    <h2 class="text-[#ffd916] text-4xl">
                                        {{$banners->subtitle}}
                                    </h2>
                                </div>
                                <div>
                                    <a href="#">
                                        <img class="object-cover h-full w-[15rem]" src="{{asset('images/homepage/btn-body-playstore.png')}}" alt="">
                                    </a>
                                    <a href="#">
                                        <img class="object-cover h-full w-[15rem]" src="{{asset('images/homepage/btn-body-appstore.png')}}" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class="flex justify-end" data-aos="fade-left" data-aos-duration="1000">
                                <img src="{{ asset($banners->image) }}" alt="" class="py-8 float-animation">
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</div>


<div class="relative w-full h-full py-8 bg-[#595959]">
    <img class="absolute inset-0 object-cover object-top w-full h-full" src="{{asset('images/homepage/bg-home-1.png')}}" alt="">
    <div data-aos="fade-up"
        data-aos-duration="1000" class="container relative max-w-screen-xl mx-auto ">
        <div 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 class="flex justify-center w-full">
            <div class="relative ">
                <a href="{{url('/partners')}}">
                    <button class="flex items-center justify-center">
                        <img class="absolute inset-0 w-[20rem] h-full" src="{{asset('images/homepage/btn-partner2.png')}}" alt="">
                        <h1 class="relative px-12 py-8 font-bold"> BE OUR PARTNER</h1>
                    </button>
                </a>
            </div>
        </div>
    </div>
</div>
<div class="relative w-full h-full ">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/new_resources/bg-whyus.png')}}" alt="">
    <div class="container relative py-12 mx-auto overflow-hidden">
        <div class="grid grid-cols-1 px-4 md:grid-cols-2">
            <div class="relative flex items-center w-full h-full ">
                <div class="swiper default-carousel swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div data-aos="fade-right"
                                data-aos-duration="1000">
                                <img class="w-full h-[50rem] " src="{{asset('images/new_resources/3D Machine Image Final.gif')}}" alt="">
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div data-aos="fade-left"
                data-aos-duration="1000" class="space-y-12">
                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="flex flex-col items-center space-x-0 md:space-x-8 md:flex-row">
                    <h1 class="text-[#ffd916] text-4xl">Why Charge Cycle?</h1>

                </div>

                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="flex flex-col xl:flex-row items-center space-x-0 md:space-x-8 xl:ml-[5rem]">
                    <img src="{{asset('images/new_resources/affordable-pricing.png')}}" alt="">
                    <div class="flex flex-col space-y-4">
                        <h1 class="text-[#ffd916] text-2xl font-bold">Affordable Pricing</h1>
                        <p class="text-white">Staying connected should never be expensive. ChargeCycle offers competitive rental fees to ensure you have access to power without breaking the bank.</p>
                    </div>
                </div>

                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="flex flex-col xl:flex-row items-center space-x-0 md:space-x-8 xl:ml-[10rem]">
                    <img src="{{asset('images/new_resources/enhanced-customer-exp.png')}}" alt="">
                    <div class="flex flex-col space-y-4">
                        <h1 class="text-[#ffd916] text-2xl font-bold">Enhanced Customer Experience</h1>
                        <p class="text-white">By providing modern and innovative solutions like power bank rentals, ChargeCycle enhances customer satisfaction and delivers a high-quality experience.</p>
                    </div>
                </div>

                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="flex flex-col xl:flex-row items-center space-x-0 md:space-x-8 xl:ml-[15rem]">
                    <img src="{{asset('images/new_resources/eco-friendly-stations.png')}}" alt="">
                    <div class="flex flex-col space-y-4">
                        <h1 class="text-[#ffd916] text-2xl font-bold">Eco-Friendly Stations
                        </h1>
                        <p class="text-white">Our reusable power banks help reduce the need for disposable batteries, significantly minimizing electronic waste and promoting sustainability.</p>
                    </div>
                </div>

                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="flex flex-col xl:flex-row items-center space-x-0 md:space-x-8 xl:ml-[10rem]">
                    <img src="{{asset('images/new_resources/revenue-generation.png')}}" alt="">
                    <div class="flex flex-col space-y-4">
                        <h1 class="text-[#ffd916] text-2xl font-bold">Revenue Generation</h1>
                        <p class="text-white">ChargeCycle not only offers convenience to your customers but also enables you to generate additional revenue through rental fees.</p>
                    </div>
                </div>

                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="flex flex-col xl:flex-row items-center space-x-0 md:space-x-8 xl:ml-[5rem]">
                    <img src="{{asset('images/new_resources/marketing-channel.png')}}" alt="">
                    <div class="flex flex-col space-y-4">
                        <h1 class="text-[#ffd916] text-2xl font-bold">Marketing Channel</h1>
                        <p class="text-white">Utilize the LCD screens at our stations to promote your brand, products, and services, reaching a wider audience effortlessly.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="relative w-full h-full 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" class="container relative mx-auto overflow-hidden">
        <div class="flex flex-col items-center justify-center py-12 space-y-4">
            <h1 class="text-[#ffd916] text-4xl font-bold">3 in 1 Connectors</h1>
            <p class="text-white">Compatible with Type-C, iOS, and Micro Connectors.</p>
        </div>
        <div class="relative flex items-center justify-center w-full h-full">
            <!-- Centered Background Elipse -->
            <img class="absolute inset-0 w-[40rem] h-[40rem] m-auto" src="{{ asset('images/homepage/obj-bg-elipse.png') }}" alt="">
            <div class="grid w-full grid-cols-1 py-40 gap-60 lg:gap-20 md:grid-cols-2 lg:grid-cols-3">
                <div data-aos="zoom-in" data-aos-duration="1000" class="relative w-full h-full ">
                    <img class="absolute inset-0 w-full  h-[25rem] " src="{{ asset('images/homepage/bg-connectors.png') }}" alt="">
                    <div class="relative flex justify-center ">
                        <div class="group">
                            <img id="connector-1" src="{{ asset('images/revision/obj-connector-1.png') }}" alt=""
                                class="mt-[5.5rem] transform transition-all duration-500 ease-in-out group-hover:opacity-0 group-hover:-translate-y-32">
                            <!-- Second Image -->
                            <img id="connector-1-1" src="{{ asset('images/revision/obj-connector-1.1.png') }}" alt=""
                                class="absolute top-0 -mt-[6rem] transition-opacity transition-transform duration-700 ease-in-out opacity-0 group-hover:opacity-100 group-hover:-translate-y-32">
                        </div><!-- First Image -->
                    </div>
                </div>


                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="relative w-full h-full">
                    <img class="absolute inset-0 w-full  h-[25rem]" src="{{ asset('images/homepage/bg-connectors.png') }}" alt="">
                    <div class="relative flex justify-center">
                        <div class="group">
                            <!-- First Image -->
                            <img id="connector-2" src="{{ asset('images/revision/obj-connector-2.png') }}" alt=""
                                class="mt-[5.5rem] transform transition-all duration-500 ease-in-out group-hover:opacity-0 group-hover:-translate-y-32">
                            <!-- Second Image -->
                            <img id="connector-2-2" src="{{ asset('images/revision/obj-connector-2.2.png') }}" alt=""
                                class="absolute top-0 -mt-[5.5rem] transition-opacity transition-transform duration-700 ease-in-out opacity-0 group-hover:opacity-100 group-hover:-translate-y-32">
                        </div>
                    </div>
                </div>
                
                <div data-aos="zoom-in"
                    data-aos-duration="1000" class="relative w-full h-full">
                    <img class="absolute inset-0 w-full h-[25rem]" src="{{ asset('images/homepage/bg-connectors.png') }}" alt="">
                    <div class="relative flex justify-center">
                        <div class="group">
                            <!-- First Image -->
                            <img id="connector-3" src="{{ asset('images/revision/obj-connector-3.png') }}" alt=""
                                class="mt-[5.2rem] transform transition-all duration-500 ease-in-out group-hover:opacity-0 group-hover:-translate-y-32">
                            <!-- Second Image -->
                            <img id="connector-3-3" src="{{ asset('images/revision/obj-connector-3.3.png') }}" alt=""
                                class="absolute top-0 -mt-[6rem] transition-opacity transition-transform duration-700 ease-in-out opacity-0 group-hover:opacity-100 group-hover:-translate-y-32">
                        </div>

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

        <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
            <div class="flex justify-center" data-aos="zoom-in" data-aos-duration="1000">
                <h1 class="text-2xl font-bold text-white">Type-C Connector</h1>
            </div>
            <div class="flex justify-center" data-aos="zoom-in" data-aos-duration="1000">
                <h1 class="text-2xl font-bold text-white">iOS Connector</h1>
            </div>
            <div class="flex justify-center" data-aos="zoom-in" data-aos-duration="1000">
                <h1 class="text-2xl font-bold text-white">Micro Connectors</h1>
            </div>
        </div>

    </div>
    <div class="relative swiper stations-carousel swiper-container">
        <div class="flex items-end my-8 swiper-wrapper">
            <div class="swiper-slide">
                <div  class="flex justify-center">
                    <img class="object-scale-down" src="{{asset('images/new_resources/bstation-1.png')}}" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div  class="flex justify-center">
                    <img class="object-scale-down" src="{{asset('images/new_resources/station-2.png')}}" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div  class="flex justify-center">
                    <img class="object-scale-down" src="{{asset('images/new_resources/bstation-3.png')}}" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div  class="flex justify-center">
                    <img class="object-scale-down" src="{{asset('images/new_resources/station-4.png')}}" alt="">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="flex justify-center">
                    <img class="object-scale-down" src="{{asset('images/new_resources/bstation-5.png')}}" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg-[#595959] ">
    <div data-aos="fade-up" data-aos-duration="1000" class="container mx-auto ">
        <div class="flex flex-col items-center justify-between md:flex-row">
            <div class="w-full">
                <h1 class="text-4xl font-bold text-white">Our Valued Partners</h1>
            </div>
            <div class="flex justify-end w-full">
                <div class="relative ">
                    <a href="{{url('/partners')}}">
                        <button class="flex items-center justify-center">
                            <img class="absolute inset-0 w-[20rem] h-full" src="{{asset('images/homepage/btn-partner2.png')}}" alt="">
                            <h1 class="relative px-12 py-8 font-bold"> BECOME OUR PARTNER</h1>
                        </button>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="bg-[#595959] ">
    <div data-aos="zoom-in" data-aos-duration="1000" class="relative flex items-center w-full py-12">
        <marquee behavior="" direction="" class="flex">
            <div class="flex">
                <div class="flex space-x-[20rem]">
                    <img src="{{asset('images/partners/icon1.png')}}" alt="">
                    <img src="{{asset('images/partners/icon2.png')}}" alt="">
                    <img src="{{asset('images/partners/icon3.png')}}" alt="">
                    <img src="{{asset('images/partners/icon4.png')}}" alt="">
                    <img src="{{asset('images/partners/icon5.png')}}" alt="">
                    <img src="{{asset('images/partners/icon6.png')}}" alt="">
                    <img src="{{asset('images/partners/icon7.png')}}" alt="">
                    <img src="{{asset('images/partners/icon8.png')}}" alt="">
                    <img src="{{asset('images/partners/icon9.png')}}" alt="">
                    <img src="{{asset('images/partners/icon10.png')}}" alt="">
                </div>
            </div>
        </marquee>
    </div>
</div>


<div class="bg-[#444444]">
    <div class="container py-12 ml-auto overflow-hidden">
        <div class="grid grid-cols-1 gap-12 md:grid-cols-3">
            <div data-aos="fade-right" data-aos-duration="1000" class="px-4">
                <h1 class="text-white">Power Up Your Business</h1>
                <h1 class="text-[#ffd916] text-2xl lg:text-4xl">Partner with us to offer convenient charging solutions to your customers.</h1>
            </div>
            <div data-aos="fade-left" data-aos-duration="1000" class="col-span-2 ">
                <div class="relative w-full">
                    <div class="relative swiper fraction-slide-carousel swiper-container">
                        <div class="swiper-wrapper">

                            @foreach ($venues as $venue)
                            <div class="space-y-4 swiper-slide">
                                <img class="border-2 border-[#ffd916] rounded-[3rem] w-full h-full object-cover" src="{{asset($venue->image)}}" alt="">
                                <div class="grid grid-cols-1 md:grid-cols-3">
                                    <div>
                                        <h1 class="text-[#ffd916] font-bold text-xl">{{$venue->title}}</h1>
                                    </div>
                                    <div class="col-span-2">
                                        <p class="text-white">{{$venue->description}}</p>
                                    </div>
                                </div>
                            </div>
                            @endforeach

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


<div class="relative w-full h-full py-12 [#444444]">
    <img class="absolute inset-0 object-cover w-full h-full" src="{{asset('images/homepage/bg-faq.png')}}" alt="">
    <div data-aos="fade-up" data-aos-duration="1000" class="container relative max-w-screen-xl px-4 mx-auto space-y-8">
        <div class="flex flex-col items-center justify-center my-8">
            <h1 class="text-white">Charge Cycle Blog</h1>
            <h1 class="text-[#ffd916] font-bold text-4xl">Power Up Your Day with the Latest News and Tips!</h1>
        </div>

        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            @foreach ($blogs->take(3) as $blog)
            <div data-aos="zoom-in" data-aos-duration="1000">
                <div>
                    <img class="border-4  border-[#ffd916] rounded-full object-cover object-center w-[18rem] h-[18rem] md:h-[25rem] md:w-[35rem]" src="{{asset($blog->image)}}" alt="">
                </div>
                <div class="flex justify-end -mt-40">
                    <div class="bg-[#ffd916] rounded-full p-8 h-[18rem] w-[18rem] md:h-[20rem] md:w-[20rem] flex  justify-center align-center flex-col space-y-4">
                        <div>
                            <h1> <strong>Blog | </strong> {{ $blog->created_at->format('d F Y') }}</h1>
                        </div>
                        <div>
                            <h1 class="font-bold">{{$blog->title}}</h1>
                        </div>
                        <div class="flex justify-between">
                            <h1 class="font-bold">{{$blog->user->name}}</h1>
                            <a href="{{url('/blogs_details', $blog->id)}}">
                                <h1 class="text-red-600">Read More ></h1>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach


        </div>

        <div data-aos="zoom-in" data-aos-duration="1000" class="px-4 space-y-8">
            <h1 class="text-[#ffd916] font-bold text-4xl text-center">Frequently Asked Questions</h1>
            <div class="grid grid-cols-2 gap-4 py-4">
                <div>
                    <h1 class="text-white">How do I find a Charge Cycle station near me?</h1>
                </div>
                <div>
                    <h1 class="text-white">You can easily locate nearby stations through our user-friendly app. Simply download the app and enable location services.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">How much does it cost to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">Yes, creating a free account allows you to manage your rentals, view you billing history, and access other features within the app.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">Do I need to create an account to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We offer competitive hourly rates. The exact cost will be displayed in the app before you initiate a rental.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">What happens if I lose or damage a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We have a damage and loss policy outlined in our terms and conditions. Please refer to the Terms & Conditions section on our website for details.</h1>
                </div>
                <div class="border-b-2 border-[#ffd916] col-span-2 my-8">
                </div>
                <div>
                    <h1 class="text-white">How much does it cost to rent a power bank?</h1>
                </div>
                <div>
                    <h1 class="text-white">We offer competitive hourly rates. The exact cost will be displayed in the app before you initiate a rental.</h1>
                </div>

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


@include('layouts.station')
@include('layouts.footer')
<script>
    var swiper = new Swiper(".default-carousel", {
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>
<script>
    var swiper = new Swiper(".fraction-slide-carousel", {
        loop: true,
        slidesPerView: 1.5,
        spaceBetween: 30,
        fraction: 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
        },
        navigation: {
            nextEl: ".fraction-slide-carousel .swiper-button-next",
            prevEl: ".fraction-slide-carousel .swiper-button-prev",
        },
        pagination: {
            el: '.fraction-slide-carousel .swiper-pagination',
            type: 'fraction',
            formatFractionCurrent: function(number) {
                return number;
            }
        },
    });
</script>

<script>
    var swiper = new Swiper(".stations-carousel", {
        loop: true,
        slidesPerView: 5,
        spaceBetween: 20,
        autoplay: {
            delay: 5000, // Change the delay to your desired value in milliseconds
            disableOnInteraction: false, // Optional: If true, autoplay will be disabled after user interactions
        },
        navigation: {
            nextEl: ".stations-carousel .swiper-button-next",
            prevEl: ".stations-carousel .swiper-button-prev",
        },
        breakpoints: {
            1920: {
                slidesPerView: 5,
                spaceBetween: 30
            },
            1028: {
                slidesPerView: 5,
                spaceBetween: 30
            },
            990: {
                slidesPerView: 5,
                spaceBetween: 0
            }
        }
    });
</script>

<script>
    var swiper = new Swiper(".multiple-slide-carousel", {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 20,
        autoplay: {
            delay: 5000, // Change the delay to your desired value in milliseconds
            disableOnInteraction: false, // Optional: If true, autoplay will be disabled after user interactions
        },
        navigation: {
            nextEl: ".multiple-slide-carousel .swiper-button-next",
            prevEl: ".multiple-slide-carousel .swiper-button-prev",
        },
        breakpoints: {
            1920: {
                slidesPerView: 6,
                spaceBetween: 30
            },
            1028: {
                slidesPerView: 6,
                spaceBetween: 30
            },
            990: {
                slidesPerView: 6,
                spaceBetween: 0
            }
        }
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const firstImage = document.getElementById('connector-1');
        const secondImage = document.getElementById('connector-1-1');

        secondImage.addEventListener('mouseover', function() {
            firstImage.style.opacity = '0';
        });

        secondImage.addEventListener('mouseout', function() {
            firstImage.style.opacity = '1';
        });
    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const firstImage = document.getElementById('connector-2');
        const secondImage = document.getElementById('connector-2-2');

        secondImage.addEventListener('mouseover', function() {
            firstImage.style.opacity = '0';
        });

        secondImage.addEventListener('mouseout', function() {
            firstImage.style.opacity = '1';
        });
    });
</script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const firstImage = document.getElementById('connector-3');
        const secondImage = document.getElementById('connector-3-3');

        secondImage.addEventListener('mouseover', function() {
            firstImage.style.opacity = '0';
        });

        secondImage.addEventListener('mouseout', function() {
            firstImage.style.opacity = '1';
        });
    });
</script>

@endsection