whispering-tree/sections/Benefit.tsx

"use client";

import Headline from "@/components/ui/headline";
import Image from "next/image";
import { useEffect, useRef } from "react";
import ScrollTrigger from "gsap/ScrollTrigger";
import gsap from "gsap";
import { useSplitHeading } from "@/lib/useTextRevealHeading";

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

  useSplitHeading(headingRef, paraRef);
  const benefits = [
    {
      icon: "/images/svg/mdi_water-check-outline (1).svg",
      title: "Save Water & Costs",
      description:
        "Optimize irrigation with real-time data and reduce unnecessary water usage.",
    },
    {
      icon: "/images/svg/entypo_tree.svg",
      title: "Healthier Trees",
      description:
        "Detect stress early and ensure optimal growth and longevity.",
    },
    {
      icon: "/images/svg/iconoir_reports.svg",

      title: "Transparent Reports",
      description:
        "Provide actionable insights for councils, cities, and citizens alike.",
    },
    {
      icon: "/images/svg/lucide_monitor-cog.svg",

      title: "Fast Setup",
      description:
        "Deploy smart monitoring from pilot to full project within weeks.",
    },
  ];
  useEffect(() => {
    const cards = gsap.utils.toArray<HTMLDivElement>(".animation .card-inner");

    cards.forEach((card) => {
      gsap.from(card, {
        x: -130,
        opacity: 0,
        duration: 1,
        ease: "expo.out",
        scrollTrigger: {
          trigger: ".wrapper",
          start: "top 80%",
        },
      });
    });

    return () => {
      ScrollTrigger.getAll().forEach((st) => st.kill());
    };
  }, []);
  return (
    <section
      ref={containerRef}
      id="benefits"
      className="bg-light-200 relative h-full w-full"
    >
      <div className="tab:px-6 mx-auto flex w-full max-w-[1420px] flex-col items-center justify-start gap-12 py-8 sm:px-2.5 lg:h-screen 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="Benefits" />
          <h1
            ref={headingRef}
            className="font-switzer sm:text-h-mobile-30 sm:leading-h5 tab:text-[50px] tab:leading-h3 lg:text-h-2-60 lg:leading-h2 overflow-hidden text-center font-semibold text-black"
          >
            Smarter Trees. Greener{" "}
            <span className="font-playfair text-brand font-semibold italic">
              Cities.
            </span>
            Sustainable{" "}
            <span className="font-playfair text-brand font-semibold italic">
              Future.{" "}
            </span>
          </h1>
          <p
            ref={paraRef}
            className="text-b-3-16 leading-b3 font-mium-reg text-center tracking-[-0.8px] text-black"
          >
            Experience real-time insights, efficient water use, and healthier
            urban forests — start your pilot or schedule a demo today.
          </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">
          {benefits.map((benefit, index) => (
            <div
              key={index}
              className="animation tab:max-w-[320px] group h-[350px] overflow-hidden sm:w-full"
            >
              <div
                className={`tab:max-w-[320px] card-inner relative flex h-[350px] cursor-pointer flex-col items-start justify-between overflow-hidden rounded-[20px] bg-white px-6 py-5 transition-colors duration-500 ease-in-out sm:w-full`}
              >
                <div className="bg-brand absolute top-5 left-6 h-20 w-20 scale-0 rounded-full transition-transform duration-500 ease-out group-hover:scale-[10]"></div>
                <div className="bg-light-200 relative z-20 flex h-20 w-20 items-center justify-center rounded-full">
                  <Image
                    src={benefit.icon}
                    alt={benefit.title}
                    width={32}
                    height={32}
                    className="object-cover"
                  />
                </div>
                <div className="relative z-20 h-[124px]">
                  <h3
                    className={`text-h-7-24 leading-h5 font-switzer mb-2.5 text-left font-semibold text-black group-hover:text-white`}
                  >
                    {benefit.title}
                  </h3>
                  <p
                    className={`text-b-3-16 leading-b3 font-mium-reg tracking-[-0.8px] text-black group-hover:text-white`}
                  >
                    {benefit.description}
                  </p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Benefit;