/* Maitha Tech — site navigation.
   New monochrome navbar in the DS language. Same menu items as the
   live site: Sobre a Maitha · O que fazemos (units) · Conteúdos · Carreiras
   plus the "Fale conosco" CTA. Desktop hover dropdowns + mobile sheet. */

const NAV_UNITS = [
  { label: "Digital Unit", desc: "Criação e evolução de soluções digitais", href: "digital-unit.html" },
  { label: "Data Unit", desc: "Geração de valor com dados", href: "data-unit.html" },
  { label: "AI Unit", desc: "Inteligência Artificial com foco em impacto", href: "ai-unit.html" },
  { label: "Cloud Unit", desc: "Implementação e otimização de nuvem", href: "cloud-unit.html" },
  { label: "Salesforce Unit", desc: "Implementação profissional de Salesforce", href: "salesforce-unit.html" },
];
const NAV_CONTEUDOS = [
  { label: "Materiais", desc: "Conteúdos mais profundos para baixar", href: "Materiais.html" },
  { label: "Blog", desc: "Artigos sobre temas relevantes", href: "https://conteudo.maitha.com.br/", external: true },
  { label: "Podcast", desc: "Conheça o Papo Tech", href: "papo-tech.html" },
  { label: "TechCircle", desc: "Nossa comunidade de líderes Tech", href: "techcircle.html" },
];

function Caret({ open }) {
  return (
    <span style={{ display: "inline-block", width: 8, height: 8, borderRight: "1.5px solid currentColor", borderBottom: "1.5px solid currentColor", transform: open ? "rotate(-135deg)" : "rotate(45deg)", transition: "transform var(--dur-base) var(--ease-out)", marginLeft: 7, marginBottom: open ? -3 : 3, opacity: 0.7 }} />
  );
}

function DropItem({ item, onClick }) {
  const [h, setH] = React.useState(false);
  return (
    <a href={item.href} target={item.external ? "_blank" : undefined} rel={item.external ? "noreferrer" : undefined} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 16, alignItems: "center", padding: "14px 16px", borderRadius: "var(--radius-md)", background: h ? "var(--mt-near-black)" : "transparent", transition: "background var(--dur-base) var(--ease-out)" }}>
      <span>
        <span style={{ display: "block", fontSize: "var(--fs-h6)", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-tight)" }}>{item.label}</span>
        <span style={{ display: "block", fontSize: "var(--fs-sub)", color: "var(--text-muted)", marginTop: 3, lineHeight: 1.45 }}>{item.desc}</span>
      </span>
      <span style={{ width: 30, height: 30, borderRadius: "50%", border: "1px solid var(--border-strong)", display: "inline-flex", alignItems: "center", justifyContent: "center", opacity: h ? 1 : 0.35, transform: h ? "rotate(0deg)" : "rotate(-12deg)", transition: "opacity var(--dur-base), transform var(--dur-base) var(--ease-out)" }}>
        <img src={(window.__resources && window.__resources.iconArrow) || "assets/icons/arrow-white.svg"} alt="" style={{ width: 12 }} />
      </span>
    </a>
  );
}

function NavDropdown({ label, items, open, onOpen, onClose, width = 380 }) {
  return (
    <div style={{ position: "relative" }} onMouseEnter={onOpen} onMouseLeave={onClose}>
      <button
        onClick={() => (open ? onClose() : onOpen())}
        style={{ display: "inline-flex", alignItems: "center", background: "none", border: 0, cursor: "pointer", padding: "8px 0", fontFamily: "var(--font-sans)", fontSize: "var(--fs-sub)", letterSpacing: "0.02em", color: open ? "var(--text-strong)" : "var(--text-muted)", transition: "color var(--dur-base)" }}>
        {label}<Caret open={open} />
      </button>
      <div className="mt-dd-panel" style={{
        position: "absolute", top: "calc(100% + 14px)", left: "50%", marginLeft: -width / 2, width,
        background: "rgba(10,10,10,0.96)", backdropFilter: "blur(18px)", WebkitBackdropFilter: "blur(18px)",
        border: "1px solid var(--border-default)", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-pop)",
        padding: 10, opacity: open ? 1 : 0, visibility: open ? "visible" : "hidden",
        transform: open ? "translateY(0) scale(1)" : "translateY(-8px) scale(0.98)",
        transition: "opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base)",
        zIndex: 60,
      }}>
        <div style={{ position: "absolute", top: -6, left: "50%", marginLeft: -6, width: 12, height: 12, background: "rgba(10,10,10,0.96)", borderLeft: "1px solid var(--border-default)", borderTop: "1px solid var(--border-default)", transform: "rotate(45deg)" }} />
        {items.map((it) => <DropItem key={it.label} item={it} onClick={onClose} />)}
      </div>
    </div>
  );
}

