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

function CompaniesSection() {
  const shouldReduce = useReducedMotion();
  
  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 = [
    {
      name: "Sanofi",
      logo: "https://www.jobs.nestjs.com/img/logos/sanofi.png",
      url: "https://www.sanofi.com/"
    },
    {
      name: "Adidas",
      logo: "https://www.jobs.nestjs.com/img/logos/adidas.svg",
      url: "https://adidas.com/"
    },
    {
      name: "Autodesk",
      logo: "https://www.jobs.nestjs.com/img/logos/autodesk.png",
      url: "https://www.autodesk.com/"
    },
    {
      name: "Mercedes",
      logo: "https://www.jobs.nestjs.com/img/logos/mercedes.png",
      url: "https://www.mercedes-benz.com/"
    },
    {
      name: "Red Hat",
      logo: "https://www.jobs.nestjs.com/img/logos/red-hat.svg",
      url: "https://www.redhat.com/"
    },
    {
      name: "Roche",
      logo: "https://www.jobs.nestjs.com/img/logos/roche-logo.png",
      url: "https://roche.com/"
    },
    {
      name: "IBM",
      logo: "https://www.jobs.nestjs.com/img/logos/ibm.svg",
      url: "https://www.ibm.com/"
    },
    {
      name: "Decathlon",
      logo: "https://www.jobs.nestjs.com/img/logos/decathlon.png",
      url: "https://www.decathlon.com/"
    },
    {
      name: "BMW",
      logo: "https://www.jobs.nestjs.com/img/logos/bmw.svg",
      url: ""
    },
    {
      name: "Société Générale",
      logo: "https://www.jobs.nestjs.com/img/logos/societe-generale-logo.png",
      url: "https://www.societegenerale.fr/"
    },
    {
      name: "TotalEnergies",
      logo: "https://www.jobs.nestjs.com/img/logos/totalenergies.svg",
      url: "https://totalenergies.com/"
    },
    {
      name: "REWE",
      logo: "https://www.jobs.nestjs.com/img/logos/rewe.svg",
      url: "https://www.rewe-digital.com/"
    },
    {
      name: "Capgemini",
      logo: "https://www.jobs.nestjs.com/img/logos/capgemini.svg",
      url: "https://capgemini.com/"
    },
    {
      name: "JetBrains",
      logo: "https://www.jobs.nestjs.com/img/logos/jetbrains.svg",
      url: "https://www.jetbrains.com/"
    },
    {
      name: "GitLab",
      logo: "https://www.jobs.nestjs.com/img/logos/gitlab.png",
      url: "https://about.gitlab.com/"
    }
  ];

  const CompanyLogo = ({ company, index }) => {
    const LogoComponent = shouldReduce ? 'div' : motion.div;
    const logoProps = shouldReduce ? {} : fadeUpPreset(index * 0.05, 0.6);
    
    const logoElement = (
      <img 
        src={company.logo} 
        alt={company.name} 
        className="company-logo"
      />
    );

    return (
      <LogoComponent 
        {...logoProps}
        className="flex items-center justify-center p-4"
      >
        {company.url ? (
          <a href={company.url} target="_blank" rel="noopener noreferrer">
            {logoElement}
          </a>
        ) : (
          logoElement
        )}
      </LogoComponent>
    );
  };

  if (shouldReduce) {
    return (
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Who is using Nest?
            </h2>
            <p className="text-xl text-gray-600 max-w-3xl mx-auto">
              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:underline">Find out more</a>.
            </p>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
            {companies.map((company, index) => (
              <CompanyLogo key={company.name} company={company} index={index} />
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="py-20 bg-white"
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div 
          {...fadeUpPreset(0.2, 1.0)}
          className="text-center mb-12"
        >
          <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
            Who is using Nest?
          </h2>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
            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:underline">Find out more</a>.
          </p>
        </motion.div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8">
          {companies.map((company, index) => (
            <CompanyLogo key={company.name} company={company} index={index} />
          ))}
        </div>
      </div>
    </motion.section>
  );
}

export default CompaniesSection;