const { useState, useEffect } = React;

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const isHome = window.location.pathname === '/' ||
                 window.location.pathname.endsWith('/index.html') ||
                 window.location.pathname.endsWith('/');
  const link = (hash) => isHome ? hash : `index.html${hash}`;

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={"site-nav" + (scrolled ? " scrolled" : "")}>
      <div className="site-nav-inner">
        <a href={isHome ? "#top" : "index.html"} className="brand">luminaya<span className="dot">.</span></a>
        <div className="links">
          <a href={link("#services")}>services</a>
          <a href={link("#how-we-work")}>how we work</a>
          <a href={link("#team")}>team</a>
          <a href={link("#contact")}>contact</a>
        </div>
        <a href={link("#contact")} className="btn btn-primary btn-sm">Start a project →</a>
      </div>
    </nav>
  );
}

window.Nav = Nav;