/* eslint-disable */
/* global React, Bars */
const { useState: useStateNav, useEffect: useEffectNav } = React;

function Nav() {
  const [scrolled, setScrolled] = useStateNav(false);
  const [open, setOpen] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    { id: 'services', label: 'Services' },
    { id: 'builds', label: 'Builds' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact' },
  ];

  const go = (id) => {
    setOpen(false);
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <React.Fragment>
      <header className={'nav' + (scrolled ? ' is-scrolled' : '')}>
        <a className="nav__brand" href="#top" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }} aria-label="Platinum Tuning — home">
          <img src="assets/logo-wordmark.png" alt="Platinum Tuning" className="nav__logo" />
        </a>
        <nav className="nav__links" aria-label="Primary">
          {links.map((l) => (
            <button key={l.id} className="nav__link" onClick={() => go(l.id)}>{l.label}</button>
          ))}
          <button className="btn btn--primary btn--sm nav__cta" onClick={() => go('contact')}>Enquire</button>
        </nav>
        <button
          className={'nav__burger' + (open ? ' is-open' : '')}
          aria-label="Menu"
          aria-expanded={open}
          onClick={() => setOpen(!open)}
        >
          <span></span><span></span><span></span>
        </button>
      </header>
      {open && (
        <div className="nav__mobile">
          {links.map((l) => (
            <button key={l.id} onClick={() => go(l.id)}>{l.label}</button>
          ))}
          <a href="#contact" onClick={(e) => { e.preventDefault(); go('contact'); }} style={{ color: 'var(--gold)' }}>Enquire →</a>
        </div>
      )}
    </React.Fragment>
  );
}

window.Nav = Nav;