const technologies = [
  { name: "C#", logo: "/svg/csharp.svg" },
  { name: "PHP", logo: "/svg/php.svg" },
  { name: "HTML5", logo: "/svg/html5.svg" },
  { name: "React", logo: "/svg/react.svg" },
  { name: "Next.js", logo: "/svg/nextjs.svg" },
  { name: "Vite", logo: "/svg/vite.svg" },
  { name: "SQL", logo: "/svg/sql.svg" },
];

const Partners = () => {
  return (
    <section className="py-8 md:py-10 bg-background border-y border-border overflow-hidden">
      <div className="container mx-auto px-6 mb-4">
        <div className="label-tag text-center">
          PROGRAMMIERSPRACHEN
        </div>
      </div>

      <div className="relative overflow-x-hidden py-2">
        {/* Fade edges */}
        <div className="pointer-events-none absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-background to-transparent z-20" />
        <div className="pointer-events-none absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-background to-transparent z-20" />

        {/* Marquee */}
        <div className="flex overflow-hidden">
          <div className="marquee">
            {[...technologies, ...technologies].map((tech, index) => (
              <div
                key={`${tech.name}-${index}`}
                className="flex items-center gap-3 pr-12 md:pr-20 group transition-all duration-300"
                aria-hidden={index >= technologies.length}
              >
                <img
                  src={tech.logo}
                  alt={tech.name}
                  className="h-10 w-auto object-contain transition-transform group-hover:scale-110 opacity-100 dark:opacity-60"
                  width={40}
                  height={40}
                  loading={index < technologies.length ? "eager" : "lazy"}
                  decoding="async"
                />
                <span className="text-xl md:text-2xl font-display font-medium text-foreground group-hover:text-muted-foreground dark:text-muted-foreground/50 dark:group-hover:text-foreground transition-colors duration-300 whitespace-nowrap">
                  {tech.name}
                </span>
              </div>
            ))}
          </div>
          <div className="marquee" aria-hidden="true">
            {[...technologies, ...technologies].map((tech, index) => (
              <div
                key={`${tech.name}-dup-${index}`}
                className="flex items-center gap-3 pr-12 md:pr-20 group transition-all duration-300"
              >
                <img
                  src={tech.logo}
                  alt={tech.name}
                  className="h-10 w-auto object-contain transition-transform group-hover:scale-110 opacity-100 dark:opacity-60"
                  width={40}
                  height={40}
                  loading="lazy"
                  decoding="async"
                />
                <span className="text-xl md:text-2xl font-display font-medium text-foreground group-hover:text-muted-foreground dark:text-muted-foreground/50 dark:group-hover:text-foreground transition-colors duration-300 whitespace-nowrap">
                  {tech.name}
                </span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

export default Partners;
