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

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-brand">
        <svg className="nav-brand-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M19 3c-1 7-7 12-14 14l1.5 2.5 2-1c5-1 10-6 11-12l.5-3.5z" fill="var(--accent)" stroke="none"/>
          <path d="M5 21l2-2" stroke="var(--ink)"/>
        </svg>
        Story Builder
      </a>
      <div className="nav-links">
        <a href="#features">Features</a>
        <a href="#local">On your machine</a>
        {/*<a href="#photo-essay">Writers everywhere</a>*/}
        <a href="#pricing">Pricing</a>
        <a href="#founder">Founder</a>
      </div>
      <a href="#waitlist" className="nav-cta">Sign up for updates</a>
    </nav>
  );
}

window.Nav = Nav;