/* Top navigation bar — fixed, with language toggle and CTA */

const Nav = ({ lang, setLang, t }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);

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

  const items = [
    { href: '#nosotros', label: t('Quiénes somos', 'About') },
    { href: '#fabricamos', label: t('Lo que fabricamos', 'What we build') },
    { href: '#capacidades', label: t('Capacidades', 'Capabilities') },
    { href: '#portafolio', label: t('Portafolio', 'Portfolio') },
    { href: '#proceso', label: t('Proceso', 'Process') },
    { href: '#contacto', label: t('Contacto', 'Contact') },
  ];

  return (
    <header
      style={{
        position: 'fixed',
        top: 0, left: 0, right: 0,
        zIndex: 100,
        backdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'blur(6px)',
        WebkitBackdropFilter: scrolled ? 'blur(20px) saturate(140%)' : 'blur(6px)',
        background: scrolled ? 'rgba(20,20,22,0.92)' : 'rgba(20,20,22,0.55)',
        borderBottom: scrolled ? '1px solid var(--hairline)' : '1px solid rgba(255,255,255,0.06)',
        transition: 'all .3s ease',
      }}
    >
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68 }}>
        <a href="#top" style={{ display: 'inline-flex', alignItems: 'center' }}>
          <AcerolabLogo size={30} variant="light" />
        </a>
        <nav className="desktop-nav" style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
          {items.map((it) => (
            <a
              key={it.href}
              href={it.href}
              className="accent-line"
              style={{
                fontSize: 13,
                color: 'rgba(244,242,238,0.75)',
                fontWeight: 450,
                letterSpacing: '-0.005em',
              }}
            >
              {it.label}
            </a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <button
            onClick={() => setLang(lang === 'es' ? 'en' : 'es')}
            className="btn btn-ghost"
            style={{ padding: '8px 12px', fontSize: 11 }}
            aria-label="Toggle language"
          >
            <span style={{ color: lang === 'es' ? '#F4F2EE' : 'rgba(244,242,238,0.4)' }}>ES</span>
            <span style={{ color: 'rgba(244,242,238,0.3)' }}>/</span>
            <span style={{ color: lang === 'en' ? '#F4F2EE' : 'rgba(244,242,238,0.4)' }}>EN</span>
          </button>
          <a
            href="https://wa.me/525578680250"
            target="_blank"
            rel="noopener"
            className="btn btn-primary cta-desktop"
            style={{ padding: '10px 18px' }}
          >
            <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.002-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            <span>{t('Cotizar', 'Get a quote')}</span>
          </a>
          <button
            className="mobile-toggle btn-ghost"
            onClick={() => setOpen(!open)}
            style={{ display: 'none', padding: 8, background: 'transparent', border: 'none', color: '#F4F2EE' }}
            aria-label="Menu"
          >
            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
              {open ? <path d="M6 6l12 12M6 18L18 6"/> : <><path d="M3 7h18"/><path d="M3 12h18"/><path d="M3 17h18"/></>}
            </svg>
          </button>
        </div>
      </div>
      {open && (
        <div className="mobile-menu" style={{ borderTop: '1px solid var(--hairline)', padding: '20px 0' }}>
          <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {items.map((it) => (
              <a key={it.href} href={it.href} onClick={() => setOpen(false)} style={{ fontSize: 18, color: '#F4F2EE' }}>
                {it.label}
              </a>
            ))}
          </div>
        </div>
      )}
      <style>{`
        @media (max-width: 1100px) {
          .desktop-nav { display: none !important; }
          .mobile-toggle { display: inline-flex !important; }
        }
        @media (max-width: 600px) {
          .cta-desktop span:last-child { display: none; }
          .cta-desktop { padding: 10px 12px !important; }
        }
      `}</style>
    </header>
  );
};

window.Nav = Nav;