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

  // detect if we're on a sub-page (portfolio.html, case-*.html) → prefix anchors with index.html
  const isHome = React.useMemo(() => {
    if (typeof window === 'undefined') return true;
    const p = window.location.pathname;
    return p.endsWith('/') || p.endsWith('/index.html') || p === '' || /\/$/.test(p);
  }, []);
  const base = isHome ? '' : 'index.html';
  const link = (hash) => base + hash;

  // close mobile menu on hash change / resize to desktop
  React.useEffect(() => {
    const close = () => setOpen(false);
    const onResize = () => { if (window.innerWidth > 880) setOpen(false); };
    window.addEventListener('hashchange', close);
    window.addEventListener('resize', onResize);
    return () => {
      window.removeEventListener('hashchange', close);
      window.removeEventListener('resize', onResize);
    };
  }, []);

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

  React.useEffect(() => { if (window.lucide) lucide.createIcons(); }, [open]);

  const items = [
    { href: link('#problemy'),  label: 'Dla kogo' },
    { href: link('#pomagam'),   label: 'Jak pomagam' },
    { href: link('#portfolio'), label: 'Portfolio' },
    { href: link('#proces'),    label: 'Współpraca' },
    { href: link('#omnie'),     label: 'O mnie' },
    { href: link('#faq'),       label: 'FAQ' },
  ];

  return (
    <React.Fragment>
      <nav className="g-nav">
        <a className="g-brand" href={isHome ? '#' : 'index.html'}>
          <img src="/assets/growthly-mark.svg" alt="" />
          <span>Maciej Matera</span>
        </a>
        <div className="g-nav-links">
          {items.map((it) => (
            <a key={it.label} href={it.href}>{it.label}</a>
          ))}
        </div>
        <div className="g-nav-cta">
          <a className="g-btn g-btn--accent" href={link('#kontakt')}>
            Darmowy audyt <i data-lucide="arrow-right"></i>
          </a>
          <button
            className="g-nav-burger"
            aria-label={open ? 'Zamknij menu' : 'Otwórz menu'}
            aria-expanded={open}
            onClick={() => setOpen(o => !o)}
          >
            <i data-lucide={open ? 'x' : 'menu'}></i>
          </button>
        </div>
      </nav>

      <div className={"g-nav-scrim" + (open ? ' open' : '')} onClick={() => setOpen(false)}></div>
      <div className={"g-nav-mobile" + (open ? ' open' : '')} role="dialog" aria-label="Menu">
        {items.map((it) => (
          <a key={it.label} href={it.href} onClick={() => setOpen(false)}>{it.label}</a>
        ))}
        <div className="g-nav-mobile-cta">
          <a className="g-btn g-btn--accent" href={link('#kontakt')} onClick={() => setOpen(false)}>
            Umów darmowy audyt <i data-lucide="arrow-right"></i>
          </a>
        </div>
      </div>
    </React.Fragment>
  );
}

window.Nav = Nav;