const { useState, useEffect } = React;

function Navbar() {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

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

  // window.NAV_BASE is set by each page before navbar.jsx loads.
  // Root pages set it to "./", pages inside subfolders set it to "../" etc.
  const base = (typeof window !== 'undefined' && window.NAV_BASE) || './';

  const navLinks = [
    { name: 'About',      href: `${base}portfolio.html#about` },
    { name: 'Expertise',  href: `${base}portfolio.html#expertise` },
    { name: 'Workshops',  href: `${base}workshops.html` },
    { name: 'Experience', href: `${base}portfolio.html#experience` },
    { name: 'Research',   href: `${base}portfolio.html#research` },
    { name: 'Projects',   href: `${base}portfolio.html#projects` },
    { name: 'Journal',    href: `${base}blog.html` },
  ];

  return (
    <header
      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 border-b border-[var(--neutral-800)] ${
        isScrolled ? 'bg-[var(--neutral-950)]/90 backdrop-blur-md py-3' : 'bg-[var(--neutral-950)] py-5'
      }`}
    >
      <div className="max-w-[1440px] mx-auto px-6 md:px-10 lg:px-20 flex justify-between items-center">
        {/* Logo */}
        <a href={`${base}portfolio.html`} className="text-2xl font-black tracking-tighter text-[var(--neutral-0)] flex items-center gap-2">
          MATHUR
          <span className="w-2 h-2 rounded-full bg-[var(--flame-500)] inline-block"></span>
        </a>

        {/* Desktop Nav */}
        <nav className="hidden md:flex items-center gap-7 lg:gap-8">
          {navLinks.map((link) => (
            <a
              key={link.name}
              href={link.href}
              className="text-xs font-semibold uppercase tracking-widest text-[var(--neutral-200)] hover:text-[var(--flame-500)] transition-colors"
            >
              {link.name}
            </a>
          ))}
        </nav>

        {/* Desktop Actions — lg+ to avoid colliding with 6-link nav at md */}
        <div className="hidden lg:flex items-center gap-4 ml-4">
          <a
            href="https://github.com/v-quant-lab"
            target="_blank"
            rel="noreferrer"
            className="text-xs font-semibold uppercase tracking-widest text-[var(--neutral-200)] hover:text-[var(--neutral-0)] transition-colors"
          >
            GITHUB
          </a>
          <a
            href="mailto:vipul.gamma@gmail.com"
            className="bg-[var(--neutral-0)] text-[var(--neutral-950)] px-6 py-3 text-xs font-bold uppercase tracking-widest hover:bg-[var(--flame-500)] hover:text-[var(--neutral-0)] transition-all duration-300"
          >
            GET IN TOUCH
          </a>
        </div>

        {/* Mobile Toggle */}
        <button
          className="md:hidden text-[var(--neutral-0)] p-2"
          onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
        >
          <iconify-icon icon={mobileMenuOpen ? "solar:close-circle-linear" : "solar:hamburger-menu-linear"} width="28"></iconify-icon>
        </button>
      </div>

      {/* Mobile Menu */}
      {mobileMenuOpen && (
        <div className="md:hidden absolute top-full left-0 w-full bg-[var(--neutral-900)] border-b border-[var(--neutral-800)] p-6 flex flex-col gap-6">
          <nav className="flex flex-col gap-4">
            {navLinks.map((link) => (
              <a
                key={link.name}
                href={link.href}
                onClick={() => setMobileMenuOpen(false)}
                className="text-sm font-semibold uppercase tracking-widest text-[var(--neutral-200)] hover:text-[var(--flame-500)]"
              >
                {link.name}
              </a>
            ))}
          </nav>
          <div className="flex flex-col gap-4 pt-4 border-t border-[var(--neutral-800)]">
            <a href="https://github.com/v-quant-lab" target="_blank" rel="noreferrer" className="text-sm font-semibold uppercase tracking-widest text-[var(--neutral-200)] text-left">GITHUB</a>
            <a
              href="mailto:vipul.gamma@gmail.com"
              onClick={() => setMobileMenuOpen(false)}
              className="bg-[var(--flame-500)] text-[var(--neutral-0)] px-6 py-4 text-center text-sm font-bold uppercase tracking-widest"
            >
              GET IN TOUCH
            </a>
          </div>
        </div>
      )}
    </header>
  );
}

window.Navbar = Navbar;