import React from 'react';
import { motion } from 'framer-motion';
import { Building } from 'lucide-react';

const ClientsSection = () => {
  const clients = [
    'Sinovensa', 'Chevron', 'Petromiranda', 'PDVSA',
    'Pequiven', 'Supermetanol', 'Metor', 'Fertilizantes de Oriente'
  ];

  return (
    <section className="py-16 bg-grisClaro">
      <div className="container mx-auto px-4">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-5xl font-bold mb-6 text-azulOscuro">
            Nuestros <span className="text-naranjaAccento">Clientes</span>
          </h2>
          <p className="text-lg text-grisMedio max-w-2xl mx-auto">
            Confianza de las empresas líderes del sector energético e industrial
          </p>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
          {clients.map((client, index) => (
            <motion.div
              key={client}
              initial={{ opacity: 0, scale: 0.9 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: index * 0.1 }}
              whileHover={{ scale: 1.05 }}
              className="bg-blanco border border-azulMedio/20 rounded-lg p-6 transition-all duration-300 shadow-md hover:shadow-lg flex flex-col items-center justify-center text-center"
            >
              <div className="w-12 h-12 bg-azulClaro/30 rounded-full flex items-center justify-center mb-3">
                <Building className="w-6 h-6 text-azulPrincipal" />
              </div>
              <span className="text-azulOscuro font-bold">{client}</span>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default ClientsSection;