"use client";
import Button from "@/components/shared/Button";
import { useEffect, useRef } from "react";
import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
import Image from "next/image";
import { useSplitHeading } from "@/lib/useTextRevealHeading";

gsap.registerPlugin(ScrollTrigger);

const CTA = () => {
  const headingRef = useRef<HTMLHeadingElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const paraRef = useRef<HTMLParagraphElement>(null);
  const buttonRef = useRef<HTMLDivElement>(null);

  useSplitHeading(headingRef, paraRef);
  useEffect(() => {
    if (!containerRef.current) return;
    if (buttonRef.current) {
      gsap.from(buttonRef.current, {
        opacity: 0,
        y: 20,
        duration: 0.8,
        ease: "power2.out",
        delay: 0.6,
        scrollTrigger: {
          trigger: containerRef.current,
          start: "top 80%",
        },
      });
    }
  }, []);

  return (
    <div
      ref={containerRef}
      id="cta"
      className="tab:mx-0 relative mx-auto h-full w-full sm:px-2.5"
    >
      <div className="tab:h-[450px] tab:my-6 relative mx-auto flex w-full max-w-[1420px] items-center justify-center overflow-hidden rounded-3xl bg-[url('/images/png/1-2.jpeg')] bg-cover bg-center sm:h-[490px]">
        <div className="relative z-20 flex flex-col items-center justify-center gap-3 px-4">
          <h1
            ref={headingRef}
            className="font-switzer tab:text-h-2-60 md:leading-h1 tab:leading-h2 text-center font-semibold text-white sm:text-[50px] sm:leading-[54px]"
          >
            Join the Future of Smart Tree Care
          </h1>

          <p
            aria-hidden="true"
            ref={paraRef}
            className="text-b-3-16 leading-b3 font-mium-reg tab:w-9/12 text-center tracking-[-0.8px] text-white sm:w-full"
          >
            Experience real-time insights, efficient water use, and healthier
            urban forests — start your pilot or schedule a demo today.
          </p>

          <div ref={buttonRef}>
            <Button text="Book a Demo" />
          </div>
        </div>
        <Image
          src="/images/png/Blob 5.png"
          width={700}
          height={500}
          alt="overlay"
          className="absolute bottom-0 left-0 h-[410px] w-full object-cover"
        />
      </div>
    </div>
  );
};

export default CTA;