import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCreative, Navigation, Autoplay } from "swiper/modules";
import { Col, Container, Row } from "react-bootstrap";
import Image from "next/image";

const bannerData = [
  {
    backgroundImage: "/images/banner/banner-bg1.jpg",
    subtitle: "Welcome to Advith Consulting!",
    title: "Lorem Ipsum is simply dummy",
    description:
      "As businesses & individuals grow, the. We, at Advith Consulting offer guidance and support to help you navigate growth and expansion through our array of offerrings. Our name, Advith, means second to none and that's the level of excellence we strive for in everything we do. ",
    buttonText1: "Contact Us",
    buttonLink1: "/contact",
    buttonText2: "Get Started",
    buttonLink2: "/contact",
    image: "/images/banner/banner1.png",
  },
  {
    backgroundImage: "/images/banner/banner-bg1.jpg",
    subtitle: "Lorem Ipsum Is",
    title: "Lorem Ipsum is simply dummy",
    description:
      "Given our vast experience of having served clients across various segments, we are poised to deliver custom solutions to Startups, HNIs, Family Businesses, MSMEs, and MNCs in the areas of CFO & FC Services, Transaction Advisory, Business Advisory & Risk Advisory.  ",
    buttonText1: "Contact Us",
    buttonLink1: "/contact",
    buttonText2: "Get Started",
    buttonLink2: "/contact",
    image: "/images/banner/banner1.png",
  },
  {
    backgroundImage: "/images/banner/banner-bg1.jpg",
    subtitle: "Lorem Ipsum Is",
    title: "Lorem Ipsum is simply dummy",
    description:
      "Many businesses, especially startups and small businesses, may not have the expertise required to make informed financial decisions -  Advith Consulting provides you access to experienced professionals as required by your business.",
    buttonText1: "Contact Us",
    buttonLink1: "/contact",
    buttonText2: "Get Started",
    buttonLink2: "/contact",
    image: "/images/banner/banner1.png",
  },
];

const HomeBanner = () => {
  return (
    <section className="home-banner-area">
      <Swiper
        navigation={true}
        grabCursor={true}
        effect={"creative"}
        creativeEffect={{
          prev: {
            shadow: true,
            translate: [0, 0, -400],
          },
          next: {
            translate: ["100%", 0, 0],
          },
        }}
        autoplay={{
          delay: 5000,
          disableOnInteraction: true,
          pauseOnMouseEnter: true,
        }}
        modules={[EffectCreative, Navigation, Autoplay]}
        className="home-slides"
      >
        {bannerData.map((banner, index) => (
          <SwiperSlide key={index}>
            <div
              className="main-banner-area"
              style={{
                backgroundImage: `url(${banner.backgroundImage})`,
              }}
            >
              <Container>
                <Row className="align-items-center">
                  <Col lg={6} md={12}>
                    <div className="main-banner-content">
                      <span className="sub-title">{banner.subtitle}</span>
                      <h1>{banner.title}</h1>
                      <p>{banner.description}</p>
                      <div className="btn-box">
                        <Link href={banner.buttonLink1} className="default-btn">
                          {banner.buttonText1}
                          <i className="ri-arrow-right-line"></i>
                        </Link>
                        <Link href={banner.buttonLink2} className="default-btn">
                          {banner.buttonText2}
                          <i className="ri-arrow-right-line"></i>
                        </Link>
                      </div>
                    </div>
                  </Col>

                  <Col lg={6} md={12}>
                    <div className="main-banner-image">
                      <Image
                        fill
                        src={banner.image}
                        alt="image"
                        className="image-fluid image"
                      />
                    </div>
                  </Col>
                </Row>
              </Container>
            </div>
          </SwiperSlide>
        ))}
      </Swiper>
    </section>
  );
};

export default HomeBanner;