"use client";

import { useEffect, useRef } from "react";
import Image from "next/image";
import { Stethoscope, ClipboardCheck, FileText, Pill, MessageSquare, UserCheck } from "lucide-react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

export default function PatientAccess() {
  const sectionRef = useRef(null);
  const cardsRef = useRef([]);

  const benefits = [
    {
      title: "Consult Doctors",
      desc: "Instant chat or video call with qualified professionals across specializations.",
      icon: <Stethoscope className="w-6 h-6 text-blue-600" />,
    },
    {
      title: "Test Results",
      desc: "Secure access to paternity, blood, and lab results from verified partners.",
      icon: <ClipboardCheck className="w-6 h-6 text-green-600" />,
    },
    {
      title: "Consultation History",
      desc: "View and manage a full record of all past consultations anytime.",
      icon: <FileText className="w-6 h-6 text-yellow-600" />,
    },
    {
      title: "Medication & Referrals",
      desc: "Get doctor-recommended prescriptions and specialist referrals.",
      icon: <Pill className="w-6 h-6 text-purple-600" />,
    },
    {
      title: "Real-Time Messaging",
      desc: "Receive instant alerts and communicate seamlessly with your care team.",
      icon: <MessageSquare className="w-6 h-6 text-pink-600" />,
    },
    {
      title: "Designated Doctor",
      desc: "Choose your personal doctor and build a consistent healthcare relationship.",
      icon: <UserCheck className="w-6 h-6 text-indigo-600" />,
    },
  ];

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

    cardsRef.current.forEach((card, index) => {
      gsap.fromTo(
        card,
        { opacity: 0, y: 60 },
        {
          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-br from-blue-50 via-white to-blue-100 py-24 px-6 overflow-hidden"
    >
      <div className="max-w-6xl mx-auto text-center">
        <h2 className="text-4xl font-extrabold text-blue-900 tracking-tight">
          Empowering Patients Across Africa
        </h2>
        <p className="mt-4 text-lg text-gray-700 max-w-2xl mx-auto">
          Access healthcare with ease — secure, real-time services tailored for every patient.
        </p>
      </div>

      {/* Benefits Grid */}
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-10 mt-20 max-w-7xl mx-auto px-4">
        {benefits.map((item, idx) => (
          <div
            key={idx}
            ref={(el) => (cardsRef.current[idx] = el)}
            className="p-6 bg-white/90 backdrop-blur-md rounded-2xl shadow-md border border-gray-200 transition-transform duration-300 hover:scale-105"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="bg-blue-100 p-2 rounded-full shadow-sm">
                {item.icon}
              </div>
              <h3 className="text-lg font-semibold text-blue-800">
                {item.title}
              </h3>
            </div>
            <p className="text-gray-600 text-sm leading-relaxed">{item.desc}</p>
          </div>
        ))}
      </div>

      {/* Decorative Image */}
      <div className="mt-20 flex justify-center">
        <Image
          src="/images/patient-access-illustration.png"
          alt="Patient using healthcare system"
          width={1200}
          height={675}
          className="w-full max-w-4xl rounded-xl shadow-xl"
        />
      </div>
    </section>
  );
}
