import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { Package, Zap, Globe, Settings, File, Eye, Users, TrendingUp } from 'lucide-react';

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 EverythingYouNeed() {
  const shouldReduce = useReducedMotion();
  
  const features = [
    {
      icon: Package,
      title: "POWERFUL CLI",
      description: "Nest CLI is a command-line interface tool that helps you to initialize, develop, and maintain your Nest applications."
    },
    {
      icon: Zap,
      title: "DEPENDENCY INJECTION",
      description: "Built-in inversion of control (IoC) container with a powerful dependency injection system."
    },
    {
      icon: Globe,
      title: "MICROSERVICES READY",
      description: "Build microservices with different transport layers like TCP, Redis, NATS, RabbitMQ, and more."
    },
    {
      icon: Settings,
      title: "TESTING UTILITIES",
      description: "Comes with dedicated testing utilities that make it easy to test your applications."
    },
    {
      icon: File,
      title: "BUILT-IN DOCUMENTATION",
      description: "Automatically generate OpenAPI documentation for your REST APIs using decorators."
    },
    {
      icon: Eye,
      title: "GRAPHQL SUPPORT",
      description: "First-class support for GraphQL with code-first and schema-first approaches."
    },
    {
      icon: Users,
      title: "WEBSOCKETS",
      description: "Real-time applications with WebSockets support and Socket.io integration."
    },
    {
      icon: TrendingUp,
      title: "PERFORMANCE",
      description: "High performance thanks to Fastify integration and other performance optimizations."
    }
  ];

  if (shouldReduce) {
    return (
      <section className="section-padding bg-white">
        <div className="container-custom">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold mb-6">
              Everything you need...
            </h2>
            <p className="text-xl text-nest-gray max-w-3xl mx-auto">
              Built with modern technologies and best practices for enterprise applications.
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
            {features.map((feature, index) => {
              const Icon = feature.icon;
              return (
                <div key={index} className="feature-card text-center">
                  <Icon className="w-12 h-12 mx-auto mb-4 text-nest-red" />
                  <h3 className="font-bold text-sm mb-3 text-nest-dark">
                    {feature.title}
                  </h3>
                  <p className="text-sm text-nest-gray leading-relaxed">
                    {feature.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-white"
    >
      <div className="container-custom">
        <motion.div 
          {...fadeUpPreset(0.2, 0.8)}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold mb-6">
            Everything you need...
          </h2>
          <p className="text-xl text-nest-gray max-w-3xl mx-auto">
            Built with modern technologies and best practices for enterprise applications.
          </p>
        </motion.div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
          {features.map((feature, index) => {
            const Icon = feature.icon;
            return (
              <motion.div 
                key={index} 
                {...fadeUpPreset(0.3 + (index * 0.05), 0.6)}
                className="feature-card text-center"
              >
                <Icon className="w-12 h-12 mx-auto mb-4 text-nest-red" />
                <h3 className="font-bold text-sm mb-3 text-nest-dark">
                  {feature.title}
                </h3>
                <p className="text-sm text-nest-gray leading-relaxed">
                  {feature.description}
                </p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </motion.section>
  );
}

export default EverythingYouNeed;