"use client";

import { useEffect, useRef } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Play, Shield, Users, Clock } from "lucide-react";
import heroImage from "../../public/images/carousel1.jpg";
import gsap from "gsap";

export default function HeroSection() {
  const sectionRef = useRef(null);

  useEffect(() => {
    gsap.fromTo(
      sectionRef.current,
      { opacity: 0, y: 30 },
      { opacity: 1, y: 0, duration: 1, ease: "power2.out" }
    );
  }, []);

  return (
    <section
      ref={sectionRef}
      className="relative bg-blue-50 py-20 lg:py-32 overflow-hidden"
    >
      <div className="max-w-7xl mx-auto px-4 grid lg:grid-cols-2 gap-12 items-center">
        {/* Content */}
        <div className="space-y-8">
          <div className="space-y-4">
            <div className="inline-flex items-center px-3 py-1 rounded-full bg-blue-100 text-blue-700 text-sm font-medium">
              🌍 Connecting Africa to Quality Healthcare
            </div>
            <h1 className="text-4xl lg:text-6xl font-bold text-blue-900 leading-tight">
              Your Health, <span className="text-blue-600">Virtually</span> Accessible
            </h1>
            <p className="text-lg text-gray-700 leading-relaxed">
              Connect with qualified doctors across Africa. Book consultations, manage your health records, and receive prescriptions — all from the comfort of your home.
            </p>
          </div>

          {/* Trust Indicators */}
          <div className="flex flex-wrap gap-6 text-sm text-gray-600">
            <div className="flex items-center space-x-2">
              <Shield className="h-4 w-4 text-blue-600" />
              <div className="text-xs text-gray-500">Secure & Confidential</div>
            </div>
            <div className="flex items-center space-x-2">
              <Users className="h-4 w-4 text-blue-600" />
              <div className="font-bold text-green-600">✔ Verified</div>
            </div>
            <div className="flex items-center space-x-2">
              <Clock className="h-4 w-4 text-blue-600" />
              <span>24/7 Available</span>
            </div>
          </div>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4">
            <Link
              href="/signup"
              className="flex items-center justify-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg text-lg shadow transition"
            >
              Book Consultation
              <ArrowRight className="ml-2 h-5 w-5" />
            </Link>
            <Link
              href="https://www.youtube.com/@MedbridgeAfrik"
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center px-6 py-3 border border-blue-600 text-blue-700 hover:bg-blue-100 font-medium rounded-lg text-lg transition"
            >
              <Play className="mr-2 h-5 w-5" />
              Watch Demo
            </Link>
          </div>

          {/* Stats */}
          {/* To Implement When on live data */}
          {/* <div className="grid grid-cols-3 gap-6 pt-8 border-t border-gray-200">
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">50K+</div>
              <div className="text-sm text-gray-600">Patients Served</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">98%</div>
              <div className="text-sm text-gray-600">Satisfaction Rate</div>
            </div>
            <div className="text-center">
              <div className="text-2xl font-bold text-blue-600">15min</div>
              <div className="text-sm text-gray-600">Avg Wait Time</div>
            </div>
          </div> */}
        </div>

        {/* Image + Floating Elements */}
        <div className="relative">
          <div className="relative rounded-2xl overflow-hidden shadow-2xl">
            <Image
              src={heroImage}
              alt="Virtual healthcare consultation"
              width={800}
              height={600}
              className="w-full h-auto object-cover"
              priority
            />
            <div className="absolute inset-0 bg-gradient-to-t from-blue-500/20 to-transparent"></div>
          </div>

          <div className="absolute -bottom-6 -left-6 bg-white rounded-lg shadow-lg p-4 border border-gray-200">
            <div className="flex items-center space-x-3">
              <div className="w-3 h-3 bg-green-500 rounded-full animate-pulse" />
              <span className="text-sm font-medium text-gray-700">Online Now</span>
            </div>
          </div>

          <div className="absolute -top-6 -right-6 bg-white rounded-lg shadow-lg p-4 border border-gray-200 text-center">
            <div className="text-lg font-bold text-green-600">✔ Verified</div>
            <div className="text-xs text-gray-500">Doctor Profile Status</div>
          </div>
        </div>
      </div>
    </section>
  );
}
