"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 DoctorRegistration() {
  const sectionRef = useRef(null);
  const cardRefs = useRef([]);

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

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

  const steps = [
    {
      title: "Upload CV & Certifications",
      desc: "Professionals are required to submit valid credentials for initial review.",
    },
    {
      title: "Verification by Admin Team",
      desc: "Our team reviews and validates each document thoroughly.",
    },
    {
      title: "Country of Practice Specifics",
      desc: "Verification is based on the standards of the country the doctor practices in.",
    },
    {
      title: "Profile Approval & Dashboard Access",
      desc: "Once approved, doctors gain real-time access to the consultation dashboard.",
    },
  ];

  return (
    <section
      ref={sectionRef}
      className="bg-gray-50 py-20 px-6 text-center overflow-hidden"
    >
      <h2 className="text-3xl font-bold text-blue-900 mb-4">
        Professional Onboarding
      </h2>
      <p className="text-lg text-gray-700 max-w-2xl mx-auto mb-12">
        We verify diaspora professionals through documentation, certifications,
        and practice location-based security checks.
      </p>

      <div className="grid md:grid-cols-2 gap-12 max-w-6xl mx-auto items-center">
        {/* Image Section */}
        <div className="flex justify-center">
          <Image
            src="/images/doctor-verification.jpg"
            alt="Doctor Verification"
            width={640}
            height={480}
            className="rounded-xl shadow-lg w-full max-w-lg"
          />
        </div>

        {/* Steps Section */}
        <div className="grid gap-8">
          {steps.map((step, index) => (
            <div
              key={index}
              ref={(el) => (cardRefs.current[index] = el)}
              className="bg-white shadow-md rounded-xl p-6 border border-blue-100 hover:shadow-lg transition-shadow"
            >
              <h3 className="text-xl font-semibold text-blue-800 mb-2">
                {step.title}
              </h3>
              <p className="text-gray-600">{step.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
