"use client";

import React, { useState, useEffect } from "react";

const banners = [
    {
        subTitle: "METATRONCUBE SOFTWARE SOLUTION",
        title: "WEB AND APP DEVELOPMENT PIONEERING INNOVATION",
        text: "Elevate your digital landscape with Metatroncube's cutting-edge web and mobile app solutions.",
        btnLabel: "Book Your Call Now",
        btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
        images: {
            center: "/assets/images/home/banner/web/centre.webp",
            leftBottom: "/assets/images/home/banner/web/left-bottom.webp",
            topRight: "/assets/images/home/banner/web/top-right.webp",
            rightBottom: "/assets/images/home/banner/web/right-bottom.webp",
        }
    },
    {
        subTitle: "METATRONCUBE SOFTWARE SOLUTION",
        title: "DIGITAL MARKETING AMPLIFYING YOUR ONLINE VOICE",
        text: "Explore Metatroncube's innovative strategies to connect, engage, and grow your audience in the digital realm.",
        btnLabel: "Schedule Appointment",
        btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
        images: {
            center: "/assets/images/home/banner/digital/centre.webp",
            leftBottom: "/assets/images/home/banner/digital/right-bottom.png",
            topRight: "/assets/images/home/banner/digital/top-right.webp",
            rightBottom: "/assets/images/home/banner/digital/left-bottom.webp",
        }
    },
    {
        subTitle: "METATRONCUBE SOFTWARE SOLUTION",
        title: "SEO STRATEGIES PAVING YOUR PATH TO SUCCESS",
        text: "Maximize visibility and drive traffic with Metatroncube's expert SEO strategies.",
        btnLabel: "REQUEST CONSULTATION",
        btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
        images: {
            center: "/assets/images/home/banner/seo/centre.webp",
            leftBottom: "/assets/images/home/banner/seo/left-bottom.webp",
            topRight: "/assets/images/home/banner/seo/top-right.webp",
            rightBottom: "/assets/images/home/banner/seo/right-bottom.webp",
        }
    },
    {
        subTitle: "METATRONCUBE SOFTWARE SOLUTION",
        title: "GRAPHIC DESIGN CREATING VISUAL IMPACT",
        text: "Craft compelling visuals that enhance your brand identity with Metatroncube's graphic design services",
        btnLabel: "BOOK YOUR FREE CONSULTATION",
        btnHref: "https://calendly.com/metatroncubeswsolutions/request-consultation",
        images: {
            center: "/assets/images/home/banner/graphic/centre.webp",
            leftBottom: "/assets/images/home/banner/graphic/left-bottom.webp",
            topRight: "/assets/images/home/banner/graphic/top-right.webp",
            rightBottom: "/assets/images/home/banner/graphic/right-bottom.webp",
        }
    },
];

const serviceCategories = [
    { title: "Web Dev", image: "/assets/images/home/banner/web.webp", link: "/service/website-development-company" },
    { title: "Mobile App", image: "/assets/images/home/banner/mbl.webp", link: "/service/mobile-application-development" },
    { title: "Graphic Design", image: "/assets/images/home/banner/graphic.webp", link: "/service/graphic-designing-company" },
    { title: "UI/UX", image: "/assets/images/home/banner/ui-ux.webp", link: "/service/ui-ux-designing" },
    { title: "SEO", image: "/assets/images/home/banner/seo.webp", link: "/service/search-engine-optimization-seo-content-writing" },
    { title: "Digital Marketing", image: "/assets/images/home/banner/digital.webp", link: "/service/digital-marketing-agency-in-canada" },
    { title: "ERP", image: "/assets/images/home/banner/erp.webp", link: "/service/erp-development-implementation" },
];

