'use client'

import { motion } from 'framer-motion'
import { Building2, Briefcase, Building, Factory, Store, Landmark } from 'lucide-react'

const clients = [
  { name: 'TechCorp', icon: Building2, color: 'text-blue-600' },
  { name: 'Innovate', icon: Briefcase, color: 'text-purple-600' },
  { name: 'GlobalTech', icon: Building, color: 'text-cyan-600' },
  { name: 'IndustriasMX', icon: Factory, color: 'text-orange-600' },
  { name: 'ComercioPlus', icon: Store, color: 'text-green-600' },
  { name: 'FinanzasGrupo', icon: Landmark, color: 'text-indigo-600' },
]

export function ClientLogos() {
  return (
    <section className="py-12 bg-gray-50 border-y border-gray-100">
      <div className="container-custom">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="text-center mb-8"
        >
          <p className="text-sm font-semibold text-primary-600 uppercase tracking-wider">
            Empresas que confían en nosotros
          </p>
          <p className="mt-2 text-gray-500">
            Más de <span className="font-bold text-gray-900">500 empresas</span> ya utilizan LambiCall
          </p>
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.2 }}
          className="flex flex-wrap items-center justify-center gap-3 sm:gap-6 md:gap-10 lg:gap-14"
        >
          {clients.map((client, idx) => (
            <motion.div
              key={idx}
              initial={{ opacity: 0, scale: 0.8 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.3, delay: idx * 0.1 }}
              className="grayscale hover:grayscale-0 transition-all duration-300 opacity-50 hover:opacity-100"
            >
              <div className="flex items-center gap-2 px-3 py-2 sm:px-4 sm:py-3 bg-white rounded-xl shadow-sm border border-gray-100">
                <client.icon className={`w-6 h-6 ${client.color}`} />
                <span className="font-semibold text-gray-700">{client.name}</span>
              </div>
            </motion.div>
          ))}
        </motion.div>

        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, delay: 0.5 }}
          className="mt-8 text-center"
        >
          <div className="inline-flex items-center gap-2 bg-green-50 text-green-700 px-4 py-2 rounded-full text-sm">
            <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
            <span>+50 empresas nuevas este mes</span>
          </div>
        </motion.div>
      </div>
    </section>
  )
}