"use client";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import TestimonialFOurImg1 from "../../../public/assets/images/testimonial/testimonial-four-detail-img-one.jpg";
import TestimonialFOurImg2 from "../../../public/assets/images/testimonial/testimonial-four-detail-img-two.jpg";
import TestimonialFOurImgTabThree1 from "../../../public/assets/images/testimonial/testimonial-three-tab-img-1.png";
import TestimonialFOurImgTabThree2 from "../../../public/assets/images/testimonial/testimonial-three-tab-img-2.png";
import TestimonialFOurImgTabThree3 from "../../../public/assets/images/testimonial/testimonial-three-tab-img-3.png";

const settingsTestimon = {
  autoplayspeed: 2000,
  slidesPerView: 1,
  slidestoscroll: 1,
  autoplay: true,
  easing: "linear",
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 740,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
  ],
};

const settingsTestimonUser = {
  autoplayspeed: 2000,
  slidesPerView: 3,
  slidestoscroll: 1,
  autoplay: true,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
        arrows: true,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 740,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
      },
    },
  ],
};

function TestimonialFour() {
  return (
    <div>
      <section className="testimonial-four">
        <div className="testimonial-four-shape-1" />
        <div className="testimonial-four-shape-2" />
        <div className="testimonial-four-shape-3" />
        <div className="testimonial-four-shape-4" />
        <div className="testimonial-four-shape-5" />
        <div className="container">
          <div className="testimonial-four-title-box">
            <div
              className="section-four-title wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="100ms"
            >
              <div className="section-four-title-title">
                <h2>
                  Global Customer{" "}
                  <span className="section-four-title-title-inner">Say</span>
                  About Services
                </h2>
              </div>
            </div>
            <div
              className="section-four-details wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <p>Digital marketing &amp; advertising approach essential</p>
            </div>
          </div>
          <div className="testimonial-four-detail">
            <div
              className="testimonial-four-detail-img-one wow fadeInLeft animated"
              data-wow-duration="1500ms"
              data-wow-delay={300}
            >
              <div className="animation_image_zoom">
                <div className="testimonial-four-detail-one-img">
                  <img
                    src={TestimonialFOurImg1.src}
                    alt="testimonial-four-detail-img-one"
                  />
                </div>
              </div>
            </div>
            <div
              className="testimonial-four-detail-img-two wow fadeInRight animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="animation_image_zoom">
                <div className="testimonial-four-detail-two-img">
                  <img
                    src={TestimonialFOurImg2.src}
                    alt="testimonial-four-detail-img-two"
                  />
                </div>
              </div>
            </div>
            <div
              className="testimonial-four-slider wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="300ms"
            >
              <div className="swiper testimonial-three-reviews">
                <Swiper
                  className="swiper-wrapper"
                  {...settingsTestimon}
                  slidesPerView={1}
                  slidestoscroll={1}
                  autoplay={true}
                  autoplayspeed={1000}
                >
                  <SwiperSlide className="swiper-slide">
                    <div className="testimonial-four-single text-center">
                      <div className="testimonial-four-single-star-box">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-four-single-text-box">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men beguiled and demoralized "
                        </p>
                      </div>
                      <div className="testimonial-four-single-title-box">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide className="swiper-slide">
                    <div className="testimonial-four-single text-center">
                      <div className="testimonial-four-single-star-box">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-four-single-text-box">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men beguiled and demoralized "
                        </p>
                      </div>
                      <div className="testimonial-four-single-title-box">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide className="swiper-slide">
                    <div className="testimonial-four-single text-center">
                      <div className="testimonial-four-single-star-box">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-four-single-text-box">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men beguiled and demoralized "
                        </p>
                      </div>
                      <div className="testimonial-four-single-title-box">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide className="swiper-slide">
                    <div className="testimonial-four-single text-center">
                      <div className="testimonial-four-single-star-box">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-four-single-text-box">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men beguiled and demoralized "
                        </p>
                      </div>
                      <div className="testimonial-four-single-title-box">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide className="swiper-slide">
                    <div className="testimonial-four-single text-center">
                      <div className="testimonial-four-single-star-box">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-four-single-text-box">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men beguiled and demoralized "
                        </p>
                      </div>
                      <div className="testimonial-four-single-title-box">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </SwiperSlide>
                  <SwiperSlide className="swiper-slide">
                    <div className="testimonial-four-single text-center">
                      <div className="testimonial-four-single-star-box">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-four-single-text-box">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men beguiled and demoralized "
                        </p>
                      </div>
                      <div className="testimonial-four-single-title-box">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </SwiperSlide>
                </Swiper>
              </div>
              <div className="testimonial-three-thumb">
                <Swiper
                  className="swiper-wrapper"
                  {...settingsTestimonUser}
                  slidesPerView={3}
                  slidestoscroll={1}
                  autoplay={true}
                  autoplayspeed={1000}
                >
                  <SwiperSlide className="swiper-slide ">
                    <img src={TestimonialFOurImgTabThree1.src} alt="img-17" />
                  </SwiperSlide>
                  <SwiperSlide className="swiper-slide ">
                    <img src={TestimonialFOurImgTabThree2.src} alt="img-18" />
                  </SwiperSlide>
                  <SwiperSlide className="swiper-slide">
                    <img src={TestimonialFOurImgTabThree3.src} alt="img-19" />
                  </SwiperSlide>
                </Swiper>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

export default TestimonialFour;
