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: 30 },
  whileInView: { opacity: 1, y: 0 },
  viewport: { once: true, amount: 0.2 },
  transition: { delay, duration, ease: "easeOut" }
});

const ProductSections = () => {
  const shouldReduceMotion = useReducedMotion();

  const sections = [
    {
      title: "VUCA EVO | pinion",
      subtitle: "MAXIMUM PERFORMANCE WITH A MINIMUM OF MAINTENANCE",
      buttonText: "SEE ALL MODELS",
      image: "https://www.bulls-bikes.com/fileadmin/_processed_/9/3/csm_BULLS_VUCA_EVO_Pinion_Lifestyle_2024_01_b5c8a5e5a7.jpg",
      textColor: "text-white",
      buttonStyle: "btn-secondary"
    },
    {
      title: "NO LIMITS!",
      subtitle: "",
      buttonText: "CHOOSE YOUR BIKE",
      image: "https://www.bulls-bikes.com/fileadmin/_processed_/7/4/csm_BULLS_Lifestyle_MTB_2024_02_c8f5e5a7b5.jpg",
      textColor: "text-white",
      buttonStyle: "btn-secondary"
    },
    {
      title: "MAXIMUM OFFROAD POWER",
      subtitle: "",
      buttonText: "CHOOSE YOUR E-BIKE",
      image: "https://www.bulls-bikes.com/fileadmin/_processed_/5/6/csm_BULLS_Lifestyle_E-MTB_2024_03_a8c8f5e5a7.jpg",
      textColor: "text-white",
      buttonStyle: "btn-secondary"
    }
  ];

  const ProductSection = ({ section, index }) => {
    const SectionComponent = shouldReduceMotion ? 'div' : motion.div;
    const sectionProps = shouldReduceMotion ? {} : fadeUpPreset(index * 0.1, 1.0);

    return (
      <SectionComponent 
        {...sectionProps}
        className="relative h-96 md:h-[500px] flex items-center justify-center overflow-hidden"
        style={{
          backgroundImage: `url('${section.image}')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          backgroundRepeat: 'no-repeat'
        }}
      >
        <div className="absolute inset-0 bg-black bg-opacity-40"></div>
        <div className="relative z-10 text-center px-4">
          <h2 className={`text-4xl md:text-6xl font-black mb-4 ${section.textColor}`}>
            {section.title}
          </h2>
          {section.subtitle && (
            <p className={`text-lg md:text-xl mb-8 max-w-2xl ${section.textColor}`}>
              {section.subtitle}
            </p>
          )}
          <button className={`${section.buttonStyle} inline-flex items-center space-x-2`}>
            <span>{section.buttonText}</span>
            <ArrowRight className="w-5 h-5" />
          </button>
        </div>
      </SectionComponent>
    );
  };

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

export default ProductSections;