// Fixed header — one-page landing: anchor links to sections + PL/EN switch.
function Nav({ onQuote, onLegal }) {
  const { Icon } = window.ArmaekDesignSystem_06a5c5;
  const { lang, setLang } = window.ArmaekI18n.useLang();
  const t = window.ArmaekI18n.STR[lang];
  const [scrolled, setScrolled] = React.useState(false);
  const [mobOpen, setMobOpen] = React.useState(false);

  // Order follows the page: services, portfolio, process, why us, contact.
  const links = [
    ['#domov', t.nav.home],
    ['#sluzby-detail', t.nav.services],
    ['#portfolio', t.nav.portfolio],
    ['#proces', t.nav.process],
    ['#preco', t.nav.about],
    ['#kontakt', t.nav.contact],
  ];

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

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

  const linkStyle = {
    fontFamily: 'var(--font-display)', fontSize: 'var(--text-sm)', textTransform: 'uppercase',
    letterSpacing: 'var(--tracking-wide)', color: 'var(--text-muted)',
    transition: 'color var(--dur-fast)', cursor: 'pointer', whiteSpace: 'nowrap',
  };

  const LangSwitch = () => (
    <div style={{ display: 'flex', alignItems: 'center', border: '1px solid var(--border-hairline)',
      borderRadius: 'var(--radius-sm)', overflow: 'hidden' }}>
      {['pl', 'en'].map((l) => (
        <button key={l} className="lang-btn" onClick={() => setLang(l)} aria-pressed={lang === l}
          aria-label={l === 'pl' ? 'Polski' : 'English'}
          style={{ padding: '9px 14px', background: lang === l ? 'var(--gold-500)' : 'transparent',
            color: lang === l ? 'var(--text-on-gold)' : 'var(--text-muted)', border: 'none', cursor: 'pointer',
            fontFamily: 'var(--font-display)', textTransform: 'uppercase', letterSpacing: 'var(--tracking-wide)',
            fontSize: 'var(--text-2xs)', transition: 'all var(--dur-fast)' }}>{l}</button>
      ))}
    </div>
  );

  return (
    <header className="site-nav" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 40,
      display: 'flex', alignItems: 'center', gap: 28,
      padding: scrolled ? '12px 48px' : '20px 48px',
      background: scrolled ? 'rgba(8,9,11,0.9)' : 'rgba(8,9,11,0.55)',
      backdropFilter: 'blur(12px)',
      borderBottom: `1px solid ${scrolled ? 'var(--border-hairline)' : 'transparent'}`,
      transition: 'all var(--dur-med) var(--ease-standard)',
    }}>
      <a href="#domov" style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <img src={window.AURL('assets/logo-horizontal.png')} alt="Armaek"
          style={{ height: scrolled ? 30 : 38, transition: 'height var(--dur-med) var(--ease-standard)' }} />
      </a>
      <nav className="desk-nav" style={{ display: 'flex', gap: 26, marginLeft: 'auto', alignItems: 'center' }}>
        {links.map(([href, label]) => (
          <a key={href} href={href} style={linkStyle}
            onMouseEnter={(e) => e.currentTarget.style.color = 'var(--text-heading)'}
            onMouseLeave={(e) => e.currentTarget.style.color = 'var(--text-muted)'}>{label}</a>
        ))}
      </nav>
      <div className="desk-nav" style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        <LangSwitch />
        <button className="btn btn-primary btn-md" onClick={onQuote}>
          {t.quote} <Icon name="arrow-right" size={16} className="arr" />
        </button>
      </div>
      {/* Mobile: language switch + hamburger */}
      <div className="mob-lang" style={{ display: 'none', marginLeft: 'auto', alignItems: 'center', gap: 12 }}>
        <LangSwitch />
        <button className="mob-menu-btn" aria-label={mobOpen ? 'Close menu' : 'Menu'}
          aria-expanded={mobOpen} onClick={() => setMobOpen(!mobOpen)}>
          <Icon name={mobOpen ? 'x' : 'menu'} size={22} />
        </button>
      </div>
      {/* Portal: header's backdrop-filter would otherwise trap position:fixed */}
      {mobOpen && ReactDOM.createPortal(
        <div className="mob-overlay" role="dialog" aria-label="Menu">
          <button className="mob-close" aria-label="Close menu" onClick={() => setMobOpen(false)}>
            <Icon name="x" size={24} />
          </button>
          <nav style={{ display: 'flex', flexDirection: 'column' }}>
            {links.map(([href, label]) => (
              <a key={href} href={href} className="mlink"
                onClick={(e) => {
                  // close first (body overflow unlock), then scroll
                  e.preventDefault(); setMobOpen(false);
                  setTimeout(() => {
                    const el = document.getElementById(href.slice(1));
                    if (el) el.scrollIntoView({ behavior: 'smooth' });
                    history.replaceState(null, '', href);
                  }, 60);
                }}>
                {label} <Icon name="chevron-right" size={20} />
              </a>
            ))}
          </nav>
          <button className="btn btn-primary btn-lg" style={{ marginTop: 32 }}
            onClick={() => { setMobOpen(false); onQuote(); }}>
            {t.quote} <Icon name="arrow-right" size={17} className="arr" />
          </button>
          <div className="legal-row">
            <button onClick={() => { setMobOpen(false); onLegal && onLegal('privacy'); }}>{t.legal.privacy}</button>
            <button onClick={() => { setMobOpen(false); onLegal && onLegal('terms'); }}>{t.legal.terms}</button>
          </div>
        </div>,
        document.body
      )}
    </header>
  );
}

window.Nav = Nav;