const banners = [
    {
        image: "/assets/images/home/1/banner-image/web.webp",
        subTitle: "METATRONCUBE SOLUTIONS",
        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",
    },
    {
        image: "/assets/images/home/1/banner-image/digital.webp",
        subTitle: "METATRONCUBE SOLUTIONS",
        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",
    },
    {
        image: "/assets/images/home/1/banner-image/seo.webp",
        subTitle: "METATRONCUBE SOLUTIONS",
        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",
    },
    {
        image: "/assets/images/home/1/banner-image/graphic.webp",
        subTitle: "METATRONCUBE SOLUTIONS",
        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",
    },
];

const BannerSection = () => {
    return (
        <section className="banner-section p-relative fix">
            <div className="swiper banner-active">
                <div className="swiper-wrapper">
                    {banners.map((banner, i) => (
                        <div key={i} className="swiper-slide">
                            <div className="banner-main" style={{ backgroundImage: `url(${banner.image})` }}>
                                <div className="large-container">
                                    <div className="banner-area p-relative z-3 wow img-custom-anim-left animated" data-wow-delay={`${1500 + i * 1000}ms`}>
                                        <span className="p-relative banner-sub-title">{banner.subTitle}</span>
                                        <h1 className="banner-title">{banner.title}</h1>
                                        <p className="banner-text">{banner.text}</p>
                                        <div className="banner-btn-area">
                                            <a
                                                className="primary-btn-1 btn-hover"
                                                href={banner.btnHref}
                                                target="_blank"
                                                rel="noopener noreferrer"
                                            >
                                                {banner.btnLabel} &nbsp; | <i className="fa-solid fa-arrow-right"></i>
                                                <span className="btn-hover-span"></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="banner-shape-area">
                                {/* <div
                                    className="shape-1"
                                    style={{ backgroundImage: "url(/assets/images/home/1/white-blue/white.webp)" }}
                                ></div> */}

                                <div
                                    className="shape-2"
                                    style={{ backgroundImage: "url(/assets/images/home/1/white-blue/blue.webp)" }}
                                ></div>

                                <div
                                    className="shape-3"
                                    style={{ backgroundImage: "url(/assets/images/home/1/dark-light/light.webp)" }}
                                ></div>

                                {/* <div
                                    className="shape-4"
                                    style={{ backgroundImage: "url(/assets/images/home/1/dark-light/dark.webp)" }}
                                ></div> */}

                                <div
                                    className="shape-5"
                                    style={{ backgroundImage: "url(/assets/images/home/1/right/right.webp)" }}
                                ></div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
            <div className="banner-dot-inner">
                <div className="banner-dot"></div>
            </div>
        </section>
    );
};

export default BannerSection;