"use client";

import { useEffect, useRef } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
// import Image from "next/image";
// import missionIllustration from "../../public/images/mission-illustration.png";
import {
  Target,
  DollarSign,
  Layers,
} from "lucide-react"; // Icon set

gsap.registerPlugin(ScrollTrigger);

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

  useEffect(() => {
    const title = sectionRef.current.querySelector("h2");
    const subtitle = sectionRef.current.querySelector("p");

    gsap.fromTo(
      [title, subtitle],
      { opacity: 0, y: 50 },
      {
        opacity: 1,
        y: 0,
        stagger: 0.2,
        duration: 1.2,
        ease: "power3.out",
        scrollTrigger: {
          trigger: sectionRef.current,
          start: "top 80%",
        },
      }
    );

    gsap.fromTo(
      imageRef.current,
      { opacity: 0, scale: 0.9 },
      {
        opacity: 1,
        scale: 1,
        duration: 1,
        ease: "power2.out",
        scrollTrigger: {
          trigger: imageRef.current,
          start: "top 85%",
        },
      }
    );

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

  const cards = [
    {
      title: "Leverage Target Audience",
      text: "Bridge the gap between diaspora healthcare providers and patients in Africa.",
      icon: <Target className="h-8 w-8 text-blue-600" />,
    },
    {
      title: "Affordability",
      text: "Healthcare options designed to accommodate every financial background.",
      icon: <DollarSign className="h-8 w-8 text-blue-600" />,
    },
    {
      title: "Flexible Packages",
      text: "Choose plans tailored to specific needs—from consultations to full care cycles.",
      icon: <Layers className="h-8 w-8 text-blue-600" />,
    },
  ];

  return (
    <section
      ref={sectionRef}
      className="bg-gradient-to-br from-white to-blue-50 py-24 px-6 text-center overflow-hidden"
    >
      <div className="max-w-5xl mx-auto">
        <h2 className="text-5xl font-extrabold text-blue-900 mb-6 leading-tight">
          Empowering Africa&rsquo;s Access to Quality Healthcare
        </h2>
        <p className="text-lg text-gray-600 max-w-2xl mx-auto">
          We connect professionals in the diaspora with millions of patients across Africa, removing distance and cost barriers to care.
        </p>
      </div>

      

      {/* Mission Cards */}
      <div className="mt-20 flex flex-wrap justify-center gap-10">
        {cards.map((card, idx) => (
          <div
            key={idx}
            ref={(el) => (cardRefs.current[idx] = el)}
            className="w-80 bg-white p-6 rounded-3xl border border-blue-100 shadow-lg hover:shadow-2xl transition duration-300 text-left"
          >
            <div className="flex items-center gap-3 mb-4">
              <div className="p-3 bg-blue-100 rounded-full">
                {card.icon}
              </div>
              <h3 className="text-xl font-semibold text-blue-800">
                {card.title}
              </h3>
            </div>
            <p className="text-gray-700 text-sm">{card.text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}
