"use client";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import Testimg1 from "../../../public/assets/images/resources/experience-img-1.jpg";
import Testimg2 from "../../../public/assets/images/resources/experience-img-2.jpg";
import Testimg3 from "../../../public/assets/images/resources/experience-img-3.jpg";
import Testimg4 from "../../../public/assets/images/resources/experience-img-4.jpg";
import Testimg5 from "../../../public/assets/images/resources/experience-img-5.jpg";
import Testslider1 from "../../../public/assets/images/resources/testimonial-two-single-img-1.png";

const Testtwo = {
  autoplay: {
    delay: 1000,
  },
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
        arrows: true,
      },
    },
    {
      breakpoint: 992,
      settings: {
        slidesPerView: 2,
        slidestoscroll: 3,
        arrows: false,
      },
    },
    {
      breakpoint: 740,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
        arrows: false,
      },
    },
    {
      breakpoint: 480,
      settings: {
        slidesPerView: 1,
        slidestoscroll: 3,
        arrows: false,
      },
    },
  ],
};

function TestimonialTwo() {
  return (
    <div>
      <section className="testimonial-two">
        <div className="container">
          <div className="testimonial-two-top">
            <div className="section-two-title">
              <div
                className="section-two-title-text wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Customer Feedback</p>
              </div>
              <div
                className="section-two-title-title wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>What Our Customer Say About SEO Services</h2>
              </div>
            </div>
            <div
              className="testimonial-two-top-clients wow fadeInUp animated"
              data-wow-duration="1500ms"
              data-wow-delay="500ms"
            >
              <h4>Global Clients</h4>
              <ul className="testimonial-two-top-clients-list">
                <li>
                  <img src={Testimg1.src} alt="experience-img-1" />
                </li>
                <li>
                  <img src={Testimg2.src} alt="experience-img-2" />
                </li>
                <li>
                  <img src={Testimg3.src} alt="experience-img-3" />
                </li>
                <li>
                  <img src={Testimg4.src} alt="experience-img-4" />
                </li>
                <li>
                  <img src={Testimg5.src} alt="experience-img-4" />
                </li>
              </ul>
            </div>
          </div>
          <div
            className="testimonial-two-detail wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="700ms"
          >
            <Swiper
              className="testimonial-two-slider swiper-wrapper"
              {...Testtwo}
              slidesPerView={1}
              slidestoscroll={1}
              autoplay={true}
            >
              <SwiperSlide className="testimonial-two-single">
                <div className="row align-items-center">
                  <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                    <div className="testimonial-two-single-img-box">
                      <img
                        src={Testslider1.src}
                        alt="testimonial-two-single-img-1"
                      />
                    </div>
                  </div>
                  <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                    <div className="testimonial-two-detail-box">
                      <div className="testimonial-two-detail-star-box text-start">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-two-detail-text-box text-start">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men who are so beguiled and
                          demoralized by the charms of pleasure of the moment,
                          so blinded by desire that they cannot foresee the pain
                          and trouble "
                        </p>
                      </div>
                      <div className="testimonial-two-detail-title-box text-start">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-two-single">
                <div className="row align-items-center">
                  <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                    <div className="testimonial-two-single-img-box">
                      <img
                        src={
                          require("../../../public/assets/images/resources/testimonial-two-single-img-2.jpg")
                            .src
                        }
                        alt="testimonial-two-single-img-2"
                      />
                    </div>
                  </div>
                  <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                    <div className="testimonial-two-detail-box">
                      <div className="testimonial-two-detail-star-box text-start">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-two-detail-text-box text-start">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men who are so beguiled and
                          demoralized by the charms of pleasure of the moment,
                          so blinded by desire that they cannot foresee the pain
                          and trouble "
                        </p>
                      </div>
                      <div className="testimonial-two-detail-title-box text-start">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-two-single">
                <div className="row align-items-center">
                  <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                    <div className="testimonial-two-single-img-box">
                      <img
                        src={Testslider1.src}
                        alt="testimonial-two-single-img-1"
                      />
                    </div>
                  </div>
                  <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                    <div className="testimonial-two-detail-box">
                      <div className="testimonial-two-detail-star-box text-start">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-two-detail-text-box text-start">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men who are so beguiled and
                          demoralized by the charms of pleasure of the moment,
                          so blinded by desire that they cannot foresee the pain
                          and trouble "
                        </p>
                      </div>
                      <div className="testimonial-two-detail-title-box text-start">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-two-single">
                <div className="row align-items-center">
                  <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                    <div className="testimonial-two-single-img-box ">
                      <img
                        src={Testslider1.src}
                        alt="testimonial-two-single-img-1"
                      />
                    </div>
                  </div>
                  <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                    <div className="testimonial-two-detail-box">
                      <div className="testimonial-two-detail-star-box text-start">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-two-detail-text-box text-start">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men who are so beguiled and
                          demoralized by the charms of pleasure of the moment,
                          so blinded by desire that they cannot foresee the pain
                          and trouble "
                        </p>
                      </div>
                      <div className="testimonial-two-detail-title-box text-start">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-two-single">
                <div className="row align-items-center">
                  <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                    <div className="testimonial-two-single-img-box">
                      <img
                        src={
                          require("../../../public/assets/images/resources/testimonial-two-single-img-2.jpg")
                            .src
                        }
                        alt="testimonial-two-single-img-2"
                      />
                    </div>
                  </div>
                  <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                    <div className="testimonial-two-detail-box">
                      <div className="testimonial-two-detail-star-box text-start">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-two-detail-text-box text-start">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men who are so beguiled and
                          demoralized by the charms of pleasure of the moment,
                          so blinded by desire that they cannot foresee the pain
                          and trouble "
                        </p>
                      </div>
                      <div className="testimonial-two-detail-title-box text-start">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-two-single">
                <div className="row align-items-center">
                  <div className="col-xl-5 col-lg-5 col-md-12 col-sm-12">
                    <div className="testimonial-two-single-img-box">
                      <img
                        src={Testslider1.src}
                        alt="testimonial-two-single-img-1"
                      />
                    </div>
                  </div>
                  <div className="col-xl-7 col-lg-7 col-md-12 col-sm-12">
                    <div className="testimonial-two-detail-box">
                      <div className="testimonial-two-detail-star-box text-start">
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                        <i className="icon-star" />
                      </div>
                      <div className="testimonial-two-detail-text-box text-start">
                        <p>
                          " On the other hand denounce with righteous
                          indignation and dislike men who are so beguiled and
                          demoralized by the charms of pleasure of the moment,
                          so blinded by desire that they cannot foresee the pain
                          and trouble "
                        </p>
                      </div>
                      <div className="testimonial-two-detail-title-box text-start">
                        <h4>
                          Russell J. Cash <span>/ CEO &amp; Founder</span>
                        </h4>
                      </div>
                    </div>
                  </div>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </section>
    </div>
  );
}

export default TestimonialTwo;
