// MEMORI — Navigation
// Detect base path: '' from root, '../' from articles/ subfolder
const _NAV_BASE = window.location.pathname.includes('/articles/') ? '../' : '';

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);
  const [outilsOpen, setOutilsOpen] = React.useState(false);
  const outilsRef = React.useRef(null);

  React.useEffect(() => {
    const handler = (e) => {
      if (outilsRef.current && !outilsRef.current.contains(e.target)) {
        setOutilsOpen(false);
      }
    };
    document.addEventListener('mousedown', handler);
    return () => document.removeEventListener('mousedown', handler);
  }, []);

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

  React.useEffect(() => {
    document.body.style.overflow = mobileOpen ? 'hidden' : '';
  }, [mobileOpen]);

  const close = () => setMobileOpen(false);

  return (
    <>
      <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
        <div className="nav-inner">
          <a href="/" className="nav-logo" aria-label="MEMORI">
            <img src={_NAV_BASE + "assets/memori-logo-primaire-2.svg"} alt="MEMORI" />
          </a>
          <div className="nav-center">
            <a href="/#services">Service</a>
            <a href="/#realisations">Cas clients</a>
            <a href="/blog">Blog</a>
            <div className={`nav-dropdown ${outilsOpen ? 'open' : ''}`} ref={outilsRef}>
              <button className="nav-dropdown-trigger" onClick={() => setOutilsOpen(o => !o)}>
                Outils <span className="nav-dropdown-caret">▾</span>
              </button>
              <div className="nav-dropdown-menu">
                <a href="/scan-linkedin" className="nav-dropdown-item">
                  <span className="nav-dropdown-icon">↗</span>
                  Scan LinkedIn
                </a>
              </div>
            </div>
          </div>
          <div className="nav-right">
            <a className="nav-newsletter" href="https://thememoriletters.kit.com" target="_blank" rel="noopener noreferrer">
              Newsletter <span className="ext">↗</span>
            </a>
            <a href="https://calendly.com/marlet-memori/decouverte" target="_blank" rel="noopener noreferrer" className="btn btn-ruby">Réserver un appel</a>
            <button className={`burger ${mobileOpen ? 'open' : ''}`} onClick={() => setMobileOpen(o => !o)} aria-label="Menu">
              <span></span><span></span><span></span>
            </button>
          </div>
        </div>
      </nav>
      <div className={`mobile-drawer ${mobileOpen ? 'open' : ''}`}>
        <a href="/#services" onClick={close}>Service</a>
        <a href="/#realisations" onClick={close}>Cas clients</a>
        <a href="/#faq" onClick={close}>FAQ</a>
        <a href="/blog" onClick={close}>Blog</a>
        <div className="mobile-drawer-group">
          <span className="mobile-drawer-group-label">Outils</span>
          <a href="/scan-linkedin" onClick={close}>Scan LinkedIn ↗</a>
        </div>
      </div>
    </>
  );
}
Object.assign(window, { Nav });
