"use client";
  
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import Link from "next/link";
import Image from "next/image";

const Testimonials: React.FC = () => {
  return (
    <>
      <div className="testimonials-area bg-color pt-100 bg-fafafb pb-5">
        <div className="container">
          <div className="section-title">
            <span className="sub-title">
              <Image
                src="/img/star-icon.png"
                alt="image"
                width={32}
                height={34}
              />
              Testimonials
            </span>
            <h2>What Our Clients are Saying?</h2>
            <p>
              Stories of success, trust, and satisfaction.
            </p>
          </div>

          <Swiper
            navigation={true}
            spaceBetween={30}
            autoplay={{
              delay: 5000,
              disableOnInteraction: true,
              pauseOnMouseEnter: true,
            }}
            breakpoints={{
              0: {
                slidesPerView: 1,
              },
              768: {
                slidesPerView: 2,
              },
            }}
            modules={[Navigation, Autoplay]}
            className="testimonials-slides"
          >
            <SwiperSlide>
              <div className="single-testimonials-box">
                <Image
                  src="/img/testimonials/client2.jpg"
                  alt="image"
                  width={50}
                  height={50}
                />
                <p>
                  I felt privileged to have met so many of you on my visit to Webile team this Year. Beyond my talented team, all the people I met in the office were friendly, hard-working and super supportive of each other.
                </p>

                <div className="client-info">
                  <div className="d-flex justify-content-center align-items-center">
                    
                    <div className="title">
                      <h3>Mr. Alex C</h3>
                      <span>USA</span>
                    </div>
                  </div>
                </div>
              </div>
            </SwiperSlide>

            <SwiperSlide>
              <div className="single-testimonials-box">
                <Image
                  src="/img/testimonials/client3.jpg"
                  alt="image"
                  width={50}
                  height={50}
                />
                <p>
                  We deliver specialist healthcare products around California and wanted to build an web app for Hospitals ADT Messages receiving from mobile Application.
                </p>
                <div className="client-info">
                  <div className="d-flex justify-content-center align-items-center">
                    
                    <div className="title">
                      <h3>Mr. Cash P.</h3>
                      <span>USA</span>
                    </div>
                  </div>
                </div>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className="single-testimonials-box">
                <Image
                  src="/img/testimonials/client1.jpg"
                  alt="image"
                  width={50}
                  height={50}
                />
                <p>
                Delivered work on time on reasonable amount. Preferable to hire again, Cooperation is much more than agreed scope.
                </p>
                <div className="client-info">
                  <div className="d-flex justify-content-center align-items-center">
                    
                    <div className="title">
                      <h3>Mr. Yosef J</h3>
                      <span>Israel</span>
                    </div>
                  </div>
                </div>
              </div>
            </SwiperSlide>

            
          </Swiper>

          <div className="testimonials-view-btn text-center">
            <Link href="/testimonials" className="default-btn">
              <i className="flaticon-view"></i>
              Check Out All Reviews <span></span>
            </Link>
          </div>
        </div>

        <div className="shape-img1">
          <Image
            src="/img/shape/shape1.svg"
            alt="image"
            width={22}
            height={22}
          />
        </div>
      </div>
    </>
  );
};

export default Testimonials;