const tools = ["Cursor", "Kiro", "N8N", "Mistral", "Hetzner", "Porkbun", "Appwrite", "Traefik"];
const Partners = () => {
  return <section className="py-16 md:py-20 bg-background border-y border-border overflow-hidden">
      <div className="container mx-auto px-6 mb-8">
        <div className="label-tag text-center">UNSERE TOOLS MIT DEN WIR ARBEITEN</div>
      </div>
      
      <div className="relative">
        {/* Fade edges */}
        <div className="absolute left-0 top-0 bottom-0 w-32 bg-gradient-to-r from-background to-transparent z-10" />
        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-background to-transparent z-10" />
        
        {/* Marquee */}
        <div className="flex overflow-hidden">
          <div className="marquee">
            {[...tools, ...tools].map((tool, index) => <div key={`${tool}-${index}`} className="flex items-center justify-center min-w-[160px] px-8">
                <span className="text-xl md:text-2xl font-display font-medium text-muted-foreground/50 hover:text-foreground transition-colors duration-300 uppercase tracking-wider">
                  {tool}
                </span>
              </div>)}
          </div>
          <div className="marquee" aria-hidden="true">
            {[...tools, ...tools].map((tool, index) => <div key={`${tool}-dup-${index}`} className="flex items-center justify-center min-w-[160px] px-8">
                <span className="text-xl md:text-2xl font-display font-medium text-muted-foreground/50 hover:text-foreground transition-colors duration-300 uppercase tracking-wider">
                  {tool}
                </span>
              </div>)}
          </div>
        </div>
      </div>
    </section>;
};
export default Partners;