"use client";

import Image from "next/image";
import { useRef } from "react";
import { motion } from "motion/react";
import { ChevronLeft, ChevronRight } from "lucide-react";

import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Autoplay } from "swiper/modules";
import type { Swiper as SwiperType } from "swiper";

import "swiper/css";
import "swiper/css/navigation";

import img1 from '../../public/assets/banners/banner3.jpeg';

const testimonials = [
  {
    id: 1,
    text: "I have been hiring people in this space for a number of years and I have never seen this level of professionalism.",
    name: "Leonard Heizer",
    position: "CEO",
    image:
      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop",
    rating: 5,
  },
  {
    id: 2,
    text: "Outstanding service and exceptional results. The team's dedication to excellence has transformed our business.",
    name: "Sarah Mitchell",
    position: "CTO",
    image:
      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
    rating: 5,
  },
  {
    id: 3,
    text: "Working with this team has been an absolute game-changer. Their professionalism is unmatched.",
    name: "Michael Chen",
    position: "Founder",
    image:
      "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop",
    rating: 5,
  },
];

const teamImages = [
  "https://images.unsplash.com/photo-1559136555-9303baea8ebd?auto=format&fit=crop&w=800&q=80",
  "https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=800&q=80",
  "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?auto=format&fit=crop&w=800&q=80",
  "https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=800&q=80",
];

export default function TestimonialSection() {
  const swiperRef = useRef<SwiperType | null>(null);

  return (
    <section className="w-full py-14 md:py-24 px-4 md:px-8 lg:px-16 overflow-hidden">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
        
  
        <div className="relative">
          <div className="grid grid-cols-2 gap-4">
            {teamImages.map((img, index) => (
              <div
                key={index}
                className={`relative overflow-hidden rounded-[32px] ${
                  index % 2 === 0 ? "h-[220px] md:h-[320px]" : "h-[180px] md:h-[260px] mt-8"
                }`}
              >
                <Image
                  src={img}
                  alt="team"
                  fill
                  className="object-cover"
                />
              </div>
            ))}
          </div>

          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
            <div className="w-16 h-16 rounded-full bg-btnPrimary flex items-center justify-center border-4 border-white shadow-xl">
              <h5 className=" text-3xl text-white">+</h5>
            </div>
          </div>
        </div>

        <motion.div
          initial={{ opacity: 0, y: 60 }}
          whileInView={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.7 }}
          viewport={{ once: true }}
          className="relative"
        >
          <p className="text-orange-500 text-sm font-semibold tracking-[3px] mb-3 uppercase">
            :: Know What Our Clients Says ::
          </p>

          <h2 className="text-4xl md:text-5xl font-bold leading-tight text-black mb-8">
            Made The Biggest <br /> Clients Happy
          </h2>

          <div className="relative border border-gray-200 rounded-3xl p-6 md:p-10 bg-white shadow-sm">
            
     
            <div className="absolute top-6 right-6 flex items-center gap-3 z-10">
              <button
                onClick={() => swiperRef.current?.slidePrev()}
                className="w-10 h-10 bg-white rounded-full border border-gray-300 flex items-center justify-center hover:border-orange-500 hover:text-orange-500 transition cursor-pointer"
              >
                <ChevronLeft className="w-5 h-5" />
              </button>

              <button
                onClick={() => swiperRef.current?.slideNext()}
                className="w-10 h-10 bg-white rounded-full border border-gray-300 flex items-center justify-center hover:border-orange-500 hover:text-orange-500 transition cursor-pointer"
              >
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>

            <Swiper
              modules={[Navigation, Autoplay]}
              slidesPerView={1}
              loop={true}
              speed={800}
              autoplay={{
                delay: 4000,
                disableOnInteraction: false,
              }}
              onSwiper={(swiper) => {
                swiperRef.current = swiper;
              }}
            >
              {testimonials.map((testimonial) => (
                <SwiperSlide key={testimonial.id}>
                  <div>
                    
       
                    <div className="flex items-center gap-1 mb-5">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <svg
                          key={i}
                          className="w-5 h-5 fill-orange-500"
                          viewBox="0 0 20 20"
                        >
                          <path d="M10 15l-5.878 3.09 1.122-6.545L.49 6.91l6.573-.955L10 0l2.938 5.955 6.573.955-4.756 4.635 1.122 6.545z" />
                        </svg>
                      ))}
                    </div>

                    <p className="text-gray-600 leading-8 text-base md:text-lg mb-8 max-w-xl">
                      {testimonial.text}
                    </p>

                    {/* USER */}
                    <div className="flex items-center">
                      <div className="relative w-14 h-14 rounded-full overflow-hidden mr-4">
                        <Image
                          src={testimonial.image}
                          alt={testimonial.name}
                          fill
                          className="object-cover"
                        />
                      </div>

                      <div>
                        <h4 className="font-bold text-lg text-black">
                          {testimonial.name}
                        </h4>
                        <p className="text-sm text-gray-500">
                          {testimonial.position}
                        </p>
                      </div>
                    </div>

                  </div>
                </SwiperSlide>
              ))}
            </Swiper>

          </div>
        </motion.div>
      </div>
    </section>
  );
}