function Nav({ active = null }) {
  const [openMenu, setOpenMenu] = React.useState(null);   // 'units' | 'conteudos' | null
  const [mobile, setMobile] = React.useState(false);
  const [acc, setAcc] = React.useState(null);
  const [scrolled, setScrolled] = React.useState(false);

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

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

  return (
    <React.Fragment>
    <nav style={{ position: "sticky", top: 0, zIndex: 50, background: scrolled ? "rgba(0,0,0,0.72)" : "rgba(0,0,0,0.28)", backdropFilter: "blur(16px)", WebkitBackdropFilter: "blur(16px)", borderBottom: `1px solid ${scrolled ? "var(--border-faint)" : "transparent"}`, transition: "background var(--dur-base), border-color var(--dur-base)" }}>
      <div className="mt-container" style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 28, padding: "16px 40px" }}>
        <a href="/" style={{ display: "flex", alignItems: "center", flex: "none" }} aria-label="Maitha Tech: início">
          <img src={(window.__resources && window.__resources.logoWhite) || "assets/logo/maitha-logo-white.svg"} alt="Maitha Tech" className="mt-logo" style={{ width: 200, maxWidth: 200, height: "auto", marginLeft: -38 }} />
        </a>

        <div className="mt-desktop-nav" style={{ display: "flex", alignItems: "center", gap: 34 }}>
          <a href="sobre-a-maitha.html" className="mt-link" style={{ fontSize: "var(--fs-sub)", letterSpacing: "0.02em", color: active === "sobre" ? "var(--text-strong)" : "var(--text-muted)" }}>Sobre a Maitha</a>
          <NavDropdown label="O que fazemos" items={NAV_UNITS} width={400} open={openMenu === "units"} onOpen={() => setOpenMenu("units")} onClose={() => setOpenMenu(null)} />
          <NavDropdown label="Insights" items={NAV_CONTEUDOS} width={360} open={openMenu === "conteudos"} onOpen={() => setOpenMenu("conteudos")} onClose={() => setOpenMenu(null)} />
          <a href="Carreiras.html" className="mt-link" style={{ fontSize: "var(--fs-sub)", letterSpacing: "0.02em", color: active === "carreiras" ? "var(--text-strong)" : "var(--text-muted)" }}>Carreiras</a>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 14, flex: "none" }}>
          <span className="mt-nav-cta" style={{ display: "inline-flex" }}>
            <Button as="a" href="#fale-conosco" size="sm" dot>Fale conosco</Button>
          </span>
          <button aria-label="Abrir menu" onClick={() => setMobile(true)} className="mt-burger" style={{ display: "none", flexDirection: "column", gap: 5, background: "none", border: 0, cursor: "pointer", padding: 6 }}>
            <span style={{ width: 24, height: 2, background: "var(--mt-white)", borderRadius: 2 }} />
            <span style={{ width: 24, height: 2, background: "var(--mt-white)", borderRadius: 2 }} />
            <span style={{ width: 15, height: 2, background: "var(--mt-white)", borderRadius: 2 }} />
          </button>
        </div>
      </div>
    </nav>

      {/* —— Mobile sheet (rendered OUTSIDE <nav> so the nav's backdrop-filter doesn't trap this fixed layer inside the bar) —————————————————————————————— */}
      <div style={{ position: "fixed", inset: 0, zIndex: 200, background: "var(--mt-black)", display: "flex", flexDirection: "column", padding: "20px 22px 28px", transform: mobile ? "translateY(0)" : "translateY(-100%)", opacity: mobile ? 1 : 0, transition: "transform .5s var(--ease-out), opacity .4s var(--ease-out)", pointerEvents: mobile ? "auto" : "none", overflowY: "auto" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
          <a href="/" aria-label="Maitha Tech: início" style={{ display: "block" }}>
            <img src={(window.__resources && window.__resources.logoWhite) || "assets/logo/maitha-logo-white.svg"} alt="Maitha Tech" style={{ width: 150, maxWidth: "60vw", height: "auto", display: "block" }} />
          </a>
          <button onClick={() => setMobile(false)} aria-label="Fechar" style={{ background: "none", border: "1px solid var(--border-strong)", color: "#fff", borderRadius: "50%", width: 44, height: 44, minWidth: 44, cursor: "pointer", fontSize: 17, flex: "none" }}>✕</button>
        </div>
        <div style={{ marginTop: 34, display: "flex", flexDirection: "column" }}>
          <MobileLink label="Sobre a Maitha" href="sobre-a-maitha.html" onNav={() => setMobile(false)} />
          <MobileAccordion label="O que fazemos" items={NAV_UNITS} open={acc === "units"} onToggle={() => setAcc(acc === "units" ? null : "units")} onNav={() => setMobile(false)} />
          <MobileAccordion label="Insights" items={NAV_CONTEUDOS} open={acc === "conteudos"} onToggle={() => setAcc(acc === "conteudos" ? null : "conteudos")} onNav={() => setMobile(false)} />
          <MobileLink label="Carreiras" href="Carreiras.html" onNav={() => setMobile(false)} />
        </div>
        <div style={{ marginTop: 28 }}>
          <Button as="a" href="#fale-conosco" size="lg" dot onClick={() => setMobile(false)}>Fale conosco</Button>
        </div>
        <div style={{ marginTop: "auto", paddingTop: 30, color: "var(--text-faint)", fontSize: "var(--fs-sub)" }}>Transformamos negócios e vidas por meio da tecnologia.</div>
      </div>
    </React.Fragment>
  );
}

