"use client";

import useEmblaCarousel from "embla-carousel-react";
import { ArrowRight, Quote } from "lucide-react";
import Image from "next/image";
import { useCallback, useEffect, useRef, useState } from "react";
import AnimatedBackground from "@/components/ui/animated-gradientbg";

interface Testimonial {
  id: number;
  quote: string;
  name: string;
  title: string;
  company: string;
  location: string;
  avatar: string;
  logo: string;
}

const testimonials: Testimonial[] = [
  {
    id: 1,
    quote: "They tailor their solutions to our specific needs and goals.",
    name: "Denis Slavska",
    title: "CTO, Ailitic",
    company: "Ailitic",
    location: "New York City, New York",
    avatar: "/people/image1.png",
    logo: "/logos/Logo-2.svg",
  },
  {
    id: 2,
    quote: "They organized their work and internal management was outstanding.",
    name: "Jahan Melad",
    title: "Project Manager, Buildwave",
    company: "Buildwave",
    location: "New York City, New York",
    avatar: "/people/image2.png",
    logo: "/logos/Logo-1.svg",
  },
  {
    id: 3,
    quote: "Working with them was a great experience.",
    name: "Jim Halpert",
    title: "Lead Engineering, InHive Space",
    company: "InHive Space",
    location: "New York City, New York",
    avatar: "/people/image3.png",
    logo: "/logos/Logo-3.svg",
  },
  {
    id: 4,
    quote: "They organized their work and internal management was outstanding.",
    name: "Jahan Melad",
    title: "Project Manager, Buildwave",
    company: "Buildwave",
    location: "New York City, New York",
    avatar: "/people/image4.png",
    logo: "/logos/Logo-2.svg",
  },
];

export default function TestimonialsSection() {
  const [emblaRef, emblaApi] = useEmblaCarousel({
    loop: false,
    align: "start",
    slidesToScroll: 1,
    skipSnaps: false,
  });

  const [isShiftPressed, setIsShiftPressed] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const scrollPrev = useCallback(() => {
    if (emblaApi) emblaApi.scrollPrev();
  }, [emblaApi]);

  const scrollNext = useCallback(() => {
    if (emblaApi) emblaApi.scrollNext();
  }, [emblaApi]);

  useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Shift") {
        setIsShiftPressed(true);
      }
    };

    const handleKeyUp = (e: KeyboardEvent) => {
      if (e.key === "Shift") {
        setIsShiftPressed(false);
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
    };
  }, []);

  useEffect(() => {
    const handleWheel = (e: WheelEvent) => {
      if (isShiftPressed && containerRef.current?.contains(e.target as Node)) {
        e.preventDefault();

        if (e.deltaY > 0) {
          scrollNext();
        } else {
          scrollPrev();
        }
      }
    };

    const container = containerRef.current;
    if (container) {
      container.addEventListener("wheel", handleWheel, { passive: false });
    }

    return () => {
      if (container) {
        container.removeEventListener("wheel", handleWheel);
      }
    };
  }, [isShiftPressed, scrollNext, scrollPrev]);

  return (
    <section className="py-16 min-h-screen bg-black text-white">
      <div className="border-y border-dashed border-neutral-900 py-16">
        <div className="max-w-(--breakpoint-xl) xl:px-0 px-4 mx-auto text-center space-y-2 pb-8">
          <h1 className="text-3xl">Hear what our clients have to say.</h1>
          <p className="text-lg text-neutral-300">
            Discover how our innovative solutions have transformed their
            businesses.
          </p>
        </div>
        <div
          ref={containerRef}
          className={`relative ${isShiftPressed ? "cursor-grab" : ""} ${isDragging ? "cursor-grabbing" : ""}`}
          style={{
            userSelect: isDragging ? "none" : "auto",
            WebkitUserSelect: isDragging ? "none" : "auto",
          }}
        >
          <div
            className="overflow-x-hidden"
            ref={emblaRef}
            style={{
              userSelect: "none",
              WebkitUserSelect: "none",
              WebkitTouchCallout: "none",
              WebkitTapHighlightColor: "transparent",
            }}
          >
            <div
              className="flex 2xl:gap-10 gap-5 max-w-(--breakpoint-xl) 2xl:px-0 px-4 mx-auto"
              onMouseDown={(e) => e.preventDefault()}
              onDragStart={(e) => e.preventDefault()}
            >
              {testimonials.map((testimonial) => (
                <div
                  key={testimonial.id}
                  className="flex-[0_0_100%] group min-w-0 sm:flex-[0_0_85%] md:flex-[0_0_50%] lg:flex-[0_0_50%]"
                  style={{
                    userSelect: "none",
                    WebkitUserSelect: "none",
                  }}
                >
                  <div className="relative bg-neutral-950 overflow-hidden lg:group-hover:rounded-[5rem] lg:rounded-4xl rounded-xl group-hover:rounded-3xl transition-all duration-300 2xl:p-8 p-6 2xl:h-160 lg:h-128 h-96 shadow-xs flex flex-col justify-between">
                    <AnimatedBackground className="absolute scale-150 -top-24 -left-10 w-full h-full opacity-0 group-hover:opacity-100" />
                    <img
                      src={`https://pro-section.ui-layouts.com/${testimonial.logo}`}
                      alt={testimonial.company}
                      className="2xl:h-20 h-14 opacity-100 w-full object-contain"
                      draggable={false}
                    />
                    <div className="md:py-12 py-6 2xl:px-10 lg:px-6 px-3">
                      <Quote className="text-5xl fill-neutral-200 stroke-none rotate-180" />
                      <p className="2xl:text-4xl lg:text-3xl text-2xl leading-[100%] text-neutral-200 mt-2">
                        {testimonial.quote}
                      </p>
                    </div>

                    <div className="border-t border-gray-900 pt-4 mt-auto flex justify-between">
                      <div>
                        <p className="font-semibold text-neutral-200">
                          {testimonial.name}
                        </p>
                        <p className="text-neutral-300">{testimonial.title}</p>
                        <p className="text-neutral-400 text-sm">
                          {testimonial.location}
                        </p>
                      </div>
                      <div className="w-16 h-16 rounded-full relative bg-neutral-950 cursor-pointer">
                        <span className="absolute top-0 opacity-0 group-hover:opacity-100 -left-10 group-hover:left-0 transition-all duration-500 ease-in-out grid place-content-center h-full w-full">
                          <ArrowRight />
                        </span>
                        <Image
                          src={
                            `https://pro-section.ui-layouts.com${testimonial.avatar}` ||
                            "/placeholder.svg"
                          }
                          alt={testimonial.name}
                          width={64}
                          height={64}
                          className="w-full h-full object-cover translate-x-0 group-hover:translate-x-32 group-hover:opacity-0 opacity-100 transition-all duration-500 ease-in-out"
                          draggable={false}
                        />
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
testimonials8

testimonials8
