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

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

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

  const dark = variant === "dark";
  const isSubdir = window.location.pathname.includes("/products/");
  const prefix = isSubdir ? "../../" : "";

  const navItems = [
    { label: "Products", key: "products", href: "#" },
    { label: "Industries", key: "industries", href: `${prefix}index.html#industries` },
    { label: "Projects", key: "projects", href: `${prefix}index.html#projects` },
    { 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` },
  ];

  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 style={{ display: "flex", gap: 4 }}>
          {navItems.map(item => {
            const isDropdownItem = item.key === "company";
            return (
              <div 
                key={item.key} 
                style={{ position: "relative", display: "inline-flex", alignItems: "center" }}
                onMouseLeave={() => isDropdownItem && setOpenMenu(null)}
              >
                <a
                  href={item.href}
                  onMouseEnter={() => setOpenMenu(item.key === "products" || item.key === "company" ? item.key : null)}
                  style={{
                    padding: "10px 14px",
                    color: "inherit", fontSize: 14, fontWeight: 500, letterSpacing: "-0.005em",
                    opacity: 0.85, cursor: "pointer",
                    borderBottom: openMenu === item.key ? `2px solid ${dark ? "#20C7E8" : "var(--pharma)"}` : "2px solid transparent",
                    marginBottom: -2,
                    textDecoration: "none",
                    display: "inline-flex",
                    alignItems: "center"
                  }}
                >
                  {item.label}
                </a>

                {isDropdownItem && openMenu === "company" && (
                  <div
                    style={{
                      position: "absolute",
                      left: 0,
                      top: "100%",
                      width: 200,
                      background: dark ? "#0B1117" : "white",
                      border: `1px solid ${dark ? "rgba(255,255,255,0.08)" : "var(--line)"}`,
                      borderRadius: 12,
                      boxShadow: "0 12px 32px rgba(11,17,23,0.12)",
                      padding: 12,
                      display: "flex",
                      flexDirection: "column",
                      gap: 4,
                      zIndex: 9999
                    }}
                  >
                    {["Overview", "Leadership", "Quality Policy", "Infrastructure", "Innovations"].map(it => (
                      <a
                        key={it}
                        href="#"
                        style={{
                          padding: "8px 12px",
                          fontSize: 13,
                          fontWeight: 500,
                          color: dark ? "rgba(255,255,255,0.85)" : "var(--ink-2)",
                          borderRadius: 6,
                          transition: "all 150ms",
                          textDecoration: "none"
                        }}
                        onMouseEnter={e => {
                          e.currentTarget.style.background = dark ? "rgba(255,255,255,0.06)" : "var(--metal-3)";
                          e.currentTarget.style.color = dark ? "white" : "var(--ink)";
                        }}
                        onMouseLeave={e => {
                          e.currentTarget.style.background = "transparent";
                          e.currentTarget.style.color = dark ? "rgba(255,255,255,0.85)" : "var(--ink-2)";
                        }}
                      >
                        {it}
                      </a>
                    ))}
                  </div>
                )}
              </div>
            );
          })}
        </nav>

        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <button className={dark ? "btn btn-dark" : "btn btn-ghost"} style={{ padding: "10px 16px", fontSize: 13 }}>
            Download brochure
          </button>
          <a href={`${prefix}contact.html`} className={dark ? "btn btn-dark-solid" : "btn btn-primary"} style={{ padding: "10px 16px", fontSize: 13, textDecoration: "none" }}>
            Talk to engineer
          </a>
        </div>
      </div>

      {/* Mega-menu: products */}
      {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: "Eff-Pro", href: "#" },
                { name: "Eff-Pack 100", href: "#" },
                { name: "Eff-Pack 4T & 8T", href: "#" },
                { name: "Eff-Pack SA", href: "#" }
              ]} dark={dark} />
              <div style={{ marginTop: 24 }}>
                <ProductGroup title="Drying" items={[
                  { name: "Vacuum Tray Dryer", href: "#" },
                  { name: "Air Tray Dryer", href: "#" }
                ]} dark={dark} />
              </div>
            </div>

            {/* Column 2: Granulation & Pelletization */}
            <div>
              <ProductGroup title="Granulation" items={[
                { name: "Integrated Wet Granulation", href: "#" },
                { name: "Rapid Mixing Granulator", href: `${prefix}products/granulation/rapid-mixing-granulator.html` },
                { name: "Fluid Bed Dryer / Processor", href: "#" },
                { name: "Fluid Bed Coater", href: "#" },
                { name: "Tablet Coater", href: "#" }
              ]} dark={dark} activeItem="Rapid Mixing Granulator" />
              <div style={{ marginTop: 24 }}>
                <ProductGroup title="Pelletization" items={[
                  { name: "Extruder", href: "#" },
                  { name: "Spheronizer", href: "#" }
                ]} dark={dark} />
              </div>
            </div>

            {/* Column 3: Blending & Handling Systems */}
            <div>
              <ProductGroup title="Blending" items={[
                { name: "Conta Bin Blender", href: "#" },
                { name: "Octagonal Blender", href: "#" },
                { name: "Double Cone Blender", href: "#" },
                { name: "V Cone Blender", href: "#" },
                { name: "Ribbon Blender", href: "#" },
                { name: "Multi Attached Blender", href: "#" }
              ]} dark={dark} />
              <div style={{ marginTop: 24 }}>
                <ProductGroup title="Handling Systems" items={[
                  { name: "Vacuum Conveying System", href: "#" },
                  { name: "IBC Bin Container", href: "#" },
                  { name: "Lifting & Tilting Device", href: "#" },
                  { name: "Lifting & Positioning Device", href: "#" },
                  { name: "Vibratory Shifter", href: "#" },
                  { name: "Multi Mill", href: "#" }
                ]} dark={dark} />
              </div>
            </div>

            {/* Featured card */}
            <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
              </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>
      )}
    </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 });