"use client"

import { Building2, Briefcase, Factory, Store, Landmark, Truck, Heart, Laptop } from "lucide-react"

const clients = [
  { name: "Manufacturing", icon: Factory },
  { name: "IT Services", icon: Laptop },
  { name: "Healthcare", icon: Heart },
  { name: "Retail", icon: Store },
  { name: "Logistics", icon: Truck },
  { name: "Finance", icon: Landmark },
  { name: "Real Estate", icon: Building2 },
  { name: "Consulting", icon: Briefcase },
]

export function ClientsMarquee() {
  return (
    <section className="py-12 bg-slate-900 overflow-hidden">
      <div className="container mx-auto px-4 md:px-6 mb-8">
        <p className="text-center text-slate-400 text-sm uppercase tracking-widest font-medium">
          {"Trusted by businesses across industries"}
        </p>
      </div>

      <div className="relative">
        <div className="flex animate-marquee">
          {[...clients, ...clients, ...clients].map((client, i) => {
            const Icon = client.icon
            return (
              <div
                key={i}
                className="flex-shrink-0 flex items-center gap-3 px-8 py-4 mx-4 bg-white/5 rounded-xl border border-white/10"
              >
                <Icon className="h-6 w-6 text-teal-400" />
                <span className="text-white font-medium whitespace-nowrap">{client.name}</span>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  )
}