/* Mesh website — sticky top navigation */

function Nav({ onCta, ctaClass }) {
  const navRef = React.useRef(null);
  const [menu, setMenu] = React.useState(false);
  const [aboutMenu, setAboutMenu] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const closeTimer = React.useRef(null);
  const aboutCloseTimer = React.useRef(null);

  React.useEffect(() => {
    const onScroll = () => {
      if (navRef.current) navRef.current.classList.toggle('nav-scrolled', window.scrollY > 1);
      clearTimeout(closeTimer.current);
      clearTimeout(aboutCloseTimer.current);
      setMenu(false);
      setAboutMenu(false);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'Escape') { setMenu(false); setMobileOpen(false); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  // Close mobile menu on route change / scroll
  React.useEffect(() => {
    if (mobileOpen) document.body.style.overflow = 'hidden';
    else document.body.style.overflow = '';
    return () => { document.body.style.overflow = ''; };
  }, [mobileOpen]);

  const openMenu = () => { clearTimeout(closeTimer.current); setMenu(true); };
  const scheduleClose = () => {
    clearTimeout(closeTimer.current);
    closeTimer.current = setTimeout(() => setMenu(false), 140);
  };
  const openAbout = () => { clearTimeout(aboutCloseTimer.current); setAboutMenu(true); };
  const scheduleCloseAbout = () => {
    clearTimeout(aboutCloseTimer.current);
    aboutCloseTimer.current = setTimeout(() => setAboutMenu(false), 140);
  };

  return (
    <nav ref={navRef} className={'nav' + (menu ? ' nav-menu-open' : '') + (mobileOpen ? ' nav-mobile-open' : '')}>
      <div className="wrap nav-inner">
        <a href="/" className="nav-brand" aria-label="Mesh home">
          <img className="nav-logo nav-logo-white" src={window.__assets("mesh-logo-white.png")} alt="Mesh" />
          <img className="nav-logo nav-logo-blue" src={window.__assets("mesh-logo-blue.png")} alt="Mesh" />
        </a>
        <div className="nav-links">
          <a className={'nav-link nav-prod' + (menu ? ' active' : '')}
                href="/product-overview"
                onMouseEnter={openMenu} onMouseLeave={scheduleClose}
                aria-haspopup="true" aria-expanded={menu}>
            Product
            <Icon name="chevron-down" className={'chev' + (menu ? ' up' : '')} stroke={2} />
          </a>
          <a className="nav-link" href="/blog">Blog</a>
          {/* About nav item — hidden for now
          <div className="nav-item" onMouseEnter={openAbout} onMouseLeave={scheduleCloseAbout}>
            <a className={'nav-link nav-prod' + (aboutMenu ? ' active' : '')}
                  href="/about"
                  aria-haspopup="true" aria-expanded={aboutMenu}>
              About
              <Icon name="chevron-down" className={'chev' + (aboutMenu ? ' up' : '')} stroke={2} />
            </a>
            <div className={'res-menu' + (aboutMenu ? ' open' : '')} role="menu">
              <a className="res-link" href="/about#leadership" role="menuitem">Leadership</a>
              <a className="res-link" href="/about#advisory-board" role="menuitem">Advisory board</a>
            </div>
          </div>
          */}
          <a className="nav-link" href="/#faqs">FAQs</a>
        </div>
        <div className="nav-actions">
          <button className={ctaClass || 'btn btn-primary'} onClick={onCta}>Get started</button>
          <button className="nav-hamburger" aria-label="Open menu" aria-expanded={mobileOpen}
                  onClick={() => setMobileOpen(!mobileOpen)}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

      {/* Mobile drawer */}
      {mobileOpen && (
        <div className="nav-mobile-backdrop" onClick={() => setMobileOpen(false)} />
      )}
      <div className={'nav-mobile-drawer' + (mobileOpen ? ' open' : '')}>
        <div className="nav-mobile-links">
          <a className="nav-mobile-link" href="/product-overview" onClick={() => setMobileOpen(false)}>Product overview</a>
          <a className="nav-mobile-link" href="/blog" onClick={() => setMobileOpen(false)}>Blog</a>
          {/* <a className="nav-mobile-link" href="/about" onClick={() => setMobileOpen(false)}>About us</a> */}{/* hidden for now */}
          <a className="nav-mobile-link" href="/#faqs" onClick={() => setMobileOpen(false)}>FAQs</a>
        </div>
        <div className="nav-mobile-cta">
          <button className="btn btn-primary" style={{ width: '100%', borderRadius: 999, justifyContent: 'center' }}
                  onClick={() => { setMobileOpen(false); onCta && onCta(); }}>
            Get started
          </button>
        </div>
      </div>

      <ProductMenu open={menu} onEnter={openMenu} onLeave={scheduleClose} onClose={() => setMenu(false)} />
    </nav>
  );
}

Object.assign(window, { Nav });