const Logo = ({ size = 28 }) => (
  <a href="/" style={{ display:'flex', alignItems:'center', textDecoration:'none' }}>
    <img
      src="/logozapflux.png"
      alt="ZapFlux"
      style={{ height: size + 8, width:'auto', display:'block' }}
    />
  </a>
);

// Minimal text language switcher (no flag) — auto-detected default, manual override.
const LangSwitch = () => {
  const cur = window.LANG;
  return (
    <div className="only-desktop" style={{ display:'flex', alignItems:'center', gap:2, color:'var(--ink-4)', fontSize:12.5, fontFamily:"'Geist Mono',monospace" }}>
      {window.LANGS.map((lng, i) => (
        <React.Fragment key={lng}>
          {i > 0 && <span style={{ opacity:0.4 }}>·</span>}
          <button
            onClick={() => window.setLang(lng)}
            style={{
              padding:'4px 6px', fontSize:12.5, textTransform:'uppercase',
              color: lng === cur ? 'var(--green)' : 'var(--ink-3)',
              fontWeight: lng === cur ? 600 : 400,
            }}
          >{lng}</button>
        </React.Fragment>
      ))}
    </div>
  );
};

const Nav = () => {
  const t = L('nav');
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', on, { passive:true });
    return () => window.removeEventListener('scroll', on);
  }, []);

  return (
    <header style={{
      position:'fixed', top:0, left:0, right:0, zIndex:50,
      transition:'all .3s ease',
      padding: scrolled ? '12px 0' : '20px 0',
    }}>
      <div className="container" style={{ display:'flex' }}>
        <div style={{
          flex:1, display:'flex', alignItems:'center', gap:36,
          padding:'10px 14px 10px 18px',
          background: scrolled ? 'rgba(8,12,10,0.7)' : 'rgba(8,12,10,0.4)',
          backdropFilter:'blur(20px)', WebkitBackdropFilter:'blur(20px)',
          border:'1px solid var(--line)',
          borderRadius: 18,
        }}>
          <Logo />
          <nav style={{ display:'flex', gap:28, marginLeft:18 }} className="only-desktop">
            {[
              [t.produto,'#features'],
              [t.how,'#how'],
              [t.tech,'#tech'],
              [t.roi,'#roi'],
              [t.pricing,'#pricing'],
            ].map(([label, href]) => (
              <a key={href} href={href} style={{ fontSize:14, color:'var(--ink-2)', whiteSpace:'nowrap' }}>
                {label}
              </a>
            ))}
          </nav>
          <div style={{ marginLeft:'auto', display:'flex', gap:10, alignItems:'center' }}>
            <LangSwitch />
            <a href="/auth" className="only-desktop" style={{ color:'var(--ink-2)', fontSize:14, padding:'10px 14px' }}>{t.signin}</a>
            <a href="/signup" className="btn btn-primary" style={{ height:42, padding:'0 16px', fontSize:14, whiteSpace:'nowrap' }}>
              {t.cta} <Icon name="arrow" size={14}/>
            </a>
          </div>
        </div>
      </div>
    </header>
  );
};

window.Nav = Nav;
window.Logo = Logo;