import React, { useState, useEffect, useRef } from 'react';
import { 
  Menu, X, ChevronRight, Calendar, Phone, Mail, MapPin, Clock, 
  ArrowRight, Check, Star, ChevronDown, MessageSquare, Play, 
  Heart, Activity, Shield, Award, Users, Zap, Smile, PlusCircle
} from 'lucide-react';

// Import necessary libraries for animations
// Note: In a real implementation, you would need to install these packages
// For this example, we'll simulate their functionality
const useInView = (options) => {
  const ref = useRef(null);
  const [isInView, setIsInView] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      setIsInView(entry.isIntersecting);
    }, options);

    if (ref.current) {
      observer.observe(ref.current);
    }

    return () => {
      if (ref.current) {
        observer.unobserve(ref.current);
      }
    };
  }, [ref, options]);

  return [ref, isInView];
};

// Custom cursor component
const CustomCursor = () => {
  const cursorRef = useRef(null);
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isPointer, setIsPointer] = useState(false);
  const [isClicking, setIsClicking] = useState(false);
  const [isHidden, setIsHidden] = useState(true);

  useEffect(() => {
    const handleMouseMove = (e) => {
      setPosition({ x: e.clientX, y: e.clientY });
      setIsHidden(false);
    };

    const handleMouseDown = () => setIsClicking(true);
    const handleMouseUp = () => setIsClicking(false);

    const handleMouseOver = (e) => {
      const target = e.target;
      const isLink = target.tagName.toLowerCase() === 'a' || 
                    target.tagName.toLowerCase() === 'button' ||
                    target.closest('a') || 
                    target.closest('button');
      setIsPointer(isLink);
    };

    const handleMouseLeave = () => {
      setIsHidden(true);
    };

    document.addEventListener('mousemove', handleMouseMove);
    document.addEventListener('mousedown', handleMouseDown);
    document.addEventListener('mouseup', handleMouseUp);
    document.addEventListener('mouseover', handleMouseOver);
    document.addEventListener('mouseleave', handleMouseLeave);

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mousedown', handleMouseDown);
      document.removeEventListener('mouseup', handleMouseUp);
      document.removeEventListener('mouseover', handleMouseOver);
      document.removeEventListener('mouseleave', handleMouseLeave);
    };
  }, []);

  return (
    <>
      <div 
        ref={cursorRef}
        className={`fixed w-8 h-8 rounded-full pointer-events-none z-50 mix-blend-difference transition-transform duration-300 ${
          isHidden ? 'opacity-0' : 'opacity-100'
        } ${isClicking ? 'scale-75' : ''} ${isPointer ? 'scale-150' : ''}`}
        style={{
          left: `${position.x}px`,
          top: `${position.y}px`,
          transform: 'translate(-50%, -50%)',
          backgroundColor: isPointer ? '#4ECDC4' : 'white',
        }}
      ></div>
      <div 
        className={`fixed w-40 h-40 rounded-full pointer-events-none z-40 transition-all duration-500 ease-out ${
          isHidden ? 'opacity-0' : 'opacity-20'
        } ${isPointer ? 'scale-50' : ''}`}
        style={{
          left: `${position.x}px`,
          top: `${position.y}px`,
          transform: 'translate(-50%, -50%)',
          backgroundColor: '#4ECDC4',
          filter: 'blur(30px)',
        }}
      ></div>
    </>
  );
};

// Animated number counter component
const AnimatedCounter = ({ value, duration = 2000, prefix = '', suffix = '' }) => {
  const [count, setCount] = useState(0);
  const countRef = useRef(null);
  const [ref, isInView] = useInView({ threshold: 0.3 });

  useEffect(() => {
    let start = 0;
    let startTimestamp = null;
    
    if (isInView) {
      const step = (timestamp) => {
        if (!startTimestamp) startTimestamp = timestamp;
        const progress = Math.min((timestamp - startTimestamp) / duration, 1);
        const currentCount = Math.floor(progress * value);
        
        setCount(currentCount);
        
        if (progress < 1) {
          window.requestAnimationFrame(step);
        } else {
          setCount(value);
        }
      };
      
      window.requestAnimationFrame(step);
    }
  }, [value, duration, isInView]);

  return (
    <div ref={ref} className="inline-flex items-center">
      <span ref={countRef} className="text-4xl md:text-5xl font-bold text-teal-500">
        {prefix}{count}{suffix}
      </span>
    </div>
  );
};

// Particle background component
const ParticleBackground = ({ color = "#4ECDC4", count = 50 }) => {
  const canvasRef = useRef(null);
  
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');
    let animationFrameId;
    let particles = [];
    
    const resizeCanvas = () => {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      initParticles();
    };
    
    const initParticles = () => {
      particles = [];
      for (let i = 0; i < count; i++) {
        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          radius: Math.random() * 3 + 1,
          color: color,
          speedX: Math.random() * 0.5 - 0.25,
          speedY: Math.random() * 0.5 - 0.25,
          opacity: Math.random() * 0.5 + 0.1
        });
      }
    };
    
    const drawParticles = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      particles.forEach(particle => {
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
        ctx.fillStyle = `${particle.color}${Math.floor(particle.opacity * 255).toString(16).padStart(2, '0')}`;
        ctx.fill();
        
        // Update position
        particle.x += particle.speedX;
        particle.y += particle.speedY;
        
        // Bounce off edges
        if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1;
        if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1;
      });
      
      animationFrameId = window.requestAnimationFrame(drawParticles);
    };
    
    window.addEventListener('resize', resizeCanvas);
    resizeCanvas();
    drawParticles();
    
    return () => {
      window.cancelAnimationFrame(animationFrameId);
      window.removeEventListener('resize', resizeCanvas);
    };
  }, [color, count]);
  
  return (
    <canvas 
      ref={canvasRef} 
      className="absolute inset-0 z-0 pointer-events-none"
    />
  );
};

// 3D Card component
const Card3D = ({ children, className = "", depth = 10 }) => {
  const [rotation, setRotation] = useState({ x: 0, y: 0 });
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [isHovered, setIsHovered] = useState(false);
  const cardRef = useRef(null);
  
  const handleMouseMove = (e) => {
    if (!cardRef.current) return;
    
    const rect = cardRef.current.getBoundingClientRect();
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    
    const mouseX = e.clientX;
    const mouseY = e.clientY;
    
    const rotateY = ((mouseX - centerX) / (rect.width / 2)) * 5;
    const rotateX = ((centerY - mouseY) / (rect.height / 2)) * 5;
    
    setRotation({ x: rotateX, y: rotateY });
    
    // Calculate position for 3D effect
    const moveX = ((mouseX - centerX) / (rect.width / 2)) * (depth / 2);
    const moveY = ((mouseY - centerY) / (rect.height / 2)) * (depth / 2);
    
    setPosition({ x: moveX, y: moveY });
  };
  
  const handleMouseEnter = () => {
    setIsHovered(true);
  };
  
  const handleMouseLeave = () => {
    setIsHovered(false);
    setRotation({ x: 0, y: 0 });
    setPosition({ x: 0, y: 0 });
  };
  
  return (
    <div 
      ref={cardRef}
      className={`relative transition-all duration-200 ${className} ${isHovered ? 'z-10' : ''}`}
      onMouseMove={handleMouseMove}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      style={{
        transform: isHovered 
          ? `perspective(1000px) rotateX(${rotation.x}deg) rotateY(${rotation.y}deg) translateZ(10px) translateX(${position.x}px) translateY(${position.y}px)` 
          : 'perspective(1000px) rotateX(0) rotateY(0) translateZ(0)',
        transition: isHovered ? 'transform 0.1s ease-out' : 'transform 0.5s ease-out'
      }}
    >
      {children}
      {isHovered && (
        <div 
          className="absolute inset-0 rounded-xl pointer-events-none"
          style={{
            background: 'linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%)',
            transform: `perspective(1000px) rotateX(${rotation.x}deg) rotateY(${rotation.y}deg)`,
          }}
        ></div>
      )}
    </div>
  );
};

// Animated button component
const AnimatedButton = ({ children, onClick, className = "", primary = true }) => {
  const [isHovered, setIsHovered] = useState(false);
  
  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      className={`relative overflow-hidden group transition-all duration-300 ${
        primary 
          ? 'bg-gradient-to-r from-teal-500 to-blue-600 text-white' 
          : 'bg-white text-teal-600 border-2 border-teal-500'
      } font-medium rounded-lg ${className}`}
    >
      <span className="relative z-10 py-3 px-8 flex items-center justify-center transition-transform duration-300 group-hover:scale-110">
        {children}
      </span>
      <span 
        className={`absolute inset-0 ${
          primary ? 'bg-gradient-to-r from-blue-600 to-teal-500' : 'bg-teal-50'
        } transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 origin-left`}
      ></span>
      {isHovered && (
        <span className="absolute inset-0 opacity-20">
          <span className="absolute top-0 left-0 w-full h-full bg-white blur-md transform -translate-x-full animate-shimmer"></span>
        </span>
      )}
    </button>
  );
};

