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

export const Navbar: React.FC = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const location = useLocation();

  useEffect(() => {
    const handleScroll = () => {
      setIsScrolled(window.scrollY > 20);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navLinks = [
    { name: 'Home', path: '/' },
    { name: 'Services', path: '/services' },
    { name: 'About Us', path: '/about' },
    { name: 'Contact', path: '/contact' },
  ];

  const isActive = (path: string) => location.pathname === path;

  return (
    <nav
      className={`fixed w-full z-50 transition-all duration-300 ${
        isScrolled ? 'bg-white shadow-md py-3' : 'bg-transparent py-5'
      }`}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center">
          {/* Logo */}
          <Link to="/" className="flex items-center gap-2 group">
            <div className={`w-10 h-10 rounded flex items-center justify-center transition-colors ${isScrolled ? 'bg-primary-900 text-white' : 'bg-white text-primary-900'}`}>
              <span className="font-serif font-bold text-xl">A</span>
            </div>
            <div className="flex flex-col">
              <span className={`font-serif font-bold text-xl tracking-tight leading-none ${isScrolled ? 'text-primary-900' : 'text-white'}`}>
                ALFALAH
              </span>
              <span className={`text-[10px] uppercase tracking-widest font-medium ${isScrolled ? 'text-gray-500' : 'text-gray-300'}`}>
                Consultant Ltd
              </span>
            </div>
          </Link>

          {/* Desktop Nav */}
          <div className="hidden md:flex items-center space-x-8">
            {navLinks.map((link) => (
              <Link
                key={link.name}
                to={link.path}
                className={`text-sm font-medium transition-colors hover:text-accent-500 ${
                  isActive(link.path) 
                    ? 'text-accent-500' 
                    : isScrolled ? 'text-gray-700' : 'text-gray-200'
                }`}
              >
                {link.name}
              </Link>
            ))}
            <Link
              to="/contact"
              className={`px-5 py-2.5 rounded-full text-sm font-semibold transition-all transform hover:scale-105 flex items-center gap-2 ${
                isScrolled 
                  ? 'bg-primary-900 text-white hover:bg-primary-800' 
                  : 'bg-white text-primary-900 hover:bg-gray-100'
              }`}
            >
              Get a Quote <ArrowRight size={16} />
            </Link>
          </div>

          {/* Mobile Menu Button */}
          <button
            className={`md:hidden p-2 rounded-md ${isScrolled ? 'text-primary-900' : 'text-white'}`}
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
          >
            {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>
      </div>

      {/* Mobile Menu */}
      <div
        className={`md:hidden absolute top-full left-0 w-full bg-white shadow-lg transition-all duration-300 ease-in-out transform ${
          isMobileMenuOpen ? 'opacity-100 translate-y-0' : 'opacity-0 -translate-y-4 pointer-events-none'
        }`}
      >
        <div className="flex flex-col p-4 space-y-4">
          {navLinks.map((link) => (
            <Link
              key={link.name}
              to={link.path}
              onClick={() => setIsMobileMenuOpen(false)}
              className={`text-lg font-medium px-4 py-2 rounded-lg ${
                isActive(link.path) ? 'bg-accent-50 text-accent-600' : 'text-gray-700 hover:bg-gray-50'
              }`}
            >
              {link.name}
            </Link>
          ))}
          <Link
            to="/contact"
            onClick={() => setIsMobileMenuOpen(false)}
            className="w-full text-center py-3 bg-primary-900 text-white rounded-lg font-semibold"
          >
            Get a Quote
          </Link>
        </div>
      </div>
    </nav>
  );
};

(window as any).Navbar = Navbar;