import { useState, useEffect } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Link } from "react-router-dom";
import { 
  ChevronLeft, 
  ChevronRight, 
  MapPin, 
  Phone, 
  Mail, 
  Clock, 
  Shield, 
  Heart, 
  Stethoscope, 
  Baby, 
  Activity, 
  Zap,
  Award,
  Users,
  Star,
  ArrowRight,
  CheckCircle
} from "lucide-react";

export default function HomePage() {
  const images = [
    "/assets/gallery/Reception.webp",
    "/assets/gallery/hospital_building.jpeg",
    "/assets/gallery/Waiting Lobby.jpg",
    "/assets/gallery/OT 2.jpg",
    "/assets/gallery/General Ward.jpg"
  ];

  const [currentImage, setCurrentImage] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentImage((prev) => (prev + 1) % images.length);
    }, 5000);
    return () => clearInterval(interval);
  }, [images.length]);

  const prevSlide = () => {
    setCurrentImage((prev) => (prev - 1 + images.length) % images.length);
  };

  const nextSlide = () => {
    setCurrentImage((prev) => (prev + 1) % images.length);
  };

  const services = [
    {
      icon: <Activity className="w-8 h-8" />,
      title: "Critical Care",
      description: "24/7 ICU & Critical Care Unit with advanced monitoring systems and specialized staff.",
      color: "text-red-600 bg-red-50"
    },
    {
      icon: <Stethoscope className="w-8 h-8" />,
      title: "Surgical Services",
      description: "General and laparoscopic surgical procedures performed by our expert surgeons.",
      color: "text-blue-600 bg-blue-50"
    },
    {
      icon: <Baby className="w-8 h-8" />,
      title: "Maternity Care",
      description: "Comprehensive maternity services with prenatal, delivery, and postnatal care.",
      color: "text-pink-600 bg-pink-50"
    },
    {
      icon: <Zap className="w-8 h-8" />,
      title: "Diagnostics",
      description: "Advanced diagnostic services including ECG, X-Ray, Sonography, and laboratory tests.",
      color: "text-purple-600 bg-purple-50"
    },
    {
      icon: <Heart className="w-8 h-8" />,
      title: "Emergency Services",
      description: "24/7 emergency care for immediate medical attention when needed most.",
      color: "text-orange-600 bg-orange-50"
    },
  ];

  const stats = [
    { number: "5000+", label: "Happy Patients", icon: <Users className="w-6 h-6" /> },
    { number: "15+", label: "Expert Doctors", icon: <Stethoscope className="w-6 h-6" /> },
    { number: "24/7", label: "Emergency Care", icon: <Heart className="w-6 h-6" /> },
    { number: "10+", label: "Years Experience", icon: <Award className="w-6 h-6" /> }
  ];

  return (
    <div className="min-h-screen flex flex-col">
      {/* Hero Section */}
      <div className="relative min-h-[60vh] sm:min-h-[70vh] md:min-h-[80vh] lg:min-h-screen text-white overflow-hidden">
        <div
          className="absolute inset-0 bg-cover bg-center transition-all duration-1000 ease-in-out"
          style={{
            backgroundImage: `url('${images[currentImage]}')`
          }}
        >
          {/* Preload next image for smoother transitions */}
          <img 
            src={images[(currentImage + 1) % images.length]} 
            alt=""
            sizes="100vw"
            width={1920}
            height={1080}
            className="hidden"
            loading="eager"
            decoding="async"
          />
        </div>

        
        {/* Simplified Background Effects - Reduced for Performance */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-20 left-10 w-72 h-72 bg-blue-400/20 rounded-full blur-3xl"></div>
          <div className="absolute bottom-20 right-1/3 w-64 h-64 bg-green-400/20 rounded-full blur-3xl"></div>
        </div>
        
        {/* Additional Gradient Overlay for Better Text Readability */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/20 via-transparent to-black/10"></div>

        {/* Arrow Buttons */}
        <button
          onClick={prevSlide}
          className="absolute left-2 sm:left-4 md:left-6 top-1/2 transform -translate-y-1/2 z-30 bg-white/10 backdrop-blur-sm p-2 sm:p-3 rounded-full hover:bg-white/20 transition-all duration-300 border border-white/20"
        >
          <ChevronLeft className="text-white w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6" />
        </button>
        <button
          onClick={nextSlide}
          className="absolute right-2 sm:right-4 md:right-6 top-1/2 transform -translate-y-1/2 z-30 bg-white/10 backdrop-blur-sm p-2 sm:p-3 rounded-full hover:bg-white/20 transition-all duration-300 border border-white/20"
        >
          <ChevronRight className="text-white w-4 h-4 sm:w-5 sm:h-5 md:w-6 md:h-6" />
        </button>

        <div className="container mx-auto px-4 sm:px-6 md:px-12 relative z-10 flex flex-col items-center justify-center h-full py-4 sm:py-6 md:py-8 lg:py-12">
          <div className="text-center mb-4 sm:mb-6 md:mb-8 lg:mb-12">
            <div className="flex flex-col md:flex-row items-center justify-center mb-4 sm:mb-6 md:mb-8">
              <div className="bg-white/20 backdrop-blur-md p-3 sm:p-4 md:p-6 rounded-full mb-3 sm:mb-4 md:mb-0 md:mr-8 shadow-2xl border-2 border-white/30 animate-pulse">
                <img
                  src="/assets/image.png"
                  alt="Kalpesh Hospital Logo"
                  width={96}
                  height={96}
                  className="h-12 w-12 sm:h-16 sm:w-16 md:h-20 md:w-20 lg:h-24 lg:w-24 drop-shadow-lg"
                  loading="eager"
                  decoding="async"
                />
              </div>
              <div className="text-center md:text-left">
                <h1 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl font-bold mb-2 sm:mb-3 md:mb-4 lg:mb-6 leading-tight">
                  <span className="text-blue-900 drop-shadow-2xl">Kalpesh</span>{" "}
                  <span className="text-green-600 drop-shadow-2xl">Hospital</span>
                </h1>
                <p className="text-xs sm:text-sm md:text-base lg:text-lg xl:text-xl 2xl:text-2xl text-blue-100 font-light mb-2">
                  Care You Can Believe In
                </p>
                <div className="flex items-center justify-center space-x-4 text-blue-600">

                </div>
              </div>
            </div>
          </div>

          {/* Director Card */}
          <Card className="bg-gradient-to-br from-blue-50 via-white to-green-50 backdrop-blur-sm border-0 shadow-2xl w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-2xl mb-4 sm:mb-6 md:mb-8 lg:mb-12 transform hover:scale-105 transition-all duration-300 hover:shadow-3xl relative overflow-hidden">
            {/* Background Pattern */}
            <div className="absolute inset-0 bg-gradient-to-r from-blue-100/30 via-transparent to-green-100/30"></div>
            <div className="absolute top-0 right-0 w-16 h-16 sm:w-20 sm:h-20 md:w-32 md:h-32 bg-blue-200/20 rounded-full blur-2xl"></div>
            <div className="absolute bottom-0 left-0 w-12 h-12 sm:w-16 sm:h-16 md:w-24 md:h-24 bg-green-200/20 rounded-full blur-2xl"></div>
            
            <CardContent className="p-3 sm:p-4 md:p-6 relative z-10">
              <div className="flex flex-col sm:flex-row items-center gap-3 sm:gap-4 md:gap-6">
                <div className="flex-shrink-0">
                  <img
                    src="/assets/Dr. Yogi.jpg"
                    alt="Dr. Yogesh Choudhary"
                    width={160}
                    height={192}
                    className="rounded-xl sm:rounded-2xl object-contain w-16 h-20 sm:w-20 sm:h-24 md:w-32 md:h-40 lg:w-40 lg:h-48 shadow-lg sm:shadow-xl border-2 sm:border-3 border-white/70"
                    loading="eager"
                    decoding="async"
                  />
                </div>
                <div className="flex-1 text-center sm:text-left">
                  <h3 className="text-sm sm:text-base md:text-xl lg:text-2xl font-bold text-blue-900 mb-1 sm:mb-2 md:mb-3">Dr. Yogesh Choudhary</h3>
                  <div className="space-y-1 mb-2 sm:mb-3 md:mb-4">
                    <p className="text-blue-700 text-xs sm:text-sm md:text-base font-semibold">MBBS, MD (Medicine), CCEBDM</p>
                    <p className="text-blue-700 text-xs sm:text-sm md:text-base font-semibold">FICP, FIACM</p>
                  </div>
                  <Badge className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-2 py-1 sm:px-3 sm:py-1 md:px-4 md:py-2 text-xs sm:text-xs md:text-sm font-bold shadow-lg hover:shadow-xl transition-all duration-300">
                    <Award className="w-3 h-3 mr-1" />
                    Hospital Director
                  </Badge>
                </div>
              </div>
            </CardContent>
          </Card>

          <div className="text-center mb-6 sm:mb-8 md:mb-12">
            <p className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl mb-3 sm:mb-4 font-light text-center px-4 text-white drop-shadow-lg">
              Advanced Healthcare for Everyone
            </p>
            <div className="flex flex-col sm:flex-row items-center justify-center space-y-2 sm:space-y-0 sm:space-x-3 md:space-x-4 lg:space-x-8 text-blue-200">
              <div className="flex items-center">
                <div className="w-2 h-2 sm:w-3 sm:h-3 bg-green-600 rounded-full mr-2 sm:mr-3 animate-pulse"></div>
                <span className="text-xs sm:text-sm md:text-base lg:text-lg">24/7 Emergency Care</span>
              </div>
              <div className="flex items-center">
                <div className="w-2 h-2 sm:w-3 sm:h-3 bg-blue-600 rounded-full mr-2 sm:mr-3 animate-pulse"></div>
                <span className="text-xs sm:text-sm md:text-base lg:text-lg">Expert Medical Team</span>
              </div>
              <div className="flex items-center">
                <div className="w-2 h-2 sm:w-3 sm:h-3 bg-purple-600 rounded-full mr-2 sm:mr-3 animate-pulse"></div>
                <span className="text-xs sm:text-sm md:text-base lg:text-lg">Modern Technology</span>
              </div>
            </div>
          </div>
          
          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8 w-full max-w-2xl px-4">
            <Link to="/contact" className="flex-1">
              <Button size="lg" className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white px-3 py-2 sm:px-4 sm:py-3 md:px-6 md:py-4 text-xs sm:text-sm md:text-base lg:text-lg font-bold shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:scale-105">
                <Phone className="mr-1 sm:mr-2 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5" />
                Contact Us Today
                <ArrowRight className="ml-1 sm:ml-2 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5" />
              </Button>
            </Link>
            <Link to="/doctors" className="flex-1">
              <Button size="lg" className="w-full bg-white/90 text-blue-600 hover:bg-white border-2 border-white/50 px-3 py-2 sm:px-4 sm:py-3 md:px-6 md:py-4 text-xs sm:text-sm md:text-base lg:text-lg font-bold shadow-2xl hover:shadow-3xl transition-all duration-500 transform hover:scale-105 backdrop-blur-sm">
                <Users className="mr-1 sm:mr-2 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5" />
                Meet Our Doctors
                <Stethoscope className="ml-1 sm:ml-2 w-3 h-3 sm:w-4 sm:h-4 md:w-5 md:h-5" />
              </Button>
            </Link>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      <section className="py-6 sm:py-8 md:py-12 lg:py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div className="container mx-auto px-4 sm:px-6 md:px-12">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 lg:gap-8">
            {stats.map((stat, index) => (
              <div key={index} className="text-center group">
                <div className="bg-white/20 backdrop-blur-sm p-2 sm:p-3 md:p-4 lg:p-6 rounded-lg sm:rounded-xl mb-2 sm:mb-4 group-hover:bg-white/30 transition-all duration-300">
                  <div className="text-white mb-1 sm:mb-2 flex justify-center">
                    {stat.icon}
                  </div>
                  <div className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl font-bold mb-1 sm:mb-2">{stat.number}</div>
                  <div className="text-xs sm:text-sm text-blue-100">{stat.label}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-8 sm:py-12 md:py-16 lg:py-20 bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="container mx-auto px-4 sm:px-6 md:px-12">
          <div className="flex flex-col lg:flex-row items-center gap-8 sm:gap-10 md:gap-12">
            <div className="lg:w-1/2">
              <div className="space-y-4 sm:space-y-6">
                <div>
                  <Badge className="bg-blue-100 text-blue-700 px-3 py-1 mb-3 sm:mb-4 text-xs sm:text-sm">
                    About Us
                  </Badge>
                  <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-3 sm:mb-4 md:mb-6 text-gray-900">
                    About Kalpesh Hospital
                  </h2>
                </div>
                <div className="space-y-3 sm:space-y-4 text-gray-600 text-sm sm:text-base md:text-lg leading-relaxed">
                  <p>
                    Kalpesh Hospital in Alwar is committed to providing exceptional healthcare
                    services with a focus on patient comfort and advanced medical care.
                  </p>
                  <p>
                    Our team of experienced doctors and modern facilities ensure that you
                    receive the best medical attention for all your healthcare needs.
                  </p>
                  <p>
                    We are approved under RGHS and MAA Yojana, offering both OPD and IPD services
                    to make quality healthcare accessible to everyone.
                  </p>
                </div>
                <div className="flex flex-col sm:flex-row items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-4">
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
                    <span className="text-sm sm:text-base text-gray-700">24/7 Emergency Care</span>
                  </div>
                  <div className="flex items-center space-x-2">
                    <CheckCircle className="w-4 h-4 sm:w-5 sm:h-5 text-green-600" />
                    <span className="text-sm sm:text-base text-gray-700">Modern Equipment</span>
                  </div>
                </div>
              </div>
            </div>
            <div className="lg:w-1/2">
              <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl">
                <CardContent className="p-4 sm:p-6 md:p-8">
                  <h3 className="text-lg sm:text-xl md:text-2xl font-bold mb-4 sm:mb-6 text-gray-900 flex items-center">
                    <MapPin className="w-5 h-5 sm:w-6 sm:h-6 mr-2 sm:mr-3 text-blue-600" />
                    Contact Information
                  </h3>
                  <div className="space-y-3 sm:space-y-4">
                    <div className="flex items-start space-x-3">
                      <MapPin className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 mt-1" />
                      <div>
                        <p className="font-semibold text-gray-900 text-sm sm:text-base">Address</p>
                        <p className="text-gray-600 text-sm sm:text-base">H-165, Ambedkar Nagar, Alwar</p>
                      </div>
                    </div>
                    <div className="flex items-start space-x-3">
                      <Phone className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 mt-1" />
                      <div>
                        <p className="font-semibold text-gray-900 text-sm sm:text-base">Phone (Landline)</p>
                        <p className="text-gray-600 text-sm sm:text-base">0144-2946365</p>
                      </div>
                    </div>
                    <div className="flex items-start space-x-3">
                      <Phone className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 mt-1" />
                      <div>
                        <p className="font-semibold text-gray-900 text-sm sm:text-base">Phone (Mobile)</p>
                        <p className="text-gray-600 text-sm sm:text-base">8690304805</p>
                      </div>
                    </div>
                    <div className="flex items-start space-x-3">
                      <Mail className="w-4 h-4 sm:w-5 sm:h-5 text-blue-600 mt-1" />
                      <div>
                        <p className="font-semibold text-gray-900 text-sm sm:text-base">Email</p>
                        <p className="text-gray-600 text-sm sm:text-base break-all">kalpeshhospitalalwar@gmail.com</p>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-8 sm:py-12 md:py-16 lg:py-20 bg-gray-50">
        <div className="container mx-auto px-4 sm:px-6 md:px-12">
          <div className="text-center mb-6 sm:mb-8 md:mb-12 lg:mb-16">
            <Badge className="bg-blue-100 text-blue-700 px-3 py-1 mb-3 sm:mb-4 text-xs sm:text-sm">
              Our Services
            </Badge>
            <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-3 sm:mb-4 text-gray-900">
              Comprehensive Healthcare Services
            </h2>
            <p className="text-xs sm:text-sm md:text-base lg:text-lg text-gray-600 max-w-2xl mx-auto">
              We provide a wide range of medical services with state-of-the-art facilities and expert care
            </p>
          </div>
          
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6 lg:gap-8">
            {services.map((service, index) => (
              <Card key={index} className="group hover:shadow-2xl transition-all duration-300 border-0 bg-white/80 backdrop-blur-sm overflow-hidden transform hover:-translate-y-2">
                <CardContent className="p-3 sm:p-4 md:p-6">
                  <div className={`w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 rounded-lg ${service.color} flex items-center justify-center mb-2 sm:mb-3 md:mb-4`}>
                    {service.icon}
                  </div>
                  <h3 className="text-base sm:text-lg md:text-xl font-semibold text-gray-900 mb-2 sm:mb-3">{service.title}</h3>
                  <p className="text-xs sm:text-sm md:text-base text-gray-600 leading-relaxed">{service.description}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Insurance & Coverage */}
      <section className="py-8 sm:py-12 md:py-16 lg:py-20 bg-gradient-to-r from-blue-50 to-indigo-50">
        <div className="container mx-auto px-4 sm:px-6 md:px-12">
          <div className="text-center mb-6 sm:mb-8 md:mb-12 lg:mb-16">
            <Badge className="bg-green-100 text-green-700 px-3 py-1 mb-3 sm:mb-4 text-xs sm:text-sm">
              Coverage
            </Badge>
            <h2 className="text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mb-3 sm:mb-4 text-gray-900">Treatment Coverage</h2>
            <p className="text-xs sm:text-sm md:text-base lg:text-lg text-gray-600 max-w-2xl mx-auto">
              We provide treatment under various government schemes and insurance plans
            </p>
          </div>
          
          <div className="max-w-4xl mx-auto">
            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-xl">
              <CardContent className="p-4 sm:p-6 md:p-8">
                <h3 className="text-base sm:text-lg md:text-xl lg:text-2xl font-bold mb-4 sm:mb-6 md:mb-8 text-gray-900 text-center">
                  We Provide Treatment Under:
                </h3>
                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 md:gap-6">
                  <div className="bg-gradient-to-br from-green-50 to-emerald-50 p-4 sm:p-6 rounded-xl border border-green-200">
                    <div className="text-center">
                      <div className="w-10 h-10 sm:w-12 sm:h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                        <Shield className="w-5 h-5 sm:w-6 sm:h-6 text-green-600" />
                      </div>
                      <h4 className="font-bold text-green-700 mb-2 text-sm sm:text-base">MAA Yojana</h4>
                      <p className="text-xs sm:text-sm text-green-600">Free treatment for eligible patients</p>
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-blue-50 to-cyan-50 p-4 sm:p-6 rounded-xl border border-blue-200">
                    <div className="text-center">
                      <div className="w-10 h-10 sm:w-12 sm:h-12 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                        <Award className="w-5 h-5 sm:w-6 sm:h-6 text-blue-600" />
                      </div>
                      <h4 className="font-bold text-blue-700 mb-2 text-sm sm:text-base">RGHS</h4>
                      <p className="text-xs sm:text-sm text-blue-600">Approved for OPD & IPD services</p>
                    </div>
                  </div>
                  <div className="bg-gradient-to-br from-purple-50 to-violet-50 p-4 sm:p-6 rounded-xl border border-purple-200 sm:col-span-2 lg:col-span-1">
                    <div className="text-center">
                      <div className="w-10 h-10 sm:w-12 sm:h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                        <CheckCircle className="w-5 h-5 sm:w-6 sm:h-6 text-purple-600" />
                      </div>
                      <h4 className="font-bold text-purple-700 mb-2 text-sm sm:text-base">TPA & Insurance</h4>
                      <p className="text-xs sm:text-sm text-purple-600">Cashless treatment available</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

    </div>
  );
}