// Nav.jsx — floating ink pill; compact + drawer on mobile.
const NAV_LINKS = window.SITE_SECTION_LINKS || [
  { href: "#approach", label: "How We Work" },
  { href: "#work", label: "Case Studies" },
  { href: "#about", label: "Team" },
];

function Nav({ onBookCall }) {
  const [ready, setReady] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [scrolled, setScrolled] = React.useState(false);
  const [activeHref, setActiveHref] = React.useState(null);
  const drawerRef = React.useRef(null);
  const linksRef = React.useRef(null);
  const indicatorRef = React.useRef(null);

  const closeMenu = React.useCallback(() => setMenuOpen(false), []);
  useFocusTrap(menuOpen, drawerRef, closeMenu);

  React.useEffect(() => {
    let id2;
    const id1 = requestAnimationFrame(() => {
      id2 = requestAnimationFrame(() => setReady(true));
    });
    return () => {
      cancelAnimationFrame(id1);
      if (id2) cancelAnimationFrame(id2);
    };
  }, []);

  React.useEffect(() => {
    if (!menuOpen) return undefined;
    const unlock = window.zgLockScroll?.() || (() => {});
    return unlock;
  }, [menuOpen]);

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

  React.useEffect(() => {
    const sections = NAV_LINKS
      .map((link) => {
        const id = link.href.startsWith("#") ? link.href.slice(1) : link.href;
        return document.getElementById(id);
      })
      .filter(Boolean);

    if (!sections.length) return undefined;

    const io = new IntersectionObserver(
      (entries) => {
        const visible = entries
          .filter((entry) => entry.isIntersecting)
          .sort((a, b) => b.intersectionRatio - a.intersectionRatio);
        if (visible[0]) {
          setActiveHref(`#${visible[0].target.id}`);
        }
      },
      {
        rootMargin: "-35% 0px -55% 0px",
        threshold: [0, 0.15, 0.45, 0.9],
      }
    );

    sections.forEach((section) => io.observe(section));
    return () => io.disconnect();
  }, []);

  React.useEffect(() => {
    const container = linksRef.current;
    const indicator = indicatorRef.current;
    if (!container || !indicator) return undefined;

    const place = () => {
      const target = activeHref
        ? container.querySelector(`a[href="${activeHref}"]`)
        : null;
      if (!target) {
        indicator.style.opacity = "0";
        return;
      }
      const containerRect = container.getBoundingClientRect();
      const targetRect = target.getBoundingClientRect();
      indicator.style.opacity = "1";
      indicator.style.transform = `translate3d(${targetRect.left - containerRect.left}px, 0, 0)`;
      indicator.style.width = `${targetRect.width}px`;
    };

    place();
    window.addEventListener("resize", place);
    return () => window.removeEventListener("resize", place);
  }, [activeHref]);

  const handleBookCall = () => {
    closeMenu();
    onBookCall();
  };

  return (
    <>
      <div
        className={
          "zg-nav-wrap" +
          (ready ? " zg-nav--ready" : "") +
          (scrolled ? " zg-nav--scrolled" : "")
        }
      >
        <nav className="zg-nav" aria-label="Primary">
          <a className="brand zg-nav-a" data-zg-delay="0" href="#top" aria-label="Zaigo home">
            <img
              className="mark"
              src="assets/logos/marks/logo-mark-on-ink.png"
              alt=""
            />
          </a>

          <div className="links" ref={linksRef}>
            <span
              ref={indicatorRef}
              className="zg-nav-indicator"
              aria-hidden="true"
              style={{ opacity: 0 }}
            />
            {NAV_LINKS.map((link, index) => (
              <a
                key={link.label}
                href={link.href}
                className={"zg-nav-a" + (activeHref === link.href ? " active" : "")}
                data-zg-delay={index + 1}
              >
                {link.label}
              </a>
            ))}
          </div>

          <button
            type="button"
            className="zg-nav-menu-btn zg-nav-a"
            data-zg-delay="5"
            aria-expanded={menuOpen}
            aria-controls="zg-nav-drawer"
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            onClick={() => setMenuOpen((open) => !open)}
          >
            <span className="zg-nav-menu-icon" aria-hidden="true">
              <span />
              <span />
            </span>
            <span className="zg-nav-menu-label">Menu</span>
          </button>

          <button
            type="button"
            className="cta zg-nav-a"
            data-zg-delay="6"
            onClick={handleBookCall}
          >
            <span className="zg-nav-cta-full">Book a Call</span>
            <span className="zg-nav-cta-short">Book</span>
            <span className="plus">+</span>
          </button>
        </nav>
      </div>

      {menuOpen && (
        <div
          ref={drawerRef}
          id="zg-nav-drawer"
          className="zg-nav-drawer"
          role="dialog"
          aria-modal="true"
          aria-label="Site menu"
          tabIndex={-1}
        >
          <div className="zg-nav-drawer-head">
            <a
              className="zg-nav-drawer-brand"
              href="#top"
              onClick={closeMenu}
              aria-label="Zaigo home"
            >
              <img
                src="assets/logos/full-logos/logo-wordmark-on-ink.png"
                alt="Zaigo"
              />
            </a>
            <button
              type="button"
              className="zg-nav-drawer-close"
              aria-label="Close menu"
              onClick={closeMenu}
            >
              <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                <path
                  d="M6 6 L18 18 M18 6 L6 18"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round"
                />
              </svg>
            </button>
          </div>
          <nav className="zg-nav-drawer-links" aria-label="Site sections">
            {NAV_LINKS.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="zg-nav-drawer-link"
                onClick={closeMenu}
              >
                {link.label}
              </a>
            ))}
          </nav>
          <div className="zg-nav-drawer-foot">
            <button
              type="button"
              className="zg-nav-drawer-cta zg-btn"
              onClick={handleBookCall}
            >
              Book a Call <span className="plus">+</span>
            </button>
          </div>
        </div>
      )}
    </>
  );
}

window.Nav = Nav;