/* global React */
const { useState: _nUse, useEffect: _nEf } = React;

function Nav() {
  const [solid, setSolid] = _nUse(false);
  _nEf(() => {
    function onScroll() { setSolid(window.scrollY > 40); }
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  function scrollTo(id) {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop - 40, behavior: 'smooth' });
  }

  return (
    <nav className={`nav ${solid ? 'solid' : ''}`}>
      <div className="nav-inner">
        <div className="brand">
          <span className="brand-dot"></span>
          BeBoosted
          <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--muted)', fontWeight: 400, letterSpacing: '0.06em', marginLeft: 6 }}>v0.4</span>
        </div>
        <div className="nav-links">
          <a onClick={() => scrollTo('problem')} style={{ cursor: 'pointer' }}>Problem</a>
          <a onClick={() => scrollTo('system')} style={{ cursor: 'pointer' }}>Shift</a>
          <a onClick={() => scrollTo('macro')} style={{ cursor: 'pointer' }}>Macro</a>
          <a onClick={() => scrollTo('model')} style={{ cursor: 'pointer' }}>System</a>
          <a onClick={() => scrollTo('today')} style={{ cursor: 'pointer' }}>Today</a>
        </div>
        <button className="btn-apply" onClick={() => scrollTo('access')}>
          <span className="apply-dot"></span> Apply
        </button>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav });