"use client"
import { useEffect, useRef } from 'react';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/dist/ScrollTrigger';
import Image from 'next/image';

gsap.registerPlugin(ScrollTrigger);

const HorizontalScroll = () => {
  const containerRef = useRef<HTMLDivElement>(null);
  const sectionsRef = useRef<HTMLElement[]>([]);

  useEffect(() => {
    const container = containerRef.current;
    const sections = sectionsRef.current;

    if (!container || sections.length === 0) return;

    // Ensure all sections are direct children of the container.
    const validSections = Array.from(container.children) as HTMLElement[];

    if (validSections.length < 2) {
      console.warn("HorizontalScroll requires at least two sections.");
      return;
    }

    gsap.to(validSections, {
      xPercent: -100 * (validSections.length - 1),
      ease: 'none',
      scrollTrigger: {
        trigger: container,
        start : '-=200px, +=350px',
        pin: false,
        markers : true,
        scrub: 1,
        snap: 1 / (validSections.length - 1),
        end: '100%+=330px +=900px', // Using container width for proper end calculation.
        invalidateOnRefresh: true, // Important for dynamic content
      },
    });

    return () => {
      ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); // Cleanup ScrollTriggers on unmount
    };
  }, []);

  const addSectionRef = (el: HTMLElement | null) => {
    if (el && !sectionsRef.current.includes(el)) {
      sectionsRef.current.push(el);
    }
  };

  return (
    
     
    <div ref={containerRef} className="gsap-container w-[300%]  flex flex-row mt-8" >
      {/* Example sections. You'll replace these with your actual content */}
      <div ref={addSectionRef} className='flex flex-row justify-center items-center bg-white300 w-1/3 h-[500px] px-4 md:pl-12 md:mr-4  '>
        <div className='md:basis-2/3 md:px-12 flex flex-col justify-center items-center md:justify-start md:items-start'>
         <div className='flex flex-row justify-center md:justify-start '>
         <p className="text-grey-text text-xl font-normal pr-2 underline hover:text-deeba-main hidden md:block">Services </p>
         <p className="text-grey-text text-xl font-light underline hover:text-deeba-main">Construction</p>
         </div>
          <p className='text-lg md:text-3xl text-center md:text-start font-light mt-8 md:pr-16 text-grey-darker'>Our aim at deeba is to engage in proper collaboration at a cross-funtional level. This helps us optimize <span className='text-black '>building placement</span>, form and materials whilst mitigating natural risk like windforces, seismic loads and other factors to come out with the best and most practical creative solutions.</p>
          <div className="bg-grey-darkest w-[200px] height-[70px] mt-12 text-white font-normal text-xl flex flex-row justify-center items-center py-4">Learn More</div>
        </div>
        <div className='hidden md:block md:basis-1/3 w-1/3 h-full relative' >
        <Image alt="about us deeba" src="/images/construction.jpg" layout="fill" objectFit="cover" />
        </div>
      </div>
      <div ref={addSectionRef} className='flex flex-row justify-center items-center bg-white w-1/3 h-[500px] px-4 md:pl-12 md:mr-4  '>
        <div className='md:basis-2/3 md:px-12 flex flex-col justify-center items-center md:justify-start md:items-start'>
         <div className='flex flex-row justify-center md:justify-start '>
         <p className="text-xl font-normal pr-2 underline hover:text-deeba-main hidden md:block">Services </p>
         <p className="text-xl font-light underline hover:text-deeba-main">Architecture</p>
         </div>
          <p className='text-lg md:text-3xl text-center md:text-start font-light mt-8 md:pr-16 text-grey-darker'>Our design philosophy is driven by forces that shape our society. Our aim is to achieve a timeless experession that is grounded on sustainability and well-being.</p>
          <div className="bg-black w-[200px] height-[70px] mt-12 text-white font-normal text-xl flex flex-row justify-center items-center py-4">Learn More</div>
        </div>
        <div className='hidden md:block md:basis-1/3 w-1/3 h-full relative' >
        <Image alt="architectural drawing" src="/images/drawings.jpg" layout="fill" objectFit="cover" />
        </div>
      </div>
      <div ref={addSectionRef} className='flex flex-row justify-center items-center bg-white300 w-1/3 h-[500px] pl-12  px-4 md:pl-12 md:mr-4 '>
        <div className='md:basis-2/3 md:px-12 flex flex-col justify-center items-center md:justify-start md:items-start'>
         <div className='flex flex-row '>
         <p className="text-grey-darker text-xl font-normal pr-2 underline hover:text-deeba-main hidden md:block">Services </p>
         <p className="text-grey-darker text-xl font-light underline hover:text-deeba-main">Interior Design</p>
         </div>
          <p className='text-lg md:text-3xl text-center md:text-start font-light mt-8 md:pr-16 text-grey-darker '>With natural elements like wood and stone blended with a touch of luxury textures, we aim to achieve spaces that bend towards the identity of our clients goals.</p>
          <div className="bg-grey-darkest w-[200px] height-[70px] mt-12 text-white font-normal text-xl flex flex-row justify-center items-center py-4">Learn More</div>
        </div>
        <div className='hidden md:block md:basis-1/3 w-1/3 h-full relative' >
        <Image alt="contemporary villa" src="/images/interior_design.jpg" fill={true}
  layout={'fill'}
  objectFit={'cover'}/>
        </div>
      </div>
      {/* Add more sections as needed */}
    </div>
    
  );
};

export default HorizontalScroll;