import React from 'react';
import { motion, useReducedMotion } from 'framer-motion';
import { ArrowRight } 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" }
});

const ProductSections = () => {
  const shouldReduce = useReducedMotion();
  
  const sections = [
    {
      id: 1,
      title: 'VUCA EVO',
      subtitle: 'pinion',
      description: 'MAXIMUM PERFORMANCE WITH A MINIMUM OF MAINTENANCE',
      buttonText: 'SEE ALL MODELS',
      image: 'https://www.bulls-bikes.com/media/image/bulls-vuca-evo-pinion-section.jpg',
      textColor: 'text-white',
      buttonStyle: 'btn-secondary'
    },
    {
      id: 2,
      title: 'NO LIMITS!',
      subtitle: '',
      description: '',
      buttonText: 'CHOOSE YOUR BIKE',
      image: 'https://www.bulls-bikes.com/media/image/bulls-no-limits-section.jpg',
      textColor: 'text-white',
      buttonStyle: 'btn-secondary'
    },
    {
      id: 3,
      title: 'MAXIMUM OFFROAD POWER',
      subtitle: '',
      description: '',
      buttonText: 'CHOOSE YOUR E-BIKE',
      image: 'https://www.bulls-bikes.com/media/image/bulls-maximum-offroad-power-section.jpg',
      textColor: 'text-white',
      buttonStyle: 'btn-secondary'
    }
  ];

  const SectionCard = ({ section, index }) => {
    const content = (
      <div 
        className="relative h-96 md:h-[500px] bg-cover bg-center flex items-center justify-center text-center"
        style={{
          backgroundImage: `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('${section.image}')`
        }}
      >
        <div className="max-w-2xl px-4">
          {section.subtitle && (
            <h3 className={`text-2xl md:text-3xl font-light ${section.textColor} mb-2 text-shadow`}>
              {section.subtitle}
            </h3>
          )}
          <h2 className={`text-4xl md:text-5xl lg:text-6xl font-bold ${section.textColor} mb-4 text-shadow`}>
            {section.title}
          </h2>
          {section.description && (
            <p className={`text-lg md:text-xl ${section.textColor} mb-8 text-shadow`}>
              {section.description}
            </p>
          )}
          <button className={`${section.buttonStyle} inline-flex items-center space-x-2`}>
            <span>{section.buttonText}</span>
            <ArrowRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    );

    if (shouldReduce) {
      return content;
    }

    return (
      <motion.div {...fadeUpPreset(index * 0.2, 1.0)}>
        {content}
      </motion.div>
    );
  };

  return (
    <div className="space-y-0">
      {sections.map((section, index) => (
        <SectionCard key={section.id} section={section} index={index} />
      ))}
    </div>
  );
};

export default ProductSections;