"use client";
import "swiper/css";
import { Swiper, SwiperSlide } from "swiper/react";
import TestimonialIMgShapeImg1 from "../../../public/assets/images/shapes/testimonial-one-shape-1.png";
import TestimonialIMgShapeImg2 from "../../../public/assets/images/shapes/testimonial-one-shape-2.png";
import TestimonialIMgShapeImg6 from "../../../public/assets/images/shapes/testimonial-one-shape-6.png";
import TestimonialIMgShapeImg8 from "../../../public/assets/images/shapes/testimonial-one-shape-8.png";
import testimonialsinglePageImg1 from "../../../public/assets/images/resources/testimonial-one-single-img-1.png";
import shapeQuotePngImg from "../../../public/assets/images/shapes/quote.png";

const TestimonialSlider = {
  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 TestimonialOne() {
  return (
    <div>
      <section className="testimonial-one">
        <div
          className="testimonial-one-shape-1 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="100ms"
        >
          <div className="animation_image_zoom">
            <div className="testimonial-one-shape-1-img">
              <img
                src={TestimonialIMgShapeImg1.src}
                alt="testimonial-one-shape-1"
              />
            </div>
          </div>
        </div>
        <div
          className="testimonial-one-shape-2 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="200ms"
        >
          <div className="animation_image_zoom">
            <div className="testimonial-one-shape-2-img">
              <img
                src={TestimonialIMgShapeImg2.src}
                alt="testimonial-one-shape-2"
              />
            </div>
          </div>
        </div>
        <div
          className="testimonial-one-shape-3 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="300ms"
        ></div>
        <div
          className="testimonial-one-shape-4 wow fadeInLeft animated"
          data-wow-duration="1500ms"
          data-wow-delay="400ms"
        ></div>
        <div
          className="testimonial-one-shape-5 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="200ms"
        ></div>
        <div
          className="testimonial-one-shape-6 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="300ms"
        >
          <div className="animation_image_zoom">
            <div className="testimonial-one-shape-6-img">
              <img
                src={TestimonialIMgShapeImg6.src}
                alt="testimonial-one-shape-6"
              />
            </div>
          </div>
        </div>
        <div
          className="testimonial-one-shape-7 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="400ms"
        />
        <div
          className="testimonial-one-shape-8 wow fadeInRight animated"
          data-wow-duration="1500ms"
          data-wow-delay="500ms"
        >
          <div className="animation_image_zoom">
            <div className="testimonial-one-shape-8-img">
              <img
                src={TestimonialIMgShapeImg8.src}
                alt="testimonial-one-shape-8"
              />
            </div>
          </div>
        </div>
        <div className="container">
          <div
            className="section-title text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="100ms"
          >
            <h2>
              1253k+ Global Customer Say About Our Digital Marketing Services
            </h2>
          </div>
          <div
            className="section-details text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="300ms"
          >
            <p>
              Digital marketing &amp; advertising approach focuses on capturing
              the essential
            </p>
          </div>
          <div
            className="testimonial-one-box wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="400ms"
          >
            <Swiper
              className="swiper-wrapper"
              slidesPerView={1}
              autoplay={true}
              autoplayspeed={1000}
              {...TestimonialSlider}
            >
              <SwiperSlide className="testimonial-one-single">
                <div className="testimonial-one-single-title-box text-center">
                  <div className="testimonial-one-single-title-img">
                    <img
                      src={testimonialsinglePageImg1.src}
                      alt="testimonial-one-single-img-1"
                    />
                  </div>
                  <div className="testimonial-one-single-title">
                    <h3>
                      Manuel D. Kittrell<span>/CEO &amp; Founder</span>
                    </h3>
                  </div>
                </div>
                <div className="testimonial-one-single-detaile text-center">
                  <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus
                    qui blanditiis praesentium voluptatum deleniti atque
                    corrupti quos dolore et quas molestias excepturi sint
                    occaecati cupiditate non provident similique sunt culpa
                    officia deserunt mollitia animila borum
                  </p>
                </div>
                <div className="testimonial-one-single-rating">
                  <div className="testimonial-one-single-rating-icon">
                    <img src={shapeQuotePngImg.src} alt="quote.png" />
                  </div>
                  <div className="testimonial-one-single-rating-star">
                    <p className="testimonial-one-single-rating-star-shape-1">
                      "
                    </p>
                    <h4>Good Quality</h4>
                    <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>
                    <p className="testimonial-one-single-rating-star-shape-2">
                      "
                    </p>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-one-single">
                <div className="testimonial-one-single-title-box text-center">
                  <div className="testimonial-one-single-title-img">
                    <img
                      src={testimonialsinglePageImg1.src}
                      alt="testimonial-one-single-img-1"
                    />
                  </div>
                  <div className="testimonial-one-single-title">
                    <h3>
                      Manuel D. Kittrell<span>/CEO &amp; Founder</span>
                    </h3>
                  </div>
                </div>
                <div className="testimonial-one-single-detaile text-center">
                  <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus
                    qui blanditiis praesentium voluptatum deleniti atque
                    corrupti quos dolore et quas molestias excepturi sint
                    occaecati cupiditate non provident similique sunt culpa
                    officia deserunt mollitia animila borum
                  </p>
                </div>
                <div className="testimonial-one-single-rating">
                  <div className="testimonial-one-single-rating-icon">
                    <img src={shapeQuotePngImg.src} alt="quote" />
                  </div>
                  <div className="testimonial-one-single-rating-star">
                    <p className="testimonial-one-single-rating-star-shape-1">
                      "
                    </p>
                    <h4>Good Quality</h4>
                    <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>
                    <p className="testimonial-one-single-rating-star-shape-2">
                      "
                    </p>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-one-single">
                <div className="testimonial-one-single-title-box text-center">
                  <div className="testimonial-one-single-title-img">
                    <img
                      src={testimonialsinglePageImg1.src}
                      alt="testimonial-one-single-img-1"
                    />
                  </div>
                  <div className="testimonial-one-single-title">
                    <h3>
                      Manuel D. Kittrell<span>/CEO &amp; Founder</span>
                    </h3>
                  </div>
                </div>
                <div className="testimonial-one-single-detaile text-center">
                  <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus
                    qui blanditiis praesentium voluptatum deleniti atque
                    corrupti quos dolore et quas molestias excepturi sint
                    occaecati cupiditate non provident similique sunt culpa
                    officia deserunt mollitia animila borum
                  </p>
                </div>
                <div className="testimonial-one-single-rating">
                  <div className="testimonial-one-single-rating-icon">
                    <img src={shapeQuotePngImg.src} alt="quote" />
                  </div>
                  <div className="testimonial-one-single-rating-star">
                    <p className="testimonial-one-single-rating-star-shape-1">
                      "
                    </p>
                    <h4>Good Quality</h4>
                    <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>
                    <p className="testimonial-one-single-rating-star-shape-2">
                      "
                    </p>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-one-single">
                <div className="testimonial-one-single-title-box text-center">
                  <div className="testimonial-one-single-title-img">
                    <img
                      src={testimonialsinglePageImg1.src}
                      alt="testimonial-one-single-img-1"
                    />
                  </div>
                  <div className="testimonial-one-single-title">
                    <h3>
                      Manuel D. Kittrell<span>/CEO &amp; Founder</span>
                    </h3>
                  </div>
                </div>
                <div className="testimonial-one-single-detaile text-center">
                  <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus
                    qui blanditiis praesentium voluptatum deleniti atque
                    corrupti quos dolore et quas molestias excepturi sint
                    occaecati cupiditate non provident similique sunt culpa
                    officia deserunt mollitia animila borum
                  </p>
                </div>
                <div className="testimonial-one-single-rating">
                  <div className="testimonial-one-single-rating-icon">
                    <img src={shapeQuotePngImg.src} alt="quote.png" />
                  </div>
                  <div className="testimonial-one-single-rating-star">
                    <p className="testimonial-one-single-rating-star-shape-1">
                      "
                    </p>
                    <h4>Good Quality</h4>
                    <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>
                    <p className="testimonial-one-single-rating-star-shape-2">
                      "
                    </p>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-one-single">
                <div className="testimonial-one-single-title-box text-center">
                  <div className="testimonial-one-single-title-img">
                    <img
                      src={testimonialsinglePageImg1.src}
                      alt="testimonial-one-single-img-1"
                    />
                  </div>
                  <div className="testimonial-one-single-title">
                    <h3>
                      Manuel D. Kittrell<span>/CEO &amp; Founder</span>
                    </h3>
                  </div>
                </div>
                <div className="testimonial-one-single-detaile text-center">
                  <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus
                    qui blanditiis praesentium voluptatum deleniti atque
                    corrupti quos dolore et quas molestias excepturi sint
                    occaecati cupiditate non provident similique sunt culpa
                    officia deserunt mollitia animila borum
                  </p>
                </div>
                <div className="testimonial-one-single-rating">
                  <div className="testimonial-one-single-rating-icon">
                    <img src={shapeQuotePngImg.src} alt="quote" />
                  </div>
                  <div className="testimonial-one-single-rating-star">
                    <p className="testimonial-one-single-rating-star-shape-1">
                      "
                    </p>
                    <h4>Good Quality</h4>
                    <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>
                    <p className="testimonial-one-single-rating-star-shape-2">
                      "
                    </p>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="testimonial-one-single">
                <div className="testimonial-one-single-title-box text-center">
                  <div className="testimonial-one-single-title-img">
                    <img
                      src={testimonialsinglePageImg1.src}
                      alt="testimonial-one-single-img-1"
                    />
                  </div>
                  <div className="testimonial-one-single-title">
                    <h3>
                      Manuel D. Kittrell<span>/CEO &amp; Founder</span>
                    </h3>
                  </div>
                </div>
                <div className="testimonial-one-single-detaile text-center">
                  <p>
                    At vero eos et accusamus et iusto odio dignissimos ducimus
                    qui blanditiis praesentium voluptatum deleniti atque
                    corrupti quos dolore et quas molestias excepturi sint
                    occaecati cupiditate non provident similique sunt culpa
                    officia deserunt mollitia animila borum
                  </p>
                </div>
                <div className="testimonial-one-single-rating">
                  <div className="testimonial-one-single-rating-icon">
                    <img src={shapeQuotePngImg.src} alt="quote" />
                  </div>
                  <div className="testimonial-one-single-rating-star">
                    <p className="testimonial-one-single-rating-star-shape-1">
                      "
                    </p>
                    <h4>Good Quality</h4>
                    <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>
                    <p className="testimonial-one-single-rating-star-shape-2">
                      "
                    </p>
                  </div>
                </div>
              </SwiperSlide>
            </Swiper>
          </div>
        </div>
      </section>
    </div>
  );
}

export default TestimonialOne;
