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" }
});

const Companies = () => {
  const shouldReduce = useReducedMotion();
  
  const companies = [
    { name: 'Sanofi', logo: 'https://enterprise.nestjs.com/sanofi.b18c1526.png', link: 'https://www.sanofi.com/' },
    { name: 'Adidas', logo: 'https://enterprise.nestjs.com/adidas.718f26f2.svg', link: 'https://adidas.com/' },
    { name: 'Autodesk', logo: 'https://enterprise.nestjs.com/autodesk.a7f2b58e.png', link: 'https://www.autodesk.com/' },
    { name: 'Mercedes', logo: 'https://enterprise.nestjs.com/mercedes.ee8047a9.png', link: 'https://www.mercedes-benz.com/' },
    { name: 'GitLab', logo: 'https://enterprise.nestjs.com/gitlab.4f9d2995.png', link: 'https://about.gitlab.com/' },
    { name: 'Red Hat', logo: 'https://enterprise.nestjs.com/red-hat.c5e6e64a.svg', link: 'https://www.redhat.com/' },
    { name: 'JetBrains', logo: 'https://enterprise.nestjs.com/jetbrains.536f2da5.svg', link: 'https://www.jetbrains.com/' },
    { name: 'Roche', logo: 'https://enterprise.nestjs.com/roche-logo.979d9061.png', link: 'https://roche.com/' },
    { name: 'Société Générale', logo: 'https://enterprise.nestjs.com/societe-generale-logo.ec64d013.png', link: 'https://www.societegenerale.fr/' },
    { name: 'TotalEnergies', logo: 'https://enterprise.nestjs.com/totalenergies.5a993082.svg', link: 'https://totalenergies.com/' },
    { name: 'Capgemini', logo: 'https://enterprise.nestjs.com/capgemini.a1d43b77.svg', link: 'https://capgemini.com/' },
    { name: 'REWE', logo: 'https://enterprise.nestjs.com/rewe.1250e1e4.svg', link: 'https://www.rewe-digital.com/' },
    { name: 'IBM', logo: 'https://enterprise.nestjs.com/ibm.b8c76e06.svg', link: 'https://www.ibm.com/' },
    { name: 'BMW', logo: 'https://enterprise.nestjs.com/bmw.0ce4c05c.svg' },
    { name: 'Decathlon', logo: 'https://enterprise.nestjs.com/decathlon.1f3c4744.png', link: 'https://www.decathlon.com/' }
  ];

  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. Wanna see your logo here? 
            <a href="#" className="text-nest-pink hover:text-nest-pink-dark font-medium">Find out more</a>.
          </p>
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 items-center">
            {companies.map((company, index) => (
              <div key={index} className="flex items-center justify-center p-4">
                {company.link ? (
                  <a href={company.link} target="_blank" rel="noopener noreferrer">
                    <img 
                      src={company.logo} 
                      alt={company.name} 
                      className="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
                    />
                  </a>
                ) : (
                  <img 
                    src={company.logo} 
                    alt={company.name} 
                    className="max-h-12 w-auto 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. Wanna see your logo here? 
          <a href="#" className="text-nest-pink hover:text-nest-pink-dark font-medium">Find out more</a>.
        </motion.p>
        <motion.div 
          {...fadeUpPreset(0.4, 1.0)}
          className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 items-center"
        >
          {companies.map((company, index) => (
            <motion.div 
              key={index}
              {...fadeUpPreset(0.5 + index * 0.05, 0.8)}
              className="flex items-center justify-center p-4"
            >
              {company.link ? (
                <a href={company.link} target="_blank" rel="noopener noreferrer">
                  <img 
                    src={company.logo} 
                    alt={company.name} 
                    className="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
                  />
                </a>
              ) : (
                <img 
                  src={company.logo} 
                  alt={company.name} 
                  className="max-h-12 w-auto opacity-60 hover:opacity-100 transition-opacity grayscale hover:grayscale-0"
                />
              )}
            </motion.div>
          ))}
        </motion.div>
      </div>
    </motion.section>
  );
};

export default Companies;