// WorkTwins — Top Navigation

function Nav({ theme, setTheme }) {
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const toggleTheme = () => {
    const next = theme === 'dark' ? 'light' : 'dark';
    setTheme(next);
  };

  return (
    <nav className={"nav " + (scrolled ? 'scrolled' : '')} aria-label="Primary">
      <div className="wrap nav-inner">
        <a href="#top" className="logo">
          <span className="mark" aria-hidden="true"></span>
          <span>WorkTwins</span>
          <small>by Subjective</small>
        </a>

        <div className="nav-links">
          <a href="#how-it-works">How it works</a>
          <a href="#workfootprint">WorkFootPrint</a>
          <a href="#privacy">Privacy</a>
          <a href="#developers">For Developers</a>
          <a href="#companies">For Companies</a>
          <a href="#faq">FAQ</a>
        </div>

        <div className="nav-spacer"></div>

        <div className="nav-actions">
          <button
            className="theme-toggle"
            onClick={toggleTheme}
            aria-label={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
            title={theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode'}
          >
            {theme === 'dark' ? <Icon.Sun /> : <Icon.Moon />}
          </button>
          <a href="#waitlist" className="btn btn--ghost">Join Waitlist</a>
          <a href="#download" className="btn btn--primary">
            <Icon.Download style={{width: 15, height: 15}} />
            Download Client
          </a>
        </div>
      </div>
    </nav>
  );
}

window.Nav = Nav;