// TopNav with mega-menu hover panels — tweakable via window.__navTweaks

// Label → URL lookup for nav items. Strings that don't appear here fall back
// to "#" so the menu still renders cleanly for sections that aren't built yet.
const NAV_LINKS = {
  "AI Data Collection": "/ai-data-collection/",
  "LLM Training Data Services": "/llm-training-data/",
  "Data Annotation & Human Feedback": "/data-annotation/",
  "Prompt Engineering & Optimization": "/prompt-engineering/",
  "Model Evaluation & Benchmarking": "/model-evaluation/",
  "Multilingual AI & Internationalization": "/multilingual-ai/",
  "Safety, Risk & Trust": "/safety-risk-and-trust/",
  "Quality & Governance": "/quality-and-governance/",
  // Company sub-menu — four routes under /company/<slug>/ that
  // expand from the "Company" trigger in the top nav.
  "About Us":              "/company/about-us/",
  "Our Approach":          "/company/our-approach/",
  "Global Workforce":      "/company/global-workforce/",
  "Security & Compliance": "/company/security-and-compliance/",
  "Case Studies": "/case-studies/",
  "Blog": "/blog/",
  "Careers & Talent": "https://careers.argosmultilingual.com/",
  "Contact Us": "/contact-us/"
};

const navStructure = [
{
  key: "Solutions",
  columns: [
  { title: "", items: [
    "AI Data Collection",
    "LLM Training Data Services",
    "Data Annotation & Human Feedback",
    "Prompt Engineering & Optimization"
  ] },
  { title: "", items: [
    "Model Evaluation & Benchmarking",
    "Multilingual AI & Internationalization",
    "Safety, Risk & Trust",
    "Quality & Governance"
  ] }]

},
{ key: "Argos Myriad", noMenu: true, featured: true, href: "/myriad/", columns: [] },
// Company — mega-menu trigger covering the /company/<slug>/ routes
// plus Careers & Talent. Was previously a "About Us" leaf link;
// promoted to a section parent now that the four pages exist.
{
  key: "Company",
  columns: [
    { title: "", items: [
      "About Us",
      "Our Approach",
      "Global Workforce",
      "Security & Compliance",
      "Careers & Talent"
    ] }
  ]
},
{
  key: "Resources",
  columns: [
    { title: "", items: [
      "Blog",
      "Case Studies"
    ] }
  ]
}];


// Standard easing — used everywhere so motion feels coherent
const EASE = "cubic-bezier(.22, .8, .26, 1)";

