'use client';

import React, { useEffect, useRef } from 'react';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

const GenerateQuot = ({ setIsOpen }: { setIsOpen: (open: boolean) => void }) => {
  const sectionRef = useRef<HTMLDivElement | null>(null);
  const bgRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    let ctx: gsap.Context;

    if (sectionRef.current && bgRef.current) {
      ctx = gsap.context(() => {
        // gsap.fromTo(
        //   bgRef.current,
        //   { scaleY: 0, transformOrigin: 'top center' },
        //   {
        //     scaleY: 1,
        //     duration: 1,
        //     ease: 'power2.out',
        //     scrollTrigger: {
        //       trigger: sectionRef.current,
        //       start: 'top 80%',
        //       end: 'bottom center',
        //       toggleActions: 'play reverse play reverse',
        //       markers: false,
        //     },
        //   }
        // );
gsap.fromTo(
  bgRef.current,
  { scaleY: 0, transformOrigin: 'top center' },
  {
    scaleY: 1,
    duration: 1,
    ease: 'power2.out',
    scrollTrigger: {
      trigger: sectionRef.current,
      start: 'top 80%',
      end: 'bottom center',
      toggleActions: 'play ',
      markers: false,
    },
  }
);

        // 🧠 Refresh after layout is stable
        setTimeout(() => {
          ScrollTrigger.refresh();
        }, 300); // 300ms gives layout a moment to settle
      }, sectionRef);
    }

    return () => ctx?.revert();
  }, []);

  return (
    <div ref={sectionRef} className="relative overflow-hidden py-20">
      <div
        ref={bgRef}
        className="absolute top-0 left-0 w-full h-full scale-y-0 z-[-1]"
        style={{
          background: 'linear-gradient(135deg, #E77025, #F45B69)',
        }}
      />

      <h2 className="text-[28px] text-white text-center font-[900] md:text-[45px] lg:text-[50px]">
        Let&apos;s create a measurable <br /> impact on your business.
      </h2>

      <div className="m-[50px] flex justify-center">
        <button
          onClick={() => setIsOpen(true)}
          className="relative overflow-hidden cursor-pointer group flex px-36 py-8 rounded-[5px] border-2 border-black bg-white text-black font-bold text-2xl transition-all duration-500 ease-out"
        >
          <div className="absolute inset-0 bg-black transform translate-y-full group-hover:translate-y-0 group-hover:h-full transition-all duration-1000 ease-out flex items-center justify-center">
            <span className="text-white font-[900]">Generate A Quote</span>
          </div>

          <div className="absolute inset-0 bg-white transform group-hover:translate-y-[-100%] transition-all duration-500 ease-out flex items-center justify-center">
            <span className="text-black font-[900]">Generate A Quote</span>
          </div>
        </button>
      </div>
    </div>
  );
};

export default GenerateQuot;



// 'use client';

// import React, { useEffect, useRef } from 'react';
// import gsap from 'gsap';
// import { ScrollTrigger } from 'gsap/ScrollTrigger';

// gsap.registerPlugin(ScrollTrigger);

// const GenerateQuot = ({ setIsOpen }: { setIsOpen: (open: boolean) => void }) => {
//   const sectionRef = useRef(null);
//   const bgRef = useRef(null);

//   useEffect(() => {
//     if (sectionRef.current && bgRef.current) {
//       gsap.fromTo(
//         bgRef.current,
//         { height: '0%' }, // Start with height of 0% (hidden, at the top)
//         {
//           height: '100%', // Animate to height 100% (fills from top to bottom)
//           duration: 1, // Animation duration
//           ease: 'power2.out', // Smooth easing
//           scrollTrigger: {
//             trigger: sectionRef.current,
//             start: 'top center', // Start the animation when the top of the section hits the center of the viewport
//             end: 'bottom center', // End when the bottom of the section hits the center of the viewport
//             toggleActions: 'play reverse play reverse', // This ensures the animation plays when scrolling into the section and reverses when scrolling out
//             markers: false, // Set to true for debugging (if needed)
//           },
//         }
//       );
//     }
//   }, []);

//   return (
//     <div ref={sectionRef} className="relative overflow-hidden py-20">
//       {/* Animated background fill with gradient */}
//       <div
//         ref={bgRef}
//         className="absolute top-0 left-0 w-full z-[-1]"
//         style={{
//           height: '0%',
//           background: 'linear-gradient(135deg, #E77025, #F45B69)', // Example gradient from orange to pink
//         }}
//       />

//       <h2 className="text-[28px] text-white text-center font-[900] md:text-[45px] lg:text-[50px]">
//         Let&apos;s create a measurable <br /> impact on your business.
//       </h2>

//       <div className="m-[50px] flex justify-center">
//         <button
//           onClick={() => setIsOpen(true)}
//           className="relative overflow-hidden cursor-pointer group flex px-36 py-8 rounded-[5px] border-2 border-black bg-white text-black font-bold text-2xl transition-all duration-500 ease-out"
//         >
//           <div className="absolute inset-0 bg-black transform translate-y-full group-hover:translate-y-0 group-hover:h-full transition-all duration-1000 ease-out flex items-center justify-center">
//             <span className="text-white font-[900]">Generate A Quote</span>
//           </div>

//           <div className="absolute inset-0 bg-white transform group-hover:translate-y-[-100%] transition-all duration-500 ease-out flex items-center justify-center">
//             <span className="text-black font-[900]">Generate A Quote</span>
//           </div>
//         </button>
//       </div>
//     </div>
//   );
// };

// export default GenerateQuot;




// import React from 'react'

// const GenerateQuot = () => {
//   return (
//     <div className='py-20 bg-[#E77025]'>
//         <h2 className='text-[28px] text-[#FFF] text-center font-bold md:text-[70px]'>Let&apos;s create a measurable <br /> impact on your business.</h2>
//         <div className="m-[50px] flex justify-center">
//             <div className="group px-5 py-3 rounded border border-black bg-[linear-gradient(to_right,_black_50%,_white_50%)] bg-[length:200%_100%] bg-[position:right_bottom] transition-all duration-500 ease-out hover:bg-[position:left_bottom]">
//                 <div className="text-center text-[30px] leading-[30px] text-black transition-all duration-500 ease-out group-hover:text-white">
//                     Generate A Quote
//                 </div>
//             </div>
//         </div>
//     </div>
//   )
// }

// export default GenerateQuot