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 Features() {
  const shouldReduce = useReducedMotion();
  
  const features = [
    {
      icon: (
        <svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
          <path d="M20 20h60v60H20z" stroke="#333" strokeWidth="2" fill="none"/>
          <path d="M30 30h40v40H30z" stroke="#333" strokeWidth="2" fill="none"/>
          <path d="M40 40h20v20H40z" stroke="#333" strokeWidth="2" fill="none"/>
        </svg>
      ),
      title: "EXTENSIBLE",
      description: "Provides unparalleled flexibility through its meticulously crafted modular architecture."
    },
    {
      icon: (
        <svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
          <path d="M50 10L80 30v40L50 90L20 70V30z" stroke="#e0234e" strokeWidth="2" fill="none"/>
          <circle cx="50" cy="50" r="8" fill="#e0234e"/>
          <path d="M35 35l30 30M65 35L35 65" stroke="#e0234e" strokeWidth="2"/>
        </svg>
      ),
      title: "VERSATILE",
      description: "Serves as a robust, elegant, and well-structured foundation for all kinds of server-side applications."
    },
    {
      icon: (
        <svg className="w-16 h-16 mx-auto mb-6" viewBox="0 0 100 100" fill="none">
          <path d="M50 10L70 30L50 50L30 30z" fill="#333"/>
          <path d="M30 50L50 70L70 50L50 30z" fill="#666"/>
          <path d="M50 70L70 90L50 110L30 90z" fill="#333"/>
        </svg>
      ),
      title: "PROGRESSIVE",
      description: "Introduces design patterns and well-established solutions to the Node.js landscape."
    }
  ];

  if (shouldReduce) {
    return (
      <section className="section-padding bg-nest-light-gray">
        <div className="container-custom">
          <div className="grid md:grid-cols-3 gap-12">
            {features.map((feature, index) => (
              <div key={index} className="text-center">
                {feature.icon}
                <h3 className="text-nest-red font-bold text-lg mb-4">
                  {feature.title}
                </h3>
                <p className="text-nest-gray leading-relaxed">
                  {feature.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <motion.section 
      {...fadeUpPreset(0.1, 1.0)}
      className="section-padding bg-nest-light-gray"
    >
      <div className="container-custom">
        <div className="grid md:grid-cols-3 gap-12">
          {features.map((feature, index) => (
            <motion.div 
              key={index} 
              {...fadeUpPreset(index * 0.1, 0.8)}
              className="text-center"
            >
              {feature.icon}
              <h3 className="text-nest-red font-bold text-lg mb-4">
                {feature.title}
              </h3>
              <p className="text-nest-gray leading-relaxed">
                {feature.description}
              </p>
            </motion.div>
          ))}
        </div>
      </div>
    </motion.section>
  );
}

export default Features;