import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { Users, Target, Zap, Search, Shield, GraduationCap } 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 Services() {
  const shouldReduce = useReducedMotion();

  const services = [
    {
      icon: Users,
      title: "DEVELOPMENT",
      description: "Achieve your goals faster with Nest experts on your team tackling challenging issues right by your side."
    },
    {
      icon: Target,
      title: "TECHNICAL GUIDANCE",
      description: "Enable your team to get the most out of the technology. Ensure your solutions are secure and reliable."
    },
    {
      icon: Zap,
      title: "MIGRATION ASSISTANCE",
      description: "We provide a comprehensive migration assistance, ensuring you are using the latest and greatest."
    },
    {
      icon: Search,
      title: "IN-DEPTH CODE REVIEWS",
      description: "Frequent code reviews can eliminate potentially hazardous bugs and issues at an early stage while enforcing best practices."
    },
    {
      icon: Shield,
      title: "LONG-TERM SUPPORT (LTS)",
      description: "Have peace of mind with Nest long-term support (LTS), priority fixes, upgrade assistance, and live troubleshooting."
    },
    {
      icon: GraduationCap,
      title: "TEAM TRAININGS",
      description: "Level-up your team by having expert-led Nest trainings or workshops. Get everyone up-to-speed quickly."
    }
  ];

  if (shouldReduce) {
    return (
      <section className="section-padding bg-gray-50">
        <div className="container-custom">
          <div className="text-center mb-16">
            <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
              How can we help you be successful?
            </h2>
            <p className="text-lg text-gray-600 max-w-3xl mx-auto">
              Nest Enterprise Consulting includes a broad range of services to empower your team. 
              We help you grow your business even long after our commitment is done.
            </p>
          </div>
          
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service, index) => {
              const IconComponent = service.icon;
              return (
                <div key={index} className="text-center p-6">
                  <div className="w-16 h-16 bg-brand-red rounded-full flex items-center justify-center mx-auto mb-6">
                    <IconComponent className="w-8 h-8 text-white" />
                  </div>
                  <h3 className="text-lg font-bold text-gray-900 mb-4">
                    {service.title}
                  </h3>
                  <p className="text-gray-600 leading-relaxed">
                    {service.description}
                  </p>
                </div>
              );
            })}
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-gray-50"
    >
      <div className="container-custom">
        <motion.div 
          {...fadeUpPreset(0.2, 1.0)}
          className="text-center mb-16"
        >
          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
            How can we help you be successful?
          </h2>
          <p className="text-lg text-gray-600 max-w-3xl mx-auto">
            Nest Enterprise Consulting includes a broad range of services to empower your team. 
            We help you grow your business even long after our commitment is done.
          </p>
        </motion.div>
        
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {services.map((service, index) => {
            const IconComponent = service.icon;
            return (
              <motion.div 
                key={index}
                {...fadeUpPreset(0.3 + index * 0.1, 0.8)}
                className="text-center p-6"
              >
                <div className="w-16 h-16 bg-brand-red rounded-full flex items-center justify-center mx-auto mb-6">
                  <IconComponent className="w-8 h-8 text-white" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-4">
                  {service.title}
                </h3>
                <p className="text-gray-600 leading-relaxed">
                  {service.description}
                </p>
              </motion.div>
            );
          })}
        </div>
      </div>
    </motion.section>
  );
}

export default Services;