 
import { Navigation } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";

// import Swiper css
import "swiper/css";
import "swiper/css/navigation";
 
export default function TestimonialHomeFive() {
  return (
    <section className="mttestimonial__area  mttestimonial__bg black-bg-2 pt-55 pb-160 p-relative">
      <div className="container ">
        <div className="mt-section-content mb-60 text-center">
          <h5 className="mt-section-subtitle mtwhite"><span className=""></span>Our Testimonial</h5>
          <h2 className="mt-section-title mtwhite mb-10">Clients feedback</h2>
          <p className="mtwhite"> Every project we undertake is a testament to dedication precision and <br />
            unwavering commitment to excellence. we specialize.</p>
        </div>
        <div className="mttestimonial__wrapper pb-30 p-relative">
          <div className="mttestimonial__shape-wrap ">
            <div className="mttestimonial__shape">
              <img src="assets/img/testimonial/shape-1.png" alt="" />
            </div>
            <div className="mttestimonial__shape-2">
              <img src="assets/img/testimonial/shape-2.png" alt="" />
            </div>
            <div className="mttestimonial__shape-3">
              <img src="assets/img/testimonial/shape-3.png" alt="" />
            </div>
            <div className="mttestimonial__shape-4">
              <img src="assets/img/testimonial/shape-4.png" alt="" />
            </div>
          </div>
          <Swiper
            slidesPerView={1}
            loop={true}
            navigation={{
              nextEl: ".mttestimonial__button-next",
              prevEl: ".mttestimonial__button-prev",
            }}
            modules={[Navigation]}
           className="swiper mt-testimonial-active">

              <SwiperSlide className="swiper-slide">
                <div className="mttestimonial mttestimonial__2 mttestimonial__space text-center">
                  <div className="mttestimonial__ratting mb-35">
                    <img src="assets/img/testimonial/circle.png" alt="" />
                  </div>
                  <p className="mb-36">Our clients are at the heart of everything we do, and
                    their feedback is a testament to our dedication
                    to excellence. Each project we undertake</p>
                  <div className="mttestimonial__author-wrap">
                    <img src="assets/img/testimonial/author-1.png" alt="" />
                    <h3 className="mttestimonial__author-name mb-6 mt-10">Brooklyn Simmons</h3>
                    <span className="mttestimonial__author-position">Construction</span>
                  </div>
                </div>
              </SwiperSlide>
              <SwiperSlide className="swiper-slide">
                <div className="mttestimonial mttestimonial__2 mttestimonial__space text-center">
                  <div className="mttestimonial__ratting mb-35">
                    <img src="assets/img/testimonial/circle.png" alt="" />
                  </div>
                  <p className="mb-36">Our clients are at the heart of everything we do, and
                    their feedback is a testament to our dedication
                    to excellence. Each project we undertake</p>
                  <div className="mttestimonial__author-wrap">
                    <img src="assets/img/testimonial/author-1.png" alt="" />
                    <h3 className="mttestimonial__author-name mb-6 mt-10">Brooklyn Simmons</h3>
                    <span className="mttestimonial__author-position">Construction</span>
                  </div>
                </div>
              </SwiperSlide>
           
            <div
              className="mttestimonial__arrow mttestimonial__arrow-2 ml-120 mr-120  d-flex align-items-center justify-content-between z-index-4">
              <div style={{cursor: 'pointer'}} className="mttestimonial__button-next mttestimonial__button">
                <span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="23" height="14" viewBox="0 0 23 14"
                    fill="none">
                    <path
                      d="M12.4042 0C9.23442 2.80302 4.12106 5.44991 0 7.00078C4.12106 8.55061 9.23442 11.1965 12.4037 14L10.1942 7.80443L22.2084 7.80487C22.4184 7.8046 22.6197 7.71978 22.7681 7.56905C22.8788 7.45665 22.9542 7.31347 22.9848 7.15761C23.0153 7.00174 22.9996 6.84018 22.9397 6.69337C22.8797 6.54655 22.7782 6.42106 22.6479 6.33276C22.5177 6.24447 22.3645 6.19733 22.2078 6.1973L10.1941 6.1973L12.4042 0Z"
                      fill="white" />
                  </svg>
                </span>
              </div>
              <div style={{cursor: 'pointer'}}  className="mttestimonial__button-prev mttestimonial__button mttestimonial__button-2">
                <span>
                  <svg xmlns="http://www.w3.org/2000/svg" width="23" height="14" viewBox="0 0 23 14"
                    fill="none">
                    <path
                      d="M10.5958 0C13.7656 2.80302 18.8789 5.44991 23 7.00078C18.8789 8.55061 13.7656 11.1965 10.5963 14L12.8058 7.80443L0.791596 7.80487C0.581603 7.8046 0.380306 7.71978 0.231934 7.56905C0.121174 7.45665 0.0457526 7.31347 0.0152059 7.15761C-0.0153409 7.00174 0.000354817 6.84018 0.0603161 6.69337C0.120277 6.54655 0.221807 6.42106 0.352071 6.33276C0.482334 6.24447 0.635485 6.19733 0.792157 6.1973L12.8059 6.1973L10.5958 0Z"
                      fill="#111111" />
                  </svg>
                </span>
              </div>
            </div>
          </Swiper>
        </div>
      </div>
    </section>
  )
}
