/* global React */
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const Icons = window.Icons || {};
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navStyle = {
    position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
    transition: 'background .25s ease, backdrop-filter .25s ease, border-color .25s ease',
    background: scrolled ? 'rgba(6,7,13,0.72)' : 'transparent',
    backdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
    WebkitBackdropFilter: scrolled ? 'blur(14px) saturate(140%)' : 'none',
    borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : '1px solid transparent',
    color: 'white',
  };

  const links = [
    ['Cómo funciona', '#how'],
    ['Portales', '#portals'],
    ['Campañas', '#afiliads'],
    ['Precios', '#pricing'],
    ['FAQ', '#faq'],
  ];

  return (
    <nav style={navStyle}>
      <div className="container" style={{display:'flex', alignItems:'center', justifyContent:'space-between', height:72}}>
        <a href="#top" style={{display:'flex', alignItems:'center', gap:10}}>
          <span style={{fontFamily:'var(--f-display)', fontWeight:700, letterSpacing:'-0.02em', fontSize:22, color:'white'}}>BOBAX</span>
          <span style={{fontFamily:'var(--f-mono)', fontSize:10, color:'var(--brand-300)', border:'1px solid rgba(255,255,255,0.15)', padding:'3px 7px', borderRadius:999, letterSpacing:'0.12em', textTransform:'uppercase'}}>Tecnología Multinivel</span>
        </a>

        <div className="nav-links" style={{display:'flex', gap:32, alignItems:'center'}}>
          {links.map(([label, href]) => (
            <a key={label} href={href} style={{fontSize:14, color:'rgba(255,255,255,0.78)', fontWeight:500}}>{label}</a>
          ))}
        </div>

        <div style={{display:'flex', gap:10, alignItems:'center'}}>
          <a href="https://app.bobaxmultinivel.com" target="_blank" rel="noopener" className="nav-secondary" style={{fontSize:14, color:'rgba(255,255,255,0.78)', fontWeight:500}}>Entrar</a>
          <a href="#book" data-book-call className="btn btn-primary" style={{padding:'10px 18px', fontSize:14}}>
            Empezar
            {Icons.ArrowRight && <Icons.ArrowRight size={14}/>}
          </a>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          nav .nav-links { display: none !important; }
          nav .nav-secondary { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

window.Nav = Nav;