Untitled

import React, { useState, useEffect, useRef } from 'react';

const BenefitsComponent = () => {
  const leftSideContent = {
    title: 'Derive Proven Benefits',
    description:
      'The platform offers measurable advantages, enabling businesses to achieve cost efficiency, rapid service deployment, streamlined operations, and revenue growth. It significantly reduces CAPEX by 30% and accelerates MVP service launches within 100 days.',
  };

  const data = [
    { cardTitle: 'Cost Reduction', cardContent: 'Reduces\nCAPEX by\n30%', image: '/platform/Frame1.png' },
    {
      cardTitle: 'Accelerated Deployment',
      cardContent: 'Helps launch MVP\nservices in under\n100 days',
      image: '/platform/Frame2.png',
    },
    {
      cardTitle: 'Simplified Integration',
      cardContent: 'Streamlines integration\nprocesses to minimise\ncustomisation needs.',
      image: '/platform/Frame3.png',
    },
    {
      cardTitle: 'Enhanced Revenue',
      cardContent: 'Increases ARPU\nby 25% through\nintelligent upselling',
      image: '/platform/Frame4.png',
    },
    {
      cardTitle: 'Operational Efficiency',
      cardContent: 'Reduces manual\nprocesses by 40%\nthrough automation',
      image: '/platform/Frame5.png',
    },
  ];

  const [activeIndex, setActiveIndex] = useState(0);
  const [isScrolling, setIsScrolling] = useState(false);
  const sectionRef = useRef(null);

  useEffect(() => {
    const handleScroll = (event) => {
      const atLastCard = activeIndex === data.length - 1;
      const atFirstCard = activeIndex === 0;

      if ((event.deltaY > 0 && atLastCard) || (event.deltaY < 0 && atFirstCard)) {
        return; // Allow normal scrolling after reaching first/last card
      }

      event.preventDefault(); // Prevent default page scroll
      if (isScrolling) return;

      setIsScrolling(true);
      if (event.deltaY > 0 && !atLastCard) {
        setActiveIndex((prevIndex) => prevIndex + 1);
      } else if (event.deltaY < 0 && !atFirstCard) {
        setActiveIndex((prevIndex) => prevIndex - 1);
      }

      setTimeout(() => setIsScrolling(false), 500);
    };

    const section = sectionRef.current;
    if (section) {
      section.addEventListener('wheel', handleScroll, { passive: false });
    }

    return () => {
      if (section) {
        section.removeEventListener('wheel', handleScroll);
      }
    };
  }, [activeIndex, isScrolling, data.length]);

  return (
    <div ref={sectionRef} className="w-full bg-white py-12 md:pt-[125px] md:pb-[100px] overflow-hidden">
      <div className="container mx-auto px-4 md:px-6 lg:px-[7.4%]">
        <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-12 md:gap-16">
          <div className="flex-1 max-w-2xl mx-auto lg:mx-0 text-center lg:text-left">
            <div className="text-[#2e2e2e] text-3xl md:text-4xl font-semibold leading-tight md:leading-[54px] mb-4">
              {leftSideContent.title}
            </div>
            <div className="text-[#4e4e4e] text-lg md:text-xl font-normal font-['Poppins'] leading-relaxed md:leading-[34px]">
              {leftSideContent.description}
            </div>
          </div>

          <div className="relative w-full max-w-xl lg:max-w-[580px] h-[304px] mx-auto lg:mx-0">
            {data.map((item, index) => {
              const isActive = index === activeIndex;
              const offset = index - activeIndex;

              return (
                <div
                  key={index}
                  className="absolute w-full h-full rounded-[20px] p-4 md:p-6 flex flex-col justify-center items-start transition-all duration-500 cursor-pointer shadow-lg"
                  style={{
                    backgroundImage: `url(${item.image})`,
                    backgroundSize: 'cover',
                    backgroundPosition: 'center',
                    transform: isActive
                      ? 'translateY(0) scale(1)'
                      : `translateY(${offset * 15}px) scale(${1 - Math.abs(offset) * 0.03})`,
                    zIndex: isActive ? data.length : data.length - Math.abs(offset),
                    opacity: isActive ? 1 : 0.9 - Math.abs(offset) * 0.05,
                    transition: 'transform 0.5s ease-in-out, opacity 0.5s ease-in-out',
                  }}
                >
                  <div className="text-white text-xl md:text-2xl font-normal font-['Poppins'] leading-tight md:leading-[33.60px]">
                    {item.cardTitle}
                  </div>
                  <div className="text-white text-3xl md:text-4xl font-semibold font-['Poppins'] leading-tight md:leading-[61.20px]">
                    {item.cardContent.split('\n').map((line, idx) => (
                      <div key={idx}>{line}</div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
};

export default BenefitsComponent;