// Embedded mega-menu content — rendered INSIDE the bar so the bar can
// grow downward to host it. Animates max-height + opacity for the expand.
const MegaMenuInline = ({ panel, isLight, textColor, anchorLeft }) => {
  // Keep the last panel visible during collapse so content doesn't blink empty
  const [shownPanel, setShownPanel] = React.useState(panel);
  const [shownAnchor, setShownAnchor] = React.useState(anchorLeft);
  React.useEffect(() => {
    if (panel) {
      setShownPanel(panel);
      if (typeof anchorLeft === "number") setShownAnchor(anchorLeft);
    }
  }, [panel, anchorLeft]);

  const visible = !!panel;
  const p = shownPanel;
  const left = typeof shownAnchor === "number" ? shownAnchor : 36;

  const headingColor = isLight ? "rgba(14,31,62,0.50)" : "rgba(255,255,255,0.55)";
  const itemColor = textColor;
  const itemHoverBg = isLight ? "rgba(14,31,62,0.06)" : "rgba(255,255,255,0.10)";
  const dividerColor = isLight ? "rgba(14,31,62,0.10)" : "rgba(255,255,255,0.14)";

  // Per-column width — keeps each column tight under the trigger word.
  const colWidth = 220;

  return (
    <div
      aria-hidden={!visible}
      style={{
        // grid-rows technique to animate height without measuring
        display: "grid",
        gridTemplateRows: visible ? "1fr" : "0fr",
        opacity: visible ? 1 : 0,
        transition: `grid-template-rows 320ms ${EASE}, opacity 220ms ${EASE}`,
        width: "100%",
        pointerEvents: visible ? "auto" : "none"
      }}
    >
      <div style={{ overflow: "hidden", minHeight: 0 }}>
        <div style={{
          borderTop: `1px solid ${dividerColor}`,
          padding: "26px 0 30px 0",
          fontFamily: "var(--font-display)"
        }}>
          <div style={{
            paddingLeft: left,
            paddingRight: 36,
            display: "flex",
            gap: 36,
            transition: `padding-left 280ms ${EASE}`
          }}>
            {p && p.columns.map((col, ci) => {
              const hasTitle = !!col.title;
              return (
              <div key={col.title || `col-${ci}`} style={{ width: colWidth, flexShrink: 0 }}>
                {hasTitle &&
                <div style={{
                  fontSize: 11, fontWeight: 500, color: headingColor,
                  textTransform: "uppercase", letterSpacing: "0.10em",
                  marginBottom: 14
                }}>
                  {col.title}
                </div>
                }
                <div style={{ display: "flex", flexDirection: "column" }}>
                  {col.items.map((item) =>
                    <a
                      key={item}
                      href={NAV_LINKS[item] || "#"}
                      style={{
                        fontSize: hasTitle ? 14 : 15,
                        fontWeight: 500, color: itemColor,
                        textDecoration: "none", lineHeight: 1.3,
                        padding: "8px 10px", marginLeft: -10,
                        borderRadius: 10,
                        transition: `background 140ms ${EASE}, color 140ms ${EASE}`,
                        display: "block"
                      }}
                      onMouseEnter={(e) => { e.currentTarget.style.background = itemHoverBg; }}
                      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
                    >
                      {item}
                    </a>
                  )}
                </div>
              </div>
            );})}
          </div>
        </div>
      </div>
    </div>
  );
};

