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/bannerbg1.png",
    subtitle: "Welcome to Advith Consulting!",
    title:
      "Finance Consulting - Powered by Knowledge, Driven by People, Committed to Client Servicing ",
    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/hero1.png",
  },
  {
    backgroundImage: "/images/banner/bannerbg2.png",
    subtitle: "Welcome to Advith Consulting!",
    title: "Tailored Solutions - Industry and Geography agnostic",
    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/hero2.png",
  },
  {
    backgroundImage: "/images/banner/bannerbg3.png",
    subtitle: "Welcome to Advith Consulting!",
    title: "Expert Finance Solutions for informed decision making",
    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/hero-3.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={7} 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={5} 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;