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 TeamAugmentation() {
  const shouldReduce = useReducedMotion();

  if (shouldReduce) {
    return (
      <section className="section-padding bg-brand-red">
        <div className="container-custom">
          <div className="grid lg:grid-cols-2 gap-12 items-center">
            <div className="order-2 lg:order-1">
              <img 
                src="https://enterprise.nestjs.com/assets/cat-chair.jpg" 
                alt="Cat in chair" 
                className="w-full max-w-md mx-auto"
              />
            </div>
            
            <div className="order-1 lg:order-2">
              <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
                Team augmentation. By your side at every step
              </h2>
              <p className="text-xl text-white/90 mb-8 leading-relaxed">
                Nest core team members can work directly with your team on a daily basis to help take your project to the next-level. Let us partner with you and your team to develop the most ambitious projects.
              </p>
              <button className="bg-white text-brand-red px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors">
                Contact us to learn more
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-brand-red"
    >
      <div className="container-custom">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <motion.div 
            {...fadeUpPreset(0.2, 1.0)}
            className="order-2 lg:order-1"
          >
            <img 
              src="https://enterprise.nestjs.com/assets/cat-chair.jpg" 
              alt="Cat in chair" 
              className="w-full max-w-md mx-auto"
            />
          </motion.div>
          
          <motion.div 
            {...fadeUpPreset(0.3, 1.0)}
            className="order-1 lg:order-2"
          >
            <h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
              Team augmentation. By your side at every step
            </h2>
            <p className="text-xl text-white/90 mb-8 leading-relaxed">
              Nest core team members can work directly with your team on a daily basis to help take your project to the next-level. Let us partner with you and your team to develop the most ambitious projects.
            </p>
            <button className="bg-white text-brand-red px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors">
              Contact us to learn more
            </button>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
}

export default TeamAugmentation;