// PSM Expert — site header / nav (multi-page, v3 — Documento Mestre)
const SERVICES_MENU = [
  { label: "Ver todos os serviços", href: "servicos.html", strong: true },
  { sep: true },
  { heading: "Análises de Risco" },
  { label: "HAZOP", href: "hazop.html" },
  { label: "QRA — Análise Quantitativa", href: "qra.html" },
  { label: "Modelagens Avançadas", href: "modelagens-avancadas.html" },
  { label: "EAR — Estudo de Análise de Riscos", href: "ear.html" },
  { label: "Posicionamento de Detectores", href: "analise-dispersao-detectores.html" },
  { label: "Bow-Tie", href: "bowtie.html" },
  { label: "LOPA — Camadas de Proteção", href: "lopa.html" },
  { label: "SIS / SIF / SIL", href: "sil-sis-sif.html" },
  { sep: true },
  { heading: "Consultorias em PSM & Riscos" },
  { label: "Implementação de PSM", href: "psm.html" },
  { label: "Gerenciamento de Riscos Corporativos", href: "gerenciamento-de-riscos.html" },
  { label: "PGR — Programa de Gerenciamento de Riscos", href: "pgr.html" },
  { label: "PAE — Atendimento a Emergências", href: "pae.html" },
];

function Header({ current }) {
  const [open, setOpen] = React.useState(false);     // mobile menu
  const [drop, setDrop] = React.useState(false);     // services dropdown
  const links = [
    { id: "home", label: "Início", href: "index.html" },
    { id: "servicos", label: "Soluções Técnicas", href: "servicos.html", drop: true },
    { id: "cursos", label: "Treinamentos", href: "cursos-e-treinamentos.html" },
    { id: "sobre", label: "Quem Somos", href: "index.html#sec-sobre" },
    { id: "blog", label: "Blog", href: "blog.html" },
    { id: "contato", label: "Contato", href: "contato.html" },
  ];
  return (
    <header style={hd.bar}>
      <div style={hd.inner}>
        <a style={hd.brand} href="index.html">
          <img src="../../assets/logo-white.png" alt="PSM Expert" style={{ height: 30 }} />
        </a>
        <nav style={hd.nav} className="psm-desk-nav">
          {links.map((l) => (
            <div key={l.id} style={{ position: "relative" }}
              onMouseEnter={() => l.drop && setDrop(true)}
              onMouseLeave={() => l.drop && setDrop(false)}>
              <a href={l.href}
                 style={{ ...hd.link, ...(current === l.id ? hd.linkActive : {}) }}
                 onMouseEnter={(e) => (e.currentTarget.style.color = "#fff")}
                 onMouseLeave={(e) => (e.currentTarget.style.color = current === l.id ? "#fff" : "rgba(255,255,255,.82)")}>
                {l.label}{l.drop ? <span style={hd.caret}>⌄</span> : null}
                {current === l.id ? <span style={hd.activeBar} /> : null}
              </a>
              {l.drop && drop ? (
                <div style={hd.dropdown}>
                  {SERVICES_MENU.map((m, i) => m.sep ? (
                    <div key={i} style={hd.dropSep} />
                  ) : m.heading ? (
                    <div key={i} style={hd.dropHeading}>{m.heading}</div>
                  ) : (
                    <a key={i} href={m.href}
                      style={{ ...hd.dropItem, ...(m.strong ? hd.dropStrong : {}) }}
                      onMouseEnter={(e) => { e.currentTarget.style.background = "#0C2747"; e.currentTarget.style.color = "#F5A623"; }}
                      onMouseLeave={(e) => { e.currentTarget.style.background = "transparent"; e.currentTarget.style.color = m.strong ? "#fff" : "rgba(255,255,255,.82)"; }}>
                      {m.label}
                    </a>
                  ))}
                </div>
              ) : null}
            </div>
          ))}
        </nav>
        <div style={hd.right}>
          <a style={hd.cta} href="contato.html" className="psm-cta-desk"
            onMouseEnter={(e) => (e.currentTarget.style.background = "#F08C00")}
            onMouseLeave={(e) => (e.currentTarget.style.background = "#F5A623")}>
            Solicitar Proposta <Icon name="arrow-right" size={16} color="#071C36" />
          </a>
          <button style={hd.burger} className="psm-burger" onClick={() => setOpen(!open)} aria-label="Menu">
            <Icon name="menu" size={24} color="#fff" />
          </button>
        </div>
      </div>
      {open ? (
        <div style={hd.mobileMenu}>
          {links.map((l) => (
            <a key={l.id} href={l.href} style={hd.mobileLink}>{l.label}</a>
          ))}
          <a style={{ ...hd.cta, marginTop: 12, justifyContent: "center" }} href="contato.html">
            Solicitar Proposta <Icon name="arrow-right" size={16} color="#071C36" />
          </a>
        </div>
      ) : null}
    </header>
  );
}
const hd = {
  bar: { position: "sticky", top: 0, zIndex: 50, background: "#071C36", borderBottom: "1px solid rgba(255,255,255,.07)" },
  inner: { maxWidth: 1240, margin: "0 auto", padding: "0 32px", height: 74, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 },
  brand: { cursor: "pointer", display: "flex", alignItems: "center" },
  nav: { display: "flex", gap: 8, alignItems: "center" },
  link: { position: "relative", display: "inline-flex", alignItems: "center", gap: 4, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 500, fontSize: 14.5, color: "rgba(255,255,255,.82)", cursor: "pointer", whiteSpace: "nowrap", transition: "color .14s", padding: "26px 16px", textDecoration: "none" },
  linkActive: { color: "#fff" },
  caret: { fontSize: 13, opacity: .7, transform: "translateY(-1px)" },
  activeBar: { position: "absolute", left: 16, right: 16, bottom: 0, height: 3, background: "#F5A623", borderRadius: 2 },
  dropdown: { position: "absolute", top: "100%", left: 8, minWidth: 360, background: "#071C36", border: "1px solid rgba(255,255,255,.1)", borderRadius: 10, padding: "8px", boxShadow: "0 24px 48px rgba(0,0,0,.4)", display: "flex", flexDirection: "column", gap: 1 },
  dropItem: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 500, fontSize: 13.5, color: "rgba(255,255,255,.82)", padding: "10px 14px", borderRadius: 7, textDecoration: "none", transition: "all .12s", whiteSpace: "nowrap" },
  dropStrong: { color: "#fff", fontWeight: 600 },
  dropSep: { height: 1, background: "rgba(255,255,255,.1)", margin: "5px 8px" },
  dropHeading: { fontFamily: "'IBM Plex Mono', monospace", fontSize: 10.5, fontWeight: 500, letterSpacing: ".12em", textTransform: "uppercase", color: "#F5A623", padding: "8px 14px 5px" },
  right: { display: "flex", alignItems: "center", gap: 12 },
  cta: { display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 600, fontSize: 14, color: "#071C36", background: "#F5A623", border: "none", borderRadius: 7, padding: "11px 20px", cursor: "pointer", transition: "background .14s", whiteSpace: "nowrap", textDecoration: "none" },
  burger: { display: "none", background: "transparent", border: "none", cursor: "pointer", padding: 4 },
  mobileMenu: { display: "flex", flexDirection: "column", padding: "8px 32px 18px", borderTop: "1px solid rgba(255,255,255,.08)", background: "#071C36" },
  mobileLink: { fontFamily: "'IBM Plex Sans', sans-serif", fontWeight: 500, fontSize: 15, color: "rgba(255,255,255,.9)", padding: "13px 0", borderBottom: "1px solid rgba(255,255,255,.07)", cursor: "pointer", textDecoration: "none" },
};
Object.assign(window, { Header });