// Shared public navigation for the landing page, public studies, and selected work.
function SharedCaseNav({ landing = false }) {
  const [scrolled, setScrolled] = useState(false);
  const [onLight, setOnLight] = useState(false);
  const [casesOpen, setCasesOpen] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  const [mobileCasesOpen, setMobileCasesOpen] = useState(false);
  const dropdownRef = useRef(null);
  const caseButtonRef = useRef(null);
  const burgerRef = useRef(null);
  const dialogRef = useRef(null);
  const closeRef = useRef(null);
  const openReasonRef = useRef(null);
  const landingPath = landing ? "" : "/conversion";
  const links = [
    { label: "The Audit", href: landingPath + "#convert" },
    { label: "Case Studies", cases: true },
    { label: "How it works", href: landingPath + "#how" },
    { label: "FAQs", href: landingPath + "#faq" }
  ];
  const closeCases = () => { setCasesOpen(false); openReasonRef.current = null; };
  const closeMenu = () => { setMenuOpen(false); setMobileCasesOpen(false); };

  useEffect(() => {
    const onScroll = () => {
      setScrolled(window.scrollY > 24);
      setOnLight(landing && [...document.querySelectorAll(".section--light")].some((el) => {
        const rect = el.getBoundingClientRect();
        return rect.top <= 37 && rect.bottom >= 37;
      }));
    };
    const onResize = () => { if (window.innerWidth > 960) closeMenu(); else closeCases(); };
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onResize);
    onScroll();
    return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onResize); };
  }, [landing]);

  useEffect(() => {
    if (!casesOpen) return;
    const outside = (event) => { if (!dropdownRef.current?.contains(event.target)) closeCases(); };
    const escape = (event) => {
      if (event.key === "Escape") { closeCases(); caseButtonRef.current?.focus(); }
    };
    document.addEventListener("pointerdown", outside);
    document.addEventListener("keydown", escape);
    return () => { document.removeEventListener("pointerdown", outside); document.removeEventListener("keydown", escape); };
  }, [casesOpen]);

  useEffect(() => {
    if (!menuOpen) return;
    const previousOverflow = document.body.style.overflow;
    const hadMenuClass = document.body.classList.contains("nav-menu-open");
    document.body.style.overflow = "hidden";
    document.body.classList.add("nav-menu-open");
    closeRef.current?.focus();
    const onKey = (event) => {
      if (event.key === "Escape") { event.preventDefault(); closeMenu(); return; }
      if (event.key !== "Tab") return;
      const focusable = [...dialogRef.current.querySelectorAll("a[href],button:not([disabled]),[tabindex='0']")]
        .filter((el) => el.getClientRects().length > 0);
      const first = focusable[0], last = focusable[focusable.length - 1];
      if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last?.focus(); }
      else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first?.focus(); }
    };
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = previousOverflow;
      if (!hadMenuClass) document.body.classList.remove("nav-menu-open");
      if (burgerRef.current?.getClientRects().length) burgerRef.current.focus();
    };
  }, [menuOpen]);

  const caseGroups = (mobile) => window.CW_PUBLIC_CASE_GROUPS.map((category) => (
    <div className="cw-case-nav-group" key={category}>
      <p className="cw-case-nav-heading">{category}</p>
      {window.CW_PUBLIC_CASES.filter((study) => study.category === category).map((study) => (
        <a key={study.slug} href={study.href} className={mobile ? "nmm-sublink" : "cw-case-nav-item"}
          aria-current={window.location.pathname.replace(/\/$/, "") === study.href ? "page" : undefined}
          onClick={() => { closeCases(); closeMenu(); }}>
          <b>{study.name}</b><span>{study.engagement}</span>
        </a>
      ))}
    </div>
  ));

  return <React.Fragment>
    <nav className={"cw-shared-nav" + (onLight ? " cw-shared-nav--light" : "")} aria-label="Main navigation" style={{
      background: onLight ? "rgba(245,245,247,0.82)" : scrolled ? "rgba(2,3,13,0.74)" : landing ? "transparent" : "rgba(2,3,13,0.4)",
      backdropFilter: scrolled || onLight || !landing ? "blur(16px)" : "none",
      WebkitBackdropFilter: scrolled || onLight || !landing ? "blur(16px)" : "none",
      borderBottomColor: onLight ? "rgba(0,0,0,0.08)" : scrolled ? "var(--border-subtle)" : "transparent"
    }}>
      <div className="wrap cw-shared-nav-inner">
        <a href={landing ? "#top" : "/conversion"} className="cw-shared-nav-brand" aria-label="Conversion Works home">
          <span className={landing ? "nav-load-logo" : undefined}><Logo height={42} dark={onLight} /></span>
          <span className="nav-byline">by Taurist</span>
        </a>
        <div className="nav-links cw-shared-nav-links">
          {links.map((link, index) => link.cases ? (
            <div key={link.label} ref={dropdownRef} className="cw-case-nav" onMouseEnter={() => {
              if (window.matchMedia("(hover: hover)").matches) { setCasesOpen(true); if (!openReasonRef.current) openReasonRef.current = "hover"; }
            }} onMouseLeave={() => { if (openReasonRef.current === "hover" && !dropdownRef.current?.contains(document.activeElement)) closeCases(); }}
              onBlur={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) closeCases(); }}>
              <button ref={caseButtonRef} type="button" className={"cw-nav-link cw-case-nav-toggle" + (landing ? " nav-load-link" : "")}
                style={{ animationDelay: `${0.46 + index * 0.05}s` }} aria-expanded={casesOpen} aria-controls="cw-public-case-menu"
                onClick={() => {
                  if (casesOpen && openReasonRef.current === "click") closeCases();
                  else { setCasesOpen(true); openReasonRef.current = "click"; }
                }} onKeyDown={(event) => {
                  if (event.key === "ArrowDown") {
                    event.preventDefault(); setCasesOpen(true); openReasonRef.current = "keyboard";
                    requestAnimationFrame(() => dropdownRef.current?.querySelector(".cw-case-nav-item")?.focus());
                  }
                }}>
                Case Studies<i className="ri-arrow-down-s-line" style={{ transform: casesOpen ? "rotate(180deg)" : "none" }} />
              </button>
              <div className="cw-case-nav-panel" id="cw-public-case-menu" hidden={!casesOpen}>
                <div className="cw-case-nav-grid">{caseGroups(false)}</div>
              </div>
            </div>
          ) : <a key={link.label} href={link.href} className={"cw-nav-link" + (landing ? " nav-load-link" : "")}
            style={{ animationDelay: `${0.46 + index * 0.05}s` }}>{link.label}</a>)}
        </div>
        <div className="nav-cta-group cw-shared-nav-actions">
          <a href={CW_BOOKING.url} data-cw-booking className={"btn btn-primary btn-sm nav-primary-cta" + (landing ? " nav-load-cta" : "")}
            style={{ animationDelay: ".64s" }}>{CW_BOOKING.label}</a>
          <button ref={burgerRef} type="button" className="nav-burger" aria-label="Open menu" aria-expanded={menuOpen}
            aria-controls="cw-mobile-navigation" onClick={() => { closeCases(); setMenuOpen(true); }}><i className="ri-menu-line" /></button>
        </div>
      </div>
    </nav>
    {menuOpen && <div ref={dialogRef} id="cw-mobile-navigation" className="nav-mobile-menu cw-mobile-nav" role="dialog" aria-modal="true" aria-label="Navigation">
      <div className="nmm-head">
        <a href={landing ? "#top" : "/conversion"} className="nmm-id" onClick={closeMenu}><Logo height={42} /><span className="nmm-byline">by Taurist</span></a>
        <button ref={closeRef} type="button" className="nmm-close" aria-label="Close menu" onClick={closeMenu}><i className="ri-close-line" /></button>
      </div>
      <nav className="nmm-links" aria-label="Mobile navigation">
        {links.map((link) => link.cases ? <div className="nmm-group" key={link.label}>
          <button type="button" className="nmm-link nmm-link--btn" aria-expanded={mobileCasesOpen} aria-controls="cw-mobile-case-menu"
            onClick={() => setMobileCasesOpen((open) => !open)}>Case Studies<i className="ri-arrow-down-s-line" style={{ transform: mobileCasesOpen ? "rotate(180deg)" : "none" }} /></button>
          <div id="cw-mobile-case-menu" className="cw-mobile-case-groups" hidden={!mobileCasesOpen}>{caseGroups(true)}</div>
        </div> : <a key={link.label} className="nmm-link" href={link.href} onClick={closeMenu}>{link.label}</a>)}
        <a href={CW_BOOKING.url} data-cw-booking className="btn btn-primary nmm-cta" onClick={closeMenu}>{CW_BOOKING.label}</a>
      </nav>
      <div className="nmm-foot">
        <a href="https://taurist.com" target="_blank" rel="noopener noreferrer">taurist</a><span>|</span>
        <a href="/siteworks" target="_blank" rel="noopener noreferrer">siteworks</a><span>|</span>
        <a href="/workers" target="_blank" rel="noopener noreferrer">workers</a>
      </div>
    </div>}
  </React.Fragment>;
}

Object.assign(window, { SharedCaseNav });