/* UPOLT site — top navigation: Solutions mega-menu, Company + Contact links, active-page indicator. */

const NAV_MENUS = {
  Solutions: {
    width: 580,
    cols: [
      {
        heading: "Platform",
        items: [
          { icon: "layers", name: "Platform overview", desc: "One connected foundation for your business.", href: "platform.html" },
          { icon: "boxes", name: "Connect", desc: "Unify your data, tools, and teams.", href: "platform.html#connect" },
          { icon: "workflow", name: "Automate", desc: "Remove repetitive manual work.", href: "platform.html#automate" },
          { icon: "sparkles", name: "Assist", desc: "Operator-grade AI, built in.", href: "platform.html#assist" },
        ],
      },
      {
        heading: "By team",
        items: [
          { icon: "briefcase", name: "Operations", desc: "See and move the whole operation.", href: "platform.html#operate" },
          { icon: "line-chart", name: "Finance", desc: "Real numbers, in real time.", href: "platform.html#analyze" },
          { icon: "headphones", name: "Customer teams", desc: "Every account in one view.", href: "platform.html#connect" },
        ],
      },
    ],
  },
};

/* Which top-level nav item is active for a given page. */
const PAGE_ACTIVE = {
  "platform.html": "Solutions",
  "about.html": "Company",
  "contact.html": "Contact",
};

function MenuPanel({ menu }) {
  const compact = menu.cols.every(c => c.items.every(i => !i.desc));
  return (
    <div style={{ width: menu.width, padding: 16, display: "grid", gridTemplateColumns: `repeat(${menu.cols.length}, 1fr)`, gap: 8 }}>
      {menu.cols.map((col, ci) => (
        <div key={ci} style={{ minWidth: 0 }}>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--text-muted)", padding: "6px 12px 8px" }}>{col.heading}</div>
          {col.items.map((it, ii) => (
            <a key={ii} href={it.href} onClick={e => { if (it.href === "#") e.preventDefault(); }}
              className="upolt-menu-item"
              style={{ display: "flex", gap: 12, alignItems: compact ? "center" : "flex-start", padding: compact ? "9px 12px" : "10px 12px", borderRadius: 10, textDecoration: "none" }}>
              <span style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: 8, background: "var(--surface-accent-soft)", color: "var(--teal-600)", flex: "none" }}><Ico n={it.icon} s={17} /></span>
              <span style={{ minWidth: 0 }}>
                <span style={{ display: "block", fontSize: 14, fontWeight: 600, color: "var(--text-primary)", lineHeight: 1.3 }}>{it.name}</span>
                {it.desc && <span style={{ display: "block", fontSize: 12.5, color: "var(--text-tertiary)", lineHeight: 1.4, marginTop: 2 }}>{it.desc}</span>}
              </span>
            </a>
          ))}
        </div>
      ))}
    </div>
  );
}

function Nav({ current = "index.html" }) {
  const [open, setOpen] = React.useState(null);
  const [scrolled, setScrolled] = React.useState(false);
  const closeTimer = React.useRef(null);
  const activeKey = PAGE_ACTIVE[current] || null;

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

  const enter = (key) => { clearTimeout(closeTimer.current); setOpen(key); };
  const leave = () => { closeTimer.current = setTimeout(() => setOpen(null), 120); };

  // Direct (non-dropdown) top-level links.
  const directLinks = [
    { label: "Company", href: "about.html" },
    { label: "Contact", href: "contact.html" },
  ];

  const pillStyle = (active) => ({
    display: "inline-flex", alignItems: "center", gap: 5, border: "none",
    background: active ? "var(--surface-accent-soft)" : "transparent",
    color: active ? "var(--teal-600)" : "var(--text-secondary)",
    fontFamily: "var(--font-sans)", fontSize: 15, fontWeight: active ? 600 : 500,
    padding: "8px 14px", borderRadius: 9, cursor: "pointer", textDecoration: "none",
    transition: "background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard)",
  });

  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, height: "var(--nav-height)", display: "flex", alignItems: "center", background: scrolled ? "rgba(245,245,243,0.82)" : "rgba(245,245,243,0.6)", backdropFilter: "saturate(180%) blur(14px)", WebkitBackdropFilter: "saturate(180%) blur(14px)", borderBottom: scrolled ? "1px solid var(--border-default)" : "1px solid transparent", transition: "border-color var(--motion-base) var(--ease-standard), background var(--motion-base) var(--ease-standard)" }}>
      <Container style={{ display: "flex", alignItems: "center", gap: 8, width: "100%" }}>
        <a href="index.html" style={{ display: "inline-flex", alignItems: "center", marginRight: 24 }}>
          <img src="assets/logos/upolt-lockup-horizontal.png" alt="UPOLT" style={{ height: 24, display: "block" }} />
        </a>

        <nav style={{ display: "flex", alignItems: "center", gap: 2 }}>
          {Object.keys(NAV_MENUS).map(l => {
            const isOpen = open === l;
            const isActive = activeKey === l;
            return (
              <div key={l} style={{ position: "relative" }} onMouseEnter={() => enter(l)} onMouseLeave={leave}>
                <button className="upolt-nav-trigger"
                  style={{ ...pillStyle(isActive), background: isOpen ? "var(--surface-hover)" : (isActive ? "var(--surface-accent-soft)" : "transparent"), color: (isOpen || isActive) ? (isActive ? "var(--teal-600)" : "var(--text-primary)") : "var(--text-secondary)" }}>
                  {l}
                  <Ico n="chevron-down" s={15} style={{ transition: "transform var(--motion-fast) var(--ease-standard)", transform: isOpen ? "rotate(180deg)" : "none", opacity: 0.7 }} />
                </button>
                {isOpen && (
                  <div style={{ position: "absolute", top: "calc(100% + 8px)", left: 0, background: "var(--surface-card)", border: "1px solid var(--border-default)", borderRadius: 16, boxShadow: "var(--shadow-lg)", animation: "upoltMenuIn 160ms var(--ease-out)" }}>
                    <MenuPanel menu={NAV_MENUS[l]} />
                  </div>
                )}
              </div>
            );
          })}
          {directLinks.map(d => {
            const isActive = activeKey === d.label;
            return (
              <a key={d.label} href={d.href} className="upolt-nav-link" data-active={isActive} style={pillStyle(isActive)}>{d.label}</a>
            );
          })}
        </nav>

        <div style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 10 }}>
          <Btn size="md" variant="primary" href="contact.html" iconRight={<Ico n="arrow-right" s={17} />}>Contact us</Btn>
        </div>
      </Container>
    </header>
  );
}

Object.assign(window, { Nav });