import { useGSAP } from "@gsap/react";
import gsap from "gsap";
import Image from "next/image";
import { useRef, useState } from "react";

const Advantages = () => {
  const container = useRef<HTMLElement>(null);

  const [bannerNumber, setBannerNumber] = useState<number>(0);

  const data = [
    {
      title: "Transform Efficiency and Profitability",
      desc: "Radiology is the backbone of modern diagnostics, but as demand grows, imaging centers are under immense pressure to deliver faster results without compromising quality. That’s where we come in.",
    },
    {
      title: "Faster Turnaround Times",
      desc: "But with only a limited number of radiologists, misdiagnosis rates have reached 5%. The pressure is mounting, and radiologists are burning out.",
    },
    {
      title: "Significant cost savings",
      desc: "Our imaging centers save an average of 25% on their yearly teleradiology platform.",
    },
    {
      title: "Higher Diagnostic Quality",
      desc: "Not only do we have auditing systems in place to maximize accuracy, our reports are best in class quality.",
    },
    {
      title: "Happier Patients and Referring Physicians",
      desc: "Faster, more accurate results mean your referring physicians trust your services, and patients get the answers they need quickly.",
    },
  ];

  const { contextSafe } = useGSAP(() => {}, { scope: container });

  const handleClick = contextSafe((id: number) => {
    gsap
      .timeline()
      .to(".banner", { xPercent: 50, opacity: 0 })
      .call(() => setBannerNumber(id))
      .set(".banner", { xPercent: -50, opacity: 0 })
      .to(".banner", { xPercent: 0, opacity: 1 });
  });

  return (
    <section
      ref={container}
      className="bg-white rounded-t-[48px] -mt-8 relative z-10 py-[72px] overflow-hidden"
    >
      <div className="container mx-auto flex flex-col items-center gap-12 w-full">
        <div className="flex flex-col max-w-[940px] gap-4 ">
          <p className="text-primary/50 font-mono text-center uppercase">
            Our Advantages
          </p>
          <h1 className="font-display text-primary text-5xl text-center">
            For Imaging Centers - Faster, Cheaper, and More Accurate
            Teleradiology
          </h1>
        </div>
        <Image
          className="bg-background banner object-cover w-full rounded-3xl h-[510px]"
          src={`/advantages/frame/${bannerNumber}.png`}
          alt="frame"
          height={1000}
          width={1000}
        />
        <div className="grid grid-cols-5 gap-6">
          {data.map(({ desc, title }, i) => {
            return (
              <div
                onClick={() => handleClick(i)}
                key={i}
                className="flex flex-col border-t-2 border-primary cursor-pointer"
              >
                <Image
                  className="my-6"
                  src={`/advantages/icons/${i}.png`}
                  alt="icon"
                  height={32}
                  width={32}
                />
                <div className="flex flex-col gap-4">
                  <h2 className="text-2xl text-primary font-display">
                    {title}
                  </h2>
                  <p className="text-primary/70 font-mono">{desc}</p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
};

export default Advantages;



onclick animation play auto after 2 sec to next card and also work click animation