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 EnterpriseSection() {
  const shouldReduce = useReducedMotion();
  
  if (shouldReduce) {
    return (
      <section className="section-padding bg-nest-red text-white">
        <div className="container-custom">
          <div className="flex flex-col lg:flex-row items-center gap-12">
            <div className="lg:w-1/3">
              <img 
                src="https://nestjs.com/img/cat-enterprise.png" 
                alt="NestJS Enterprise Cat" 
                className="w-full max-w-sm mx-auto"
              />
            </div>
            <div className="lg:w-2/3">
              <h2 className="text-4xl md:text-5xl font-bold mb-6">
                The open source platform designed for the future. Build enterprise.
              </h2>
              <p className="text-xl mb-8 leading-relaxed text-red-100">
                A complete development kit for building scalable server-side applications. Everything you need to take your Node.js app from prototype to enterprise.
              </p>
              <button className="bg-white text-nest-red px-8 py-4 rounded-lg font-medium text-lg hover:bg-gray-100 transition-colors">
                Contact us
              </button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-nest-red text-white"
    >
      <div className="container-custom">
        <div className="flex flex-col lg:flex-row items-center gap-12">
          <motion.div 
            {...fadeUpPreset(0.2, 0.8)}
            className="lg:w-1/3"
          >
            <img 
              src="https://nestjs.com/img/cat-enterprise.png" 
              alt="NestJS Enterprise Cat" 
              className="w-full max-w-sm mx-auto"
            />
          </motion.div>
          <motion.div 
            {...fadeUpPreset(0.4, 0.8)}
            className="lg:w-2/3"
          >
            <h2 className="text-4xl md:text-5xl font-bold mb-6">
              The open source platform designed for the future. Build enterprise.
            </h2>
            <p className="text-xl mb-8 leading-relaxed text-red-100">
              A complete development kit for building scalable server-side applications. Everything you need to take your Node.js app from prototype to enterprise.
            </p>
            <button className="bg-white text-nest-red px-8 py-4 rounded-lg font-medium text-lg hover:bg-gray-100 transition-colors">
              Contact us
            </button>
          </motion.div>
        </div>
      </div>
    </motion.section>
  );
}

export default EnterpriseSection;