import { useEffect, useRef } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowLeft, faArrowRight } from "@fortawesome/free-solid-svg-icons";
import { gsap } from "gsap";
import { ScrollTrigger } from "@/plugins";
import { Navigation, FreeMode } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import Link from "next/link";
import Testimonial31 from "../../../public/assets/imgs/testimonial/4/testimonial-logo1.jpg";
import Testimonial32 from "../../../public/assets/imgs/testimonial/4/testimonial-logo2.jpg";
import Testimonial33 from "../../../public/assets/imgs/testimonial/4/testimonial-logo3.jpg";
import Testimonial34 from "../../../public/assets/imgs/testimonial/4/testimonial-logo4.jpg";
import Testimonial35 from "../../../public/assets/imgs/testimonial/4/testimonial-logo5.jpg";
import Testimonial36 from "../../../public/assets/imgs/testimonial/4/testimonial-logo6.jpg";
import Testimonial37 from "../../../public/assets/imgs/testimonial/4/testimonial-logo7.jpg";


// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/free-mode";
import Image from "next/image";

gsap.registerPlugin(ScrollTrigger);

const DigitalMarketingTestimonial = () => {
  const testimonialArea = useRef();

  useEffect(() => {
    if (typeof window !== "undefined") {
      let tHero = gsap.context(() => {
        gsap.set(".animation_image_zoom img", { opacity: 0, scale: 0.5 });

        gsap.to(".animation_image_zoom img", {
          scrollTrigger: {
            trigger: ".testimonial__area-3",
            start: "top center+=200",
            markers: false,
          },
          opacity: 1,
          scale: 1,
          x: 20,
          ease: "power2.out",
          duration: 2.5,
          stagger: {
            each: 0.3,
          },
        });
        function imageMoving(wrapper, image_list) {
          let container = wrapper;
          try {
            if (container) {
              container.addEventListener("mousemove", (e) => {
                var x = e.clientX;
                var y = e.clientY;
                let viewportWidth = window.innerWidth;
                let viewportHeight = window.innerHeight;
                let center = viewportWidth / 2;
                let centerHeight = innerHeight / 2;

                if (x > center) {
                  gsap.to(image_list, {
                    x: 15,
                    duration: 5,
                    ease: "power4.out",
                  });
                } else {
                  gsap.to(image_list, {
                    x: -15,
                    duration: 5,
                    ease: "power4.out",
                  });
                }
                if (y > centerHeight) {
                  gsap.to(image_list, {
                    y: 15,
                    duration: 5,
                    ease: "power4.out",
                  });
                } else {
                  gsap.to(image_list, {
                    y: -15,
                    duration: 5,
                    ease: "power4.out",
                  });
                }
              });
            }
          } catch (err) {
            console.log(err);
          }
        }
        imageMoving(testimonialArea.current, ".testimonial__area-3 img");
      });
      return () => tHero.revert();
    }
  }, []);
  return (
    <div></div>
    // <>
    //   <section className="testimonial__area-3" ref={testimonialArea}>
    //     <div className="container">
    //       <div className="row">
    //         <div className="col-xxl-12">
    //           <div>
    //             <Swiper
    //               modules={[Navigation, FreeMode]}
    //               spaceBetween={0}
    //               slidesPerView={1}
    //               freeMode={true}
    //               loop={true}
    //               speed={2000}
    //               navigation={{
    //                 prevEl: ".next-button",
    //                 nextEl: ".prev-button",
    //               }}
    //               className="testimonial__slider-3"
    //             >
    //               <div className="swiper-wrapper">
    //                 <SwiperSlide>
    //                   <div className="testimonial__slide-3">
    //                     <p>
    //                       I’m extremely satisfied with the service provided by SyncROI. My website was launched in a very short time, and the developers have been consistently helpful with any updates and maintenance.
    //                       Highly recommend for anyone looking for efficient and reliable web development support!
    //                     </p>
    //                     <h2 className="client__name-3">Shaden Hilaly</h2>
    //                     <h3 className="client__role-3">Marketing Manager,&nbsp;
    //                       <Link href="https://brandoptions.ae/"
    //                         target="#"
    //                         style={{ color: "#4a696f", textDecoration: "underline" }}>
    //                         Brand Options - UAE & KSA{" "}
    //                       </Link></h3>
    //                   </div>
    //                 </SwiperSlide>
    //                 <SwiperSlide>
    //                   <div className="testimonial__slide-3">
    //                     <p>
    //                       We are highly satisfied with the professional service provided by SyncROI in developing our website. Their expertise, attention to detail, and commitment to delivering a high-quality product have greatly contributed to the success of our online presence. We highly recommend their services to any organization looking for a reliable and skilled web development partner.
    //                     </p>
    //                     <h2 className="client__name-3">Hady Hashish</h2>
    //                     <h3 className="client__role-3">Chief Marketing Officer,&nbsp;
    //                       <Link href="https://masar.med.sa/"
    //                         target="#"
    //                         style={{ color: "#4a696f", textDecoration: "underline" }}>
    //                         Masar Center - KSA{" "}
    //                       </Link></h3>
    //                   </div>
    //                 </SwiperSlide>
    //                 <SwiperSlide>
    //                   <div className="testimonial__slide-3">
    //                     <p>
    //                       Partnering with SyncROI for our e-commerce platform development was a seamless experience. Their professional approach, technical proficiency, and dedication to delivering a high-quality website have significantly enhanced our online business operations. We are impressed with the results and highly recommend their services for any e-commerce project.
    //                     </p>
    //                     <h2 className="client__name-3">Hala El-Malky</h2>
    //                     <h3 className="client__role-3">Founder,&nbsp;
    //                       <Link href="https://nobilita.homes/"
    //                         target="#"
    //                         style={{ color: "#4a696f", textDecoration: "underline" }}>
    //                         nobilità - EG{" "}
    //                       </Link></h3>
    //                   </div>
    //                 </SwiperSlide>
    //                 <SwiperSlide>
    //                   <div className="testimonial__slide-3">
    //                     <p>
    //                       SyncROI has been a crucial technical partner for our SEO projects. Their expertise in technical SEO has greatly enhanced our clients’ website performance and search engine rankings. Their reliable and efficient service has consistently met our high standards. We highly recommend SyncROI for their technical excellence in web development.
    //                     </p>
    //                     <h2 className="client__name-3">Dean Thornton</h2>
    //                     <h3 className="client__role-3">Head of Client Accounts,&nbsp;
    //                       <Link href="https://www.unitedseo.ae/"
    //                         target="#"
    //                         style={{ color: "#4a696f", textDecoration: "underline" }}>
    //                         USEO - UAE{" "}
    //                       </Link></h3>
    //                   </div>
    //                 </SwiperSlide>
    //                 <SwiperSlide>
    //                   <div className="testimonial__slide-3">
    //                     <p>
    //                       Our collaboration with SyncROI has been transformative. They combined creativity with technical skill to deliver a website that exceeds our expectations. Their innovative approach and professionalism set them apart. We highly recommend SyncROI for their exceptional web development services.
    //                     </p>
    //                     <h2 className="client__name-3">Yara Akram</h2>
    //                     <h3 className="client__role-3">CEO,&nbsp;
    //                       <Link href="https://www.bonobos.agency/"
    //                         target="#"
    //                         style={{ color: "#4a696f", textDecoration: "underline" }}>
    //                         Bonobos Ad Agency - EG
    //                       </Link></h3>
    //                   </div>
    //                 </SwiperSlide>
    //                 <SwiperSlide>
    //                   <div className="testimonial__slide-3">
    //                     <p>
    //                       SyncROI built a great platform for us. It’s fast, user-friendly, and supports our diverse range of courses perfectly. Simple, effective, and exactly what we needed.
    //                     </p>
    //                     <h2 className="client__name-3">Amr Hussein</h2>
    //                     <h3 className="client__role-3">Co-Founder,&nbsp;
    //                       <Link href="https://www.instalearn.school/"
    //                         target="#"
    //                         style={{ color: "#4a696f", textDecoration: "underline" }}>
    //                         instalearn School - EG
    //                       </Link></h3>
    //                   </div>
    //                 </SwiperSlide>
    //                 <SwiperSlide>
    //                   <div className="testimonial__slide-3">
    //                     <p>
    //                       Thanks to SyncROI, our brand identity has reached new heights. Their creative vision and strategic approach have made a noticeable difference in how we connect with our audience. We’re truly impressed by the results they’ve achieved.
    //                     </p>
    //                     <h2 className="client__name-3">Hamood Al-Azri</h2>
    //                     <h3 className="client__role-3">Founder,&nbsp;
    //                       <Link href="https://www.instagram.com/cometooman/"
    //                         target="#"
    //                         style={{ color: "#4a696f", textDecoration: "underline" }}>
    //                         Oman Visitors - OM
    //                       </Link></h3>
    //                   </div>
    //                 </SwiperSlide>
    //               </div>
    //               <div
    //                 style={{ cursor: "pointer" }}
    //                 className="next-button swipper-btn"
    //               >
    //                 <FontAwesomeIcon icon={faArrowLeft}></FontAwesomeIcon>
    //               </div>
    //               <div
    //                 style={{ cursor: "pointer" }}
    //                 className="prev-button swipper-btn"
    //               >
    //                 <FontAwesomeIcon icon={faArrowRight}></FontAwesomeIcon>
    //               </div>
    //             </Swiper>
    //           </div>
    //         </div>
    //       </div>
    //     </div>
    //     <div className="testimonial__images-3 animation_image_zoom">
    //       <Image
    //         priority
    //         width={170}
    //         height={170}
    //         src={Testimonial31}
    //         alt="testimonial Image"
    //         className="testimonial3__img"
    //       />
    //       <Image
    //         priority
    //         width={170}
    //         height={170}
    //         src={Testimonial32}
    //         alt="testimonial Image"
    //         className="testimonial3__img-2"
    //       />
    //       <Image
    //         priority
    //         width={170}
    //         height={170}
    //         src={Testimonial33}
    //         alt="testimonial Image"
    //         className="testimonial3__img-3"
    //       />
    //       <Image
    //         priority
    //         width={170}
    //         height={170}
    //         src={Testimonial34}
    //         alt="testimonial Image"
    //         className="testimonial3__img-4"
    //       />
    //       <Image
    //         priority
    //         width={170}
    //         height={170}
    //         src={Testimonial35}
    //         alt="testimonial Image"
    //         className="testimonial3__img-5"
    //       />
    //       <Image
    //         priority
    //         width={170}
    //         height={170}
    //         src={Testimonial36}
    //         alt="testimonial Image"
    //         className="testimonial3__img-6"
    //       />
    //       <Image
    //         priority
    //         width={170}
    //         height={170}
    //         src={Testimonial37}
    //         alt="testimonial Image"
    //         className="testimonial3__img-7"
    //       />
    //     </div>
    //   </section>
    // </>
  );
};

export default DigitalMarketingTestimonial;