"use client";
import { useEffect, useRef } from "react";
import Image from "next/image";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

export default function ServicesPage() {
  const sectionRef = useRef(null);
  const cardRefs = useRef([]);

  const services = [
    {
      title: "Virtual Consultations",
      description: "Access licensed doctors via secure video or chat.",
      image: "/images/virtual-consultation.jpg",
    },
    {
      title: "Lab Test Integration",
      description: "Book and view results from partnered diagnostic labs.",
      image: "/images/lab-tests.jpg",
    },
    {
      title: "E-Prescriptions",
      description: "Receive prescriptions digitally from your doctor.",
      image: "/images/e-prescription.jpg",
    },
    {
      title: "Medication Delivery",
      description: "Pharmacy partners deliver prescribed medications.",
      image: "/images/medication-delivery.jpg",
    },
    {
      title: "Doctor Matching",
      description: "AI matches you with a doctor suited to your needs.",
      image: "/images/doctor-matching.jpg",
    },
    {
      title: "Insurance Integration",
      description: "Consult with your insurance-backed health benefits.",
      image: "/images/insurance-integration.jpg",
    },
  ];

  useEffect(() => {
    gsap.fromTo(
      sectionRef.current.querySelector("h2"),
      { opacity: 0, y: 30 },
      {
        opacity: 1,
        y: 0,
        duration: 1.2,
        ease: "power3.out",
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
        },
      }
    );

    cardRefs.current.forEach((card, index) => {
      gsap.fromTo(
        card,
        { opacity: 0, y: 50 },
        {
          opacity: 1,
          y: 0,
          duration: 1,
          delay: index * 0.1,
          ease: "power2.out",
          scrollTrigger: {
            trigger: card,
            start: "top 90%",
          },
        }
      );
    });
  }, []);

  return (
    <section
      ref={sectionRef}
      className="bg-gradient-to-b from-blue-50 to-white py-20 px-6 text-center overflow-hidden"
    >
      <h2 className="text-4xl font-bold text-blue-900 mb-4">
        Our Healthcare Services
      </h2>
      <p className="text-lg text-gray-700 max-w-3xl mx-auto mb-12">
        We offer a wide range of digital health services to ensure accessible and affordable care for everyone.
      </p>

      <div className="grid gap-10 md:grid-cols-2 lg:grid-cols-3 max-w-7xl mx-auto">
        {services.map((service, idx) => (
          <div
            key={idx}
            ref={(el) => (cardRefs.current[idx] = el)}
            className="bg-white border border-gray-100 rounded-2xl shadow-xl hover:shadow-2xl transition-shadow duration-300 overflow-hidden"
          >
            <Image
              src={service.image}
              alt={service.title}
              width={400}
              height={208}
              className="w-full h-52 object-cover"
            />
            <div className="p-6">
              <h3 className="text-xl font-semibold text-blue-800 mb-2">
                {service.title}
              </h3>
              <p className="text-sm text-gray-600">{service.description}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}
