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

// ============ NAVIGATION with mega-menu ============
function Nav({ variant = "light", activeItem }) {
  const [openMenu, setOpenMenu] = useStateNav(null);
  const [mobileOpen, setMobileOpen] = useStateNav(false);
  const [mobileSection, setMobileSection] = useStateNav(null);
  const [scrolled, setScrolled] = useStateNav(false);

  useEffectNav(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

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

  const dark = variant === "dark";
  let prefix = "";
  const path = window.location.pathname;
  if (path.includes("/products/")) {
    const sub = path.substring(path.indexOf("/products/") + "/products/".length);
    const depth = sub.split("/").length - 1;
    prefix = "../".repeat(depth + 1);
  } else if (path.includes("/industries/")) {
    const sub = path.substring(path.indexOf("/industries/") + "/industries/".length);
    const depth = sub.split("/").length - 1;
    prefix = "../".repeat(depth + 1);
  }

  let currentActive = activeItem;
  if (!currentActive) {
    if (path.endsWith("eff-pro.html")) currentActive = "Effervescent Processing System (EFF-PRO)";
    else if (path.endsWith("eff-pack.html")) currentActive = "Tube Filling Machine (EFF-PACK)";
    else if (path.endsWith("vtd.html")) currentActive = "Vacuum Tray Dryer (VTD)";
    else if (path.endsWith("rapid-mixing-granulator.html")) currentActive = "Rapid Mixer Granulator (RMG)";
    else if (path.endsWith("fbd.html")) currentActive = "Fluid Bed Dryer (FBD)";
    else if (path.endsWith("fbp.html")) currentActive = "Fluid Bed Processor (FBP)";
    else if (path.endsWith("fbc.html")) currentActive = "Fluid Bed Coater (FBC)";
    else if (path.endsWith("auto-coater.html")) currentActive = "Auto Tablet Coater (AC)";
    else if (path.endsWith("extruder.html")) currentActive = "Extruder";
    else if (path.endsWith("cpb.html")) currentActive = "Conta Pillar Blender (CPB)";
    else if (path.endsWith("ocb.html")) currentActive = "Octagonal Blender (OCB)";
    else if (path.endsWith("dcb.html")) currentActive = "Double Cone Blender (DCB)";
    else if (path.endsWith("v-blender.html")) currentActive = "V Cone Blender (V-Blender)";
    else if (path.endsWith("bin-blender.html")) currentActive = "Multi Attached Blender";
    else if (path.endsWith("vsft.html")) currentActive = "Vibro Sifter (VSFT)";
    else if (path.endsWith("mml.html")) currentActive = "Multi Mill (MML)";
    else if (path.endsWith("dcm.html")) currentActive = "Dry Co Mill (DCM)";
    else if (path.endsWith("ppv.html")) currentActive = "Paste Preparation Vessel (PPV)";
    else if (path.endsWith("lpd.html")) currentActive = "Lifting & Positioning Device (LPD)";
    else if (path.endsWith("atd.html")) currentActive = "Air Tray Dryer (ATD)";
    else if (path.endsWith("spheronizer.html")) currentActive = "Spheronizer";
    else if (path.endsWith("powder-transfer-system.html")) currentActive = "Powder Transfer Systems (PTS)";
    else if (path.endsWith("ipc-bin.html")) currentActive = "IPC Bin Container";
    else if (path.endsWith("ltd.html")) currentActive = "Lifting & Tilting Device (LTD)";
  }

  const solutionsItems = [
    { label: "Formulation", href: `${prefix}formulation.html` },
    { label: "Effervescent Packaging", href: `${prefix}packaging.html` },
    { label: "Containment", href: `${prefix}containment.html` },
    { label: "Transfer Systems", href: `${prefix}transfer-systems.html` },
  ];

  const industriesItems = [
    { label: "Pharmaceuticals", href: `${prefix}industries/pharmaceuticals.html` },
    { label: "Nutraceuticals", href: `${prefix}industries/nutraceuticals.html` },
    { label: "Cosmetics", href: `${prefix}industries/cosmetics.html` },
    { label: "Chemicals", href: `${prefix}industries/chemicals.html` },
    { label: "Food & Dairy", href: `${prefix}industries/food.html` },
  ];

  const navItems = [
    { label: "Products", key: "products", href: `${prefix}products.html` },
    { label: "Solutions", key: "solutions", href: "#" },
    { label: "Industries", key: "industries", href: `${prefix}index.html#industries` },
    { label: "Projects", key: "projects", href: "#" },
    { label: "Blog", key: "blog", href: "#" },
    { label: "Company", key: "company", href: `${prefix}company.html` },
    { label: "Careers", key: "careers", href: `${prefix}careers.html` },
    { label: "Contact", key: "contact", href: `${prefix}contact.html` },
  ];

  const isKeyActive = (key) => {
    const p = path.toLowerCase();
    if (key === "products" && (p.includes("/products/") || p.includes("products.html"))) return true;
    if (key === "solutions" && (p.includes("formulation.html") || p.includes("packaging.html") || p.includes("containment.html") || p.includes("transfer-systems.html") || p.includes("/solutions/"))) return true;
    if (key === "industries" && p.includes("/industries/")) return true;
    if (key === "company" && p.includes("company.html")) return true;
    if (key === "careers" && p.includes("careers.html")) return true;
    if (key === "contact" && p.includes("contact.html")) return true;
    return false;
  };

  return (
    <header
      style={{
        position: "sticky", top: 0, zIndex: 9999,
        background: dark
          ? (scrolled ? "rgba(11,17,23,0.92)" : "transparent")
          : (scrolled ? "rgba(255,255,255,0.92)" : "transparent"),
        backdropFilter: scrolled ? "blur(14px) saturate(180%)" : "none",
        borderBottom: scrolled ? `1px solid ${dark ? "rgba(255,255,255,0.08)" : "var(--line)"}` : "1px solid transparent",
        transition: "all 200ms",
        color: dark ? "white" : "var(--ink)",
      }}
      onMouseLeave={() => setOpenMenu(null)}
    >
      <div className="container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 72, position: "relative" }}>
        <a href={`${prefix}index.html`}>
          <Logo light={dark} />
        </a>

        <nav className="desktop-nav" style={{ gap: 4 }}>
          {navItems.map(item => {
            const isActive = isKeyActive(item.key) || openMenu === item.key;
            if (item.key === "solutions") {
              return (
                <div
                  key={item.key}
                  style={{ position: "relative", display: "inline-flex", alignItems: "center" }}
                  onMouseEnter={() => setOpenMenu("solutions")}
                  onMouseLeave={() => setOpenMenu(null)}
                >
                  <button
                    style={{
                      padding: "10px 14px",
                      color: isActive ? (dark ? "#20C7E8" : "var(--pharma)") : "inherit",
                      fontSize: 14,
                      fontWeight: isActive ? 600 : 500,
                      letterSpacing: "-0.005em",
                      opacity: isActive ? 1 : 0.85,
                      cursor: "pointer",
                      marginBottom: -2,
                      background: "none",
                      border: "none",
                      borderBottom: isActive ? `2px solid ${dark ? "#20C7E8" : "var(--pharma)"}` : "2px solid transparent",
                      fontFamily: "inherit",
                      display: "inline-flex",
                      alignItems: "center"
                    }}
                  >
                    {item.label}
                  </button>
                  {openMenu === "solutions" && (
                    <div style={{
                      position: "absolute",
                      top: "calc(100% + 6px)",
                      left: "50%",
                      transform: "translateX(-50%)",
                      minWidth: 200,
                      background: dark ? "#0B1117" : "white",
                      border: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "var(--line)"}`,
                      borderRadius: 12,
                      boxShadow: "0 24px 48px -12px rgba(0,0,0,0.4)",
                      padding: "8px 0",
                      zIndex: 9999
                    }}>
                      {solutionsItems.map(si => {
                        const isSiActive = path.toLowerCase().includes(si.href.replace(/^(\.\.\/)+/, "").toLowerCase());
                        return (
                          <a
                            key={si.label}
                            href={si.href}
                            style={{
                              display: "block",
                              padding: "10px 20px",
                              fontSize: 13,
                              fontWeight: isSiActive ? 600 : 500,
                              color: isSiActive ? (dark ? "#20C7E8" : "var(--pharma)") : (dark ? "rgba(255,255,255,0.75)" : "var(--ink-2)"),
                              background: isSiActive ? (dark ? "rgba(32,199,232,0.12)" : "var(--metal-3)") : "transparent",
                              textDecoration: "none",
                              whiteSpace: "nowrap",
                              transition: "color 150ms, background 150ms"
                            }}
                            onMouseEnter={e => { e.currentTarget.style.color = dark ? "white" : "var(--ink)"; e.currentTarget.style.background = dark ? "rgba(32,199,232,0.08)" : "var(--metal-3)"; }}
                            onMouseLeave={e => { e.currentTarget.style.color = isSiActive ? (dark ? "#20C7E8" : "var(--pharma)") : (dark ? "rgba(255,255,255,0.75)" : "var(--ink-2)"); e.currentTarget.style.background = isSiActive ? (dark ? "rgba(32,199,232,0.12)" : "var(--metal-3)") : "transparent"; }}
                          >
                            {si.label}
                          </a>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            }
            if (item.key === "industries") {
              return (
                <div
                  key={item.key}
                  style={{ position: "relative", display: "inline-flex", alignItems: "center" }}
                  onMouseEnter={() => setOpenMenu("industries")}
                  onMouseLeave={() => setOpenMenu(null)}
                >
                  <a
                    href={item.href}
                    style={{
                      padding: "10px 14px",
                      color: isActive ? (dark ? "#20C7E8" : "var(--pharma)") : "inherit",
                      fontSize: 14,
                      fontWeight: isActive ? 600 : 500,
                      letterSpacing: "-0.005em",
                      opacity: isActive ? 1 : 0.85,
                      cursor: "pointer",
                      marginBottom: -2,
                      background: "none",
                      textDecoration: "none",
                      borderBottom: isActive ? `2px solid ${dark ? "#20C7E8" : "var(--pharma)"}` : "2px solid transparent",
                      display: "inline-flex",
                      alignItems: "center",
                      gap: 4
                    }}
                  >
                    {item.label}
                  </a>
                  {openMenu === "industries" && (
                    <div style={{
                      position: "absolute",
                      top: "calc(100% + 6px)",
                      left: "50%",
                      transform: "translateX(-50%)",
                      minWidth: 200,
                      background: dark ? "#0B1117" : "white",
                      border: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "var(--line)"}`,
                      borderRadius: 12,
                      boxShadow: "0 24px 48px -12px rgba(0,0,0,0.4)",
                      padding: "8px 0",
                      zIndex: 9999
                    }}>
                      {industriesItems.map(ind => {
                        const isIndActive = path.toLowerCase().includes(ind.href.replace(/^(\.\.\/)+/, "").toLowerCase());
                        return (
                          <a
                            key={ind.label}
                            href={ind.href}
                            style={{
                              display: "block",
                              padding: "10px 20px",
                              fontSize: 13,
                              fontWeight: isIndActive ? 600 : 500,
                              color: isIndActive ? (dark ? "#20C7E8" : "var(--pharma)") : (dark ? "rgba(255,255,255,0.75)" : "var(--ink-2)"),
                              background: isIndActive ? (dark ? "rgba(32,199,232,0.12)" : "var(--metal-3)") : "transparent",
                              textDecoration: "none",
                              whiteSpace: "nowrap",
                              transition: "color 150ms, background 150ms"
                            }}
                            onMouseEnter={e => { e.currentTarget.style.color = dark ? "white" : "var(--ink)"; e.currentTarget.style.background = dark ? "rgba(32,199,232,0.08)" : "var(--metal-3)"; }}
                            onMouseLeave={e => { e.currentTarget.style.color = isIndActive ? (dark ? "#20C7E8" : "var(--pharma)") : (dark ? "rgba(255,255,255,0.75)" : "var(--ink-2)"); e.currentTarget.style.background = isIndActive ? (dark ? "rgba(32,199,232,0.12)" : "var(--metal-3)") : "transparent"; }}
                          >
                            {ind.label}
                          </a>
                        );
                      })}
                    </div>
                  )}
                </div>
              );
            }
            if (item.key === "projects" || item.key === "blog") {
              return (
                <div
                  key={item.key}
                  style={{ position: "relative", display: "inline-flex", alignItems: "center" }}
                >
                  <button
                    type="button"
                    onClick={(e) => {
                      e.preventDefault();
                      if (window.openEarlyAccessModal) {
                        window.openEarlyAccessModal(item.label === "Blog" ? "Technical Blog & Research Articles" : "Projects & Engineering Case Studies");
                      }
                    }}
                    style={{
                      padding: "10px 14px",
                      color: isActive ? (dark ? "#20C7E8" : "var(--pharma)") : "inherit",
                      fontSize: 14,
                      fontWeight: isActive ? 600 : 500,
                      letterSpacing: "-0.005em",
                      opacity: isActive ? 1 : 0.85,
                      cursor: "pointer",
                      marginBottom: -2,
                      background: "none",
                      border: "none",
                      borderBottom: isActive ? `2px solid ${dark ? "#20C7E8" : "var(--pharma)"}` : "2px solid transparent",
                      fontFamily: "inherit",
                      display: "inline-flex",
                      alignItems: "center"
                    }}
                  >
                    {item.label}
                  </button>
                </div>
              );
            }
            return (
              <div
                key={item.key}
                style={{ position: "relative", display: "inline-flex", alignItems: "center" }}
              >
                <a
                  href={item.href}
                  onMouseEnter={() => setOpenMenu(item.key === "products" ? item.key : null)}
                  style={{
                    padding: "10px 14px",
                    color: isActive ? (dark ? "#20C7E8" : "var(--pharma)") : "inherit",
                    fontSize: 14,
                    fontWeight: isActive ? 600 : 500,
                    letterSpacing: "-0.005em",
                    opacity: isActive ? 1 : 0.85,
                    cursor: "pointer",
                    borderBottom: isActive ? `2px solid ${dark ? "#20C7E8" : "var(--pharma)"}` : "2px solid transparent",
                    marginBottom: -2,
                    textDecoration: "none",
                    display: "inline-flex",
                    alignItems: "center"
                  }}
                >
                  {item.label}
                </a>
              </div>
            );
          })}
        </nav>

        <div className="nav-actions-desktop" style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <a href={`${prefix}contact.html`} className={`btn-talk ${dark ? "btn btn-dark-solid" : "btn btn-primary"}`} style={{ padding: "10px 16px", fontSize: 13, textDecoration: "none" }}>
            Talk to engineer
          </a>
          <button
            className={`mobile-menu-toggle ${mobileOpen ? "is-active" : ""}`}
            type="button"
            aria-label="Toggle navigation menu"
            aria-expanded={mobileOpen}
            onClick={() => {
              setMobileOpen(!mobileOpen);
              setOpenMenu(null);
            }}
          >
            <span></span>
            <span></span>
          </button>
        </div>
      </div>

      {/* Mega-menu: products (Desktop) */}
      {openMenu === "products" && (
        <div
          style={{
            position: "absolute", left: 0, right: 0, top: "100%",
            background: dark ? "#0B1117" : "white",
            borderTop: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "var(--line)"}`,
            borderBottom: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "var(--line)"}`,
            color: dark ? "white" : "var(--ink)",
            boxShadow: "0 24px 48px -12px rgba(11,17,23,0.18)",
            zIndex: 9999
          }}
        >
          <div className="container" style={{ padding: "40px 48px", display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1.3fr", gap: 48 }}>
            
            {/* Column 1: Effervescent & Drying */}
            <div>
              <ProductGroup title="Effervescent" items={[
                { name: "Effervescent Processing System (EFF-PRO)", href: `${prefix}products/effervescent/eff-pro.html` },
                { name: "Tube Filling Machine (EFF-PACK)", href: `${prefix}products/effervescent/eff-pack.html` }
              ]} dark={dark} activeItem={currentActive} />
              <div style={{ marginTop: 24 }}>
                <ProductGroup title="Drying" items={[
                  { name: "Vacuum Tray Dryer (VTD)", href: `${prefix}products/effervescent/vtd.html` },
                  { name: "Air Tray Dryer (ATD)", href: `${prefix}products/effervescent/atd.html` }
                ]} dark={dark} activeItem={currentActive} />
              </div>
              <div style={{ marginTop: 24 }}>
                <ProductGroup title="Supporting Equipments" items={[
                  { name: "Dry Co Mill (DCM)", href: `${prefix}products/supporting/dcm.html` },
                  { name: "Multi Mill (MML)", href: `${prefix}products/supporting/mml.html` },
                  { name: "Paste Preparation Vessel (PPV)", href: `${prefix}products/supporting/ppv.html` },
                  { name: "Vibro Sifter (VSFT)", href: `${prefix}products/supporting/vsft.html` }
                ]} dark={dark} activeItem={currentActive} />
              </div>
            </div>

            {/* Column 2: Granulation & Containment Systems */}
            <div>
              <ProductGroup title="Granulation" items={[
                { name: "Integrated Wet Granulation", href: "#" },
                { name: "Rapid Mixer Granulator (RMG)", href: `${prefix}products/granulation/rapid-mixing-granulator.html` },
                { name: "Fluid Bed Dryer (FBD)", href: `${prefix}products/granulation/fbd.html` },
                { name: "Auto Tablet Coater (AC)", href: `${prefix}products/granulation/auto-coater.html` }
              ]} dark={dark} activeItem={currentActive} />
              <div style={{ marginTop: 24 }}>
                <ProductGroup title="Containment Systems" items={[
                  { name: "Granulator Isolator", href: `${prefix}containment.html#stage-isolators` },
                  { name: "Barrier Isolator", href: `${prefix}containment.html#stage-isolators` },
                  { name: "Restricted Access Barrier Systems (RABS)", href: `${prefix}containment.html#stage-rabs` },
                  { name: "Laminar Flow Enclosures", href: `${prefix}containment.html#stage-dispensing` },
                  { name: "Glovebox Systems", href: `${prefix}containment.html#stage-glovebox` },
                  { name: "Process Equipment Isolators", href: `${prefix}containment.html#stage-integration` },
                  { name: "Decontainment Isolators", href: `${prefix}containment.html#stage-decontamination` }
                ]} dark={dark} activeItem={currentActive} />
              </div>
            </div>

            {/* Column 3: Blending & Handling Systems */}
            <div>
              <ProductGroup title="Blending" items={[
                { name: "Conta Pillar Blender (CPB)", href: `${prefix}products/granulation/cpb.html` },
                { name: "Octagonal Blender (OCB)", href: `${prefix}products/granulation/ocb.html` },
                { name: "Double Cone Blender (DCB)", href: `${prefix}products/granulation/dcb.html` },
                { name: "V Cone Blender (V-Blender)", href: `${prefix}products/granulation/v-blender.html` },
                { name: "Multi Attached Blender", href: `${prefix}products/granulation/bin-blender.html` }
              ]} dark={dark} activeItem={currentActive} />
              <div style={{ marginTop: 24 }}>
                <ProductGroup title="Handling Systems" items={[
                  { name: "Powder Transfer Systems (PTS)", href: `${prefix}products/supporting/powder-transfer-system.html` },
                  { name: "IPC Bin Container", href: `${prefix}products/supporting/ipc-bin.html` },
                  { name: "Lifting & Tilting Device (LTD)", href: `${prefix}products/supporting/ltd.html` },
                  { name: "Lifting & Positioning Device (LPD)", href: `${prefix}products/supporting/lpd.html` }
                ]} dark={dark} activeItem={currentActive} />
              </div>
            </div>

            {/* Column 4: Pelletization & Featured card */}
            <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              <ProductGroup title="Pelletization" items={[
                { name: "Extruder", href: `${prefix}products/palletization/extruder.html` },
                { name: "Spheronizer", href: `${prefix}products/palletization/spheronizer.html` },
                { name: "Fluid Bed Coater (FBC)", href: `${prefix}products/palletization/fbc.html` }
              ]} dark={dark} activeItem={currentActive} />

              <div style={{
                padding: 24,
                background: dark ? "rgba(32,199,232,0.06)" : "var(--metal-3)",
                borderRadius: 12,
                border: `1px solid ${dark ? "rgba(32,199,232,0.18)" : "var(--line)"}`,
                position: "relative",
                overflow: "hidden",
                display: "flex",
                flexDirection: "column",
                height: "fit-content"
              }}>
                <div className="eyebrow" style={{ color: dark ? "#20C7E8" : "var(--pharma)", display: "flex", alignItems: "center", gap: 6 }}>
                  <span className="dot" style={{ display: "inline-block", width: 6, height: 6, background: dark ? "#20C7E8" : "var(--pharma)", borderRadius: "50%" }}/>
                  Featured Product
                </div>
                <div className="display display-sm" style={{ marginTop: 10, color: dark ? "white" : "var(--ink)", fontSize: 20, fontWeight: 600 }}>
                  Rapid Mixer Granulator (RMG)
                </div>
                <div style={{ fontSize: 13, color: dark ? "rgba(255,255,255,0.7)" : "var(--ink-3)", marginTop: 8, lineHeight: 1.5 }}>
                  High-shear wet granulation engineered for rapid blending and uniform particle size. Compliant with cGMP standards.
                </div>
                <div style={{ marginTop: 20, display: "flex", gap: 8 }}>
                  <a href={`${prefix}products/granulation/rapid-mixing-granulator.html`} className={dark ? "btn btn-dark-solid" : "btn btn-pharma"} style={{ padding: "8px 14px", fontSize: 12, textDecoration: "none" }}>Explore</a>
                  <button className={dark ? "btn btn-dark" : "btn btn-ghost"} style={{ padding: "8px 14px", fontSize: 12 }}>Spec Sheet</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Mobile Navigation Drawer */}
      {mobileOpen && (
        <div className={`mobile-nav-drawer ${dark ? "dark" : ""}`}>
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            {/* Products Accordion */}
            <div>
              <button
                type="button"
                className={`mobile-nav-item ${mobileSection === "products" ? "active" : ""}`}
                style={{ width: "100%", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit" }}
                onClick={() => setMobileSection(mobileSection === "products" ? null : "products")}
              >
                <span style={{ fontWeight: 600 }}>Products</span>
                <span style={{ fontSize: 18, transform: mobileSection === "products" ? "rotate(90deg)" : "none", transition: "transform 180ms ease" }}>›</span>
              </button>

              {mobileSection === "products" && (
                <div style={{ paddingLeft: 8, marginTop: 4 }}>
                  <div className="mobile-nav-group-title">Granulation</div>
                  <div className="mobile-nav-sublist">
                    <a className={`mobile-nav-subitem ${currentActive === "Rapid Mixer Granulator (RMG)" ? "active" : ""}`} href={`${prefix}products/granulation/rapid-mixing-granulator.html`}>
                      <span>Rapid Mixer Granulator (RMG)</span>
                      {currentActive === "Rapid Mixer Granulator (RMG)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Fluid Bed Dryer (FBD)" ? "active" : ""}`} href={`${prefix}products/granulation/fbd.html`}>
                      <span>Fluid Bed Dryer (FBD)</span>
                      {currentActive === "Fluid Bed Dryer (FBD)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Auto Tablet Coater (AC)" ? "active" : ""}`} href={`${prefix}products/granulation/auto-coater.html`}>
                      <span>Auto Tablet Coater (AC)</span>
                      {currentActive === "Auto Tablet Coater (AC)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                  </div>

                  <div className="mobile-nav-group-title">Containment Systems</div>
                  <div className="mobile-nav-sublist">
                    <a className="mobile-nav-subitem" href={`${prefix}containment.html#stage-isolators`}><span>Granulator Isolator</span></a>
                    <a className="mobile-nav-subitem" href={`${prefix}containment.html#stage-isolators`}><span>Barrier Isolator</span></a>
                    <a className="mobile-nav-subitem" href={`${prefix}containment.html#stage-rabs`}><span>Restricted Access Barrier Systems (RABS)</span></a>
                    <a className="mobile-nav-subitem" href={`${prefix}containment.html#stage-dispensing`}><span>Laminar Flow Enclosures</span></a>
                    <a className="mobile-nav-subitem" href={`${prefix}containment.html#stage-glovebox`}><span>Glovebox Systems</span></a>
                    <a className="mobile-nav-subitem" href={`${prefix}containment.html#stage-integration`}><span>Process Equipment Isolators</span></a>
                    <a className="mobile-nav-subitem" href={`${prefix}containment.html#stage-decontamination`}><span>Decontainment Isolators</span></a>
                  </div>

                  <div className="mobile-nav-group-title">Pelletization</div>
                  <div className="mobile-nav-sublist">
                    <a className={`mobile-nav-subitem ${currentActive === "Extruder" ? "active" : ""}`} href={`${prefix}products/palletization/extruder.html`}>
                      <span>Extruder</span>
                      {currentActive === "Extruder" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Spheronizer" ? "active" : ""}`} href={`${prefix}products/palletization/spheronizer.html`}>
                      <span>Spheronizer</span>
                      {currentActive === "Spheronizer" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Fluid Bed Coater (FBC)" ? "active" : ""}`} href={`${prefix}products/palletization/fbc.html`}>
                      <span>Fluid Bed Coater (FBC)</span>
                      {currentActive === "Fluid Bed Coater (FBC)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                  </div>

                  <div className="mobile-nav-group-title">Blending</div>
                  <div className="mobile-nav-sublist">
                    <a className={`mobile-nav-subitem ${currentActive === "Conta Pillar Blender (CPB)" ? "active" : ""}`} href={`${prefix}products/granulation/cpb.html`}>
                      <span>Conta Pillar Blender (CPB)</span>
                      {currentActive === "Conta Pillar Blender (CPB)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Octagonal Blender (OCB)" ? "active" : ""}`} href={`${prefix}products/granulation/ocb.html`}>
                      <span>Octagonal Blender (OCB)</span>
                      {currentActive === "Octagonal Blender (OCB)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Double Cone Blender (DCB)" ? "active" : ""}`} href={`${prefix}products/granulation/dcb.html`}>
                      <span>Double Cone Blender (DCB)</span>
                      {currentActive === "Double Cone Blender (DCB)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "V Cone Blender (V-Blender)" ? "active" : ""}`} href={`${prefix}products/granulation/v-blender.html`}>
                      <span>V Cone Blender (V-Blender)</span>
                      {currentActive === "V Cone Blender (V-Blender)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Multi Attached Blender" ? "active" : ""}`} href={`${prefix}products/granulation/bin-blender.html`}>
                      <span>Multi Attached Blender</span>
                      {currentActive === "Multi Attached Blender" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                  </div>

                  <div className="mobile-nav-group-title">Handling Systems</div>
                  <div className="mobile-nav-sublist">
                    <a className={`mobile-nav-subitem ${currentActive === "Powder Transfer Systems (PTS)" ? "active" : ""}`} href={`${prefix}products/supporting/powder-transfer-system.html`}>
                      <span>Powder Transfer Systems (PTS)</span>
                      {currentActive === "Powder Transfer Systems (PTS)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "IPC Bin Container" ? "active" : ""}`} href={`${prefix}products/supporting/ipc-bin.html`}>
                      <span>IPC Bin Container</span>
                      {currentActive === "IPC Bin Container" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Lifting & Tilting Device (LTD)" ? "active" : ""}`} href={`${prefix}products/supporting/ltd.html`}>
                      <span>Lifting & Tilting Device (LTD)</span>
                      {currentActive === "Lifting & Tilting Device (LTD)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Lifting & Positioning Device (LPD)" ? "active" : ""}`} href={`${prefix}products/supporting/lpd.html`}>
                      <span>Lifting & Positioning Device (LPD)</span>
                      {currentActive === "Lifting & Positioning Device (LPD)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                  </div>

                  <div className="mobile-nav-group-title">Effervescent & Drying</div>
                  <div className="mobile-nav-sublist">
                    <a className={`mobile-nav-subitem ${currentActive === "Effervescent Processing System (EFF-PRO)" ? "active" : ""}`} href={`${prefix}products/effervescent/eff-pro.html`}>
                      <span>Effervescent Processing System (EFF-PRO)</span>
                      {currentActive === "Effervescent Processing System (EFF-PRO)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Tube Filling Machine (EFF-PACK)" ? "active" : ""}`} href={`${prefix}products/effervescent/eff-pack.html`}>
                      <span>Tube Filling Machine (EFF-PACK)</span>
                      {currentActive === "Tube Filling Machine (EFF-PACK)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Vacuum Tray Dryer (VTD)" ? "active" : ""}`} href={`${prefix}products/effervescent/vtd.html`}>
                      <span>Vacuum Tray Dryer (VTD)</span>
                      {currentActive === "Vacuum Tray Dryer (VTD)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Air Tray Dryer (ATD)" ? "active" : ""}`} href={`${prefix}products/effervescent/atd.html`}>
                      <span>Air Tray Dryer (ATD)</span>
                      {currentActive === "Air Tray Dryer (ATD)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                  </div>

                  <div className="mobile-nav-group-title">Supporting Equipments</div>
                  <div className="mobile-nav-sublist">
                    <a className={`mobile-nav-subitem ${currentActive === "Dry Co Mill (DCM)" ? "active" : ""}`} href={`${prefix}products/supporting/dcm.html`}>
                      <span>Dry Co Mill (DCM)</span>
                      {currentActive === "Dry Co Mill (DCM)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Multi Mill (MML)" ? "active" : ""}`} href={`${prefix}products/supporting/mml.html`}>
                      <span>Multi Mill (MML)</span>
                      {currentActive === "Multi Mill (MML)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Paste Preparation Vessel (PPV)" ? "active" : ""}`} href={`${prefix}products/supporting/ppv.html`}>
                      <span>Paste Preparation Vessel (PPV)</span>
                      {currentActive === "Paste Preparation Vessel (PPV)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Vibro Sifter (VSFT)" ? "active" : ""}`} href={`${prefix}products/supporting/vsft.html`}>
                      <span>Vibro Sifter (VSFT)</span>
                      {currentActive === "Vibro Sifter (VSFT)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                    <a className={`mobile-nav-subitem ${currentActive === "Lifting & Positioning Device (LPD)" ? "active" : ""}`} href={`${prefix}products/supporting/lpd.html`}>
                      <span>Lifting & Positioning Device (LPD)</span>
                      {currentActive === "Lifting & Positioning Device (LPD)" && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
                    </a>
                  </div>
                </div>
              )}
            </div>

            {/* Solutions Accordion */}
            <div>
              <button
                type="button"
                className={`mobile-nav-item ${mobileSection === "solutions" ? "active" : ""}`}
                style={{ width: "100%", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit" }}
                onClick={() => setMobileSection(mobileSection === "solutions" ? null : "solutions")}
              >
                <span style={{ fontWeight: 600 }}>Solutions</span>
                <span style={{ fontSize: 18, transform: mobileSection === "solutions" ? "rotate(90deg)" : "none", transition: "transform 180ms ease" }}>›</span>
              </button>

              {mobileSection === "solutions" && (
                <div style={{ paddingLeft: 8, marginTop: 4 }}>
                  <div className="mobile-nav-sublist">
                    {solutionsItems.map(si => (
                      <a key={si.label} className="mobile-nav-subitem" href={si.href}>
                        {si.label}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* Industries Accordion */}
            <div>
              <button
                type="button"
                className={`mobile-nav-item ${mobileSection === "industries" ? "active" : ""}`}
                style={{ width: "100%", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit" }}
                onClick={() => setMobileSection(mobileSection === "industries" ? null : "industries")}
              >
                <span style={{ fontWeight: 600 }}>Industries</span>
                <span style={{ fontSize: 18, transform: mobileSection === "industries" ? "rotate(90deg)" : "none", transition: "transform 180ms ease" }}>›</span>
              </button>

              {mobileSection === "industries" && (
                <div style={{ paddingLeft: 8, marginTop: 4 }}>
                  <div className="mobile-nav-sublist">
                    {industriesItems.map(ind => (
                      <a key={ind.label} className="mobile-nav-subitem" href={ind.href}>
                        {ind.label}
                      </a>
                    ))}
                  </div>
                </div>
              )}
            </div>

            {/* Projects Early Access trigger */}
            <button
              type="button"
              className="mobile-nav-item"
              style={{ width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit" }}
              onClick={() => {
                setMobileOpen(false);
                if (window.openEarlyAccessModal) {
                  window.openEarlyAccessModal("Projects & Engineering Case Studies");
                }
              }}
            >
              Projects
            </button>

            {/* Blog Early Access trigger */}
            <button
              type="button"
              className="mobile-nav-item"
              style={{ width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", fontFamily: "inherit" }}
              onClick={() => {
                setMobileOpen(false);
                if (window.openEarlyAccessModal) {
                  window.openEarlyAccessModal("Technical Blog & Research Articles");
                }
              }}
            >
              Blog
            </button>

            {/* Standard Nav Items */}
            <a className="mobile-nav-item" href={`${prefix}company.html`}>Company</a>
            <a className="mobile-nav-item" href={`${prefix}careers.html`}>Careers</a>
            <a className="mobile-nav-item" href={`${prefix}contact.html`}>Contact</a>

            <div style={{ marginTop: 20, display: "flex", flexDirection: "column", gap: 10 }}>
              <a href={`${prefix}contact.html`} className={dark ? "btn btn-dark-solid" : "btn btn-primary"} style={{ justifyContent: "center", textDecoration: "none" }}>
                Talk to engineer
              </a>
            </div>
          </div>
        </div>
      )}
    </header>
  );
}

function ProductGroup({ title, items, dark, activeItem }) {
  return (
    <div>
      <div className="eyebrow" style={{ color: dark ? "rgba(255,255,255,0.5)" : "var(--ink-3)", fontSize: 11, fontWeight: 600, letterSpacing: "0.1em" }}>{title}</div>
      <div style={{ marginTop: 10, display: "flex", flexDirection: "column", gap: 1 }}>
        {items.map(it => (
          <a
            key={it.name}
            href={it.href}
            style={{
              padding: "6px 0", fontSize: 13, fontWeight: 500,
              color: it.name === activeItem ? (dark ? "#20C7E8" : "var(--pharma)") : (dark ? "rgba(255,255,255,0.75)" : "var(--ink-2)"),
              display: "flex", alignItems: "center", justifyContent: "space-between",
              borderBottom: `1px solid ${dark ? "rgba(255,255,255,0.04)" : "var(--line-2)"}`,
              textDecoration: "none",
              transition: "color 150ms"
            }}
            onMouseEnter={e => {
              if (it.name !== activeItem) e.currentTarget.style.color = dark ? "white" : "var(--ink)";
            }}
            onMouseLeave={e => {
              if (it.name !== activeItem) e.currentTarget.style.color = dark ? "rgba(255,255,255,0.75)" : "var(--ink-2)";
            }}
          >
            <span>{it.name}</span>
            {it.name === activeItem && <span className="chip cyan" style={{ fontSize: 9, padding: "2px 6px" }}>Active</span>}
          </a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav });