function Nav({ lang, setLang }) {
  const c = window.COPY.nav[lang];
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { id: 'product',  label: c.product },
    { id: 'how',      label: c.howItWorks },
    { id: 'features', label: c.features },
    { id: 'pricing',  label: c.pricing },
    { id: 'erp',      label: c.api, href: 'https://syncapi-mvp.tonniqa.com/docs/index.html', external: true },
    { id: 'faq',      label: c.faq },
  ];
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 100,
      background: scrolled ? 'rgba(10,20,40,0.92)' : 'rgba(10,20,40,0.6)',
      backdropFilter: 'blur(16px)', WebkitBackdropFilter: 'blur(16px)',
      borderBottom: '1px solid ' + (scrolled ? 'var(--border)' : 'transparent'),
      transition: 'background 200ms, border-color 200ms',
    }}>
      <div className="container" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72,
      }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center' }}>
          <img src="assets/logo-tonniqa.png" alt="Tonniqa" style={{ height: 38 }} />
        </a>
        <ul style={{ display: 'flex', gap: '1.8rem', alignItems: 'center', listStyle: 'none', margin: 0, padding: 0 }} className="nav-links">
          {links.map(l => (
            <li key={l.id}>
              <a
                href={l.href || `#${l.id}`}
                target={l.external ? '_blank' : undefined}
                rel={l.external ? 'noopener noreferrer' : undefined}
                style={{ color: 'var(--text-secondary)', fontSize: 14, fontWeight: 500 }}
              >{l.label}</a>
            </li>
          ))}
        </ul>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ display: 'flex', background: 'var(--bg-card)', border: '1px solid var(--border)', borderRadius: 8, overflow: 'hidden' }}>
            <button onClick={() => setLang('pl')} style={{
              background: lang === 'pl' ? 'var(--accent)' : 'transparent',
              color: lang === 'pl' ? '#fff' : 'var(--text-muted)',
              border: 'none', padding: '5px 10px', fontSize: 11, fontWeight: 700, cursor: 'pointer', letterSpacing: '0.05em',
            }}>PL</button>
            <button onClick={() => setLang('en')} style={{
              background: lang === 'en' ? 'var(--accent)' : 'transparent',
              color: lang === 'en' ? '#fff' : 'var(--text-muted)',
              border: 'none', padding: '5px 10px', fontSize: 11, fontWeight: 700, cursor: 'pointer', letterSpacing: '0.05em',
            }}>EN</button>
          </div>
          <a href="https://app-mvp.tonniqa.com/" target="_blank" rel="noopener noreferrer" style={{
            color: 'var(--text-primary)', padding: '8px 14px', borderRadius: 10,
            fontSize: 13, fontWeight: 600, border: '1px solid var(--border-strong)',
            display: 'inline-flex', alignItems: 'center', gap: 6,
          }}>{c.login}</a>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </nav>
  );
}
window.Nav = Nav;
export default Nav;