import Image from "next/image";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Pagination } from "swiper/modules";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "./Heading";
import Link from "next/link";
const industriesData = [
  {
    title: "Education",
    subtitle: "Industries",
    description:
      "As an expert in the Education sector, we understand that shaping minds is the foundation of a nation’s growth. Our extensive knowledge and experience allow us to provide unparalleled service.",
    imageSrc: "/images/industry/education.png",
    imageAlt: "image",
    shapeSrc: "/images/shape/shape8.png",
    shapeAlt: "image",
    link: "/services",
  },
  {
    title: "Life Sciences",
    subtitle: "Industries",
    description:
      "Supporting the Life Sciences sector, we leverage our comprehensive understanding to deliver innovative solutions that enhance the finance & tax complications of healthcare sector.",
    imageSrc: "/images/home/industry.jpg",
    imageAlt: "image",
    shapeSrc: "/images/shape/shape8.png",
    shapeAlt: "image",
  },
  {
    title: "Technology",
    subtitle: "Industries",
    description:
      "From breakthroughs in software to cutting-edge technolgy, the Technology sector remains a key driver of innovation. Our expertise in finance equips us to provide strategic guidance and solutions tailored to the needs of this dynamic sector, ensuring the growth and financial success of our clients.",
    imageSrc: "/images/industry/technology.png",
    imageAlt: "image",
    shapeSrc: "/images/shape/shape8.png",
    shapeAlt: "image",
  },
  {
    title: "Hospitality",
    subtitle: "Industries",
    description:
      "A sector that embodies hospitality and welcomes all, Hospitality is the heart of many economies. Our expertise in finance ensures that these establishments run smoothly and efficiently.",
    imageSrc: "/images/industry/hospitality.png",
    imageAlt: "image",
    shapeSrc: "/images/shape/shape8.png",
    shapeAlt: "image",
  },
  {
    title: "Real Estate",
    subtitle: "Industries",
    description:
      " Unlocking financial potential in Real Estate with our expertise, we enable clients to navigate the complex market and ensure sustainable investments.",
    imageSrc: "/images/industry/real-estate.png",
    imageAlt: "image",
    shapeSrc: "/images/shape/shape8.png",
    shapeAlt: "image",
  },

  // Add more objects here if you have more slides
];
const Industries = () => {
  return (
    <>
      <div className="free-quote-area bg-color">
        <Swiper
          spaceBetween={30}
          pagination={{ clickable: true }}
          breakpoints={{
            0: {
              slidesPerView: 1,
            },
            576: {
              slidesPerView: 1,
            },
            768: {
              slidesPerView: 1,
            },
            992: {
              slidesPerView: 1,
            },
          }}
          autoplay={{
            delay: 5000,
            disableOnInteraction: true,
            pauseOnMouseEnter: true,
          }}
          modules={[Pagination, Autoplay]}
          className="industry-slides"
        >
          {industriesData.map((industry, index) => (
            <SwiperSlide className="single-partner-item" key={index}>
              <Container>
                <Row className="align-items-center">
                  <Col lg={5} md={12}>
                    <div className="free-quote-content">
                      <span className="sub-title">{industry.subtitle}</span>
                      <Heading
                        el="h2"
                        heading={industry.title}
                        className="industry-title"
                      />
                      <p>{industry.description}</p>
                      <Link href="/#" className="default-btn-one">
                        Know More
                      </Link>
                    </div>
                  </Col>

                  <Col lg={7} md={12}>
                    <Image
                      src={industry.imageSrc}
                      alt={industry.imageAlt}
                      layout="fill"
                      className="img-fluid rounded-5 image"
                    />
                  </Col>
                </Row>
              </Container>

              <div className="shape3">
                <Image
                  src={industry.shapeSrc}
                  alt={industry.shapeAlt}
                  layout="fill"
                  className="img-fluid image"
                />
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
    </>
  );
};

export default Industries;