import React, { useState, useEffect } from 'react';
import { Phone, MessageCircle, Menu, X, Sparkles } from 'lucide-react';

interface NavbarProps {
  onBookClick: () => void;
}

export const Navbar: React.FC<NavbarProps> = ({ onBookClick }) => {
  const [scrolled, setScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 20) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: 'होम', href: '#home' },
    { name: 'हमारे बारे में', href: '#about' },
    { name: 'सेवाएं', href: '#services' },
    { name: 'बीमारियां / समस्याएं', href: '#conditions' },
    { name: 'कैसे काम करता है', href: '#how-it-works' },
    { name: 'हमारे सेवा क्षेत्र', href: '#areas' },
    { name: 'मरीजों की राय', href: '#testimonials' },
    { name: 'सवाल-जवाब', href: '#faq' },
    { name: 'संपर्क करें', href: '#contact' },
  ];

  const whatsappUrl = "https://wa.me/919939332200?text=" + encodeURIComponent("नमस्ते स्काई हेल्थ सेंटर, मुझे आपकी सेवा के बारे में जानकारी चाहिए। मैं अपनी समस्या बताकर समय बुक करना चाहता/चाहती हूं।");

  return (
    <header className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${scrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-3' : 'bg-white/90 backdrop-blur-sm py-4 shadow-sm'} lg:py-3 sm:py-4`}>
      <div className="container flex items-center justify-between">
        {/* Logo */}
        <a href="#home" className="flex items-center gap-3 group">
          <div className="w-[96px] h-[96px] lg:w-16 lg:h-16 xl:w-[72px] xl:h-[72px] rounded-full overflow-hidden bg-white shadow-md flex items-center justify-center group-hover:scale-105 transition-transform border border-slate-200/80 p-0.5">
            <img
              src="/manus-storage/ChatGPTImageAug9,2026,02_56_14PM_ab6111e5.png"
              alt="Sky Health Centre Logo"
              className="w-full h-full object-cover mix-blend-multiply"
            />
          </div>
          <div>
            <div className="text-3xl sm:text-4xl lg:text-xl xl:text-2xl font-black tracking-tight leading-tight text-slate-900">
              <span>स्काई हेल्थ सेंटर</span>
            </div>
            <div className="text-lg lg:text-sm xl:text-base font-bold text-sky-700 tracking-wide flex items-center gap-1.5">
              <span className="w-2 h-2 lg:w-1.5 lg:h-1.5 rounded-full bg-emerald-500"></span>
              <span className="text-slate-900 font-bold text-[20px] lg:text-sm xl:text-base leading-none">फतेहपुर</span>
            </div>
          </div>
        </a>

        {/* Desktop Navigation */}
        <nav className="hidden lg:flex items-center gap-1 xl:gap-2">
          {navLinks.map((link) => (
            <a
              key={link.href}
              href={link.href}
              className="px-3 py-2 text-sm font-medium text-slate-700 hover:text-sky-700 hover:bg-sky-50 rounded-lg transition-colors"
            >
              {link.name}
            </a>
          ))}
        </nav>

        {/* Action Buttons */}
        <div className="hidden md:flex items-center gap-3">
          <a
            href="tel:+919939332200"
            className="flex items-center gap-2 px-3.5 py-2 text-xs font-bold text-sky-700 bg-sky-50 hover:bg-sky-100 rounded-lg border border-sky-200 transition-colors"
          >
            <Phone className="w-3.5 h-3.5" />
            <span>अभी कॉल करें</span>
          </a>
          <a
            href={whatsappUrl}
            target="_blank"
            rel="noopener noreferrer"
            className="flex items-center gap-2 px-3.5 py-2 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 rounded-lg shadow-sm shadow-emerald-600/20 transition-all"
          >
            <MessageCircle className="w-3.5 h-3.5 fill-white" />
            <span>WhatsApp</span>
          </a>
          <button
            onClick={onBookClick}
            className="flex items-center gap-1.5 px-4 py-2 text-xs font-bold text-white bg-blue-700 hover:bg-blue-800 rounded-lg shadow-md shadow-blue-700/25 transition-all"
          >
            <Sparkles className="w-3.5 h-3.5" />
            <span>समय बुक करें</span>
          </button>
        </div>

        {/* Mobile Hamburger Button */}
        <button
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
          className="lg:hidden p-2.5 text-slate-700 hover:text-sky-700 hover:bg-slate-100 rounded-xl transition-colors"
          aria-label="Toggle Menu"
        >
          {mobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
        </button>
      </div>

      {/* Mobile Drawer */}
      {mobileMenuOpen && (
        <div className="lg:hidden absolute top-full left-0 right-0 bg-white/98 backdrop-blur-xl border-b border-slate-200 shadow-xl py-6 px-6 animate-in slide-in-from-top duration-300">
          <div className="flex flex-col gap-2">
            {navLinks.map((link) => (
              <a
                key={link.href}
                href={link.href}
                onClick={() => setMobileMenuOpen(false)}
                className="px-4 py-3 text-base font-medium text-slate-800 hover:text-sky-700 hover:bg-sky-50 rounded-xl transition-colors flex items-center justify-between"
              >
                <span>{link.name}</span>
                <span className="text-slate-400 text-sm">→</span>
              </a>
            ))}
            <div className="pt-4 mt-2 border-t border-slate-100 grid grid-cols-2 gap-3">
              <a
                href="tel:+919939332200"
                className="flex items-center justify-center gap-2 py-3 text-sm font-bold text-sky-700 bg-sky-50 rounded-xl border border-sky-200"
              >
                <Phone className="w-4 h-4" />
                <span>कॉल करें</span>
              </a>
              <a
                href={whatsappUrl}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center justify-center gap-2 py-3 text-sm font-bold text-white bg-emerald-600 rounded-xl shadow-sm"
              >
                <MessageCircle className="w-4 h-4 fill-white" />
                <span>WhatsApp</span>
              </a>
            </div>
            <button
              onClick={() => {
                setMobileMenuOpen(false);
                onBookClick();
              }}
              className="w-full mt-2 py-3.5 text-sm font-bold text-white bg-blue-700 hover:bg-blue-800 rounded-xl shadow-md flex items-center justify-center gap-2"
            >
              <Sparkles className="w-4 h-4" />
              <span>समय बुक करें (Book Appointment)</span>
            </button>
          </div>
        </div>
      )}
    </header>
  );
};
