/* nav.jsx — sticky scroll-aware navbar */
const { useEffect: useEffectNav, useState: useStateNav } = React;

const NAV_BASE = location.pathname.includes('/pages/') ? '../' : '';
const NAV_LINKS = [
  { label: 'Services', href: NAV_BASE + 'index.html#services' },
  { label: 'Work', href: NAV_BASE + 'index.html#portfolio' },
  { label: 'Pricing', href: NAV_BASE + 'index.html#pricing' },
  { label: 'Results', href: NAV_BASE + 'index.html#testimonials' },
  { label: 'Contact', href: NAV_BASE + 'index.html#contact' },
];

function navGoContact() {
  const el = document.querySelector('#contact');
  if (el) el.scrollIntoView({ behavior: 'smooth' });
  else window.location.href = NAV_BASE + 'index.html#contact';
}

function Nav({ lightHero = false }) {
  const { Button } = window.MacnitechDesignSystem_13fddf;
  const [solid, setSolid] = useStateNav(false);
  const [open, setOpen] = useStateNav(false);

  useEffectNav(() => {
    const onScroll = () => setSolid(window.scrollY > 60);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

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

  const darkChrome = solid || lightHero; // dark logo + dark links

  return (
    <header className={'nav' + (solid ? ' is-solid' : '') + (lightHero && !solid ? ' nav--onlight' : '')} data-screen-label="Navbar">
      <div className="mt-container nav-inner">
        <a href={NAV_BASE + 'index.html#top'} aria-label="Macnitech home" style={{ display: 'flex', alignItems: 'center' }}>
          <img className="nav__logo" alt="Macnitech"
               src={NAV_BASE + (darkChrome ? 'assets/macnitech_logo.png' : 'assets/macnitech_logo_light.png')} />
        </a>

        <nav className="nav__links">
          {NAV_LINKS.map((l) => (
            <a key={l.href} className="nav__link" href={l.href}>{l.label}</a>
          ))}
        </nav>

        <div className="nav__cta" style={{ display: 'flex', alignItems: 'center', gap: '14px' }}>
          <Button variant="primary" size="sm" onClick={navGoContact}
                  iconRight={<Icon name="arrowUpRight" size={16} />}>
            Free audit
          </Button>
        </div>

        <button className="nav__burger" aria-label="Open menu" onClick={() => setOpen(true)}>
          <Icon name="menu" size={26} />
        </button>
      </div>

      <div className={'nav__mobile' + (open ? ' is-open' : '')}>
        <div className="nav__mobile-top">
          <img className="nav__logo" alt="Macnitech" src={NAV_BASE + 'assets/macnitech_logo_light.png'} />
          <button className="nav__burger" style={{ color: 'var(--cream)', display: 'inline-flex' }} aria-label="Close menu" onClick={() => setOpen(false)}>
            <Icon name="x" size={26} />
          </button>
        </div>
        {NAV_LINKS.map((l) => (
          <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        ))}
        <div style={{ marginTop: '1.5rem' }}>
          <Button variant="primary" size="lg" fullWidth onClick={() => { setOpen(false); navGoContact(); }}
                  iconRight={<Icon name="arrowUpRight" size={18} />}>
            Start free audit
          </Button>
        </div>
      </div>
    </header>
  );
}

Object.assign(window, { Nav, NAV_BASE, navGoContact });