/* Kharaayo Navbar — 5-item nav, Solutions mega-menu (Tech/Studio/Ventures),
   persistent Get-in-Touch + WhatsApp pills, mobile drawer, frost-on-scroll.
   <Navbar active="home" transparentOnTop /> */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon, Logo = window.Logo;

  const SOLUTIONS = [
    { key: "tech", title: "Tech", color: "var(--primary-color)", href: "tech-ai-native-mvp.html", items: [
      { name: "AI-Native MVP", desc: "Ship a real product in weeks, not months.", icon: "rocket", href: "tech-ai-native-mvp.html" },
      { name: "AI Integration & Automation", desc: "Put AI to work inside your product and ops.", icon: "cpu", href: "tech-ai-integration.html" },
      { name: "Agentic Systems", desc: "Multi-agent systems that run in production.", icon: "sparkles", href: "tech-agentic-systems.html" },
      { name: "Fractional AI Team", desc: "A senior AI team, on demand.", icon: "team", href: "tech-fractional-ai-team.html" },
    ]},
    { key: "studio", title: "Studio", color: "var(--accent-color)", href: "studio-brand-identity.html", items: [
      { name: "Brand Identity & Strategy", desc: "Identity systems that hold up worldwide.", icon: "bulb", href: "studio-brand-identity.html" },
      { name: "Motion, Video & VFX", desc: "High-impact motion, video, and visual FX.", icon: "film", href: "studio-motion-video-vfx.html" },
      { name: "Web Design & Development", desc: "Sites and product UI that convert.", icon: "desktop", href: "studio-web-design.html" },
      { name: "Creative Retainer", desc: "An on-call creative team, monthly.", icon: "palette", href: "studio-creative-retainer.html" },
    ]},
    { key: "ventures", title: "Ventures", color: "var(--brand-deep)", href: "ventures-build-with-us.html", items: [
      { name: "Build With Us", desc: "An incubator for early-stage founders.", icon: "bolt", href: "ventures-build-with-us.html" },
      { name: "Venture Co-Creation", desc: "Build new ventures with corporates.", icon: "handshake", href: "ventures-co-creation.html" },
      { name: "For Investors", desc: "Back the Kharaayo portfolio.", icon: "money", href: "ventures-investors.html" },
    ]},
  ];

  const NAV = [
    { key: "home", label: "Home", href: "index.html" },
    { key: "solutions", label: "Solutions", dropdown: true },
    { key: "showcase", label: "Showcase", href: "showcase.html" },
    { key: "blog", label: "Blog", href: "blog.html" },
    { key: "about", label: "About", href: "about.html" },
  ];

  function Pill({ label, icon, circleBg, href, onClick, light }) {
    return React.createElement("a", { className: "k-pill" + (light ? " light" : ""), href, onClick },
      label, React.createElement("span", { className: "circ", style: { background: circleBg } },
        React.createElement(Icon, { name: icon })));
  }

  function Navbar({ active, transparentOnTop = false }) {
    const [scrolled, setScrolled] = useState(false);
    const [openMenu, setOpenMenu] = useState(false);
    const [mobile, setMobile] = useState(false);
    const [mobileSol, setMobileSol] = useState(true);

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

    const frosted = scrolled || !transparentOnTop || openMenu;
    const linkColor = frosted ? "var(--foreground)" : "#fff";

    return React.createElement("header", {
      className: "k-header" + (frosted ? " frost" : ""),
      onMouseLeave: () => setOpenMenu(false)
    },
      React.createElement("nav", { className: "k-nav" },
        React.createElement("div", { style: { flex: 1 } },
          React.createElement(Logo, { size: 30, textColor: linkColor, glyphColor: frosted ? "var(--logo-red)" : "#fff" })),

        // center links
        React.createElement("div", { className: "k-nav-links" },
          NAV.map(n => n.dropdown
            ? React.createElement("button", {
                key: n.key, className: "k-navlink" + (active === n.key ? " active" : ""),
                style: { color: linkColor },
                onMouseEnter: () => setOpenMenu(true),
                onClick: () => setOpenMenu(v => !v)
              }, n.label,
                React.createElement(Icon, { name: "chevronDown", style: { width: 15, height: 15, transition: "transform .2s", transform: openMenu ? "rotate(180deg)" : "none" } }))
            : React.createElement("a", { key: n.key, className: "k-navlink" + (active === n.key ? " active" : ""), style: { color: active === n.key ? "var(--accent-color)" : linkColor }, href: n.href }, n.label))),

        // right CTAs
        React.createElement("div", { className: "k-nav-cta", style: { flex: 1, justifyContent: "flex-end" } },
          React.createElement(Pill, { label: "Get in Touch", icon: "plus", circleBg: "var(--primary-color)", href: "contact.html", light: !frosted }),
          React.createElement(Pill, { label: "WhatsApp", icon: "whatsapp", circleBg: "var(--whatsapp)", href: "#", onClick: window.kWhatsApp, light: !frosted })),

        // hamburger
        React.createElement("button", { className: "k-burger", style: { color: linkColor }, onClick: () => setMobile(true), "aria-label": "Open menu" },
          React.createElement(Icon, { name: "menu", style: { width: 26, height: 26 } }))
      ),

      // mega menu
      openMenu && React.createElement("div", { className: "k-mega", onMouseEnter: () => setOpenMenu(true), onMouseLeave: () => setOpenMenu(false) },
        SOLUTIONS.map(col => React.createElement("div", { key: col.key, className: "k-mega-col" },
          React.createElement("a", { className: "k-mega-head", href: col.href, style: { color: "var(--foreground-muted)" } },
            React.createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 8 } },
              React.createElement("span", { className: "dot", style: { background: col.color } }), col.title),
            React.createElement(Icon, { name: "arrowUpRight", style: { width: 13, height: 13, opacity: .5 } })),
          col.items.map(it => React.createElement("a", { key: it.name, href: it.href, className: "k-menu-item" },
            React.createElement("span", { style: { display: "grid", placeItems: "center", width: 38, height: 38, borderRadius: 10, background: "var(--background-elevated)", flexShrink: 0, color: col.color } },
              React.createElement(Icon, { name: it.icon, style: { width: 20, height: 20 } })),
            React.createElement("span", null,
              React.createElement("span", { className: "k-menu-name" }, it.name),
              React.createElement("span", { className: "k-menu-desc" }, it.desc))))
        ))
      ),

      // mobile drawer
      mobile && React.createElement("div", { style: { position: "fixed", inset: 0, zIndex: 999, background: "var(--background)", padding: "16px 22px", overflowY: "auto" } },
        React.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 22 } },
          React.createElement(Logo, { size: 30 }),
          React.createElement("button", { onClick: () => setMobile(false), style: { background: "none", border: "none", cursor: "pointer", color: "var(--foreground)" }, "aria-label": "Close menu" },
            React.createElement(Icon, { name: "close", style: { width: 26, height: 26 } }))),
        React.createElement("a", { href: "index.html", style: mobLink }, "Home"),
        // solutions expander
        React.createElement("button", { onClick: () => setMobileSol(v => !v), style: Object.assign({}, mobLink, { width: "100%", background: "none", border: "none", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "var(--font-body)" }) },
          "Solutions", React.createElement(Icon, { name: mobileSol ? "minus" : "plus", style: { width: 20, height: 20 } })),
        mobileSol && React.createElement("div", { style: { paddingLeft: 6, marginTop: 4 } },
          SOLUTIONS.map(col => React.createElement("div", { key: col.key, style: { marginBottom: 14 } },
            React.createElement("p", { style: { display: "flex", alignItems: "center", gap: 8, margin: "8px 0 6px", fontSize: 12, fontWeight: 700, textTransform: "uppercase", letterSpacing: ".06em", color: "var(--foreground-muted)" } },
              React.createElement("span", { className: "dot", style: { width: 7, height: 7, borderRadius: 9999, background: col.color } }), col.title),
            col.items.map(it => React.createElement("a", { key: it.name, href: it.href, style: { display: "block", padding: "8px 0 8px 16px", color: "var(--foreground)", textDecoration: "none", fontSize: 15.5 } }, it.name))))),
        React.createElement("a", { href: "showcase.html", style: mobLink }, "Showcase"),
        React.createElement("a", { href: "blog.html", style: mobLink }, "Blog"),
        React.createElement("a", { href: "about.html", style: mobLink }, "About"),
        React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 10, marginTop: 24 } },
          React.createElement(Pill, { label: "Get in Touch", icon: "plus", circleBg: "var(--primary-color)", href: "contact.html" }),
          React.createElement(Pill, { label: "WhatsApp", icon: "whatsapp", circleBg: "var(--whatsapp)", href: "#", onClick: window.kWhatsApp }))
      )
    );
  }
  const mobLink = { display: "block", padding: "12px 0", fontSize: 19, fontWeight: 500, color: "var(--foreground)", textDecoration: "none", borderBottom: "1px solid color-mix(in srgb, var(--foreground) 8%, transparent)" };

  window.Navbar = Navbar;
})();