// Agent Builder — Header (multi-page navigation)
const NAV = [
  { label: "Plataforma", href: "Plataforma.html" },
  { label: "Governança", href: "Governanca.html" },
  { label: "Observabilidade", href: "Observabilidade.html" },
  { label: "Serviços", href: "Servicos.html" },
  {
    label: "Conteúdos",
    children: [
      { label: "Artigos", href: "Artigos.html" },
      { label: "Materiais", href: "Materiais.html" },
    ],
  },
];

function currentFile() {
  const p = (window.location.pathname.split("/").pop() || "index.html").toLowerCase();
  return p === "" ? "index.html" : p;
}

function Header() {
  const [stuck, setStuck] = useState(false);
  const [open, setOpen] = useState(false);
  const [subOpen, setSubOpen] = useState(false);
  const [theme, setTheme] = useState(() =>
    (typeof document !== "undefined" && document.documentElement.getAttribute("data-theme")) || "dark"
  );
  const here = currentFile();
  useEffect(() => {
    const onScroll = () => setStuck(window.scrollY > 30);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const toggleTheme = () => {
    const next = theme === "light" ? "dark" : "light";
    document.documentElement.setAttribute("data-theme", next);
    try { localStorage.setItem("ab-theme", next); } catch (e) {}
    setTheme(next);
    window.dispatchEvent(new CustomEvent("ab-theme", { detail: next }));
  };
  const isActive = (href) => here === href.toLowerCase();
  const groupActive = (n) => n.children && n.children.some((c) => isActive(c.href));
  return (
    <React.Fragment>
      <header className={"hdr" + (stuck ? " stuck" : "")}>
        <div className="container hdr-wrap">
          <a className="hdr-logo" href="index.html">
            <img src={theme === "light" ? "assets/logo-agentbuilder-dark-tight.svg" : "assets/logo-lp-agent-builder.png"} alt="Agent Builder" />
            <span className="hdr-by">by <b>Maitha Tech</b></span>
          </a>
          <nav>
            <ul className="menu">
              {NAV.map((n) =>
                n.children ? (
                  <li key={n.label} className="menu-has-sub">
                    <button className={"menu-trigger" + (groupActive(n) ? " active" : "")} type="button">
                      {n.label}
                      <svg className="menu-caret" width="12" height="12" viewBox="0 0 24 24" fill="none"><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    </button>
                    <ul className="submenu">
                      {n.children.map((c) => (
                        <li key={c.href}><a className={isActive(c.href) ? "active" : ""} href={c.href}>{c.label}</a></li>
                      ))}
                    </ul>
                  </li>
                ) : (
                  <li key={n.href}><a className={isActive(n.href) ? "active" : ""} href={n.href}>{n.label}</a></li>
                )
              )}
            </ul>
          </nav>
          <div className="hdr-right">
            <button className="theme-toggle" type="button" onClick={toggleTheme} aria-label="Alternar tema claro e escuro" title={theme === "light" ? "Mudar para tema escuro" : "Mudar para tema claro"}>
              {theme === "light" ? (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/></svg>
              ) : (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="4.2" stroke="currentColor" strokeWidth="1.7"/><path d="M12 2.6v2.2M12 19.2v2.2M2.6 12h2.2M19.2 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"/></svg>
              )}
            </button>
            <a className="solid-btn" href="Contato.html"><span>solicitar demonstração</span></a>
            <button className="burger" aria-label="Menu" onClick={() => setOpen(true)}>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M3 6h18M3 12h18M3 18h18" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" /></svg>
            </button>
          </div>
        </div>
      </header>

      <div className={"drawer" + (open ? " open" : "")}>
        <div className="drawer-bg" onClick={() => setOpen(false)}></div>
        <div className="drawer-panel">
          <button className="drawer-close" onClick={() => setOpen(false)}>✕</button>
          {NAV.map((n) =>
            n.children ? (
              <div key={n.label} className="drawer-group">
                <button className={"drawer-group-trigger" + (subOpen ? " open" : "")} type="button" onClick={() => setSubOpen((v) => !v)}>
                  {n.label}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" style={{ transform: subOpen ? "rotate(180deg)" : "none", transition: "transform .3s var(--ab-ease)" }}><path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </button>
                {subOpen && (
                  <div className="drawer-sub">
                    {n.children.map((c) => (
                      <a key={c.href} className={isActive(c.href) ? "active" : ""} href={c.href}>{c.label}</a>
                    ))}
                  </div>
                )}
              </div>
            ) : (
              <a key={n.href} className={isActive(n.href) ? "active" : ""} href={n.href}>{n.label}</a>
            )
          )}
          <a className="solid-btn" style={{ marginTop: 18 }} href="Contato.html"><span>solicitar demonstração</span></a>
        </div>
      </div>
    </React.Fragment>
  );
}

Object.assign(window, { Header });