import React from "react";
import Link from "next/link";
import { Swiper, SwiperSlide } from "swiper/react";
import { EffectCreative, Navigation, Autoplay } from "swiper/modules";
import Heading from "@/components/reuseables/Heading";
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: "Take Our Help To Reach The Top",
    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: "WELCOME TO US",
    title: "Take Our Help To Reach The Top",
    description:
      "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam inta nonumy eirmod tempor invidunt ut labore et.",
    buttonText1: "Contact Us",
    buttonLink1: "/contact",
    buttonText2: "Get Started",
    buttonLink2: "/contact",
    image: "/images/banner/banner1.png",
  },
];

const HomeBanner = () => {
  return (
    <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>

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

export default HomeBanner;