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

  if (shouldReduce) {
    return (
      <section className="py-20 bg-nest-red text-white relative overflow-hidden">
        <div className="absolute right-0 top-0 h-full w-1/2 opacity-20">
          <img
            src="https://nestjs.com/img/banner-background.png"
            alt=""
            className="h-full w-full object-cover"
          />
        </div>
        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-2xl">
            <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 opacity-90">
              A complete development kit for every occasion. Meet the modern Node.js framework for everyone.
            </p>
            <button className="bg-white text-nest-red px-8 py-4 rounded-full font-medium hover:bg-gray-100 transition-colors duration-200">
              Contact us
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="py-20 bg-nest-red text-white relative overflow-hidden"
    >
      <div className="absolute right-0 top-0 h-full w-1/2 opacity-20">
        <img
          src="https://nestjs.com/img/banner-background.png"
          alt=""
          className="h-full w-full object-cover"
        />
      </div>
      <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <motion.div 
          {...fadeUpPreset(0.2, 0.8)}
          className="max-w-2xl"
        >
          <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 opacity-90">
            A complete development kit for every occasion. Meet the modern Node.js framework for everyone.
          </p>
          <button className="bg-white text-nest-red px-8 py-4 rounded-full font-medium hover:bg-gray-100 transition-colors duration-200">
            Contact us
          </button>
        </motion.div>
      </div>
    </motion.section>
  );
};

export default Enterprise;