const BannerSection = () => {
    const [currentSlide, setCurrentSlide] = useState(0);
    const [currentBanner, setCurrentBanner] = useState(0);

    useEffect(() => {
        const serviceTimer = setInterval(() => {
            setCurrentSlide((prev) => (prev + 1) % serviceCategories.length);
        }, 2000);

        const bannerTimer = setInterval(() => {
            setCurrentBanner((prev) => (prev + 1) % banners.length);
        }, 9000);

        return () => {
            clearInterval(serviceTimer);
            clearInterval(bannerTimer);
        };
    }, []);

    const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % serviceCategories.length);
    const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + serviceCategories.length) % serviceCategories.length);

    const goToBanner = (index: number) => setCurrentBanner(index);

    return (
        <section className="hero-1" suppressHydrationWarning>
            <div className="hero-1-bg" suppressHydrationWarning></div>

            <div className="banner-active" suppressHydrationWarning>
                <div className="banner-slider-wrapper" style={{ transform: `translateX(-${currentBanner * 100}%)` }} suppressHydrationWarning>
                    {banners.map((banner, i) => (
                        <div key={i} className={`custom-swiper-slide ${i === currentBanner ? 'active' : ''}`} suppressHydrationWarning>
                            <div className="custom-container" suppressHydrationWarning>
                                <div className="hero-layout-wrapper" suppressHydrationWarning>

                                    {/* Left Side: Hero Text Content */}
                                    <div className="hero-content" suppressHydrationWarning>
                                        <span className="banner-sub-title">{banner.subTitle}</span>
                                        <h1>{banner.title}</h1>
                                        <p>{banner.text}</p>
                                        <a
                                            className="theme-btn"
                                            href={banner.btnHref}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                        >
                                            {banner.btnLabel}
                                        </a>
                                    </div>

                                    {/* Right Side: Floating Image Group + Category Slider */}
                                    <div className="hero-right-content" suppressHydrationWarning>
                                        <div className="hero-img-group" suppressHydrationWarning>
                                            {/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/t-shirt-bg.png" alt="shape" className="circle-shape" /> */}
                                            <img loading="lazy" src={banner.images.center} alt="t-shirt" className="main-shirt" />
                                            {/* <img loading="lazy" src="https://modinatheme.com/html/printnow-html/assets/img/hero/mockup-shape.png" alt="shape" className="mockup-shape" /> */}
                                            <img loading="lazy" src={banner.images.leftBottom} alt="shape" className="cup-shape" />
                                            <img loading="lazy" src={banner.images.topRight} alt="shape" className="t-shirt-shape" />
                                            <img loading="lazy" src={banner.images.rightBottom} alt="shape" className="cap-shape" />
                                        </div>

                                        {/* Bottom Right "Our Service" Slider */}
                                        <div className="our-services-slider" suppressHydrationWarning>
                                            <div className="slider-header" suppressHydrationWarning>
                                                <span>Our Service</span>
                                                <div className="slider-progress-bar" suppressHydrationWarning>
                                                    <div className="slider-progress-line" style={{ left: `calc(${(currentSlide % serviceCategories.length)} * var(--slider-slide-width))` }} suppressHydrationWarning></div>
                                                </div>
                                            </div>

                                            <div className="slider-track-container" suppressHydrationWarning>

                                                {/* Left Arrow (Overlapping Image) */}
                                                <button className="custom-slider-arrow" onClick={prevSlide} suppressHydrationWarning>
                                                    <i className="fa-solid fa-arrow-left"></i>
                                                </button>

                                                <div style={{ overflow: "hidden", width: "100%", padding: "5px 0" }} suppressHydrationWarning>
                                                    <div className="slider-track" style={{ transform: `translateX(calc(-1 * ${currentSlide} * var(--slider-slide-width)))` }} suppressHydrationWarning>
                                                        {[...serviceCategories, ...serviceCategories].map((cat, idx) => (
                                                            <div key={idx} className="slider-item" suppressHydrationWarning>
                                                                <div className="slider-image-node" suppressHydrationWarning>
                                                                    <a href={cat.link}>
                                                                        <img loading="lazy" src={cat.image} alt={cat.title} />
                                                                    </a>
                                                                </div>
                                                                <div className="slider-category-title" suppressHydrationWarning>
                                                                    <a href={cat.link}>
                                                                        {cat.title} <span>&rarr;</span>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        ))}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>

            {/* Banner Pagination Dots */}
            <div className="banner-pagination" suppressHydrationWarning>
                {banners.map((_, i) => (
                    <div
                        key={i}
                        className={`banner-dot ${i === currentBanner ? 'active' : ''}`}
                        onClick={() => goToBanner(i)}
                        suppressHydrationWarning
                    ></div>
                ))}
            </div>


        </section>
    );
};

export default BannerSection;