/* eslint-disable */
// Shared helpers and Nav component for all 3 pages
// Loaded after <page>-data.jsx (which provides SHARED_NAV + PAGE_META)
// and before <page>-sections.jsx (which uses FadeIn/useInView).

const { useState: __sharedUseState, useEffect: __sharedUseEffect, useRef: __sharedUseRef } = React;

function useInView(threshold = 0.1) {
  const ref = __sharedUseRef(null);
  const [inView, setInView] = __sharedUseState(false);
  __sharedUseEffect(() => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const vh = window.innerHeight || document.documentElement.clientHeight;
    if (r.top < vh && r.bottom > 0) { setInView(true); return; }
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { setInView(true); io.disconnect(); } });
    }, { threshold, rootMargin: "0px 0px -40px 0px" });
    io.observe(el);
    const t = setTimeout(() => setInView(true), 1200);
    return () => { io.disconnect(); clearTimeout(t); };
  }, [threshold]);
  return [ref, inView];
}

function FadeIn({ children, delay = 0 }) {
  const [ref, inView] = useInView();
  return (
    <div ref={ref} className={"fade-in " + (inView ? "is-in" : "")} style={{ transitionDelay: `${delay}ms` }}>
      {children}
    </div>
  );
}

function Nav() {
  const pageId = (window.PAGE_META && window.PAGE_META.id) || "";
  const projectName = (window.PAGE_META && window.PAGE_META.projectName) || "Molekula";
  const projectMeta = (window.PAGE_META && window.PAGE_META.projectMeta) || "";
  const items = (window.SHARED_NAV) || [];
  const [menuOpen, setMenuOpen] = __sharedUseState(false);

  __sharedUseEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

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

  return (
    <nav className={"nav" + (menuOpen ? " nav--open" : "")}>
      <div className="container nav-inner">
        <a href="index.html" className="nav-brand" onClick={close}>
          <img src="brand-logos/direct-group-white.svg" alt="Direct" style={{ height: "40px", width: "81px" }} />
          <span className="nav-divider"></span>
          <span className="nav-project">
            <span className="nav-project-name">{projectName}</span>
            <span className="nav-project-meta">{projectMeta}</span>
          </span>
        </a>
        <div className="nav-links">
          {items.map((l) =>
            <a key={l.id} href={l.href} className={"nav-link " + (pageId === l.id ? "is-active" : "")}>{l.label}</a>
          )}
        </div>
        <button
          className="nav-hamburger"
          aria-label={menuOpen ? "Zavřít menu" : "Otevřít menu"}
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(!menuOpen)}
        >
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>

      <div className={"nav-mobile-overlay" + (menuOpen ? " is-open" : "")} aria-hidden={!menuOpen}>
        <div className="nav-mobile-links">
          {items.map((l) => (
            <a
              key={l.id}
              href={l.href}
              className={"nav-mobile-link" + (pageId === l.id ? " is-active" : "")}
              onClick={close}
            >
              {l.label}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

Object.assign(window, { Nav, FadeIn, useInView });