function MobileLink({ label, href, onNav }) {
  return (
    <a href={href} onClick={onNav} style={{ fontSize: "1.6rem", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h2)", padding: "16px 0", borderBottom: "1px solid var(--border-faint)" }}>{label}</a>
  );
}

function MobileAccordion({ label, items, open, onToggle, onNav }) {
  return (
    <div style={{ borderBottom: "1px solid var(--border-faint)" }}>
      <button onClick={onToggle} style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", background: "none", border: 0, cursor: "pointer", padding: "16px 0", fontFamily: "var(--font-sans)", fontSize: "1.6rem", color: "var(--text-strong)", fontWeight: "var(--fw-medium)", letterSpacing: "var(--ls-h2)" }}>
        {label}<Caret open={open} />
      </button>
      <div style={{ overflow: "hidden", maxHeight: open ? items.length * 78 + 12 : 0, transition: "max-height .45s var(--ease-out)" }}>
        <div style={{ paddingBottom: 12, display: "flex", flexDirection: "column", gap: 2 }}>
          {items.map((it) => (
            <a key={it.label} href={it.href} target={it.external ? "_blank" : undefined} rel={it.external ? "noreferrer" : undefined} onClick={onNav} style={{ padding: "10px 0 10px 14px", borderLeft: "1px solid var(--border-default)" }}>
              <span style={{ display: "block", fontSize: "var(--fs-h6)", color: "var(--text-body)" }}>{it.label}</span>
              <span style={{ display: "block", fontSize: "var(--fs-sub)", color: "var(--text-faint)", marginTop: 2 }}>{it.desc}</span>
            </a>
          ))}
        </div>
      </div>
    </div>
  );
}

window.Nav = Nav;