"use client";
import Link from "next/link";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { clients } from "../../datas/clients";

const swiperOptions = {
  modules: [Autoplay, Pagination, Navigation],
  spaceBetween: 30,
  loop: true,
  autoplay: {
    delay: 6000,
  },
  // Navigation arrows
  navigation: {
    nextEl: ".project-button-next",
    prevEl: ".project-button-prev",
  },
};

export default function Project3() {
  return (
    <>
      <section
        className="project__area-three project__bg-three"
        data-background="/assets/img/bg/h3_project_bg.jpg"
      >
        <div className="container">
          <div className="row justify-content-center">
            <div className="col-xl-7 col-lg-8">
              <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
                <span className="sub-title">
                  COMPANIES{" "}
                  <span className="title-color">WE'VE WORKED WITH</span>
                </span>
                <h2 className="title tg-element-title">
                  Some of Our Most Recent Clients
                </h2>
              </div>
            </div>
          </div>
          <div className="row">
            <div className="col-12">
              <div className="swiper-container project-active">
                <Swiper {...swiperOptions} className="swiper-wrapper">
                  {clients.map((q) => (
                    <SwiperSlide>
                      <div className="project__item-three shine-animate-item">
                        <div className="project__content-three">
                          <h2 className="title">
                            <Link href="/portfolio">{q.name}</Link>
                          </h2>
                          <p>{q.description}</p>
                          <Link href="/portfolio" className="btn btn-two">
                            View Our Portfolio
                          </Link>
                        </div>
                        <div className="project__thumb-three shine-animate">
                          <img
                            src={`/assets/img/custom/clients-new/${q.image}`}
                            alt=""
                          />
                        </div>
                      </div>
                    </SwiperSlide>
                  ))}
                </Swiper>
                <div className="project__nav-wrap">
                  <div className="project-button-prev">
                    <i className="flaticon-right-arrow" />
                  </div>
                  <div className="project-button-next">
                    <i className="flaticon-right-arrow" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div className="project__shape-wrap-three">
          <img
            src="/assets/img/project/h3_project_shape01.png"
            alt=""
            data-aos="fade-left"
            data-aos-delay={400}
          />
          <img
            src="/assets/img/project/h3_project_shape02.png"
            alt=""
            className="alltuchtopdown"
          />
        </div>
      </section>
    </>
  );
}