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

function Logo({ size = 42 }) {
  return (
    <a href="#" className="nav__logo" onClick={(e) => { e.preventDefault(); window.__navigate && window.__navigate("home"); }}>
      <img
        src="assets/favicon-new-192.png"
        alt="Lanexa"
        className="nav__logo-img"
        width={size}
        height={size}
        style={{ width: size, height: size, objectFit: "contain", display: "block", borderRadius: size * 0.24, boxShadow: "0 6px 18px -6px rgba(0,0,0,0.55)" }}
      />
      <div className="nav__logo-word">Lanexa</div>
    </a>
  );
}

function Nav({ page, theme, toggleTheme }) {
  const [scrolled, setScrolled] = useStateNav(false);
  const [menuOpen, setMenuOpen] = useStateNav(false);
  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const go = (p) => (e) => { e.preventDefault(); setMenuOpen(false); window.__navigate && window.__navigate(p); };
  const goSection = (id) => (e) => {
    e.preventDefault();
    setMenuOpen(false);
    if (document.getElementById(id)) {
      window.__scrollToId && window.__scrollToId(id);
    } else {
      window.__navigate && window.__navigate("home");
      setTimeout(() => window.__scrollToId && window.__scrollToId(id), 180);
    }
  };
  return (
    <nav className={`nav ${scrolled || menuOpen ? "scrolled" : ""}`}>
      <Logo />
      <ul className="nav__links">
        <li><a href="#" className={page === "serve" ? "active" : ""} onClick={go("serve")}>Customers</a></li>
        <li><a href="#" className={page === "dispatch" ? "active" : ""} onClick={go("dispatch")}>Dispatch</a></li>
        <li><a href="#" onClick={goSection("features")}>Product</a></li>
        <li><a href="#" className={page === "pricing" ? "active" : ""} onClick={go("pricing")}>Pricing</a></li>
        <li><a href="#" onClick={goSection("resources")}>Resources</a></li>
      </ul>
      <div className="nav__right">
        <button className="theme-toggle" onClick={toggleTheme} aria-label="Toggle theme">
          <div className="knob" />
        </button>
        <a href="https://app.lanexa.io/" className="btn btn--ghost nav__signin">Sign in</a>
        <a href="/contact" className="btn btn--solid nav__demo" onClick={go("contact")}>Book a demo <Arrow /></a>
        <button className={`nav__burger ${menuOpen ? "open" : ""}`} onClick={() => setMenuOpen(o => !o)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </div>

      <div className={`nav__mobile ${menuOpen ? "open" : ""}`}>
        <a href="#" className={page === "serve" ? "active" : ""} onClick={go("serve")}>Customers</a>
        <a href="#" className={page === "dispatch" ? "active" : ""} onClick={go("dispatch")}>Dispatch</a>
        <a href="#" onClick={goSection("features")}>Product</a>
        <a href="#" className={page === "pricing" ? "active" : ""} onClick={go("pricing")}>Pricing</a>
        <a href="#" onClick={goSection("resources")}>Resources</a>
        <div className="nav__mobile-cta">
          <a href="https://app.lanexa.io/" className="btn btn--ghost">Sign in</a>
          <a href="/contact" className="btn btn--solid" onClick={go("contact")}>Book a demo <Arrow /></a>
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav, Logo });