"use client";

import { useEffect, useRef } from "react";
import Image from "next/image";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
import {
  HeartHandshake,
  Eye,
  ShieldCheck,
  Star,
  Smile,
  Users,
} from "lucide-react";

gsap.registerPlugin(ScrollTrigger);

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

  const values = [
    {
      icon: <ShieldCheck className="w-8 h-8 text-blue-700" />,
      title: "Trust and Security",
      desc: "We prioritize patient privacy, data protection, and secure consultations.",
    },
    {
      icon: <Smile className="w-8 h-8 text-blue-700" />,
      title: "Patient-Centric",
      desc: "Our system is designed with the African patient at its heart.",
    },
    {
      icon: <Users className="w-8 h-8 text-blue-700" />,
      title: "Collaboration",
      desc: "Connecting diaspora doctors with local labs and pharmacies for unified care.",
    },
  ];

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

    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-b from-white to-blue-50 py-20 px-6 lg:px-12 text-center overflow-hidden"
    >
      {/* Intro */}
      <div className="max-w-4xl mx-auto">
        <h2 className="text-4xl md:text-5xl font-extrabold text-blue-900 leading-tight">
          About Our Healthcare System
        </h2>
        <p className="mt-4 text-lg text-gray-700">
          We&rsquo;re transforming healthcare access for millions in Africa by connecting patients with diaspora-based doctors, labs, and pharmacies through secure, modern technology.
        </p>
      </div>

      {/* Mission & Vision */}
      <div className="mt-16 grid md:grid-cols-2 gap-12 max-w-5xl mx-auto text-left">
        <div className="bg-white rounded-2xl p-6 shadow-md hover:shadow-lg transition duration-300">
          <div className="flex items-center gap-4 mb-4">
            <HeartHandshake className="w-8 h-8 text-blue-700" />
            <h3 className="text-2xl font-semibold text-blue-800">Our Mission</h3>
          </div>
          <p className="text-gray-700 text-md leading-relaxed">
            To make healthcare affordable and accessible to every African by leveraging digital tools and connecting local communities with global healthcare expertise.
          </p>
        </div>

        <div className="bg-white rounded-2xl p-6 shadow-md hover:shadow-lg transition duration-300">
          <div className="flex items-center gap-4 mb-4">
            <Eye className="w-8 h-8 text-blue-700" />
            <h3 className="text-2xl font-semibold text-blue-800">Our Vision</h3>
          </div>
          <p className="text-gray-700 text-md leading-relaxed">
            A healthier Africa where distance, cost, and access are no longer barriers to quality care.
          </p>
        </div>
      </div>

      {/* Image Section */}
      <div className="mt-20 flex justify-center">
        <div className="relative w-full max-w-3xl h-[250px] md:h-[400px] rounded-xl overflow-hidden shadow-lg">
          <Image
            src="/images/about-illustration.png"
            alt="Patient using healthcare system"
            fill
            className="object-cover"
            priority
          />
        </div>
      </div>

      {/* Core Values */}
      <div className="mt-20 max-w-6xl mx-auto grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
        {values.map((val, idx) => (
          <div
            key={idx}
            ref={(el) => (cardsRef.current[idx] = el)}
            className="bg-white border border-blue-100 p-6 rounded-2xl shadow-xl hover:shadow-2xl transition duration-300 text-left"
          >
            <div className="flex items-center justify-start mb-4">
              <div className="p-3 bg-blue-100 rounded-full">
                {val.icon}
              </div>
            </div>
            <h4 className="text-lg font-semibold text-blue-800">{val.title}</h4>
            <p className="mt-2 text-sm text-gray-700">{val.desc}</p>
          </div>
        ))}
      </div>

      {/* Why Choose Us */}
      <div className="mt-24 max-w-3xl mx-auto text-center">
        <h2 className="text-3xl md:text-4xl font-bold text-blue-900">
          Why Choose Us
        </h2>
        <p className="mt-4 text-lg text-gray-700">
          We combine technology, trust, and a deep understanding of Africa&rsquo;s healthcare needs to create lasting impact.
        </p>
      </div>
    </section>
  );
}
