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

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { href: '#how', label: 'How it works' },
    { href: '#features', label: 'Platform' },
    { href: '#pricing', label: 'Pricing' },
    { href: '#customers', label: 'Customers' },
    { href: '#faq', label: 'FAQ' },
  ];
  return (
    <nav className={"site-nav" + (scrolled ? " is-scrolled" : "")}>
      <div className="site-nav__inner">
        <a href="#" className="site-nav__brand">
          <img src="assets/logo-mark-transparent.png" alt="Asteroid Recruiting" />
          <span>ASTEROID</span>
        </a>
        <div className="site-nav__links">
          {links.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="site-nav__cta">
          <a href="#" className="btn btn-ghost btn-sm site-nav__signin">Sign in</a>
          <a href="#cta" className="btn btn-primary btn-sm">Open a role <span aria-hidden>→</span></a>
        </div>
        <button
          className="site-nav__burger"
          aria-label="Toggle menu"
          onClick={() => setMobileOpen(!mobileOpen)}
        >
          <i data-lucide={mobileOpen ? "x" : "menu"}></i>
        </button>
      </div>
      {mobileOpen && (
        <div className="site-nav__mobile">
          {links.map((l) => (
            <a key={l.href} href={l.href} onClick={() => setMobileOpen(false)}>{l.label}</a>
          ))}
          <a href="#" className="btn btn-ghost btn-sm">Sign in</a>
          <a href="#cta" className="btn btn-primary btn-sm" onClick={() => setMobileOpen(false)}>Open a role →</a>
        </div>
      )}
    </nav>
  );
}

window.Nav = Nav;