"use client";

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

gsap.registerPlugin(ScrollTrigger);

const doctorSteps = [
  {
    title: "Sign-up & Account Creation",
    details: [
      "Enter email, phone, and professional details",
      "Verify medical license and identity",
    ],
  },
  {
    title: "Profile Setup",
    details: [
      "Input specialization & experience",
      "Upload degrees and regulatory docs",
      "Set consultation availability & fees",
    ],
  },
  {
    title: "Approval & Verification",
    details: [
      "System validates credentials",
      "Admin review and onboarding",
      "AI-driven patient matching",
    ],
  },
  {
    title: "Dashboard & Appointment Management",
    details: [
      "Access upcoming consultations",
      "Edit availability or cancel sessions",
      "NOTE  :  Integrate with EHR systems",
    ],
  },
  {
    title: "Consultation & Prescription",
    details: [
      "Secure video/chat with note tools",
      "Send e-prescriptions digitally",
      "Use AI insights for better care",
    ],
  },
];

export default function DoctorWorkflowSection() {
  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-slate-100 py-20 px-6 text-center overflow-hidden"
    >
      <h2 className="text-3xl md:text-4xl font-bold text-blue-900">
        Doctor Onboarding Process
      </h2>
      <p className="mt-3 text-gray-700 text-lg">
        A verified platform for professionals to consult securely and grow their reach
      </p>

      <div className="flex justify-center gap-6 mt-12 flex-wrap">
        {doctorSteps.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>
  );
}
