const NAV_ITEMS = [
  { id: 'home', label: 'Home' },
  { id: 'services', label: 'Services' },
  { id: 'about', label: 'About' },
  { id: 'portfolio', label: 'Portfolio' },
  { id: 'pricing', label: 'Pricing' },
];

function Nav({ activeId }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  React.useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);

  const scrollTo = (id) => (e) => {
    e.preventDefault();
    const el = document.getElementById(id);
    if (!el) return;
    setOpen(false);
    window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };

  return (
    <React.Fragment>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <a href="#home" className="nav-brand" onClick={scrollTo('home')} style={{ display: 'flex', alignItems: 'center' }}>
          <img src="uploads/logo.png" alt="NEXITURA" style={{ height: '60px', width: 'auto', objectFit: 'contain', transform: 'scale(3)', transformOrigin: 'left center' }} />
        </a>
        <ul className="nav-links">
          {NAV_ITEMS.map(item => (
            <li key={item.id}>
              <a
                href={`#${item.id}`}
                className={`nav-link ${activeId === item.id ? 'active' : ''}`}
                onClick={scrollTo(item.id)}
              >
                {item.label}
              </a>
            </li>
          ))}
          <li>
            <a href="#contact" className="nav-link cta" onClick={scrollTo('contact')}>
              Contact
            </a>
          </li>
        </ul>
        <button
          className={`nav-burger ${open ? 'open' : ''}`}
          aria-label="Menu"
          onClick={() => setOpen(!open)}
        >
          <span></span><span></span><span></span>
        </button>
      </nav>

      <div className={`mobile-overlay ${open ? 'open' : ''}`}>
        {[...NAV_ITEMS, { id: 'contact', label: 'Contact' }].map(item => (
          <a key={item.id} href={`#${item.id}`} onClick={scrollTo(item.id)}>{item.label}</a>
        ))}
        <div className="est">≫ EST. 2024 — NEXITURA LABS</div>
      </div>
    </React.Fragment>
  );
}

window.Nav = Nav;