const { useState, useEffect } = React;

const Nav = ({ lang, setLang, activeSection, onNav }) => {
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const t = window.DICT[lang];

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener('scroll', onScroll);
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
  ['services', t.nav.services],
  ['clients', t.nav.clients],
  ['team', t.nav.team],
  ['contact', t.nav.contact]];


  const handleClick = (e, id) => {
    e.preventDefault();
    setMenuOpen(false);
    onNav(id);
  };

  return (
    <>
      <nav className={`top ${scrolled ? 'scrolled' : ''}`}>
        <div className="inner">
          <a href="#top" className="brand" onClick={(e) => handleClick(e, 'top')}>
            <div className="brand-mark"><window.Icon name="logo" size={34} /></div>
            <div className="brand-text">
              <span className="brand-name" style={{ fontSize: "30px" }}>unbekannte <em>Farbe</em></span>
              <span className="brand-sub" style={{ fontSize: "12px" }}>Design &amp; Trading</span>
            </div>
          </a>

          <div className="nav-links desktop">
            {links.map(([id, label]) =>
            <a key={id} href={`#${id}`}
            className={activeSection === id ? 'active' : ''}
            onClick={(e) => handleClick(e, id)}>{label}</a>
            )}
            <div className="lang-toggle" role="group" aria-label="Language">
              <button className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>ES</button>
              <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
            </div>
          </div>

          <button className="menu-btn" onClick={() => setMenuOpen(!menuOpen)}>
            {menuOpen ? 'Cerrar' : 'Menú'}
          </button>
        </div>
      </nav>

      <div className={`mobile-menu ${menuOpen ? 'open' : ''}`}>
        {links.map(([id, label]) =>
        <a key={id} href={`#${id}`} onClick={(e) => handleClick(e, id)}>{label}</a>
        )}
        <div style={{ marginTop: 32 }} className="lang-toggle">
          <button className={lang === 'es' ? 'active' : ''} onClick={() => setLang('es')}>ES</button>
          <button className={lang === 'en' ? 'active' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </div>
    </>);

};

window.Nav = Nav;