import Image from "next/image";

const technologies = [
  { name: "Tableau", src: "/image/tableu.png" },
  { name: "TVU Networks", src: "/image/tvu.png" },
  { name: "AWS", src: "/image/aws.png" },
  { name: "Dell", src: "/image/dell.png" },
  { name: "Zenlayer", src: "/image/zen.png" },
  { name: "Ui", src: "/image/uipath.png" },
];

export default function Technology() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-r from-[#faf6ee] to-[#f4efe6] py-14">
      <div className="container mx-auto px-6">
        {/* Title */}
        <p className="text-center text-lg font-semibold tracking-widest text-gray-500 mb-8">
          TECHNOLOGY PARTNERS
        </p>

        {/* Slider */}
        <div className="relative w-full overflow-hidden">
          <div className="flex w-max animate-tech-scroll gap-14">
            {/* duplicated for seamless loop */}
            {[...technologies, ...technologies].map((tech, index) => (
              <div
                key={index}
                className="flex items-center justify-center min-w-[140px] opacity-80 hover:opacity-100 transition"
              >
                <Image
                  src={tech.src}
                  alt={tech.name}
                  width={120}
                  height={50}
                  className="object-contain"
                />
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}