import Image from "next/image";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Autoplay, Navigation } from "swiper/modules";
import { Col, Container, Row } from "react-bootstrap";
import Heading from "./Heading";
import Link from "next/link";
import SwiperNav from "./SwiperNav";
import { cleanImage } from "@/layout/imageHandling";

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: "/industry#education",
  },
  {
    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/industry/life_science.webp",
    imageAlt: "image",
    shapeSrc: "/images/shape/shape8.png",
    shapeAlt: "image",
    link: "/industry#lifesciences",
  },
  {
    title: "Technology",
    subtitle: "INDUSTRIES",
    description:
      "From breakthroughs in software to cutting-edge technology, 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",
    link: "/industry#technology",
  },
  {
    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",
    link: "/industry#hospitality",
  },
  {
    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",
    link: "/industry#realestate",
  },
];

const Industries = ({ industry }) => {
  // console.log(industry, "industry");

  return (
    <>
      <div className="free-quote-area bg-color position-relative">
        <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,
          }}
          navigation={{
            nextEl: ".custom-swiper-button-next",
            prevEl: ".custom-swiper-button-prev",
          }}
          loop={true}
          modules={[Navigation, Autoplay]}
          className="industry-slides position-relative"
        >
          {industry?.Industry &&
            industry?.Industry.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>
                        {industry?.CTA &&
                          industry?.CTA?.map((itemcta, index) => {
                            return (
                              <Link
                                href={itemcta?.URL ? itemcta?.URL : "#"}
                                className="default-btn-one"
                                key={`cta${index}`}
                              >
                                {itemcta?.text}
                              </Link>
                            );
                          })}
                      </div>
                    </Col>

                    <Col lg={7} md={12}>
                      <Image
                        src={cleanImage(industry?.Image?.url)}
                        alt={
                          industry?.alternativeText
                            ? industry?.alternativeText
                            : "image"
                        }
                        width={1920}
                        height={1080}
                        className="img-fluid rounded-5 image"
                      />
                    </Col>
                  </Row>
                </Container>

                <div className="shape3">
                  <Image
                    src="/images/shape/shape8.png"
                    alt="shape"
                    width={500}
                    height={500}
                    className="img-fluid image"
                  />
                </div>
              </SwiperSlide>
            ))}
        </Swiper>
        <div className="cust_nav industry_nav swiper-nav text-center mt-md-4 mt-2">
          {/* <SwiperNav /> */}
        </div>
      </div>
    </>
  );
};

export default Industries;