// Chatbot component
const Chatbot = ({ isOpen, onClose }) => {
  const [messages, setMessages] = useState([
    { id: 1, text: "Hello! How can I help you today?", sender: "bot" }
  ]);
  const [input, setInput] = useState("");
  const messagesEndRef = useRef(null);
  
  const scrollToBottom = () => {
    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
  };
  
  useEffect(() => {
    scrollToBottom();
  }, [messages]);
  
  const handleSend = () => {
    if (!input.trim()) return;
    
    // Add user message
    setMessages(prev => [...prev, { id: Date.now(), text: input, sender: "user" }]);
    setInput("");
    
    // Simulate bot response
    setTimeout(() => {
      let response;
      const lowercaseInput = input.toLowerCase();
      
      if (lowercaseInput.includes("appointment") || lowercaseInput.includes("book")) {
        response = "I'd be happy to help you book an appointment. Please click the 'Book Appointment' button at the top of the page, or I can help guide you through the process.";
      } else if (lowercaseInput.includes("service") || lowercaseInput.includes("treatment")) {
        response = "We offer a variety of services including preventive care, specialized treatments, wellness programs, and telemedicine. You can find more details in our Services section.";
      } else if (lowercaseInput.includes("location") || lowercaseInput.includes("address")) {
        response = "Our main clinic is located at 123 Healing Way, New York, NY 10001. We also have a Wellness Center at 456 Vitality Blvd, New York, NY 10002.";
      } else if (lowercaseInput.includes("hour") || lowercaseInput.includes("open")) {
        response = "Our main clinic is open Monday-Friday from 8am-7pm and Saturday from 9am-5pm. The Wellness Center is open Monday-Friday from 7am-8pm and weekends from 8am-4pm.";
      } else {
        response = "Thank you for your message. One of our healthcare professionals will get back to you shortly. Is there anything specific you'd like to know about our services?";
      }
      
      setMessages(prev => [...prev, { id: Date.now(), text: response, sender: "bot" }]);
    }, 1000);
  };
  
  const handleKeyPress = (e) => {
    if (e.key === 'Enter') {
      handleSend();
    }
  };
  
  if (!isOpen) return null;
  
  return (
    <div className="fixed bottom-24 right-6 w-80 md:w-96 bg-white rounded-2xl shadow-2xl z-50 overflow-hidden flex flex-col max-h-[70vh] animate-slideUp">
      <div className="bg-gradient-to-r from-teal-500 to-blue-600 p-4 flex justify-between items-center">
        <div className="flex items-center">
          <div className="w-10 h-10 bg-white rounded-full flex items-center justify-center mr-3">
            <MessageSquare size={20} className="text-teal-500" />
          </div>
          <div>
            <h3 className="font-bold text-white">AWH Assistant</h3>
            <p className="text-xs text-teal-100">Online | Typically replies instantly</p>
          </div>
        </div>
        <button onClick={onClose} className="text-white hover:text-teal-100">
          <X size={20} />
        </button>
      </div>
      
      <div className="flex-1 p-4 overflow-y-auto bg-gray-50">
        {messages.map(message => (
          <div 
            key={message.id} 
            className={`mb-4 flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`}
          >
            <div 
              className={`max-w-[80%] p-3 rounded-2xl ${
                message.sender === 'user' 
                  ? 'bg-teal-500 text-white rounded-tr-none' 
                  : 'bg-white text-gray-800 shadow-md rounded-tl-none'
              } animate-fadeIn`}
            >
              {message.text}
            </div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>
      
      <div className="p-4 border-t border-gray-200 flex">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyPress={handleKeyPress}
          placeholder="Type your message..."
          className="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 outline-none"
        />
        <button 
          onClick={handleSend}
          className="px-4 py-2 bg-teal-500 text-white rounded-r-lg hover:bg-teal-600 transition duration-300"
        >
          <ArrowRight size={20} />
        </button>
      </div>
    </div>
  );
};

// Virtual tour modal component
const VirtualTourModal = ({ isOpen, onClose }) => {
  if (!isOpen) return null;
  
  return (
    <div className="fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4 animate-fadeIn">
      <div className="bg-white rounded-xl shadow-2xl max-w-5xl w-full max-h-[90vh] overflow-hidden" onClick={e => e.stopPropagation()}>
        <div className="relative">
          <div className="aspect-w-16 aspect-h-9 bg-gray-900">
            {/* In a real implementation, this would be a 360° tour or video */}
            <img 
              src="https://images.unsplash.com/photo-1586773860418-d37222d8fce3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" 
              alt="Virtual tour of AWH Clinics" 
              className="w-full h-full object-cover opacity-80"
            />
            <div className="absolute inset-0 flex items-center justify-center">
              <div className="w-20 h-20 rounded-full bg-white/20 backdrop-blur-md flex items-center justify-center">
                <Play size={36} className="text-white ml-1" />
              </div>
            </div>
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/80 to-transparent p-6">
              <h3 className="text-2xl font-bold text-white">Virtual Tour: AWH Main Clinic</h3>
              <p className="text-white/80">Experience our state-of-the-art facilities from anywhere</p>
            </div>
          </div>
          <button 
            onClick={onClose} 
            className="absolute top-4 right-4 w-10 h-10 rounded-full bg-black/50 flex items-center justify-center text-white hover:bg-black/70 transition duration-300"
          >
            <X size={20} />
          </button>
        </div>
        
        <div className="p-6">
          <div className="grid grid-cols-4 gap-4 mb-6">
            <button className="p-2 bg-teal-500 text-white rounded-lg text-sm font-medium">Main Lobby</button>
            <button className="p-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition duration-300">Consultation Rooms</button>
            <button className="p-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition duration-300">Treatment Areas</button>
            <button className="p-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition duration-300">Wellness Center</button>
          </div>
          
          <p className="text-gray-700 mb-6">
            Our main lobby is designed to provide a calming and welcoming environment from the moment you enter. The space features natural materials, comfortable seating, and a modern aesthetic that reflects our commitment to combining cutting-edge healthcare with patient comfort.
          </p>
          
          <div className="flex justify-between">
            <button className="text-teal-500 font-medium flex items-center hover:text-teal-600 transition duration-300">
              <ArrowRight size={18} className="mr-1 transform rotate-180" /> Previous Area
            </button>
            <button 
              onClick={() => setIsAppointmentModalOpen(true)}
              className="py-2 px-6 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 flex items-center"
            >
              Book an Appointment <Calendar size={18} className="ml-2" />
            </button>
            <button className="text-teal-500 font-medium flex items-center hover:text-teal-600 transition duration-300">
              Next Area <ArrowRight size={18} className="ml-1" />
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// Main component
export default function AWHClinicsWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  const [isScrolled, setIsScrolled] = useState(false);
  const [selectedService, setSelectedService] = useState(null);
  const [isAppointmentModalOpen, setIsAppointmentModalOpen] = useState(false);
  const [isChatbotOpen, setIsChatbotOpen] = useState(false);
  const [isVirtualTourOpen, setIsVirtualTourOpen] = useState(false);
  const [scrollProgress, setScrollProgress] = useState(0);
  const [activeTestimonial, setActiveTestimonial] = useState(0);
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
  const heroRef = useRef(null);
  
  // Enhanced color palette from the brief
  const colors = {
    primary: "#0A2342", // Deep Navy
    secondary: "#4ECDC4", // Teal
    accent: "#FFD166", // Gold
    highlight: "#FF6B6B", // Coral
    success: "#2EC4B6", // Mint
    warning: "#FF9F1C", // Amber
    info: "#2196F3", // Blue
    light: "#F8F9FA", // Light Gray
    dark: "#212529", // Dark Gray
  };

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
      
      // Calculate scroll progress
      const totalHeight = document.body.scrollHeight - window.innerHeight;
      const progress = (window.scrollY / totalHeight) * 100;
      setScrollProgress(progress);
      
      // Update active section based on scroll position
      const sections = ['home', 'about', 'services', 'team', 'testimonials', 'contact'];
      for (const section of sections.reverse()) {
        const element = document.getElementById(section);
        if (element && window.scrollY >= element.offsetTop - 100) {
          setActiveSection(section);
          break;
        }
      }
    };
    
    const handleMouseMove = (e) => {
      setMousePosition({ x: e.clientX, y: e.clientY });
      
      // Parallax effect for hero section
      if (heroRef.current) {
        const hero = heroRef.current;
        const rect = hero.getBoundingClientRect();
        if (e.clientY < rect.bottom) {
          const x = (e.clientX / window.innerWidth - 0.5) * 20;
          const y = (e.clientY / rect.height - 0.5) * 20;
          
          hero.style.setProperty('--mouse-x', `${x}px`);
          hero.style.setProperty('--mouse-y', `${y}px`);
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    window.addEventListener('mousemove', handleMouseMove);
    
    // Auto-rotate testimonials
    const testimonialInterval = setInterval(() => {
      setActiveTestimonial(prev => (prev + 1) % testimonials.length);
    }, 5000);
    
    return () => {
      window.removeEventListener('scroll', handleScroll);
      window.removeEventListener('mousemove', handleMouseMove);
      clearInterval(testimonialInterval);
    };
  }, []);

  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      window.scrollTo({
        top: element.offsetTop - 80,
        behavior: 'smooth'
      });
      setActiveSection(sectionId);
      setIsMenuOpen(false);
    }
  };

  const services = [
    {
      id: 1,
      title: "Preventive Care",
      description: "Comprehensive health assessments and screenings to detect potential health issues before they become serious.",
      icon: <Shield className="text-teal-500" size={24} />,
      color: colors.secondary,
      features: [
        "Annual physical examinations",
        "Preventive screenings",
        "Immunizations",
        "Health risk assessments",
        "Personalized prevention plans"
      ]
    },
    {
      id: 2,
      title: "Specialized Treatments",
      description: "Advanced medical treatments tailored to your specific health conditions and needs.",
      icon: <Activity className="text-blue-500" size={24} />,
      color: colors.info,
      features: [
        "Chronic disease management",
        "Specialized therapy programs",
        "Advanced diagnostic services",
        "Minimally invasive procedures",
        "Rehabilitation services"
      ]
    },
    {
      id: 3,
      title: "Wellness Programs",
      description: "Holistic wellness programs designed to improve your overall health and quality of life.",
      icon: <Heart className="text-red-500" size={24} />,
      color: colors.highlight,
      features: [
        "Nutrition counseling",
        "Fitness programs",
        "Stress management",
        "Sleep improvement",
        "Mental health support"
      ]
    },
    {
      id: 4,
      title: "Telemedicine",
      description: "Convenient virtual consultations with our healthcare professionals from the comfort of your home.",
      icon: <Zap className="text-amber-500" size={24} />,
      color: colors.warning,
      features: [
        "Video consultations",
        "Remote monitoring",
        "Digital prescriptions",
        "Follow-up care",
        "24/7 medical advice"
      ]
    }
  ];

  const team = [
    {
      id: 1,
      name: "Dr. Sarah Johnson",
      role: "Chief Medical Officer",
      image: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "Dr. Johnson brings over 20 years of experience in internal medicine and healthcare leadership. She is dedicated to establishing new standards of care excellence.",
      specialties: ["Internal Medicine", "Healthcare Administration", "Patient Care Excellence"],
      education: "MD, Harvard Medical School",
      awards: ["Healthcare Leader of the Year 2022", "Excellence in Patient Care 2020"]
    },
    {
      id: 2,
      name: "Dr. Michael Chen",
      role: "Head of Specialized Care",
      image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "With expertise in advanced treatments and research, Dr. Chen leads our specialized care programs with innovation and compassion.",
      specialties: ["Advanced Treatments", "Medical Research", "Chronic Disease Management"],
      education: "MD, Johns Hopkins University",
      awards: ["Medical Innovation Award 2021", "Research Excellence Award 2019"]
    },
    {
      id: 3,
      name: "Dr. Amara Patel",
      role: "Wellness Director",
      image: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "Dr. Patel combines traditional medical knowledge with holistic approaches to create comprehensive wellness programs for our patients.",
      specialties: ["Holistic Medicine", "Preventive Care", "Nutrition Science"],
      education: "MD, Stanford University, PhD in Nutritional Science",
      awards: ["Holistic Healthcare Provider of the Year 2022", "Wellness Innovation Award 2020"]
    },
    {
      id: 4,
      name: "Dr. James Wilson",
      role: "Telemedicine Specialist",
      image: "https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "Pioneering our digital health initiatives, Dr. Wilson ensures that quality care is accessible to all patients regardless of location.",
      specialties: ["Digital Health", "Remote Patient Monitoring", "Healthcare Technology"],
      education: "MD, Yale University, MS in Health Informatics",
      awards: ["Digital Health Innovator 2021", "Telemedicine Excellence Award 2020"]
    }
  ];

  const testimonials = [
    {
      id: 1,
      name: "Rebecca M.",
      quote: "The care I received at AWH Clinics transformed my life. Their preventive approach identified issues I wasn't aware of, and their treatment plan was perfectly tailored to my needs.",
      rating: 5,
      image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      treatment: "Preventive Care Program",
      date: "March 2023"
    },
    {
      id: 2,
      name: "Thomas L.",
      quote: "After struggling with chronic pain for years, the specialized treatment program at AWH Clinics finally gave me relief. The team's expertise and compassion are unmatched.",
      rating: 5,
      image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      treatment: "Chronic Pain Management",
      date: "January 2023"
    },
    {
      id: 3,
      name: "Sophia K.",
      quote: "The wellness program completely changed my approach to health. I've never felt better, and the ongoing support from the AWH team keeps me motivated and on track.",
      rating: 5,
      image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      treatment: "Holistic Wellness Program",
      date: "April 2023"
    }
  ];

  const locations = [
    {
      id: 1,
      name: "AWH Main Clinic",
      address: "123 Healing Way, New York, NY 10001",
      phone: "(212) 555-1234",
      hours: "Mon-Fri: 8am-7pm, Sat: 9am-5pm",
      image: "https://images.unsplash.com/photo-1629131726692-1accd0c53ce0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
    },
    {
      id: 2,
      name: "AWH Wellness Center",
      address: "456 Vitality Blvd, New York, NY 10002",
      phone: "(212) 555-5678",
      hours: "Mon-Fri: 7am-8pm, Sat-Sun: 8am-4pm",
      image: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
    }
  ];

  const statistics = [
    { id: 1, value: 10000, label: "Patients Served", icon: <Users size={24} className="text-teal-500" /> },
    { id: 2, value: 98, label: "Patient Satisfaction", suffix: "%", icon: <Smile size={24} className="text-teal-500" /> },
    { id: 3, value: 25, label: "Years of Excellence", icon: <Award size={24} className="text-teal-500" /> },
    { id: 4, value: 50, label: "Expert Specialists", icon: <Award size={24} className="text-teal-500" /> }
  ];

  const ServiceModal = ({ service, onClose }) => {
    if (!service) return null;
    
    return (
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
        onClick={onClose}
      >
        <div 
          className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-modalEnter" 
          onClick={e => e.stopPropagation()}
        >
          <div className="relative">
            <div className="p-6 md:p-8">
              <div className="flex justify-between items-center mb-6">
                <div className="flex items-center">
                  <div 
                    className="w-12 h-12 rounded-full flex items-center justify-center mr-4"
                    style={{ backgroundColor: `${service.color}20` }}
                  >
                    {service.icon}
                  </div>
                  <h3 className="text-2xl font-bold text-gray-900 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
                    {service.title}
                  </h3>
                </div>
                <button 
                  onClick={onClose} 
                  className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200 transition duration-300"
                >
                  <X size={18} />
                </button>
              </div>
              
              <p className="text-gray-700 mb-6">{service.description}</p>
              
              <div className="mb-8">
                <h4 className="text-lg font-semibold mb-4 text-gray-900">What We Offer</h4>
                <ul className="space-y-3">
                  {service.features.map((feature, index) => (
                    <li key={index} className="flex items-start animate-fadeInUp" style={{ animationDelay: `${index * 100}ms` }}>
                      <div className="p-1 rounded-full bg-teal-100 mr-3 mt-0.5">
                        <Check size={16} className="text-teal-500" />
                      </div>
                      <span className="text-gray-700">{feature}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <div className="bg-gradient-to-r from-gray-50 to-blue-50 p-4 rounded-lg mb-8">
                <h4 className="text-lg font-semibold mb-2 text-gray-900">Why Choose AWH Clinics</h4>
                <p className="text-gray-700 mb-4">
                  Our approach combines cutting-edge medical expertise with personalized care to ensure the best possible outcomes for our patients.
                </p>
                <div className="flex items-center">
                  <div className="w-12 h-12 rounded-full overflow-hidden mr-4">
                    <img 
                      src={team[0].image} 
                      alt={team[0].name} 
                      className="w-full h-full object-cover"
                    />
                  </div>
                  <div>
                    <p className="text-sm text-gray-900 font-medium">"Our goal is to provide care that not only treats conditions but improves overall quality of life."</p>
                    <p className="text-xs text-gray-600">{team[0].name}, {team[0].role}</p>
                  </div>
                </div>
              </div>
              
              <AnimatedButton 
                onClick={() => {
                  onClose();
                  setIsAppointmentModalOpen(true);
                }}
                className="w-full py-3 px-6"
              >
                Book an Appointment <ArrowRight size={18} className="ml-2" />
              </AnimatedButton>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const AppointmentModal = ({ onClose }) => {
    const [formData, setFormData] = useState({
      name: '',
      email: '',
      phone: '',
      service: '',
      date: '',
      time: '',
      message: ''
    });
    const [step, setStep] = useState(1);
    const [isSubmitting, setIsSubmitting] = useState(false);
    const [isSubmitted, setIsSubmitted] = useState(false);

    const handleChange = (e) => {
      const { name, value } = e.target;
      setFormData(prev => ({ ...prev, [name]: value }));
    };

    const nextStep = () => {
      setStep(prev => prev + 1);
    };

    const prevStep = () => {
      setStep(prev => prev - 1);
    };

    const handleSubmit = (e) => {
      e.preventDefault();
      setIsSubmitting(true);
      
      // Simulate API call
      setTimeout(() => {
        setIsSubmitting(false);
        setIsSubmitted(true);
      }, 1500);
    };

    return (
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
        onClick={onClose}
      >
        <div 
          className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto animate-modalEnter" 
          onClick={e => e.stopPropagation()}
        >
          <div className="relative">
            <div className="p-6 md:p-8">
              <div className="flex justify-between items-center mb-6">
                <h3 className="text-2xl font-bold text-gray-900 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
                  {isSubmitted ? "Appointment Confirmed" : "Book Your Appointment"}
                </h3>
                <button 
                  onClick={onClose} 
                  className="w-8 h-8 flex items-center justify-center rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200 transition duration-300"
                >
                  <X size={18} />
                </button>
              </div>
              
              {!isSubmitted ? (
                <>
                  <div className="mb-8">
                    <div className="flex items-center justify-between mb-4">
                      {[1, 2, 3].map(i => (
                        <div 
                          key={i}
                          className={`flex items-center ${i < 3 ? 'flex-1' : ''}`}
                        >
                          <div 
                            className={`w-8 h-8 rounded-full flex items-center justify-center font-medium ${
                              step > i 
                                ? 'bg-teal-500 text-white' 
                                : step === i 
                                ? 'bg-teal-100 text-teal-800 ring-2 ring-teal-500 ring-offset-2' 
                                : 'bg-gray-100 text-gray-500'
                            } transition-all duration-300`}
                          >
                            {step > i ? <Check size={16} /> : i}
                          </div>
                          {i < 3 && (
                            <div 
                              className={`h-1 flex-1 mx-2 ${
                                step > i ? 'bg-teal-500' : 'bg-gray-200'
                              } transition-all duration-300`}
                            ></div>
                          )}
                        </div>
                      ))}
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className={step >= 1 ? 'text-teal-600 font-medium' : 'text-gray-500'}>Personal Info</span>
                      <span className={step >= 2 ? 'text-teal-600 font-medium' : 'text-gray-500'}>Appointment Details</span>
                      <span className={step >= 3 ? 'text-teal-600 font-medium' : 'text-gray-500'}>Confirmation</span>
                    </div>
                  </div>
                  
                  <form onSubmit={handleSubmit}>
                    {step === 1 && (
                      <div className="space-y-6 animate-fadeIn">
                        <div>
                          <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                          <input
                            type="text"
                            id="name"
                            name="name"
                            value={formData.name}
                            onChange={handleChange}
                            required
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                            placeholder="Enter your full name"
                          />
                        </div>
                        <div>
                          <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                          <input
                            type="email"
                            id="email"
                            name="email"
                            value={formData.email}
                            onChange={handleChange}
                            required
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                            placeholder="Enter your email address"
                          />
                        </div>
                        <div>
                          <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                          <input
                            type="tel"
                            id="phone"
                            name="phone"
                            value={formData.phone}
                            onChange={handleChange}
                            required
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                            placeholder="Enter your phone number"
                          />
                        </div>
                      </div>
                    )}
                    
                    {step === 2 && (
                      <div className="space-y-6 animate-fadeIn">
                        <div>
                          <label htmlFor="service" className="block text-sm font-medium text-gray-700 mb-1">Service</label>
                          <select
                            id="service"
                            name="service"
                            value={formData.service}
                            onChange={handleChange}
                            required
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                          >
                            <option value="">Select a service</option>
                            {services.map(service => (
                              <option key={service.id} value={service.title}>{service.title}</option>
                            ))}
                          </select>
                        </div>
                        <div className="grid grid-cols-2 gap-4">
                          <div>
                            <label htmlFor="date" className="block text-sm font-medium text-gray-700 mb-1">Preferred Date</label>
                            <input
                              type="date"
                              id="date"
                              name="date"
                              value={formData.date}
                              onChange={handleChange}
                              required
                              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                            />
                          </div>
                          <div>
                            <label htmlFor="time" className="block text-sm font-medium text-gray-700 mb-1">Preferred Time</label>
                            <select
                              id="time"
                              name="time"
                              value={formData.time}
                              onChange={handleChange}
                              required
                              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                            >
                              <option value="">Select a time</option>
                              <option value="Morning">Morning (8AM - 12PM)</option>
                              <option value="Afternoon">Afternoon (12PM - 4PM)</option>
                              <option value="Evening">Evening (4PM - 7PM)</option>
                            </select>
                          </div>
                        </div>
                        <div>
                          <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>
                          <textarea
                            id="message"
                            name="message"
                            value={formData.message}
                            onChange={handleChange}
                            rows="4"
                            className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                            placeholder="Please share any specific concerns or questions"
                          ></textarea>
                        </div>
                      </div>
                    )}
                    
                    {step === 3 && (
                      <div className="space-y-6 animate-fadeIn">
                        <div className="bg-gray-50 p-4 rounded-lg">
                          <h4 className="font-medium text-gray-900 mb-4">Appointment Summary</h4>
                          <div className="grid grid-cols-2 gap-4 text-sm">
                            <div>
                              <p className="text-gray-500 mb-1">Name</p>
                              <p className="text-gray-900 font-medium">{formData.name}</p>
                            </div>
                            <div>
                              <p className="text-gray-500 mb-1">Email</p>
                              <p className="text-gray-900 font-medium">{formData.email}</p>
                            </div>
                            <div>
                              <p className="text-gray-500 mb-1">Phone</p>
                              <p className="text-gray-900 font-medium">{formData.phone}</p>
                            </div>
                            <div>
                              <p className="text-gray-500 mb-1">Service</p>
                              <p className="text-gray-900 font-medium">{formData.service}</p>
                            </div>
                            <div>
                              <p className="text-gray-500 mb-1">Date</p>
                              <p className="text-gray-900 font-medium">{formData.date}</p>
                            </div>
                            <div>
                              <p className="text-gray-500 mb-1">Time</p>
                              <p className="text-gray-900 font-medium">{formData.time}</p>
                            </div>
                          </div>
                          {formData.message && (
                            <div className="mt-4">
                              <p className="text-gray-500 mb-1">Additional Information</p>
                              <p className="text-gray-900">{formData.message}</p>
                            </div>
                          )}
                        </div>
                        <div className="bg-blue-50 p-4 rounded-lg border-l-4 border-blue-500">
                          <div className="flex">
                            <div className="flex-shrink-0">
                              <svg className="h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
                              </svg>
                            </div>
                            <div className="ml-3">
                              <p className="text-sm text-blue-800">
                                By confirming this appointment, you agree to our cancellation policy. You can reschedule or cancel up to 24 hours before your appointment without any charges.
                              </p>
                            </div>
                          </div>
                        </div>
                      </div>
                    )}
                    
                    <div className="flex justify-between mt-8">
                      {step > 1 ? (
                        <button
                          type="button"
                          onClick={prevStep}
                          className="py-2 px-6 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition duration-300 flex items-center"
                        >
                          <ArrowRight size={18} className="mr-2 transform rotate-180" /> Back
                        </button>
                      ) : (
                        <button
                          type="button"
                          onClick={onClose}
                          className="py-2 px-6 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition duration-300"
                        >
                          Cancel
                        </button>
                      )}
                      
                      {step < 3 ? (
                        <AnimatedButton
                          type="button"
                          onClick={nextStep}
                          className="py-2 px-6"
                        >
                          Next Step <ArrowRight size={18} className="ml-2" />
                        </AnimatedButton>
                      ) : (
                        <AnimatedButton
                          type="submit"
                          className={`py-2 px-6 ${isSubmitting ? 'opacity-70 cursor-not-allowed' : ''}`}
                          disabled={isSubmitting}
                        >
                          {isSubmitting ? (
                            <>
                              <svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                              </svg>
                              Processing...
                            </>
                          ) : (
                            <>Confirm Appointment <Check size={18} className="ml-2" /></>
                          )}
                        </AnimatedButton>
                      )}
                    </div>
                  </form>
                </>
              ) : (
                <div className="text-center py-8 animate-fadeIn">
                  <div className="w-20 h-20 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-6">
                    <Check size={36} className="text-teal-600" />
                  </div>
                  <h4 className="text-2xl font-bold text-gray-900 mb-4">Appointment Scheduled!</h4>
                  <p className="text-gray-700 mb-8">
                    Thank you for scheduling an appointment with AWH Clinics. We've sent a confirmation to your email at {formData.email}. Our team will contact you shortly to confirm your appointment.
                  </p>
                  <div className="bg-gray-50 p-4 rounded-lg text-left mb-8">
                    <h5 className="font-medium text-gray-900 mb-2">Appointment Details</h5>
                    <p className="text-gray-700"><span className="font-medium">Service:</span> {formData.service}</p>
                    <p className="text-gray-700"><span className="font-medium">Date:</span> {formData.date}</p>
                    <p className="text-gray-700"><span className="font-medium">Time:</span> {formData.time}</p>
                  </div>
                  <AnimatedButton
                    onClick={onClose}
                    className="py-2 px-6 mx-auto"
                  >
                    Close
                  </AnimatedButton>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    );
  };

  // Team member detail modal
  const TeamMemberModal = ({ member, onClose }) => {
    if (!member) return null;
    
    return (
      <div 
        className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
        onClick={onClose}
      >
        <div 
          className="bg-white rounded-xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto animate-modalEnter" 
          onClick={e => e.stopPropagation()}
        >
          <div className="grid grid-cols-1 md:grid-cols-2">
            <div className="relative h-full">
              <img 
                src={member.image} 
                alt={member.name} 
                className="w-full h-full object-cover"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent flex flex-col justify-end p-6">
                <h3 className="text-2xl font-bold text-white mb-1">{member.name}</h3>
                <p className="text-teal-300 font-medium">{member.role}</p>
              </div>
              <button 
                onClick={onClose} 
                className="absolute top-4 right-4 w-8 h-8 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition duration-300"
              >
                <X size={18} />
              </button>
            </div>
            <div className="p-6">
              <div className="mb-6">
                <h4 className="text-lg font-semibold mb-2 text-gray-900">About</h4>
                <p className="text-gray-700">{member.bio}</p>
              </div>
              
              <div className="mb-6">
                <h4 className="text-lg font-semibold mb-2 text-gray-900">Specialties</h4>
                <div className="flex flex-wrap gap-2">
                  {member.specialties.map((specialty, index) => (
                    <span 
                      key={index} 
                      className="px-3 py-1 bg-teal-100 text-teal-800 rounded-full text-sm"
                    >
                      {specialty}
                    </span>
                  ))}
                </div>
              </div>
              
              <div className="mb-6">
                <h4 className="text-lg font-semibold mb-2 text-gray-900">Education</h4>
                <p className="text-gray-700">{member.education}</p>
              </div>
              
              <div className="mb-8">
                <h4 className="text-lg font-semibold mb-2 text-gray-900">Awards & Recognition</h4>
                <ul className="space-y-2">
                  {member.awards.map((award, index) => (
                    <li key={index} className="flex items-start">
                      <Award size={16} className="text-amber-500 mr-2 mt-1 flex-shrink-0" />
                      <span className="text-gray-700">{award}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <AnimatedButton 
                onClick={() => {
                  onClose();
                  setIsAppointmentModalOpen(true);
                }}
                className="w-full py-2 px-6"
              >
                Book an Appointment with Dr. {member.name.split(' ')[1]}
              </AnimatedButton>
            </div>
          </div>
        </div>
      </div>
    );
  };

  const [selectedTeamMember, setSelectedTeamMember] = useState(null);

  return (
    <div className="font-sans text-gray-800 min-h-screen overflow-x-hidden">
      {/* Custom cursor */}
      <CustomCursor />
      
      {/* Progress bar */}
      <div 
        className="fixed top-0 left-0 h-1 bg-gradient-to-r from-teal-500 via-blue-500 to-purple-500 z-50 transition-all duration-300"
        style={{ width: `${scrollProgress}%` }}
      ></div>
      
      {/* Navigation */}
      <header 
        className={`fixed top-0 left-0 right-0 z-40 transition-all duration-500 ${
          isScrolled ? 'bg-white/90 backdrop-blur-md shadow-lg py-3' : 'bg-transparent py-5'
        }`}
      >
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex justify-between items-center">
            <a href="#" className="flex items-center group" onClick={() => scrollToSection('home')}>
              <div className="relative">
                <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600 transition-all duration-300 group-hover:opacity-0">AWH Clinics</span>
                <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 absolute inset-0 opacity-0 transition-all duration-300 group-hover:opacity-100">AWH Clinics</span>
              </div>
            </a>
            
            {/* Desktop Navigation */}
            <nav className="hidden md:flex items-center space-x-8">
              {['home', 'about', 'services', 'team', 'testimonials', 'contact'].map((item) => (
                <a
                  key={item}
                  href={`#${item}`}
                  onClick={(e) => {
                    e.preventDefault();
                    scrollToSection(item);
                  }}
                  className={`text-sm font-medium transition-all duration-300 relative ${
                    activeSection === item
                      ? 'text-teal-500'
                      : isScrolled
                      ? 'text-gray-800 hover:text-teal-500'
                      : 'text-gray-800 hover:text-teal-500'
                  }`}
                >
                  {item.charAt(0).toUpperCase() + item.slice(1)}
                  <span 
                    className={`absolute -bottom-1 left-0 w-full h-0.5 bg-teal-500 transform origin-left transition-transform duration-300 ${
                      activeSection === item ? 'scale-x-100' : 'scale-x-0'
                    }`}
                  ></span>
                </a>
              ))}
            </nav>
            
            <div className="hidden md:flex items-center space-x-4">
              <button 
                onClick={() => setIsVirtualTourOpen(true)}
                className="py-2 px-4 text-teal-600 font-medium rounded-lg transition duration-300 flex items-center hover:bg-teal-50 border border-transparent hover:border-teal-200"
              >
                <Play size={18} className="mr-2" />
                Virtual Tour
              </button>
              <button 
                onClick={() => setIsAppointmentModalOpen(true)}
                className="relative py-2 px-5 bg-gradient-to-r from-teal-500 to-blue-600 text-white font-medium rounded-lg transition-all duration-300 flex items-center overflow-hidden group hover:shadow-lg hover:shadow-teal-500/30"
              >
                <span className="relative z-10 flex items-center transition-transform duration-300 group-hover:translate-x-1">
                  <Calendar size={18} className="mr-2" />
                  Book Appointment
                </span>
                <span className="absolute inset-0 bg-gradient-to-r from-blue-600 to-teal-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></span>
              </button>
            </div>
            
            {/* Mobile Menu Button */}
            <button
              className="md:hidden text-gray-800 z-50"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              <div className="w-8 h-8 flex flex-col justify-center items-center">
                <span 
                  className={`block w-6 h-0.5 bg-current transform transition-all duration-300 ${
                    isMenuOpen ? 'rotate-45 translate-y-1' : ''
                  }`}
                ></span>
                <span 
                  className={`block w-6 h-0.5 bg-current my-1 transition-all duration-300 ${
                    isMenuOpen ? 'opacity-0' : ''
                  }`}
                ></span>
                <span 
                  className={`block w-6 h-0.5 bg-current transform transition-all duration-300 ${
                    isMenuOpen ? '-rotate-45 -translate-y-1' : ''
                  }`}
                ></span>
              </div>
            </button>
          </div>
        </div>
      </header>
      
      {/* Mobile Menu */}
      <div 
        className={`fixed inset-0 z-30 bg-white transform transition-transform duration-500 ease-in-out ${
          isMenuOpen ? 'translate-x-0' : 'translate-x-full'
        }`}
      >
        <div className="container mx-auto px-4 py-20">
          <nav className="flex flex-col space-y-8">
            {['home', 'about', 'services', 'team', 'testimonials', 'contact'].map((item) => (
              <a
                key={item}
                href={`#${item}`}
                onClick={(e) => {
                  e.preventDefault();
                  scrollToSection(item);
                }}
                className={`text-2xl font-medium transition-all duration-300 ${
                  activeSection === item ? 'text-teal-500' : 'text-gray-800'
                }`}
              >
                {item.charAt(0).toUpperCase() + item.slice(1)}
              </a>
            ))}
            <div className="pt-4 space-y-4">
              <button 
                onClick={() => {
                  setIsMenuOpen(false);
                  setIsVirtualTourOpen(true);
                }}
                className="w-full py-3 px-6 text-teal-600 font-medium rounded-lg transition duration-300 flex items-center justify-center border border-teal-200 bg-teal-50"
              >
                <Play size={18} className="mr-2" />
                Virtual Tour
              </button>
              <button 
                onClick={() => {
                  setIsMenuOpen(false);
                  setIsAppointmentModalOpen(true);
                }}
                className="w-full py-3 px-6 bg-gradient-to-r from-teal-500 to-blue-600 text-white font-medium rounded-lg transition duration-300 flex items-center justify-center"
              >
                <Calendar size={18} className="mr-2" />
                Book Appointment
              </button>
            </div>
          </nav>
        </div>
      </div>
      
      {/* Hero Section */}
      <section 
        id="home" 
        ref={heroRef}
        className="relative pt-32 pb-20 md:pt-40 md:pb-28 overflow-hidden"
        style={{
          background: `radial-gradient(circle at 30% 50%, ${colors.light}, ${colors.secondary}10)`,
        }}
      >
        <ParticleBackground color={colors.secondary} count={30} />
        
        <div 
          className="absolute inset-0 opacity-30 pointer-events-none"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234ecdc4' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        ></div>
        
        <div className="container mx-auto px-4 md:px-6 relative">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-10 md:mb-0 md:pr-10 relative z-10">
              <div className="relative">
                <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6 animate-fadeInUp">
                  <span className="block relative overflow-hidden">
                    <span className="block transform transition-transform duration-1000 translate-y-0">Advanced Healthcare</span>
                  </span>
                  <span className="block text-transparent bg-clip-text bg-gradient-to-r from-teal-500 to-blue-600 relative overflow-hidden mt-2">
                    <span className="block transform transition-transform duration-1000 delay-300 translate-y-0">Personalized For You</span>
                  </span>
                </h1>
                <div 
                  className="absolute -top-10 -left-10 w-20 h-20 rounded-full bg-gradient-to-br from-teal-300 to-blue-300 opacity-20 blur-xl animate-pulse"
                  style={{
                    animationDuration: '8s',
                  }}
                ></div>
              </div>
              <p className="text-lg text-gray-700 mb-8 leading-relaxed max-w-lg animate-fadeInUp" style={{ animationDelay: '0.4s' }}>
                Experience exceptional care that combines cutting-edge medical expertise with a compassionate approach. At AWH Clinics, your health is our priority.
              </p>
              <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 animate-fadeInUp" style={{ animationDelay: '0.6s' }}>
                <AnimatedButton 
                  onClick={() => scrollToSection('services')}
                  className="py-3 px-8"
                >
                  Our Services <ChevronRight size={18} className="ml-1" />
                </AnimatedButton>
                <AnimatedButton 
                  onClick={() => setIsAppointmentModalOpen(true)}
                  className="py-3 px-8"
                  primary={false}
                >
                  Book Appointment <Calendar size={18} className="ml-2" />
                </AnimatedButton>
              </div>
            </div>
            <div className="md:w-1/2 relative">
              <div 
                className="relative rounded-2xl overflow-hidden shadow-2xl transform transition-all duration-700 hover:scale-105 animate-fadeIn"
                style={{ animationDelay: '0.8s' }}
              >
                <div className="absolute inset-0 bg-gradient-to-r from-teal-500/20 to-blue-500/20 mix-blend-overlay"></div>
                <img 
                  src="https://images.unsplash.com/photo-1631815588090-d4bfec5b1ccb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" 
                  alt="Healthcare professionals at AWH Clinics" 
                  className="w-full h-auto object-cover transform transition-transform duration-10000 hover:scale-110"
                  style={{
                    transform: `translate(calc(var(--mouse-x, 0) * -0.02), calc(var(--mouse-y, 0) * -0.02))`,
                  }}
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
              </div>
              <div 
                className="absolute -bottom-6 -right-6 md:-bottom-10 md:-right-10 bg-white rounded-lg shadow-xl p-4 md:p-6 max-w-xs transform transition-all duration-500 hover:scale-105 hover:shadow-2xl animate-fadeIn"
                style={{ animationDelay: '1.2s' }}
              >
                <div className="flex items-start">
                  <div className="bg-gradient-to-r from-teal-500 to-blue-500 rounded-full p-2 mr-4">
                    <Check size={20} className="text-white" />
                  </div>
                  <div>
                    <h3 className="font-bold text-gray-900 mb-1">Trusted by <AnimatedCounter value={10000} suffix="+" /> Patients</h3>
                    <p className="text-sm text-gray-600">Award-winning care with <AnimatedCounter value={98} suffix="%" /> patient satisfaction</p>
                  </div>
                </div>
              </div>
              
              {/* Floating elements */}
              <div 
                className="absolute -top-12 -left-8 w-24 h-24 rounded-full bg-gradient-to-br from-blue-300/30 to-purple-300/30 backdrop-blur-md animate-float"
                style={{ animationDuration: '6s' }}
              ></div>
              <div 
                className="absolute top-1/2 -right-12 w-16 h-16 rounded-full bg-gradient-to-br from-amber-300/30 to-red-300/30 backdrop-blur-md animate-float"
                style={{ animationDuration: '8s', animationDelay: '1s' }}
              ></div>
            </div>
          </div>
          
          {/* Scroll indicator */}
          <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 flex flex-col items-center animate-bounce">
            <span className="text-sm text-gray-500 mb-2">Scroll to explore</span>
            <svg className="w-6 h-6 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
            </svg>
          </div>
        </div>
      </section>
      
      {/* About Section */}
      <section id="about" className="py-20 bg-white relative overflow-hidden">
        <div 
          className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-teal-50 to-transparent opacity-70 pointer-events-none"
        ></div>
        
        <div className="container mx-auto px-4 md:px-6 relative">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
              Redefining Healthcare Excellence
            </h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              At AWH Clinics, we combine advanced medical expertise with compassionate care to provide an unparalleled healthcare experience. Our approach is centered on you—your needs, your goals, and your well-being.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                icon: <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                </svg>,
                title: "Innovative Approach",
                description: "We stay at the forefront of medical advancements, integrating the latest research and technology into our practice to deliver superior care."
              },
              {
                icon: <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>,
                title: "Expert Team",
                description: "Our physicians and healthcare professionals are leaders in their fields, bringing decades of experience and specialized knowledge to your care."
              },
              {
                icon: <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>,
                title: "Personalized Care",
                description: "We believe that effective healthcare must be tailored to the individual. Your treatment plan is designed specifically for your unique needs and goals."
              }
            ].map((item, index) => {
              const [ref, isInView] = useInView({ threshold: 0.3, triggerOnce: true });
              
              return (
                <Card3D 
                  key={index}
                  className={`bg-gray-50 rounded-xl p-8 transition-all duration-500 hover:shadow-xl ${
                    isInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
                  }`}
                  style={{ transitionDelay: `${index * 100}ms` }}
                  ref={ref}
                >
                  <div className="w-14 h-14 bg-teal-100 rounded-full flex items-center justify-center mb-6 transition-transform duration-300 group-hover:scale-110">
                    {item.icon}
                  </div>
                  <h3 className="text-xl font-bold mb-4">{item.title}</h3>
                  <p className="text-gray-700">
                    {item.description}
                  </p>
                </Card3D>
              );
            })}
          </div>
          
          <div className="mt-16 bg-gradient-to-r from-teal-500 to-blue-600 rounded-2xl overflow-hidden shadow-xl transform transition-all duration-500 hover:shadow-2xl hover:scale-[1.02]">
            <div className="grid grid-cols-1 md:grid-cols-2">
              <div className="p-8 md:p-12 flex flex-col justify-center relative z-10">
                <h3 className="text-2xl md:text-3xl font-bold text-white mb-6">Our Commitment to Excellence</h3>
                <p className="text-white/90 mb-8 leading-relaxed">
                  Since our founding, AWH Clinics has been dedicated to providing exceptional healthcare that treats the whole person. Our state-of-the-art facilities and compassionate approach create an environment where healing and wellness flourish.
                </p>
                <AnimatedButton 
                  onClick={() => scrollToSection('team')}
                  className="py-3 px-8 bg-white text-teal-600 self-start hover:bg-gray-100"
                  primary={false}
                >
                  Meet Our Team <ArrowRight size={18} className="ml-2" />
                </AnimatedButton>
                
                {/* Decorative elements */}
                <div className="absolute top-0 right-0 w-32 h-32 rounded-full bg-white/10 -translate-y-1/2 translate-x-1/2"></div>
                <div className="absolute bottom-0 left-0 w-24 h-24 rounded-full bg-white/10 translate-y-1/2 -translate-x-1/2"></div>
              </div>
              <div className="hidden md:block relative overflow-hidden">
                <img 
                  src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                  alt="Modern medical facility" 
                  className="w-full h-full object-cover transition-transform duration-10000 hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-r from-teal-500/40 to-blue-600/40 mix-blend-overlay"></div>
              </div>
            </div>
          </div>
          
          {/* Statistics */}
          <div className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8">
            {statistics.map((stat, index) => {
              const [ref, isInView] = useInView({ threshold: 0.3, triggerOnce: true });
              
              return (
                <div 
                  key={stat.id}
                  ref={ref}
                  className={`bg-white rounded-xl p-6 shadow-lg border border-gray-100 text-center transition-all duration-500 hover:shadow-xl hover:border-teal-200 ${
                    isInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
                  }`}
                  style={{ transitionDelay: `${index * 100}ms` }}
                >
                  <div className="w-12 h-12 bg-teal-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    {stat.icon}
                  </div>
                  <AnimatedCounter 
                    value={stat.value} 
                    prefix={stat.prefix || ''} 
                    suffix={stat.suffix || ''} 
                  />
                  <p className="text-gray-600 mt-2">{stat.label}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>
      
      {/* Services Section */}
      <section id="services" className="py-20 bg-gray-50 relative overflow-hidden">
        <div 
          className="absolute inset-0 opacity-30 pointer-events-none"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234ecdc4' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        ></div>
        
        <div className="container mx-auto px-4 md:px-6 relative">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
              Comprehensive Care Services
            </h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              We offer a wide range of healthcare services designed to address your needs at every stage of life, from preventive care to specialized treatments.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {services.map((service, index) => {
              const [ref, isInView] = useInView({ threshold: 0.1, triggerOnce: true });
              
              return (
                <div 
                  key={service.id}
                  ref={ref}
                  className={`bg-white rounded-xl overflow-hidden shadow-md transition-all duration-500 hover:shadow-xl cursor-pointer transform ${
                    isInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
                  } hover:-translate-y-2`}
                  style={{ transitionDelay: `${index * 150}ms` }}
                  onClick={() => setSelectedService(service)}
                >
                  <div className="p-8 relative overflow-hidden group">
                    <div 
                      className="absolute inset-0 bg-gradient-to-r opacity-0 group-hover:opacity-10 transition-opacity duration-500"
                      style={{ backgroundImage: `linear-gradient(to right, ${service.color}, ${service.color})` }}
                    ></div>
                    <div className="flex items-start relative">
                      <div 
                        className="w-12 h-12 rounded-full flex items-center justify-center mr-4 transition-all duration-300 group-hover:scale-110 group-hover:rotate-3"
                        style={{ backgroundColor: `${service.color}20` }}
                      >
                        {service.icon}
                      </div>
                      <div>
                        <h3 className="text-xl font-bold mb-3 group-hover:text-teal-600 transition-colors duration-300">{service.title}</h3>
                        <p className="text-gray-700 mb-6">{service.description}</p>
                        <button className="text-teal-500 font-medium flex items-center group-hover:text-teal-600 transition duration-300 relative">
                          <span className="relative z-10">Learn More</span>
                          <span className="relative z-10 ml-1 transform transition-transform duration-300 group-hover:translate-x-1">
                            <ChevronRight size={18} />
                          </span>
                          <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-teal-500 transition-all duration-300 group-hover:w-full"></span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          
          <div className="mt-16 text-center">
            <AnimatedButton 
              onClick={() => setIsAppointmentModalOpen(true)}
              className="py-3 px-8 inline-flex"
            >
              Schedule a Consultation <Calendar size={18} className="ml-2" />
            </AnimatedButton>
          </div>
        </div>
      </section>
      
      {/* Team Section */}
      <section id="team" className="py-20 bg-white relative overflow-hidden">
        <div 
          className="absolute top-0 left-0 w-1/3 h-full bg-gradient-to-r from-teal-50 to-transparent opacity-70 pointer-events-none"
        ></div>
        
        <div className="container mx-auto px-4 md:px-6 relative">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
              Our Expert Medical Team
            </h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              Meet the dedicated professionals who make AWH Clinics a center of excellence. Our team combines expertise, compassion, and a commitment to your well-being.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {team.map((member, index) => {
              const [ref, isInView] = useInView({ threshold: 0.1, triggerOnce: true });
              
              return (
                <Card3D 
                  key={member.id}
                  className={`bg-gray-50 rounded-xl overflow-hidden transition-all duration-500 hover:shadow-xl cursor-pointer ${
                    isInView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'
                  }`}
                  style={{ transitionDelay: `${index * 150}ms` }}
                  ref={ref}
                  onClick={() => setSelectedTeamMember(member)}
                >
                  <div className="aspect-w-3 aspect-h-4 relative overflow-hidden group">
                    <img 
                      src={member.image} 
                      alt={member.name} 
                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                    />
                    <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
                      <button className="bg-white/90 backdrop-blur-sm text-teal-600 py-2 rounded-lg font-medium transform translate-y-full opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300">
                        View Profile
                      </button>
                    </div>
                  </div>
                  <div className="p-6">
                    <h3 className="text-xl font-bold mb-1">{member.name}</h3>
                    <p className="text-teal-500 font-medium mb-4">{member.role}</p>
                    <p className="text-gray-700 text-sm line-clamp-3">{member.bio}</p>
                  </div>
                </Card3D>
              );
            })}
          </div>
          
          <div className="mt-16 bg-gray-50 rounded-2xl p-8 md:p-12 relative overflow-hidden">
            <div 
              className="absolute inset-0 opacity-30 pointer-events-none"
              style={{
                backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234ecdc4' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
              }}
            ></div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center relative">
              <div>
                <h3 className="text-2xl md:text-3xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
                  Join Our Team of Excellence
                </h3>
                <p className="text-gray-700 mb-8 leading-relaxed">
                  We're always looking for talented healthcare professionals who share our commitment to exceptional patient care and medical innovation.
                </p>
                <AnimatedButton className="py-3 px-8 flex items-center">
                  View Career Opportunities <ArrowRight size={18} className="ml-2" />
                </AnimatedButton>
              </div>
              <div className="hidden md:block">
                <div className="relative rounded-xl overflow-hidden shadow-lg transform transition-all duration-500 hover:shadow-xl hover:scale-[1.02]">
                  <img 
                    src="https://images.unsplash.com/photo-1551076805-e1869033e561?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                    alt="Medical team collaboration" 
                    className="w-full h-auto"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-teal-500/30 to-transparent mix-blend-overlay"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Testimonials Section */}
      <section id="testimonials" className="py-20 relative overflow-hidden">
        <div 
          className="absolute inset-0 bg-gradient-to-br from-gray-50 to-blue-50"
        ></div>
        
        <div 
          className="absolute inset-0 opacity-30 pointer-events-none"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234ecdc4' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        ></div>
        
        <div className="container mx-auto px-4 md:px-6 relative">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
              Patient Success Stories
            </h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              Hear from our patients about their experiences at AWH Clinics and how our care has made a difference in their lives.
            </p>
          </div>
          
          {/* 3D Testimonial Carousel */}
          <div className="relative h-[500px] mb-16">
            <div className="absolute inset-0 flex items-center justify-center">
              {testimonials.map((testimonial, index) => {
                const isActive = index === activeTestimonial;
                const isPrev = index === (activeTestimonial - 1 + testimonials.length) % testimonials.length;
                const isNext = index === (activeTestimonial + 1) % testimonials.length;
                
                let position = 'opacity-0 scale-90';
                let zIndex = 0;
                let translateX = '0';
                
                if (isActive) {
                  position = 'opacity-100 scale-100';
                  zIndex = 30;
                  translateX = '0';
                } else if (isPrev) {
                  position = 'opacity-70 scale-90';
                  zIndex = 20;
                  translateX = '-70%';
                } else if (isNext) {
                  position = 'opacity-70 scale-90';
                  zIndex = 20;
                  translateX = '70%';
                }
                
                return (
                  <div 
                    key={testimonial.id}
                    className={`absolute top-0 left-0 right-0 mx-auto max-w-2xl transition-all duration-700 ease-out ${position}`}
                    style={{ 
                      transform: `translateX(${translateX}) scale(${isActive ? 1 : 0.9})`,
                      zIndex
                    }}
                  >
                    <div className="bg-white rounded-xl shadow-xl p-8 md:p-10 relative">
                      <div className="absolute top-0 right-0 transform translate-x-1/4 -translate-y-1/4">
                        <div className="text-8xl text-teal-200 opacity-50">"</div>
                      </div>
                      
                      <div className="flex items-center mb-6">
                        <div className="relative">
                          <div className="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-100">
                            <img 
                              src={testimonial.image} 
                              alt={testimonial.name} 
                              className="w-full h-full object-cover"
                            />
                          </div>
                          <div className="absolute -bottom-1 -right-1 bg-teal-500 rounded-full p-1">
                            <svg className="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
                              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd"></path>
                            </svg>
                          </div>
                        </div>
                        <div className="ml-4">
                          <h3 className="font-bold text-gray-900">{testimonial.name}</h3>
                          <div className="flex items-center">
                            <div className="text-xs text-gray-500 mr-2">{testimonial.treatment}</div>
                            <div className="flex items-center">
                              {[...Array(testimonial.rating)].map((_, i) => (
                                <Star key={i} size={14} className="text-yellow-400 fill-current" />
                              ))}
                            </div>
                          </div>
                        </div>
                      </div>
                      
                      <p className="text-gray-700 italic text-lg mb-6">"{testimonial.quote}"</p>
                      
                      <div className="flex justify-between items-center">
                        <span className="text-sm text-gray-500">{testimonial.date}</span>
                        <div className="flex space-x-1">
                          {testimonials.map((_, i) => (
                            <button 
                              key={i}
                              className={`w-2 h-2 rounded-full transition-all duration-300 ${
                                i === activeTestimonial ? 'bg-teal-500 w-6' : 'bg-gray-300 hover:bg-gray-400'
                              }`}
                              onClick={() => setActiveTestimonial(i)}
                            ></button>
                          ))}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
            
            <button 
              className="absolute left-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-lg flex items-center justify-center text-gray-700 hover:bg-teal-50 hover:text-teal-600 transition-all duration-300 z-40"
              onClick={() => setActiveTestimonial((activeTestimonial - 1 + testimonials.length) % testimonials.length)}
            >
              <ArrowRight size={20} className="transform rotate-180" />
            </button>
            
            <button 
              className="absolute right-4 top-1/2 transform -translate-y-1/2 w-10 h-10 rounded-full bg-white shadow-lg flex items-center justify-center text-gray-700 hover:bg-teal-50 hover:text-teal-600 transition-all duration-300 z-40"
              onClick={() => setActiveTestimonial((activeTestimonial + 1) % testimonials.length)}
            >
              <ArrowRight size={20} />
            </button>
          </div>
          
          <div className="text-center">
            <AnimatedButton 
              onClick={() => setIsAppointmentModalOpen(true)}
              className="py-3 px-8 inline-flex"
            >
              Experience the Difference <ArrowRight size={18} className="ml-2" />
            </AnimatedButton>
          </div>
        </div>
      </section>
      
      {/* Contact Section */}
      <section id="contact" className="py-20 bg-white relative overflow-hidden">
        <div 
          className="absolute top-0 right-0 w-1/3 h-full bg-gradient-to-l from-teal-50 to-transparent opacity-70 pointer-events-none"
        ></div>
        
        <div className="container mx-auto px-4 md:px-6 relative">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
              Get in Touch
            </h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              We're here to answer your questions and provide the information you need. Reach out to us through any of the channels below.
            </p>
          </div>
          
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2 bg-gray-50 rounded-xl p-8 shadow-lg transform transition-all duration-500 hover:shadow-xl">
              <h3 className="text-2xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
                Send Us a Message
              </h3>
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div className="relative">
                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                    <input
                      type="text"
                      id="name"
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                      placeholder="Enter your name"
                    />
                    <div className="absolute bottom-0 left-0 w-full h-0.5 bg-gradient-to-r from-teal-500 to-blue-600 scale-x-0 group-focus-within:scale-x-100 transition-transform duration-300 origin-left"></div>
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                    <input
                      type="email"
                      id="email"
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                      placeholder="Enter your email"
                    />
                  </div>
                </div>
                <div>
                  <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                  <input
                    type="text"
                    id="subject"
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                    placeholder="What is your message about?"
                  />
                </div>
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</label>
                  <textarea
                    id="message"
                    rows="5"
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500 transition-all duration-300"
                    placeholder="How can we help you?"
                  ></textarea>
                </div>
                <div>
                  <AnimatedButton
                    type="submit"
                    className="py-3 px-8"
                  >
                    Send Message <ArrowRight size={18} className="ml-2" />
                  </AnimatedButton>
                </div>
              </form>
            </div>
            
            <div>
              <div className="bg-gray-50 rounded-xl p-8 mb-8 shadow-lg transform transition-all duration-500 hover:shadow-xl">
                <h3 className="text-xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
                  Our Locations
                </h3>
                {locations.map((location, index) => (
                  <div 
                    key={location.id} 
                    className={`${location.id !== 1 ? 'mt-8 pt-8 border-t border-gray-200' : ''} group`}
                  >
                    <div className="flex items-start mb-4">
                      <div className="w-16 h-16 rounded-lg overflow-hidden mr-4">
                        <img 
                          src={location.image} 
                          alt={location.name} 
                          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
                        />
                      </div>
                      <div>
                        <h4 className="font-bold text-gray-900 mb-1 group-hover:text-teal-600 transition-colors duration-300">{location.name}</h4>
                        <p className="text-sm text-gray-600">{location.hours}</p>
                      </div>
                    </div>
                    <div className="flex items-start mb-3">
                      <MapPin size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                      <span className="text-gray-700">{location.address}</span>
                    </div>
                    <div className="flex items-start mb-3">
                      <Phone size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                      <span className="text-gray-700">{location.phone}</span>
                    </div>
                    <button className="text-teal-500 font-medium flex items-center hover:text-teal-600 transition duration-300 mt-2 group">
                      <span>Get Directions</span>
                      <ArrowRight size={16} className="ml-1 transform transition-transform duration-300 group-hover:translate-x-1" />
                    </button>
                  </div>
                ))}
              </div>
              
              <div className="bg-gray-50 rounded-xl p-8 shadow-lg transform transition-all duration-500 hover:shadow-xl">
                <h3 className="text-xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600">
                  Connect With Us
                </h3>
                <div className="flex items-start mb-4">
                  <Mail size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                  <span className="text-gray-700">info@awhclinics.com</span>
                </div>
                <div className="flex items-center space-x-4 mt-6">
                  {['facebook', 'twitter', 'instagram', 'linkedin'].map((platform, index) => (
                    <a 
                      key={platform}
                      href="#" 
                      className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-teal-500 hover:text-white transition-all duration-300 transform hover:scale-110 hover:-translate-y-1"
                      style={{ transitionDelay: `${index * 50}ms` }}
                    >
                      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                        {platform === 'facebook' && <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>}
                        {platform === 'twitter' && <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>}
                        {platform === 'instagram' && <>
                          <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                          <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                          <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                        </>}
                        {platform === 'linkedin' && <>
                          <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                          <rect x="2" y="9" width="4" height="12"></rect>
                          <circle cx="4" cy="4" r="2"></circle>
                        </>}
                      </svg>
                    </a>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Footer */}
      <footer className="bg-gradient-to-r from-gray-900 to-blue-900 text-white py-12 relative overflow-hidden">
        <div 
          className="absolute inset-0 opacity-10 pointer-events-none"
          style={{
            backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
          }}
        ></div>
        
        <div className="container mx-auto px-4 md:px-6 relative">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 to-blue-300">
                AWH Clinics
              </h3>
              <p className="text-gray-400 mb-6">
                Providing exceptional healthcare with a personalized approach since 2005.
              </p>
              <div className="flex space-x-4">
                {['facebook', 'twitter', 'instagram', 'linkedin'].map((platform, index) => (
                  <a 
                    key={platform}
                    href="#" 
                    className="text-gray-400 hover:text-white transition-all duration-300 transform hover:scale-110"
                    style={{ transitionDelay: `${index * 50}ms` }}
                  >
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      {platform === 'facebook' && <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>}
                      {platform === 'twitter' && <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>}
                      {platform === 'instagram' && <>
                        <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                        <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                        <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                      </>}
                      {platform === 'linkedin' && <>
                        <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                        <rect x="2" y="9" width="4" height="12"></rect>
                        <circle cx="4" cy="4" r="2"></circle>
                      </>}
                    </svg>
                  </a>
                ))}
              </div>
            </div>
            
            <div>
              <h3 className="text-lg font-bold mb-6 text-white">Quick Links</h3>
              <ul className="space-y-4">
                {['home', 'about', 'services', 'team', 'testimonials', 'contact'].map((item, index) => (
                  <li key={item}>
                    <a 
                      href={`#${item}`}
                      onClick={(e) => {
                        e.preventDefault();
                        scrollToSection(item);
                      }}
                      className="text-gray-400 hover:text-white transition-all duration-300 flex items-center group"
                    >
                      <span className="w-0 h-0.5 bg-teal-500 mr-0 transition-all duration-300 group-hover:w-2 group-hover:mr-2"></span>
                      {item.charAt(0).toUpperCase() + item.slice(1)}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-bold mb-6 text-white">Services</h3>
              <ul className="space-y-4">
                {services.map((service, index) => (
                  <li key={service.id}>
                    <a 
                      href="#services"
                      onClick={(e) => {
                        e.preventDefault();
                        scrollToSection('services');
                        setTimeout(() => setSelectedService(service), 800);
                      }}
                      className="text-gray-400 hover:text-white transition-all duration-300 flex items-center group"
                    >
                      <span className="w-0 h-0.5 bg-teal-500 mr-0 transition-all duration-300 group-hover:w-2 group-hover:mr-2"></span>
                      {service.title}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-bold mb-6 text-white">Contact</h3>
              <ul className="space-y-4">
                <li className="flex items-start group">
                  <MapPin size={18} className="text-teal-400 mr-3 mt-1 flex-shrink-0 transition-transform duration-300 group-hover:scale-125" />
                  <span className="text-gray-400 group-hover:text-white transition-colors duration-300">123 Healing Way, New York, NY 10001</span>
                </li>
                <li className="flex items-start group">
                  <Phone size={18} className="text-teal-400 mr-3 mt-1 flex-shrink-0 transition-transform duration-300 group-hover:scale-125" />
                  <span className="text-gray-400 group-hover:text-white transition-colors duration-300">(212) 555-1234</span>
                </li>
                <li className="flex items-start group">
                  <Mail size={18} className="text-teal-400 mr-3 mt-1 flex-shrink-0 transition-transform duration-300 group-hover:scale-125" />
                  <span className="text-gray-400 group-hover:text-white transition-colors duration-300">info@awhclinics.com</span>
                </li>
                <li className="flex items-start group">
                  <Clock size={18} className="text-teal-400 mr-3 mt-1 flex-shrink-0 transition-transform duration-300 group-hover:scale-125" />
                  <span className="text-gray-400 group-hover:text-white transition-colors duration-300">Mon-Fri: 8am-7pm, Sat: 9am-5pm</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400 text-sm mb-4 md:mb-0">
              &copy; {new Date().getFullYear()} AWH Clinics. All rights reserved.
            </p>
            <div className="flex space-x-6">
              <a href="#" className="text-gray-400 hover:text-white text-sm transition-all duration-300 relative group">
                Privacy Policy
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-teal-500 transition-all duration-300 group-hover:w-full"></span>
              </a>
              <a href="#" className="text-gray-400 hover:text-white text-sm transition-all duration-300 relative group">
                Terms of Service
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-teal-500 transition-all duration-300 group-hover:w-full"></span>
              </a>
              <a href="#" className="text-gray-400 hover:text-white text-sm transition-all duration-300 relative group">
                Sitemap
                <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-teal-500 transition-all duration-300 group-hover:w-full"></span>
              </a>
            </div>
          </div>
        </div>
      </footer>
      
      {/* Floating Chat Button */}
      <div className="<ant_artifact identifier="AWHClinicsWebsiteCode" title="Updated AWH Clinics Website Component">
import React, { useState, useEffect } from 'react';
import { Menu, X, ChevronRight, Calendar, Phone, Mail, MapPin, Clock, ArrowRight, Check, Star, ChevronDown } from 'lucide-react';

export default function AWHClinicsWebsite() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeSection, setActiveSection] = useState('home');
  const [isScrolled, setIsScrolled] = useState(false);
  const [selectedService, setSelectedService] = useState(null);
  const [isAppointmentModalOpen, setIsAppointmentModalOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
      
      // Update active section based on scroll position
      const sections = ['home', 'about', 'services', 'team', 'testimonials', 'contact'];
      for (const section of sections.reverse()) {
        const element = document.getElementById(section);
        if (element && window.scrollY >= element.offsetTop - 100) {
          setActiveSection(section);
          break;
        }
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const scrollToSection = (sectionId) => {
    const element = document.getElementById(sectionId);
    if (element) {
      window.scrollTo({
        top: element.offsetTop - 80,
        behavior: 'smooth'
      });
      setActiveSection(sectionId);
      setIsMenuOpen(false);
    }
  };

  const services = [
    {
      id: 1,
      title: "Preventive Care",
      description: "Comprehensive health assessments and screenings to detect potential health issues before they become serious.",
      icon: "🛡️",
      features: [
        "Annual physical examinations",
        "Preventive screenings",
        "Immunizations",
        "Health risk assessments",
        "Personalized prevention plans"
      ]
    },
    {
      id: 2,
      title: "Specialized Treatments",
      description: "Advanced medical treatments tailored to your specific health conditions and needs.",
      icon: "⚕️",
      features: [
        "Chronic disease management",
        "Specialized therapy programs",
        "Advanced diagnostic services",
        "Minimally invasive procedures",
        "Rehabilitation services"
      ]
    },
    {
      id: 3,
      title: "Wellness Programs",
      description: "Holistic wellness programs designed to improve your overall health and quality of life.",
      icon: "🌿",
      features: [
        "Nutrition counseling",
        "Fitness programs",
        "Stress management",
        "Sleep improvement",
        "Mental health support"
      ]
    },
    {
      id: 4,
      title: "Telemedicine",
      description: "Convenient virtual consultations with our healthcare professionals from the comfort of your home.",
      icon: "📱",
      features: [
        "Video consultations",
        "Remote monitoring",
        "Digital prescriptions",
        "Follow-up care",
        "24/7 medical advice"
      ]
    }
  ];

  const team = [
    {
      id: 1,
      name: "Dr. Sarah Johnson",
      role: "Chief Medical Officer",
      image: "https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "Dr. Johnson brings over 20 years of experience in internal medicine and healthcare leadership. She is dedicated to establishing new standards of care excellence."
    },
    {
      id: 2,
      name: "Dr. Michael Chen",
      role: "Head of Specialized Care",
      image: "https://images.unsplash.com/photo-1612349317150-e413f6a5b16d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "With expertise in advanced treatments and research, Dr. Chen leads our specialized care programs with innovation and compassion."
    },
    {
      id: 3,
      name: "Dr. Amara Patel",
      role: "Wellness Director",
      image: "https://images.unsplash.com/photo-1594824476967-48c8b964273f?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "Dr. Patel combines traditional medical knowledge with holistic approaches to create comprehensive wellness programs for our patients."
    },
    {
      id: 4,
      name: "Dr. James Wilson",
      role: "Telemedicine Specialist",
      image: "https://images.unsplash.com/photo-1622253692010-333f2da6031d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
      bio: "Pioneering our digital health initiatives, Dr. Wilson ensures that quality care is accessible to all patients regardless of location."
    }
  ];

  const testimonials = [
    {
      id: 1,
      name: "Rebecca M.",
      quote: "The care I received at AWH Clinics transformed my life. Their preventive approach identified issues I wasn't aware of, and their treatment plan was perfectly tailored to my needs.",
      rating: 5,
      image: "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
    },
    {
      id: 2,
      name: "Thomas L.",
      quote: "After struggling with chronic pain for years, the specialized treatment program at AWH Clinics finally gave me relief. The team's expertise and compassion are unmatched.",
      rating: 5,
      image: "https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
    },
    {
      id: 3,
      name: "Sophia K.",
      quote: "The wellness program completely changed my approach to health. I've never felt better, and the ongoing support from the AWH team keeps me motivated and on track.",
      rating: 5,
      image: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80"
    }
  ];

  const locations = [
    {
      id: 1,
      name: "AWH Main Clinic",
      address: "123 Healing Way, New York, NY 10001",
      phone: "(212) 555-1234",
      hours: "Mon-Fri: 8am-7pm, Sat: 9am-5pm"
    },
    {
      id: 2,
      name: "AWH Wellness Center",
      address: "456 Vitality Blvd, New York, NY 10002",
      phone: "(212) 555-5678",
      hours: "Mon-Fri: 7am-8pm, Sat-Sun: 8am-4pm"
    }
  ];

  const ServiceModal = ({ service, onClose }) => {
    if (!service) return null;
    
    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
          <div className="p-6 md:p-8">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-2xl font-bold text-gray-900">{service.title}</h3>
              <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <p className="text-gray-700 mb-6">{service.description}</p>
            
            <div className="mb-8">
              <h4 className="text-lg font-semibold mb-4 text-gray-900">What We Offer</h4>
              <ul className="space-y-3">
                {service.features.map((feature, index) => (
                  <li key={index} className="flex items-start">
                    <Check size={20} className="text-teal-500 mr-2 mt-1 flex-shrink-0" />
                    <span className="text-gray-700">{feature}</span>
                  </li>
                ))}
              </ul>
            </div>
            
            <button 
              onClick={() => {
                onClose();
                setIsAppointmentModalOpen(true);
              }}
              className="w-full py-3 px-6 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 flex items-center justify-center"
            >
              Book an Appointment <ArrowRight size={18} className="ml-2" />
            </button>
          </div>
        </div>
      </div>
    );
  };

  const AppointmentModal = ({ onClose }) => {
    const [formData, setFormData] = useState({
      name: '',
      email: '',
      phone: '',
      service: '',
      date: '',
      time: '',
      message: ''
    });

    const handleChange = (e) => {
      const { name, value } = e.target;
      setFormData(prev => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e) => {
      e.preventDefault();
      // Here you would typically send the data to your backend
      alert('Appointment request submitted! We will contact you shortly to confirm.');
      onClose();
    };

    return (
      <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
        <div className="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
          <div className="p-6 md:p-8">
            <div className="flex justify-between items-center mb-6">
              <h3 className="text-2xl font-bold text-gray-900">Book Your Appointment</h3>
              <button onClick={onClose} className="text-gray-500 hover:text-gray-700">
                <X size={24} />
              </button>
            </div>
            
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                  <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                  <input
                    type="text"
                    id="name"
                    name="name"
                    value={formData.name}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  />
                </div>
                <div>
                  <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                  <input
                    type="email"
                    id="email"
                    name="email"
                    value={formData.email}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  />
                </div>
                <div>
                  <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Phone Number</label>
                  <input
                    type="tel"
                    id="phone"
                    name="phone"
                    value={formData.phone}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  />
                </div>
                <div>
                  <label htmlFor="service" className="block text-sm font-medium text-gray-700 mb-1">Service</label>
                  <select
                    id="service"
                    name="service"
                    value={formData.service}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  >
                    <option value="">Select a service</option>
                    {services.map(service => (
                      <option key={service.id} value={service.title}>{service.title}</option>
                    ))}
                  </select>
                </div>
                <div>
                  <label htmlFor="date" className="block text-sm font-medium text-gray-700 mb-1">Preferred Date</label>
                  <input
                    type="date"
                    id="date"
                    name="date"
                    value={formData.date}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  />
                </div>
                <div>
                  <label htmlFor="time" className="block text-sm font-medium text-gray-700 mb-1">Preferred Time</label>
                  <select
                    id="time"
                    name="time"
                    value={formData.time}
                    onChange={handleChange}
                    required
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  >
                    <option value="">Select a time</option>
                    <option value="Morning">Morning (8AM - 12PM)</option>
                    <option value="Afternoon">Afternoon (12PM - 4PM)</option>
                    <option value="Evening">Evening (4PM - 7PM)</option>
                  </select>
                </div>
              </div>
              
              <div>
                <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Additional Information</label>
                <textarea
                  id="message"
                  name="message"
                  value={formData.message}
                  onChange={handleChange}
                  rows="4"
                  className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                ></textarea>
              </div>
              
              <div className="flex justify-end">
                <button
                  type="button"
                  onClick={onClose}
                  className="mr-4 py-2 px-6 border border-gray-300 text-gray-700 font-medium rounded-lg hover:bg-gray-50 transition duration-300"
                >
                  Cancel
                </button>
                <button
                  type="submit"
                  className="py-2 px-6 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300"
                >
                  Submit Request
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="font-sans text-gray-800 min-h-screen">
      {/* Navigation */}
      <header 
        className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${
          isScrolled ? 'bg-white shadow-md py-3' : 'bg-transparent py-5'
        }`}
      >
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex justify-between items-center">
            <a href="#" className="flex items-center" onClick={() => scrollToSection('home')}>
              <span className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-800">AWH Clinics</span>
            </a>
            
            {/* Desktop Navigation */}
            <nav className="hidden md:flex items-center space-x-8">
              {['home', 'about', 'services', 'team', 'testimonials', 'contact'].map((item) => (
                <a
                  key={item}
                  href={`#${item}`}
                  onClick={(e) => {
                    e.preventDefault();
                    scrollToSection(item);
                  }}
                  className={`text-sm font-medium transition-colors duration-300 ${
                    activeSection === item
                      ? 'text-teal-500'
                      : isScrolled
                      ? 'text-gray-800 hover:text-teal-500'
                      : 'text-gray-800 hover:text-teal-500'
                  }`}
                >
                  {item.charAt(0).toUpperCase() + item.slice(1)}
                </a>
              ))}
            </nav>
            
            <div className="hidden md:flex items-center space-x-4">
              <button 
                onClick={() => setIsAppointmentModalOpen(true)}
                className="py-2 px-5 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 flex items-center"
              >
                <Calendar size={18} className="mr-2" />
                Book Appointment
              </button>
            </div>
            
            {/* Mobile Menu Button */}
            <button
              className="md:hidden text-gray-800"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
            >
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
      </header>
      
      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-30 bg-white pt-20">
          <div className="container mx-auto px-4 py-6">
            <nav className="flex flex-col space-y-6">
              {['home', 'about', 'services', 'team', 'testimonials', 'contact'].map((item) => (
                <a
                  key={item}
                  href={`#${item}`}
                  onClick={(e) => {
                    e.preventDefault();
                    scrollToSection(item);
                  }}
                  className={`text-lg font-medium ${
                    activeSection === item ? 'text-teal-500' : 'text-gray-800'
                  }`}
                >
                  {item.charAt(0).toUpperCase() + item.slice(1)}
                </a>
              ))}
              <button 
                onClick={() => {
                  setIsMenuOpen(false);
                  setIsAppointmentModalOpen(true);
                }}
                className="py-3 px-6 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 flex items-center justify-center mt-4"
              >
                <Calendar size={18} className="mr-2" />
                Book Appointment
              </button>
            </nav>
          </div>
        </div>
      )}
      
      {/* Hero Section */}
      <section id="home" className="pt-32 pb-20 md:pt-40 md:pb-28 bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="container mx-auto px-4 md:px-6">
          <div className="flex flex-col md:flex-row items-center">
            <div className="md:w-1/2 mb-10 md:mb-0 md:pr-10">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
                <span className="block">Advanced Healthcare</span>
                <span className="block text-teal-500">Personalized For You</span>
              </h1>
              <p className="text-lg text-gray-700 mb-8 leading-relaxed">
                Experience exceptional care that combines cutting-edge medical expertise with a compassionate approach. At AWH Clinics, your health is our priority.
              </p>
              <div className="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                <button 
                  onClick={() => scrollToSection('services')}
                  className="py-3 px-8 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 flex items-center justify-center"
                >
                  Our Services <ChevronRight size={18} className="ml-1" />
                </button>
                <button 
                  onClick={() => setIsAppointmentModalOpen(true)}
                  className="py-3 px-8 border-2 border-teal-500 text-teal-500 hover:bg-teal-50 font-medium rounded-lg transition duration-300 flex items-center justify-center"
                >
                  Book Appointment <Calendar size={18} className="ml-2" />
                </button>
              </div>
            </div>
            <div className="md:w-1/2 relative">
              <div className="relative rounded-2xl overflow-hidden shadow-2xl">
                <img 
                  src="https://images.unsplash.com/photo-1631815588090-d4bfec5b1ccb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80" 
                  alt="Healthcare professionals at AWH Clinics" 
                  className="w-full h-auto object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
              </div>
              <div className="absolute -bottom-6 -right-6 md:-bottom-10 md:-right-10 bg-white rounded-lg shadow-xl p-4 md:p-6 max-w-xs">
                <div className="flex items-start">
                  <div className="bg-teal-500 rounded-full p-2 mr-4">
                    <Check size={20} className="text-white" />
                  </div>
                  <div>
                    <h3 className="font-bold text-gray-900 mb-1">Trusted by 10,000+ Patients</h3>
                    <p className="text-sm text-gray-600">Award-winning care with 98% patient satisfaction</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* About Section */}
      <section id="about" className="py-20 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Redefining Healthcare Excellence</h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              At AWH Clinics, we combine advanced medical expertise with compassionate care to provide an unparalleled healthcare experience. Our approach is centered on you—your needs, your goals, and your well-being.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="bg-gray-50 rounded-xl p-8 transition-all duration-300 hover:shadow-lg">
              <div className="w-14 h-14 bg-teal-100 rounded-full flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-4">Innovative Approach</h3>
              <p className="text-gray-700">
                We stay at the forefront of medical advancements, integrating the latest research and technology into our practice to deliver superior care.
              </p>
            </div>
            
            <div className="bg-gray-50 rounded-xl p-8 transition-all duration-300 hover:shadow-lg">
              <div className="w-14 h-14 bg-teal-100 rounded-full flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-4">Expert Team</h3>
              <p className="text-gray-700">
                Our physicians and healthcare professionals are leaders in their fields, bringing decades of experience and specialized knowledge to your care.
              </p>
            </div>
            
            <div className="bg-gray-50 rounded-xl p-8 transition-all duration-300 hover:shadow-lg">
              <div className="w-14 h-14 bg-teal-100 rounded-full flex items-center justify-center mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" className="h-7 w-7 text-teal-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                </svg>
              </div>
              <h3 className="text-xl font-bold mb-4">Personalized Care</h3>
              <p className="text-gray-700">
                We believe that effective healthcare must be tailored to the individual. Your treatment plan is designed specifically for your unique needs and goals.
              </p>
            </div>
          </div>
          
          <div className="mt-16 bg-gradient-to-r from-teal-500 to-blue-600 rounded-2xl overflow-hidden shadow-xl">
            <div className="grid grid-cols-1 md:grid-cols-2">
              <div className="p-8 md:p-12 flex flex-col justify-center">
                <h3 className="text-2xl md:text-3xl font-bold text-white mb-6">Our Commitment to Excellence</h3>
                <p className="text-white/90 mb-8 leading-relaxed">
                  Since our founding, AWH Clinics has been dedicated to providing exceptional healthcare that treats the whole person. Our state-of-the-art facilities and compassionate approach create an environment where healing and wellness flourish.
                </p>
                <button 
                  onClick={() => scrollToSection('team')}
                  className="py-3 px-8 bg-white text-teal-600 font-medium rounded-lg transition duration-300 hover:bg-gray-100 self-start flex items-center"
                >
                  Meet Our Team <ArrowRight size={18} className="ml-2" />
                </button>
              </div>
              <div className="hidden md:block">
                <img 
                  src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                  alt="Modern medical facility" 
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Services Section */}
      <section id="services" className="py-20 bg-gray-50">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Comprehensive Care Services</h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              We offer a wide range of healthcare services designed to address your needs at every stage of life, from preventive care to specialized treatments.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {services.map((service) => (
              <div 
                key={service.id}
                className="bg-white rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:shadow-xl cursor-pointer"
                onClick={() => setSelectedService(service)}
              >
                <div className="p-8">
                  <div className="flex items-start">
                    <div className="text-4xl mr-4">{service.icon}</div>
                    <div>
                      <h3 className="text-xl font-bold mb-3">{service.title}</h3>
                      <p className="text-gray-700 mb-6">{service.description}</p>
                      <button className="text-teal-500 font-medium flex items-center hover:text-teal-600 transition duration-300">
                        Learn More <ChevronRight size={18} className="ml-1" />
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          
          <div className="mt-16 text-center">
            <button 
              onClick={() => setIsAppointmentModalOpen(true)}
              className="py-3 px-8 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 inline-flex items-center"
            >
              Schedule a Consultation <Calendar size={18} className="ml-2" />
            </button>
          </div>
        </div>
      </section>
      
      {/* Team Section */}
      <section id="team" className="py-20 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Our Expert Medical Team</h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              Meet the dedicated professionals who make AWH Clinics a center of excellence. Our team combines expertise, compassion, and a commitment to your well-being.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {team.map((member) => (
              <div key={member.id} className="bg-gray-50 rounded-xl overflow-hidden transition-all duration-300 hover:shadow-lg">
                <div className="aspect-w-3 aspect-h-4 relative">
                  <img 
                    src={member.image} 
                    alt={member.name} 
                    className="w-full h-full object-cover"
                  />
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold mb-1">{member.name}</h3>
                  <p className="text-teal-500 font-medium mb-4">{member.role}</p>
                  <p className="text-gray-700 text-sm">{member.bio}</p>
                </div>
              </div>
            ))}
          </div>
          
          <div className="mt-16 bg-gray-50 rounded-2xl p-8 md:p-12">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
              <div>
                <h3 className="text-2xl md:text-3xl font-bold mb-6">Join Our Team of Excellence</h3>
                <p className="text-gray-700 mb-8 leading-relaxed">
                  We're always looking for talented healthcare professionals who share our commitment to exceptional patient care and medical innovation.
                </p>
                <button className="py-3 px-8 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 flex items-center">
                  View Career Opportunities <ArrowRight size={18} className="ml-2" />
                </button>
              </div>
              <div className="hidden md:block">
                <img 
                  src="https://images.unsplash.com/photo-1551076805-e1869033e561?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
                  alt="Medical team collaboration" 
                  className="rounded-xl shadow-lg"
                />
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Testimonials Section */}
      <section id="testimonials" className="py-20 bg-gradient-to-br from-gray-50 to-blue-50">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Patient Success Stories</h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              Hear from our patients about their experiences at AWH Clinics and how our care has made a difference in their lives.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {testimonials.map((testimonial) => (
              <div key={testimonial.id} className="bg-white rounded-xl p-8 shadow-md transition-all duration-300 hover:shadow-lg">
                <div className="flex items-center mb-6">
                  <img 
                    src={testimonial.image} 
                    alt={testimonial.name} 
                    className="w-14 h-14 rounded-full object-cover mr-4"
                  />
                  <div>
                    <h3 className="font-bold text-gray-900">{testimonial.name}</h3>
                    <div className="flex items-center">
                      {[...Array(testimonial.rating)].map((_, i) => (
                        <Star key={i} size={16} className="text-yellow-400 fill-current" />
                      ))}
                    </div>
                  </div>
                </div>
                <p className="text-gray-700 italic">"{testimonial.quote}"</p>
              </div>
            ))}
          </div>
          
          <div className="mt-16 text-center">
            <button 
              onClick={() => setIsAppointmentModalOpen(true)}
              className="py-3 px-8 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300 inline-flex items-center"
            >
              Experience the Difference <ArrowRight size={18} className="ml-2" />
            </button>
          </div>
        </div>
      </section>
      
      {/* Contact Section */}
      <section id="contact" className="py-20 bg-white">
        <div className="container mx-auto px-4 md:px-6">
          <div className="max-w-3xl mx-auto text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold mb-6">Get in Touch</h2>
            <p className="text-lg text-gray-700 leading-relaxed">
              We're here to answer your questions and provide the information you need. Reach out to us through any of the channels below.
            </p>
          </div>
          
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div className="lg:col-span-2 bg-gray-50 rounded-xl p-8">
              <h3 className="text-2xl font-bold mb-6">Send Us a Message</h3>
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div>
                    <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
                    <input
                      type="text"
                      id="name"
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                    />
                  </div>
                  <div>
                    <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">Email Address</label>
                    <input
                      type="email"
                      id="email"
                      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                    />
                  </div>
                </div>
                <div>
                  <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
                  <input
                    type="text"
                    id="subject"
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  />
                </div>
                <div>
                  <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-1">Message</label>
                  <textarea
                    id="message"
                    rows="5"
                    className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-teal-500 focus:border-teal-500"
                  ></textarea>
                </div>
                <div>
                  <button
                    type="submit"
                    className="py-3 px-8 bg-teal-500 hover:bg-teal-600 text-white font-medium rounded-lg transition duration-300"
                  >
                    Send Message
                  </button>
                </div>
              </form>
            </div>
            
            <div>
              <div className="bg-gray-50 rounded-xl p-8 mb-8">
                <h3 className="text-xl font-bold mb-6">Our Locations</h3>
                {locations.map((location) => (
                  <div key={location.id} className={`${location.id !== 1 ? 'mt-8 pt-8 border-t border-gray-200' : ''}`}>
                    <h4 className="font-bold text-gray-900 mb-2">{location.name}</h4>
                    <div className="flex items-start mb-3">
                      <MapPin size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                      <span className="text-gray-700">{location.address}</span>
                    </div>
                    <div className="flex items-start mb-3">
                      <Phone size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                      <span className="text-gray-700">{location.phone}</span>
                    </div>
                    <div className="flex items-start">
                      <Clock size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                      <span className="text-gray-700">{location.hours}</span>
                    </div>
                  </div>
                ))}
              </div>
              
              <div className="bg-gray-50 rounded-xl p-8">
                <h3 className="text-xl font-bold mb-6">Connect With Us</h3>
                <div className="flex items-start mb-4">
                  <Mail size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                  <span className="text-gray-700">info@awhclinics.com</span>
                </div>
                <div className="flex items-center space-x-4 mt-6">
                  <a href="#" className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-teal-500 hover:text-white transition duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                    </svg>
                  </a>
                  <a href="#" className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-teal-500 hover:text-white transition duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                    </svg>
                  </a>
                  <a href="#" className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-teal-500 hover:text-white transition duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                      <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                      <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                    </svg>
                  </a>
                  <a href="#" className="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-gray-700 hover:bg-teal-500 hover:text-white transition duration-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                      <rect x="2" y="9" width="4" height="12"></rect>
                      <circle cx="4" cy="4" r="2"></circle>
                    </svg>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
      {/* Footer */}
      <footer className="bg-gray-900 text-white py-12">
        <div className="container mx-auto px-4 md:px-6">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-6">AWH Clinics</h3>
              <p className="text-gray-400 mb-6">
                Providing exceptional healthcare with a personalized approach since 2005.
              </p>
              <div className="flex space-x-4">
                <a href="#" className="text-gray-400 hover:text-white transition duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                  </svg>
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
                  </svg>
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
                    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
                  </svg>
                </a>
                <a href="#" className="text-gray-400 hover:text-white transition duration-300">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                    <rect x="2" y="9" width="4" height="12"></rect>
                    <circle cx="4" cy="4" r="2"></circle>
                  </svg>
                </a>
              </div>
            </div>
            
            <div>
              <h3 className="text-lg font-bold mb-6">Quick Links</h3>
              <ul className="space-y-4">
                <li><a href="#home" className="text-gray-400 hover:text-white transition duration-300">Home</a></li>
                <li><a href="#about" className="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
                <li><a href="#services" className="text-gray-400 hover:text-white transition duration-300">Our Services</a></li>
                <li><a href="#team" className="text-gray-400 hover:text-white transition duration-300">Our Team</a></li>
                <li><a href="#contact" className="text-gray-400 hover:text-white transition duration-300">Contact Us</a></li>
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-bold mb-6">Services</h3>
              <ul className="space-y-4">
                {services.map((service) => (
                  <li key={service.id}>
                    <a href="#services" className="text-gray-400 hover:text-white transition duration-300">{service.title}</a>
                  </li>
                ))}
              </ul>
            </div>
            
            <div>
              <h3 className="text-lg font-bold mb-6">Contact</h3>
              <ul className="space-y-4">
                <li className="flex items-start">
                  <MapPin size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                  <span className="text-gray-400">123 Healing Way, New York, NY 10001</span>
                </li>
                <li className="flex items-start">
                  <Phone size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                  <span className="text-gray-400">(212) 555-1234</span>
                </li>
                <li className="flex items-start">
                  <Mail size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                  <span className="text-gray-400">info@awhclinics.com</span>
                </li>
                <li className="flex items-start">
                  <Clock size={18} className="text-teal-500 mr-3 mt-1 flex-shrink-0" />
                  <span className="text-gray-400">Mon-Fri: 8am-7pm, Sat: 9am-5pm</span>
                </li>
              </ul>
            </div>
          </div>
          
          <div className="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
            <p className="text-gray-400 text-sm mb-4 md:mb-0">
              &copy; {new Date().getFullYear()} AWH Clinics. All rights reserved.
            </p>
            <div className="flex space-x-6">
              <a href="#" className="text-gray-400 hover:text-white text-sm transition duration-300">Privacy Policy</a>
              <a href="#" className="text-gray-400 hover:text-white text-sm transition duration-300">Terms of Service</a>
              <a href="#" className="text-gray-400 hover:text-white text-sm transition duration-300">Sitemap</a>
            </div>
          </div>
        </div>
      </footer>
      
      {/* Service Modal */}
      {selectedService && (
        <ServiceModal service={selectedService} onClose={() => setSelectedService(null)} />
      )}
      
      {/* Appointment Modal */}
      {isAppointmentModalOpen && (
        <AppointmentModal onClose={() => setIsAppointmentModalOpen(false)} />
      )}
      
      {/* Back to Top Button */}
      <button
        onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
        className={`fixed bottom-6 right-6 p-3 rounded-full bg-teal-500 text-white shadow-lg transition-all duration-300 ${
          isScrolled ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10 pointer-events-none'
        }`}
      >
        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
        </svg>
      </button>
    </div>
  );
}