"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const patientSteps = [
  {
    title: "Sign-up & Account Creation",
    details: [
      "Enter name, email, phone number",
      "Verify via OTP or email",
      "Set a secure password",
    ],
  },
  {
    title: "Profile Completion",
    details: [
      "Add medical history, allergies, treatments",
      "Upload ID and insurance (if applicable)",
      "AI-assisted health assessment",
    ],
  },
  {
    title: "Doctor Selection & Scheduling",
    details: [
      "Browse doctors by specialty & rating",
      "Choose chat, video, or in-person consult",
      "Book and receive confirmation",
    ],
  },
  {
    title: "Payment & Insurance",
    details: [
      "Secure gateway for payments",
      "Insurance integration for covered services",
      "Digital invoice generation",
    ],
  },
  {
    title: "Consultation & Post-care",
    details: [
      "Secure video or chat consultation",
      "Receive e-prescriptions",
      "AI reminders for meds and reappointments",
    ],
  },
];

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

  useEffect(() => {
    const ctx = gsap.context(() => {
      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%",
          },
        }
      );

      gsap.fromTo(
        cardsRef.current,
        { opacity: 0, y: 60 },
        {
          opacity: 1,
          y: 0,
          duration: 1,
          ease: "power2.out",
          stagger: 0.2,
          scrollTrigger: {
            trigger: sectionRef.current,
            start: "top 85%",
          },
        }
      );
    });

    return () => ctx.revert();
  }, []);

  return (
    <section
      ref={sectionRef}
      className="bg-blue-50 py-20 px-6 text-center overflow-hidden"
    >
      <h2 className="text-3xl md:text-4xl font-bold text-blue-900">
        How It Works for Patients
      </h2>
      <p className="mt-3 text-gray-700 text-lg">
        A seamless journey from sign-up to post-care, guided by AI and expert doctors
      </p>

      <div className="flex justify-center gap-6 mt-12 flex-wrap">
        {patientSteps.map((step, i) => (
          <div
            key={i}
            ref={(el) => (cardsRef.current[i] = el)}
            className="w-80 bg-white/80 backdrop-blur-lg border border-white/40 p-6 rounded-2xl shadow-2xl hover:scale-105 transition-transform duration-300"
          >
            <h3 className="text-xl font-semibold text-blue-800">{step.title}</h3>
            <ul className="text-sm mt-3 text-gray-700 list-disc list-inside space-y-1 text-left">
              {step.details.map((d, idx) => (
                <li key={idx}>{d}</li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}
