/** @jsx React.createElement */
const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const [, force] = useState(0);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    const onBrand = () => force(n => n + 1);
    window.addEventListener('scroll', onScroll);
    window.addEventListener('brand:rerender', onBrand);
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('brand:rerender', onBrand);
    };
  }, []);

  const B = window.BRAND;
  const email = `${B.emailLocal}@${B.domain}`;

  const links = [
    { href: '#home', label: 'HOME' },
    { href: '#about', label: 'NOSOTROS' },
    { href: '#service', label: 'SERVICIOS' },
  ];

  return (
    <>
      {/* top utility bar */}
      <div className="utility-bar">
        <div className="container utility-inner">
          <div className="util-item"><Icon name="phone" /><span>{B.phone}</span></div>
          <div className="util-item"><Icon name="mail" /><a href={`mailto:${email}`}>{email}</a></div>
          {B.showSocial && (
            <div className="util-item util-social">
              <span className="util-follow">Síguenos en</span>
              <a href="#" aria-label="LinkedIn"><Icon name="linkedin" /></a>
              <a href="#" aria-label="Twitter"><Icon name="twitter" /></a>
              <a href="#" aria-label="Facebook"><Icon name="facebook" /></a>
            </div>
          )}
        </div>
      </div>

      <nav className={`nav ${scrolled ? 'nav-scrolled' : ''}`}>
        <div className="container nav-inner">
          <a href="#home" className="nav-brand">
            <img src="assets/logo.png" alt="" className="nav-monogram" />
            <span className="nav-wordmark"><b>Gitten</b> <span className="nw-dim">Consulting</span></span>
          </a>
          <button className="nav-toggle" onClick={() => setOpen(!open)} aria-label="Menu">
            <span /><span /><span />
          </button>
          <div className={`nav-links ${open ? 'nav-links-open' : ''}`}>
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
            ))}
            <a href="#contact" className="nav-cta" onClick={() => setOpen(false)}>{B.ctaLabel}</a>
          </div>
        </div>
      </nav>
    </>
  );
}

window.Nav = Nav;