whispering-tree/sections/CaseStudy.tsx

"use client";

import Headline from "@/components/ui/headline";
import { useSplitHeading } from "@/lib/useTextRevealHeading";
import Image from "next/image";
import ScrollTrigger from "gsap/ScrollTrigger";
import gsap from "gsap";
import { useEffect, useRef } from "react";
import { useCases } from "@/data/useCases";
import { useRouter } from "next/navigation";
import { usePageTransition } from "@/layout/Layout";

const CaseStudy = () => {
  const headingRef = useRef<HTMLHeadingElement | null>(null);
  const paraRef = useRef<HTMLParagraphElement | null>(null);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const { startTransition } = usePageTransition();
  useSplitHeading(headingRef, paraRef);

  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);

    const cards = gsap.utils.toArray<HTMLDivElement>(".use-card");

    gsap.from(cards, {
      y: 100,
      opacity: 0,
      duration: 1.2,
      ease: "power3.out",
      stagger: 0.19,
      scrollTrigger: {
        trigger: ".use-wrapper",
        start: "top 80%",
        end: "bottom 60%",
        toggleActions: "play none none none",
      },
    });

    return () => {
      ScrollTrigger.getAll().forEach((st) => st.kill());
    };
  }, []);

  return (
    <section
      id="use-cases"
      ref={containerRef}
      className="bg-light-200 relative h-full w-full"
    >
      <div className="tab:px-6 mx-auto flex h-full w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:px-2.5 lg:px-0">
        <div className="tab:w-9/12 flex flex-col items-center justify-center gap-4 sm:w-full md:w-7/12">
          <Headline text="Use Case" />
          <h1
            ref={headingRef}
            className="font-switzer text-h-mobile-30 leading-h5 tab:text-h-2-60 tab:leading-h2 text-center font-semibold text-black"
          >
            One Technology, Many{" "}
            <span className="font-playfair text-brand font-semibold italic">
              Applications
            </span>
          </h1>
          <p
            ref={paraRef}
            className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
          >
            Whether for municipalities, research, or contractors — FalktronTrees
            brings actionable insights to every level of urban forestry.
          </p>
        </div>
        <div className="tab:grid-cols-2 wrapper tab:gap-6 grid grid-cols-1 sm:grid-cols-1 sm:gap-3 md:grid-cols-3 lg:grid-cols-4">
          {useCases.map((useCase, index) => (
            <div
              key={index}
              className="group use-card relative overflow-hidden rounded-2xl bg-white p-3.5"
            >
              {/* Image */}
              <div className="relative h-[190px] overflow-hidden rounded-2xl">
                <Image
                  src={useCase.image}
                  alt={useCase.title}
                  width={400}
                  height={190}
                  className="h-full w-full transform rounded-2xl object-cover transition-transform duration-500 ease-out group-hover:scale-105"
                />
              </div>

              {/* Text Content */}
              <div className="flex h-max flex-col items-start px-1 pt-6 pb-2 text-left">
                <h3 className="text-b-1-20 font-switzer leading-b1 mb-2 text-left font-medium text-black">
                  {useCase.title}
                </h3>
                <p className="text-gray font-mium-reg mb-6 line-clamp-3 text-left text-sm leading-5 tracking-[-0.8px]">
                  {useCase.description}
                </p>
                <button
                  onClick={() => startTransition(`/use-cases/${useCase.slug}`)}
                  className="text-b-4-14 font-switzer bg-brand leading-b4 inline-flex cursor-pointer items-center gap-2 rounded-full px-4 py-3 font-normal text-white transition-all duration-300 hover:gap-3"
                >
                  Learn more
                  <Image
                    src="/images/svg/arrow.svg"
                    alt="Learn more"
                    className="h-4.5 w-4.5 object-contain"
                    width={16}
                    height={16}
                  />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default CaseStudy;