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

const links = [
  { label: 'Home', path: '/' },
  { label: 'Services', path: '/services' },
  { label: 'Portfolio', path: '/portfolio' },
  { label: 'About', path: '/about' },
  { label: 'Contact', path: '/contact' },
];

export default function Navbar() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const location = useLocation();
  const isHome = location.pathname === '/';

  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', fn, { passive: true });
    return () => window.removeEventListener('scroll', fn);
  }, []);

  useEffect(() => { setOpen(false); }, [location]);

  const bg = scrolled ? 'bg-navy shadow-lg' : isHome ? 'bg-transparent' : 'bg-navy';

  return (
    <header className={`fixed inset-x-0 top-0 z-50 transition-all duration-500 ${bg}`}>
      <div className="max-w-7xl mx-auto px-6 lg:px-12 flex items-center justify-between h-20 lg:h-24">
        {/* Logo */}
        <Link to="/" className="flex flex-col leading-none">
          <span className="font-serif text-2xl text-white tracking-wide">Panama International</span>
          <span className="font-sans text-gold text-[9px] tracking-[0.35em] uppercase mt-0.5">Contracting Company</span>
        </Link>

        {/* Desktop */}
        <nav className="hidden lg:flex items-center gap-9">
          {links.map((l) => (
            <Link
              key={l.path}
              to={l.path}
              className={`font-sans text-[11px] tracking-[0.14em] uppercase transition-colors duration-200 ${
                location.pathname === l.path ? 'text-gold' : 'text-white/75 hover:text-white'
              }`}
            >
              {l.label}
            </Link>
          ))}
        </nav>

        <div className="hidden lg:block">
          <Link to="/inquiries" className="btn-primary py-3 px-6 text-[10px]">
            Request a Quote
          </Link>
        </div>

        <button onClick={() => setOpen(!open)} className="lg:hidden text-white p-1">
          {open ? <X size={22} /> : <Menu size={22} />}
        </button>
      </div>

      {/* Mobile */}
      <div className={`lg:hidden bg-navy-900 overflow-hidden transition-all duration-300 ${open ? 'max-h-screen' : 'max-h-0'}`}>
        <nav className="flex flex-col px-6 py-6 gap-5">
          {links.map((l) => (
            <Link key={l.path} to={l.path}
              className={`font-sans text-sm tracking-[0.12em] uppercase ${location.pathname === l.path ? 'text-gold' : 'text-white/75'}`}>
              {l.label}
            </Link>
          ))}
          <Link to="/inquiries" className="btn-primary mt-2 justify-center text-[10px]">Request a Quote</Link>
        </nav>
      </div>
    </header>
  );
}
