/* global React */
const { useState } = React;

function NavLogo() {
  return (
    <a className="acmp-logo" style={{display:'flex',alignItems:'center',textDecoration:'none',cursor:'pointer'}}>
      <img src={window.__r('logoPrimary','assets/logo-primary.png')} alt="Academia Comunica de Mai Pistiner" style={{height:46,width:'auto',display:'block'}}/>
    </a>
  );
}

function Navbar({ mode, setMode, onCta }) {
  const items = [
    { label: 'Cursos y combos',         key: 'b2c' },
    { label: 'Academia en inglés',      key: 'en'  },
    { label: 'Combo Extremo',           key: 'extremo' },
    { label: 'Capacitaciones y Servicios', key: 'b2b' },
    { label: 'Testimonios',             key: 'testimonios' },
  ];
  return (
    <nav className="acmp-nav">
      <div className="acmp-nav-inner">
        <div className="acmp-nav-left"><NavLogo/></div>
        <div className="acmp-nav-links">
          {items.map(it => {
            const active = (it.key === 'b2c' && mode === 'b2c')
                        || (it.key === 'b2b' && mode === 'b2b');
            return (
              <a
                key={it.key}
                className={'acmp-nav-link' + (active ? ' is-active' : '')}
                onClick={() => {
                  if (it.key === 'b2c') setMode('b2c');
                  if (it.key === 'b2b') setMode('b2b');
                }}>
                {it.label}
              </a>
            );
          })}
        </div>
        <div className="acmp-nav-right">
          <button className="acmp-btn acmp-btn-primary" onClick={onCta}>
            {mode === 'b2b' ? 'Hablar con el equipo' : 'Inscribirme al curso'} <span aria-hidden="true">→</span>
          </button>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Navbar, NavLogo });