// Mobile inline menu — lives inside the bar (just like desktop MegaMenuInline)
// and expands the bar downward. Sections accordion open/close in place, and
// share the same divider/type/easing language as desktop.
const MobileInlineMenu = ({ open, isLight, textColor, onCTA, expanded, setExpanded }) => {
  const dividerColor = isLight ? "rgba(14,31,62,0.10)" : "rgba(255,255,255,0.14)";
  const subtleText = isLight ? "rgba(14,31,62,0.50)" : "rgba(255,255,255,0.55)";
  const itemHoverBg = isLight ? "rgba(14,31,62,0.06)" : "rgba(255,255,255,0.10)";
  const ctaBg = isLight ? "#0E1F3E" : "#FFFFFF";
  const ctaFg = isLight ? "#FFFFFF" : "#0E1F3E";

  return (
    <div
      aria-hidden={!open}
      style={{
        display: "grid",
        gridTemplateRows: open ? "1fr" : "0fr",
        opacity: open ? 1 : 0,
        transition: `grid-template-rows 320ms ${EASE}, opacity 220ms ${EASE}`,
        width: "100%",
        pointerEvents: open ? "auto" : "none"
      }}
    >
      <div style={{ overflow: "hidden", minHeight: 0 }}>
        <div style={{
          borderTop: `1px solid ${dividerColor}`,
          padding: "8px 0 16px",
          fontFamily: "var(--font-display)",
          maxHeight: "calc(100vh - 200px)",
          overflowY: "auto"
        }}>
          {navStructure.map((n, i) => {
            const isOpen = expanded === n.key;
            const hasCols = n.columns && n.columns.length > 0;
            const hasMulti = hasCols && (n.columns.length > 1 || n.columns[0].items.length > 1);
            const isDirect = n.noMenu || !hasCols;
            return (
              <div key={n.key} style={{
                borderBottom: i < navStructure.length - 1 ? `1px solid ${dividerColor}` : "none"
              }}>
                {isDirect ?
                  <a href={n.href || "#"} style={{
                    width: "100%", padding: "18px 28px",
                    display: "flex", alignItems: "center", gap: 10,
                    color: textColor, textDecoration: "none",
                    fontFamily: "var(--font-display)",
                    fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em"
                  }}>
                    {n.featured &&
                      <span style={{
                        width: 8, height: 8, borderRadius: "50%",
                        background: "#30AA74",
                        boxShadow: "0 0 0 3px rgba(48,170,116,0.20)",
                        display: "inline-block"
                      }} />
                    }
                    <span>{n.key}</span>
                  </a>
                  :
                  <button
                    onClick={() => setExpanded(isOpen ? null : n.key)}
                    style={{
                      width: "100%", background: "transparent", border: "none",
                      padding: "18px 28px",
                      display: "flex", alignItems: "center", justifyContent: "space-between",
                      color: textColor, cursor: "pointer",
                      fontFamily: "var(--font-display)",
                      fontSize: 20, fontWeight: 500, letterSpacing: "-0.01em",
                      textAlign: "left",
                      transition: `background 160ms ${EASE}`
                    }}
                    onMouseEnter={(e) => { e.currentTarget.style.background = itemHoverBg; }}
                    onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
                  >
                    <span>{n.key}</span>
                    <span style={{
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      width: 26, height: 26, borderRadius: 999,
                      border: `1px solid ${dividerColor}`,
                      transition: `transform 280ms ${EASE}`,
                      transform: isOpen ? "rotate(45deg)" : "none"
                    }}>
                      <span style={{ position: "relative", width: 10, height: 10, display: "inline-block" }}>
                        <span style={{ position: "absolute", left: 0, right: 0, top: 4, height: 2, background: textColor, borderRadius: 2 }} />
                        <span style={{ position: "absolute", top: 0, bottom: 0, left: 4, width: 2, background: textColor, borderRadius: 2 }} />
                      </span>
                    </span>
                  </button>
                }
                {!isDirect &&
                <div style={{
                  display: "grid",
                  gridTemplateRows: isOpen ? "1fr" : "0fr",
                  transition: `grid-template-rows 320ms ${EASE}`
                }}>
                  <div style={{ overflow: "hidden", minHeight: 0 }}>
                    <div style={{ padding: "0 28px 22px" }}>
                      {n.columns.map((col, ci) =>
                        <div key={col.title || `col-${ci}`} style={{ marginTop: ci === 0 ? 0 : 18 }}>
                          {hasMulti && col.title &&
                            <div style={{
                              fontSize: 11, fontWeight: 500, color: subtleText,
                              textTransform: "uppercase", letterSpacing: "0.10em",
                              marginBottom: 12
                            }}>{col.title}</div>
                          }
                          <div style={{ display: "flex", flexDirection: "column" }}>
                            {col.items.map((it) =>
                              <a
                                key={it}
                                href={NAV_LINKS[it] || "#"}
                                style={{
                                  fontSize: 14, fontWeight: 500, color: textColor,
                                  textDecoration: "none", lineHeight: 1.3,
                                  padding: "10px 12px", marginLeft: -12,
                                  borderRadius: 10,
                                  transition: `background 140ms ${EASE}`,
                                  display: "block"
                                }}
                                onMouseEnter={(e) => { e.currentTarget.style.background = itemHoverBg; }}
                                onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; }}
                              >
                                {it}
                              </a>
                            )}
                          </div>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
                }
              </div>
            );
          })}

          {/* CTA — same visual language as desktop CTA, full-width inside the bar */}
          <div style={{ padding: "20px 24px 4px" }}>
            <button
              onClick={() => { window.location.href = "/contact-us/"; }}
              style={{
                width: "100%",
                background: ctaBg, color: ctaFg,
                padding: "16px 22px", borderRadius: 37,
                fontFamily: "var(--font-display)",
                fontSize: 16, fontWeight: 600,
                border: "none", cursor: "pointer",
                display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 10,
                letterSpacing: "-0.005em"
              }}
            >
              Contact us
              <span style={{ display: "inline-flex", transform: "rotate(90deg)" }}>
                <ArrowDR color={ctaFg} size={11} />
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

// Inline-loaded Argos logo. Colors the SVG by directly setting fill on every
// path after insertion — works regardless of scoped CSS / Astro style scoping.
const ArgosLogoInline = ({ width = 140, fill = "#0E1F3E" }) => {
  const [svg, setSvg] = React.useState(null);
  const ref = React.useRef(null);
  React.useEffect(() => {
    let cancelled = false;
    fetch("/assets/logos/argos-logo-blue.svg")
      .then((r) => r.text())
      .then((t) => { if (!cancelled) setSvg(t); })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);
  React.useEffect(() => {
    if (!ref.current) return;
    const paths = ref.current.querySelectorAll("path");
    paths.forEach((p) => {
      p.style.transition = `fill 240ms ${EASE}`;
      p.style.fill = fill;
    });
  }, [svg, fill]);
  return (
    <span
      ref={ref}
      className="nav-logo"
      style={{
        display: "inline-block", width,
        "--logo-fill": fill,
        transition: `color 240ms ${EASE}`
      }}
      dangerouslySetInnerHTML={svg ? { __html: svg } : undefined}
    />
  );
};

// tweaks: { glassy, glassTint, glassOpacity, glassBlur, barRadius, gutter, height, textColor, dotColor }
const TopNav = ({ onCTA, tweaks = {} }) => {
  const [open, setOpen] = React.useState(null);
  const [drawerOpen, setDrawerOpen] = React.useState(false);
  const [mobileExpanded, setMobileExpanded] = React.useState(null);
  const [winWidth, setWinWidth] = React.useState(typeof window !== "undefined" ? window.innerWidth : 1920);
  // Auto-detected tone of whatever's behind the bar.
  // 'light' → navy text + navy logo; 'dark' → white text + white logo.
  const [tone, setTone] = React.useState("light");
  // Subtle elevation when scrolled — bar gains a touch more contrast.
  const [scrolled, setScrolled] = React.useState(false);
  const barRef = React.useRef(null);
  const triggerRefs = React.useRef({});
  const closeTimer = React.useRef(null);
  const [anchorLeft, setAnchorLeft] = React.useState(36);

  React.useEffect(() => {
    const onR = () => setWinWidth(window.innerWidth);
    window.addEventListener("resize", onR);
    return () => window.removeEventListener("resize", onR);
  }, []);

  // Detect what's under the header bar.
  // Strategy: walk up from a point at the bar's vertical midline (a few sample
  // x positions across the bar) and find the first ancestor with [data-nav-tone].
  // Falls back to sampling background-color luminance if no tone hint is set.
  React.useEffect(() => {
    const luminance = (rgb) => {
      // rgb: "rgb(r, g, b)" or "rgba(...)"
      const m = rgb.match(/\d+(\.\d+)?/g);
      if (!m || m.length < 3) return 1;
      const [r, g, b] = m.slice(0, 3).map(Number);
      // perceived luminance
      return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
    };

    const detect = () => {
      if (!barRef.current) return;
      const rect = barRef.current.getBoundingClientRect();
      const y = rect.top + rect.height / 2;
      const xs = [rect.left + 20, rect.left + rect.width / 2, rect.right - 20];

      // Hide the bar itself so elementsFromPoint sees through it.
      const prevPe = barRef.current.style.pointerEvents;
      barRef.current.style.pointerEvents = "none";

      let hint = null;
      let bgSample = null;
      for (const x of xs) {
        const stack = document.elementsFromPoint(x, y);
        for (const el of stack) {
          if (el === barRef.current || barRef.current.contains(el)) continue;
          if (el.dataset && el.dataset.navTone) {
            hint = el.dataset.navTone;
            break;
          }
          if (!bgSample) {
            const bg = getComputedStyle(el).backgroundColor;
            if (bg && bg !== "rgba(0, 0, 0, 0)" && bg !== "transparent") {
              bgSample = bg;
            }
          }
        }
        if (hint) break;
      }
      barRef.current.style.pointerEvents = prevPe;

      if (hint === "light" || hint === "dark") {
        setTone(hint);
      } else if (bgSample) {
        setTone(luminance(bgSample) > 0.6 ? "light" : "dark");
      } else {
        setTone("light");
      }

      setScrolled(window.scrollY > 8);
    };

    detect();
    const onScroll = () => detect();
    const onResize = () => detect();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onResize);
    // Re-detect when DOM changes (e.g. images load, sections added)
    const ro = new ResizeObserver(detect);
    ro.observe(document.documentElement);
    const id = setInterval(detect, 600); // safety net for late layout shifts
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
      ro.disconnect();
      clearInterval(id);
    };
  }, []);

  React.useEffect(() => {
    if (drawerOpen) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {document.body.style.overflow = prev;};
    }
  }, [drawerOpen]);

  // Esc closes whatever's open
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") {
        if (drawerOpen) setDrawerOpen(false);
        if (open) setOpen(null);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [drawerOpen, open]);

  const isNarrow = winWidth < 1350;

  const t = {
    glassy: tweaks.glassy ?? true,
    glassTint: tweaks.glassTint ?? "#FFFFFF",
    glassOpacity: tweaks.glassOpacity ?? 0.32,
    glassBlur: tweaks.glassBlur ?? 18,
    // A pill (height/2) reads as fully rounded when collapsed but shrinks to
    // a soft rounded-rect when the bar expands, which the user reads as the
    // radius "changing". Use a fixed rounded-rect value that looks the same
    // in both states.
    barRadius: tweaks.barRadius ?? 36,
    gutter: tweaks.gutter ?? 32,
    height: tweaks.height ?? 73,
    textColor: tweaks.textColor ?? "#000000",
    dotColor: tweaks.dotColor ?? "#30AA74"
  };

  const enter = (key) => {
    if (closeTimer.current) clearTimeout(closeTimer.current);
    // Measure trigger left relative to the bar so the submenu lines up with
    // the parent menu word.
    const trig = triggerRefs.current[key];
    if (trig && barRef.current) {
      const tRect = trig.getBoundingClientRect();
      const bRect = barRef.current.getBoundingClientRect();
      // +10 cancels the trigger's internal padding so the column's hover hit
      // area lines up flush with the trigger text.
      setAnchorLeft(tRect.left - bRect.left + 10);
    }
    setOpen(key);
  };
  const leave = () => {
    closeTimer.current = setTimeout(() => setOpen(null), 160);
  };

  const activePanel = navStructure.find((n) => n.key === open && !n.noMenu);

  // hex -> rgba helper for glass tint
  const hexToRgba = (hex, a) => {
    const m = hex.replace("#", "");
    const s = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
    const r = parseInt(s.slice(0, 2), 16);
    const g = parseInt(s.slice(2, 4), 16);
    const b = parseInt(s.slice(4, 6), 16);
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  };

  // Auto-tone overrides text + logo color based on what's behind the bar.
  // Light bg → navy ink (#0E1F3E). Dark bg → white ink.
  const autoText = tone === "light" ? "#0E1F3E" : "#FFFFFF";
  const isLight = tone === "light"; // i.e. ink is dark, bg is light
  const ctaBg = isLight ? "rgba(14,31,62,0.07)" : "rgba(255,255,255,0.10)";
  const ctaBgHover = isLight ? "rgba(14,31,62,0.14)" : "rgba(255,255,255,0.20)";
  const itemBg = isLight ? "rgba(14,31,62,0.07)" : "rgba(255,255,255,0.12)";

  // When scrolled, lift opacity slightly so the bar reads against busy content.
  const effectiveGlassOpacity = scrolled ?
    Math.min(0.62, t.glassOpacity + 0.18) :
    t.glassOpacity;

  const barBg = t.glassy ?
  hexToRgba(t.glassTint, effectiveGlassOpacity) :
  "#000";
  const finalText = t.glassy ? autoText : "#fff";
  const finalCtaBg = t.glassy ? ctaBg : "rgba(255,255,255,0.10)";
  const finalCtaBgHover = t.glassy ? ctaBgHover : "rgba(255,255,255,0.20)";
  const finalItemBg = t.glassy ? itemBg : "rgba(255,255,255,0.12)";

  // Border + shadow tone follow the surface so light- and dark-mode treatments
  // both sit cleanly on their backdrop.
  const barBorder = t.glassy
    ? (isLight ? "1px solid rgba(255,255,255,0.55)" : "1px solid rgba(255,255,255,0.16)")
    : "1px solid transparent";
  const barShadow = t.glassy
    ? (scrolled
        ? (isLight ? "0 12px 36px rgba(14,31,62,0.10)" : "0 12px 36px rgba(0,0,0,0.30)")
        : (isLight ? "0 6px 20px rgba(14,31,62,0.05)" : "0 6px 20px rgba(0,0,0,0.18)"))
    : "none";

  return (
    <div style={{
      position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
      paddingTop: t.gutter,
      display: "flex", justifyContent: "center",
      pointerEvents: "none"
    }}>
      <div
        ref={barRef}
        onMouseLeave={leave}
        style={{
          position: "relative",
          width: "95%",
          maxWidth: 1700,
          background: barBg,
          color: finalText,
          borderRadius: t.barRadius,
          display: "flex", flexDirection: "column",
          fontFamily: "var(--font-display)",
          backdropFilter: t.glassy ? `blur(${t.glassBlur}px) saturate(150%)` : "none",
          WebkitBackdropFilter: t.glassy ? `blur(${t.glassBlur}px) saturate(150%)` : "none",
          border: barBorder,
          boxShadow: open
            ? (isLight ? "0 24px 56px rgba(14,31,62,0.14)" : "0 24px 56px rgba(0,0,0,0.32)")
            : barShadow,
          pointerEvents: "auto",
          transition: `background 280ms ${EASE}, color 280ms ${EASE}, box-shadow 280ms ${EASE}, border-color 280ms ${EASE}`,
          overflow: "hidden"
        }}>
        {/* Top row: logo · nav · CTA — fixed-height like before.
            Left padding (34) is chosen to visually match the right-side
            gap created by the Contact pill (12px outer + 22px button
            internal padding). */}
        <div style={{
          height: t.height,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          padding: "0 56px 0 56px",
          flexShrink: 0
        }}>
          <a href="/" style={{
            display: "flex", alignItems: "center",
            textDecoration: "none", height: t.height,
            paddingTop: 8
          }}>
            <ArgosLogoInline width={120} fill={isLight ? "#0E1F3E" : "#FFFFFF"} />
          </a>

          {!isNarrow &&
          <div style={{ display: "flex", gap: 2, fontSize: 16, fontWeight: 500 }}>
            {navStructure.map((n) => {
              const active = open === n.key;
              const Tag = n.href ? "a" : "div";
              const tagProps = n.href ? { href: n.href } : {};
              return (
                <Tag
                  key={n.key}
                  {...tagProps}
                  ref={(el) => { triggerRefs.current[n.key] = el; }}
                  onMouseEnter={() => { if (!n.noMenu) enter(n.key); else leave(); }}
                  style={{
                    position: "relative",
                    padding: "10px 16px", borderRadius: 37, cursor: "pointer",
                    background: active ? finalItemBg : "transparent",
                    color: finalText,
                    textDecoration: "none",
                    transition: `background 180ms ${EASE}, color 180ms ${EASE}`,
                    display: "inline-flex", alignItems: "center", gap: 8,
                    letterSpacing: "-0.005em"
                  }}
                  onMouseOver={(e) => { if (!active) e.currentTarget.style.background = isLight ? "rgba(14,31,62,0.04)" : "rgba(255,255,255,0.06)"; }}
                  onMouseOut={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}
                >
                  {n.featured &&
                    <span style={{
                      width: 7, height: 7, borderRadius: "50%",
                      background: "#30AA74",
                      boxShadow: "0 0 0 3px rgba(48,170,116,0.20)",
                      display: "inline-block"
                    }} />
                  }
                  <span>{n.key}</span>
                </Tag>
              );
            })}
          </div>
          }

          {!isNarrow &&
          <button onClick={() => { window.location.href = "/contact-us/"; }} className="argos-cta-btn" style={{
            background: finalCtaBg, color: finalText,
            padding: "13px 44px", borderRadius: 37, fontSize: 16, fontWeight: 600,
            fontFamily: "var(--font-display)", border: "none", cursor: "pointer",
            display: "inline-flex", alignItems: "center", gap: 8,
            transition: `background 180ms ${EASE}, color 180ms ${EASE}`,
            overflow: "hidden",
            letterSpacing: "-0.005em"
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.background = finalCtaBgHover;
            const a = e.currentTarget.querySelector('.argos-cta-arrow');
            if (a) a.style.transform = 'translate(3px, 3px)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.background = finalCtaBg;
            const a = e.currentTarget.querySelector('.argos-cta-arrow');
            if (a) a.style.transform = 'translate(0, 0)';
          }}>
            Contact us
            <span className="argos-cta-arrow" style={{
              display: "inline-flex",
              transition: `transform 260ms ${EASE}`
            }}>
              <span style={{ display: "inline-flex", transform: "rotate(90deg)" }}>
                <ArrowDR color={finalText} size={11} />
              </span>
            </span>
          </button>
          }

          {isNarrow &&
          <button
            onClick={() => setDrawerOpen((v) => !v)}
            aria-label={drawerOpen ? "Close menu" : "Open menu"}
            style={{
              background: drawerOpen ? finalCtaBgHover : finalCtaBg,
              color: finalText,
              width: 56, height: 56, borderRadius: 999,
              border: "none", cursor: "pointer",
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              transition: `background 180ms ${EASE}`,
              padding: 0
            }}>
            <span style={{
              position: "relative", width: 22, height: 14,
              display: "inline-block"
            }}>
              <span style={{
                position: "absolute", left: 0, right: 0, top: drawerOpen ? 6 : 0, height: 2,
                background: finalText, borderRadius: 2,
                transform: drawerOpen ? "rotate(45deg)" : "none",
                transition: `transform 240ms ${EASE}, top 240ms ${EASE}`
              }} />
              <span style={{
                position: "absolute", left: 0, right: 0, bottom: drawerOpen ? 6 : 0, height: 2,
                background: finalText, borderRadius: 2,
                transform: drawerOpen ? "rotate(-45deg)" : "none",
                transition: `transform 240ms ${EASE}, bottom 240ms ${EASE}`
              }} />
            </span>
          </button>
          }
        </div>

        {/* Expandable region: mega-menu lives inside the bar */}
        {!isNarrow &&
          <MegaMenuInline panel={activePanel} isLight={isLight} textColor={finalText} anchorLeft={anchorLeft} />
        }

        {/* Mobile: same in-bar expand pattern as desktop */}
        {isNarrow &&
          <MobileInlineMenu
            open={drawerOpen}
            isLight={isLight}
            textColor={finalText}
            onCTA={() => { setDrawerOpen(false); onCTA && onCTA(); }}
            expanded={mobileExpanded}
            setExpanded={setMobileExpanded}
          />
        }
      </div>
    </div>);

};

Object.assign(window, { TopNav, navStructure, MobileInlineMenu });