import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';

const fadeUpPreset = (delay = 0, duration = 1.2) => ({
  initial: { opacity: 0, y: 20 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.2 },
  transition: { delay, duration, ease: "easeOut" }
});

function CompanyLogos() {
  const shouldReduce = useReducedMotion();

  const companies = [
    { name: 'Sanofi', logo: 'https://enterprise.nestjs.com/assets/logos/sanofi.svg' },
    { name: 'Adidas', logo: 'https://enterprise.nestjs.com/assets/logos/adidas.svg' },
    { name: 'Autodesk', logo: 'https://enterprise.nestjs.com/assets/logos/autodesk.svg' },
    { name: 'Mercedes-Benz', logo: 'https://enterprise.nestjs.com/assets/logos/mercedes.svg' },
    { name: 'GitLab', logo: 'https://enterprise.nestjs.com/assets/logos/gitlab.svg' },
    { name: 'Red Hat', logo: 'https://enterprise.nestjs.com/assets/logos/redhat.svg' },
    { name: 'Roche', logo: 'https://enterprise.nestjs.com/assets/logos/roche.svg' },
    { name: 'IBM', logo: 'https://enterprise.nestjs.com/assets/logos/ibm.svg' },
    { name: 'Decathlon', logo: 'https://enterprise.nestjs.com/assets/logos/decathlon.svg' },
    { name: 'Societe Generale', logo: 'https://enterprise.nestjs.com/assets/logos/sg.svg' },
    { name: 'Capgemini', logo: 'https://enterprise.nestjs.com/assets/logos/capgemini.svg' },
    { name: 'REWE', logo: 'https://enterprise.nestjs.com/assets/logos/rewe.svg' }
  ];

  if (shouldReduce) {
    return (
      <section className="section-padding bg-white">
        <div className="container-custom text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Who is using Nest?
          </h2>
          <p className="text-lg text-gray-600 mb-12">
            Nest is proudly powering a large ecosystem of enterprises and products out there. 
            <br />
            Wanna see your logo here? <span className="text-brand-red font-medium">Find out more</span>.
          </p>
          
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center">
            {companies.map((company, index) => (
              <div key={index} className="flex items-center justify-center h-16">
                <img 
                  src={company.logo} 
                  alt={company.name}
                  className="max-h-12 max-w-full opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
                />
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-white"
    >
      <div className="container-custom text-center">
        <motion.h2 
          {...fadeUpPreset(0.2, 1.0)}
          className="text-3xl md:text-4xl font-bold text-gray-900 mb-4"
        >
          Who is using Nest?
        </motion.h2>
        <motion.p 
          {...fadeUpPreset(0.3, 1.0)}
          className="text-lg text-gray-600 mb-12"
        >
          Nest is proudly powering a large ecosystem of enterprises and products out there. 
          <br />
          Wanna see your logo here? <span className="text-brand-red font-medium">Find out more</span>.
        </motion.p>
        
        <motion.div 
          {...fadeUpPreset(0.4, 1.0)}
          className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 items-center"
        >
          {companies.map((company, index) => (
            <motion.div 
              key={index}
              {...fadeUpPreset(0.5 + index * 0.05, 0.6)}
              className="flex items-center justify-center h-16"
            >
              <img 
                src={company.logo} 
                alt={company.name}
                className="max-h-12 max-w-full opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
              />
            </motion.div>
          ))}
        </motion.div>
      </div>
    </motion.section>
  );
}

export default CompanyLogos;