"use client";
import testimonialThreeTabImg1 from "../../../public/assets/images/testimonial/testimonial-three-tab-img-1.png";
import testimonialThreeTabImg2 from "../../../public/assets/images/testimonial/testimonial-three-tab-img-2.png";
import testimonialThreeTabImg3 from "../../../public/assets/images/testimonial/testimonial-three-tab-img-3.png";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";

const settingsIndex5 = {
  items: 3,
  responsive: [
    {
      breakpoint: 576,
      settings: {
        slidesToShow: 1,
        slidestoscroll: 1,
        margin: 30,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesToShow: 1,
        slidestoscroll: 1,
        margin: 30,
      },
    },
    {
      breakpoint: 799,
      settings: {
        slidesToShow: 1,
        slidestoscroll: 1,
        margin: 30,
      },
    },
  ],
};

function TestimonialFive() {
  return (
    <div>
      <section className="testimonial-five">
        <div className="container">
          <div className="testimonial-five-title-box">
            <div className="section-five-title">
              <div className="section-five-title-text text-center">
                <p>Customer Feedback</p>
              </div>
              <div className="section-five-title-title text-center">
                <h2>1253+ Customer Say About Us</h2>
              </div>
            </div>
          </div>
          <Swiper
            className="swiper-wrapper"
            {...settingsIndex5}
            slidesPerView={3}
            slidestoscroll={1}
            autoplay={true}
            spaceBetween={30}
          >
            <SwiperSlide
              className="testimonial-five-single-box wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="testimonial-five-single-title-box">
                <div className="testimonial-five-single-title-img">
                  <img
                    src={testimonialThreeTabImg1.src}
                    alt="testimonial-three-tab-img-1"
                  />
                </div>
                <div className="testimonial-five-single-title">
                  <h4>
                    Russell J. <span>/ CEO &amp; Founder</span>
                  </h4>
                </div>
              </div>
              <div className="testimonial-five-single-detail">
                <p>
                  " On the other hand denounce with righteou indignation and
                  dislike men beguiled and demoralized "
                </p>
              </div>
              <div className="star-icon">
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="testimonial-five-single-box wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="testimonial-five-single-title-box">
                <div className="testimonial-five-single-title-img">
                  <img
                    src={testimonialThreeTabImg3.src}
                    alt="testimonial-three-tab-img-3"
                  />
                </div>
                <div className="testimonial-five-single-title">
                  <h4>
                    Somalia <span>/ Developer</span>
                  </h4>
                </div>
              </div>
              <div className="testimonial-five-single-detail">
                <p>
                  " On the other hand denounce with righteou indignation and
                  dislike men beguiled and demoralized "
                </p>
              </div>
              <div className="star-icon">
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="testimonial-five-single-box wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="500ms"
            >
              <div className="testimonial-five-single-title-box">
                <div className="testimonial-five-single-title-img">
                  <img
                    src={testimonialThreeTabImg2.src}
                    alt="testimonial-three-tab-img-2"
                  />
                </div>
                <div className="testimonial-five-single-title">
                  <h4>
                    Michel H. <span>/ Businessman</span>
                  </h4>
                </div>
              </div>
              <div className="testimonial-five-single-detail">
                <p>
                  " On the other hand denounce with righteou indignation and
                  dislike men beguiled and demoralized "
                </p>
              </div>
              <div className="star-icon">
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="testimonial-five-single-box wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="700ms"
            >
              <div className="testimonial-five-single-title-box">
                <div className="testimonial-five-single-title-img">
                  <img
                    src={testimonialThreeTabImg1.src}
                    alt="testimonial-three-tab-img-1"
                  />
                </div>
                <div className="testimonial-five-single-title">
                  <h4>
                    Russell J. <span>/ CEO &amp; Founder</span>
                  </h4>
                </div>
              </div>
              <div className="testimonial-five-single-detail">
                <p>
                  " On the other hand denounce with righteou indignation and
                  dislike men beguiled and demoralized "
                </p>
              </div>
              <div className="star-icon">
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="testimonial-five-single-box wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="900ms"
            >
              <div className="testimonial-five-single-title-box">
                <div className="testimonial-five-single-title-img">
                  <img
                    src={testimonialThreeTabImg3.src}
                    alt="testimonial-three-tab-img-3"
                  />
                </div>
                <div className="testimonial-five-single-title">
                  <h4>
                    Somalia <span>/ Developer</span>
                  </h4>
                </div>
              </div>
              <div className="testimonial-five-single-detail">
                <p>
                  " On the other hand denounce with righteou indignation and
                  dislike men beguiled and demoralized "
                </p>
              </div>
              <div className="star-icon">
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
              </div>
            </SwiperSlide>
            <SwiperSlide
              className="testimonial-five-single-box wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="1100ms"
            >
              <div className="testimonial-five-single-title-box">
                <div className="testimonial-five-single-title-img">
                  <img
                    src={testimonialThreeTabImg2.src}
                    alt="testimonial-three-tab-img-2"
                  />
                </div>
                <div className="testimonial-five-single-title">
                  <h4>
                    Michel H. <span>/ Businessman</span>
                  </h4>
                </div>
              </div>
              <div className="testimonial-five-single-detail">
                <p>
                  " On the other hand denounce with righteou indignation and
                  dislike men beguiled and demoralized "
                </p>
              </div>
              <div className="star-icon">
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
                <i className="fas fa-star" />
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </section>
    </div>
  );
}

export default TestimonialFive;
