import React, { useState, useEffect } from 'react';
import { Menu, X, Phone } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { Link, useLocation } from 'react-router-dom';

export default function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  
  // Handle scrolling to hash when navigating to home page with hash
  useEffect(() => {
    if (location.pathname === '/' && location.hash) {
      setTimeout(() => {
        const id = location.hash.replace('#', '');
        const element = document.getElementById(id);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth' });
        }
      }, 0);
    }
  }, [location]);

  const navLinks = [
    { name: 'Overview', href: '#overview' },
    { name: 'Amenities', href: '#amenities' },
    { name: 'Specifications', href: '#specifications' },
    { name: 'Gallery', href: '#gallery' },
    { name: 'Videos', href: '#videos' },
    { name: 'Location', href: '#location' },
  ];

  return (
    <header
      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
        isScrolled ? 'bg-white/95 backdrop-blur-md shadow-md py-2' : 'bg-gradient-to-b from-black/60 to-transparent py-4'
      }`}
    >
      <div className="w-full px-6 md:px-12 flex items-center justify-between">
        <Link to="/" className="flex items-center">
          <img 
            src={isScrolled ? "https://raw.githubusercontent.com/erplegacy002-hash/testbalkemal/refs/heads/main/image-removebg-preview%20(3).png" : "https://raw.githubusercontent.com/erplegacy002-hash/testbalkemal/refs/heads/main/image-removebg-preview%20(4).png"} 
            alt="Legacy Kairos" 
            className="h-16 md:h-20 lg:h-28 transition-all duration-500 object-contain"
          />
        </Link>

        {/* Desktop Nav */}
        <nav className="hidden xl:flex items-center gap-8">
          {navLinks.map((link) => (
            <Link
              key={link.name}
              to={`/${link.href}`}
              className={`text-sm font-medium tracking-widest uppercase transition-colors ${
                isScrolled ? 'text-gray-800 hover:text-primary' : 'text-white/90 hover:text-white drop-shadow-md'
              }`}
            >
              {link.name}
            </Link>
          ))}
        </nav>

        {/* Desktop Actions */}
        <div className="hidden lg:flex items-center gap-6">
          <a href="tel:+918888770022" className={`flex items-center gap-2 font-medium transition-colors whitespace-nowrap ${
            isScrolled ? 'text-gray-800 hover:text-primary' : 'text-white hover:text-primary-100 drop-shadow-md'
          }`}>
            <Phone size={18} />
            <span>+91 88887 70022</span>
          </a>
          <button onClick={() => window.dispatchEvent(new Event('open-enquiry'))} className={`px-6 py-2.5 rounded-full font-medium tracking-wide transition-all duration-300 cursor-pointer whitespace-nowrap ${
            isScrolled ? 'bg-primary hover:bg-primary-dark text-white' : 'bg-white/10 hover:bg-white text-white hover:text-gray-900 backdrop-blur-sm border border-white/30'
          }`}>
            Enquire Now
          </button>
        </div>

        {/* Mobile Menu Toggle */}
        <button
          className={`lg:hidden p-2 transition-colors ${isScrolled ? 'text-gray-800' : 'text-white drop-shadow-md'}`}
          onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
        >
          {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
        </button>
      </div>

      {/* Mobile Nav */}
      <AnimatePresence>
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="lg:hidden bg-white border-t"
          >
            <div className="container mx-auto px-4 py-4 flex flex-col gap-4">
              {navLinks.map((link) => (
                <Link
                  key={link.name}
                  to={`/${link.href}`}
                  className="text-gray-800 font-medium uppercase tracking-wider py-2 border-b border-gray-100"
                  onClick={() => setIsMobileMenuOpen(false)}
                >
                  {link.name}
                </Link>
              ))}
              <div className="flex flex-col gap-4 pt-4">
                <a href="tel:+918888770022" className="flex items-center gap-2 text-gray-800 font-medium">
                  <Phone size={18} className="text-primary" />
                  <span>+91 88887 70022</span>
                </a>
                <button onClick={() => { setIsMobileMenuOpen(false); window.dispatchEvent(new Event('open-enquiry')); }} className="bg-primary text-white text-center px-6 py-3 rounded-full font-medium cursor-pointer">
                  Enquire Now
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </header>
  );
}
