/* global React, Icon, Button */
const { useState: useNavState, useEffect: useNavEffect } = React;

function Nav({ theme, onToggleTheme }) {
  const [scrolled, setScrolled] = useNavState(false);
  const [open, setOpen] = useNavState(false);
  useNavEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 16);
    window.addEventListener('scroll', onScroll); onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [['Services', '#services'], ['Why us', '#why'], ['Work', '#work'], ['Approach', '#approach']];
  const dark = theme === 'dark';
  // At the top the nav floats over the always-dark hero -> force light treatment.
  const overHero = !scrolled;
  const logo = 'assets/fracto-mark.png';
  return (
    <header className={`nav${scrolled ? ' nav-scrolled' : ' nav-top'}`}>
      <div className="wrap nav-inner">
        <a href="#top" className="nav-brand">
          <img src={logo} alt="Fracto" className="nav-mark" />
          <span className="nav-wm">Fracto Services</span>
        </a>
        <nav className="nav-links">
          {links.map(([l, h]) => <a key={l} href={h} className="nav-link">{l}</a>)}
        </nav>
        <div className="nav-actions">
          <button className="nav-icbtn" onClick={onToggleTheme} aria-label="Toggle theme">
            <Icon name={dark ? 'sun' : 'moon'} size={18} />
          </button>
          <Button variant={dark ? 'cyan' : 'primary'} icon="arrow" as="a" href="mailto:info@fractoservices.com?subject=Booking%20a%20working%20session">Book a session</Button>
          <button className="nav-icbtn nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu">
            <Icon name={open ? 'close' : 'menu'} size={20} />
          </button>
        </div>
      </div>
      {open && <div className="nav-mobile">
        {links.map(([l, h]) => <a key={l} href={h} className="nav-link" onClick={() => setOpen(false)}>{l}</a>)}
      </div>}
    </header>
  );
}
window.Nav = Nav;