"use client";
import Link from "next/link";
import Test1 from "../../../public/assets/images/shapes/testimonial-three-shape-1.png";
import Test2 from "../../../public/assets/images/shapes/testimonial-three-shape-2.png";
import Test3 from "../../../public/assets/images/shapes/testimonial-three-shape-3.png";
import Test4 from "../../../public/assets/images/shapes/testimonial-three-shape-4.png";
import Testimg1 from "../../../public/assets/images/resources/testimonial-three-img-1.jpg";
import Testimg2 from "../../../public/assets/images/resources/testimonial-three-img-2.jpg";

function TestimonialThree() {
  return (
    <div>
      <section className="testimonial-three">
        <div className="testimonial-three-shape-1">
          <div className="animation_image_zoom">
            <div className="testimonial-three-shape-1-img">
              <img src={Test1.src} alt="testimonial-three-shape-1" />
            </div>
          </div>
        </div>
        <div className="testimonial-three-shape-2">
          <div className="animation_image_zoom">
            <div className="testimonial-three-shape-2-img">
              <img src={Test2.src} alt="testimonial-three-shape-2" />
            </div>
          </div>
        </div>
        <div className="testimonial-three-shape-3">
          <div className="animation_image_zoom">
            <div className="testimonial-three-shape-3-img">
              <img src={Test3.src} alt="testimonial-three-shape-3" />
            </div>
          </div>
        </div>
        <div className="testimonial-three-shape-4">
          <div className="animation_image_zoom">
            <div className="testimonial-three-shape-4-img">
              <img src={Test4.src} alt="testimonial-three-shape-4" />
            </div>
          </div>
        </div>
        <div className="container">
          <div className="testimonial-three-title-box">
            <div className="section-three-title text-center">
              <div
                className="section-three-title-text wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="100ms"
              >
                <p>Clients Testimonials</p>
              </div>
              <div
                className="section-three-title-title wow fadeInUp animated"
                data-wow-duration="1500ms"
                data-wow-delay="300ms"
              >
                <h2>1253+ Customer Say About Us</h2>
              </div>
            </div>
          </div>
          <div className="testimonial-three-single">
            <div className="row align-items-center">
              <div className="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                <div
                  className="testimonial-three-single-img-box-shape wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <div className="testimonial-three-single-img-box">
                    <img src={Testimg1.src} alt="testimonial-three-img-1" />
                  </div>
                </div>
              </div>
              <div className="col-xl-8 col-lg-8 col-md-8 col-sm-8">
                <div
                  className="testimonial-three-detail-box wow fadeInLeft animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="testimonial-three-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>
                  <div className="testimonial-three-single-detaile">
                    <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 blinde "
                    </p>
                  </div>
                  <div className="testimonial-three-single-title">
                    <h3>
                      Russell J. Cash<span> / CEO &amp; Founder</span>
                    </h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="testimonial-three-single testimonial-three-single-two">
            <div className="row align-items-center">
              <div className="col-xl-8 col-lg-8 col-md-8 col-sm-8">
                <div
                  className="testimonial-three-detail-box wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="100ms"
                >
                  <div className="testimonial-three-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>
                  <div className="testimonial-three-single-detaile">
                    <p>
                      " At vero eos et accusamus et iusto odio dignissimos
                      ducimus qui blanditiis praesentium voluptatum delenitie
                      atque corrupti quos dolores quas molestias "
                    </p>
                  </div>
                  <div className="testimonial-three-single-title">
                    <h3>
                      Donald M. Littrell<span> / Web Developer</span>
                    </h3>
                  </div>
                </div>
              </div>
              <div className="col-xl-4 col-lg-4 col-md-4 col-sm-4">
                <div
                  className="testimonial-three-single-img-box-shape wow fadeInRight animated"
                  data-wow-duration="1500ms"
                  data-wow-delay="300ms"
                >
                  <div className="testimonial-three-single-img-box">
                    <img src={Testimg2.src} alt="testimonial-three-img-2" />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            className="testimonial-three-btn text-center wow fadeInUp animated"
            data-wow-duration="1500ms"
            data-wow-delay="100ms"
          >
            <Link href="/about" className="thm-btn main-btn-three">
              View More Reviews
              <i className="icon-right-arrow" />
            </Link>
          </div>
        </div>
      </section>
    </div>
  );
}

export default TestimonialThree;
