"use client";

import { useEffect } from "react";
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

function Feature3() {
  useEffect(() => {
    const textElement = document.querySelector(".fade-in-text");

    if (textElement) {
      const text = textElement.textContent || "";
      textElement.textContent = "";

      const spans: HTMLSpanElement[] = [];

      // Split text into words, then letters
      text.split(" ").forEach((word) => {
        const wordContainer = document.createElement("span");
        wordContainer.style.whiteSpace = "nowrap";

        word.split("").forEach((char) => {
          const span = document.createElement("span");
          span.textContent = char;
          span.style.opacity = "0.3";
          wordContainer.appendChild(span);
          spans.push(span);
        });

        textElement.appendChild(wordContainer);
        textElement.appendChild(document.createTextNode(" "));
      });

      const tl = gsap.timeline({
        scrollTrigger: {
          trigger: textElement,
          start: "top 85%", // When 66% of the text is in view
          end: "bottom center", // When bottom reaches top
          scrub: true,
        },
      });

      // Animate letters from 0.4 to 1 in order; timeline will reverse when scrolling up
      tl.to(spans, {
        opacity: 1,
        stagger: 0.05,
      });
    }
  }, []);

  return (
    <div className="flex items-center justify-center h-[200vh] bg-white p-10">
      <h1 className="fade-in-text text-black text-5xl max-sm:text-3xl text-center font-bold max-w-3xl">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco
      </h1>
    </div>
  );
}

export { Feature3 };
fature-3
