// Mindworks — top header + secondary nav (Settings/Operations module)
const Header = ({ activeTab = "Shipping Methods", module = "Settings" }) => {
  const tabs = ["General", "Users & Roles", "Warehouses", "Shipping Methods", "Payment Methods", "Tax", "Integrations"];
  return (
    <div style={{ background: "#fff", borderBottom: "1px solid var(--mw-border)" }}>
      {/* Top bar */}
      <div style={{ height: 56, display: "flex", alignItems: "center", padding: "0 24px", borderBottom: "1px solid var(--mw-border)", gap: 16 }}>
        <img src="assets/logo-mindworks-black.png" style={{ height: 28 }} alt="Mindworks" />
        <div style={{ flex: 1, display: "flex", justifyContent: "center" }}>
          <div style={{ position: "relative", width: 360 }}>
            <img src="assets/icons/search.svg" style={{ position: "absolute", left: 12, top: 8, width: 16, height: 16, opacity: 0.5 }} />
            <input className="mw-input" placeholder="Search anything…" style={{ width: "100%", paddingLeft: 36, paddingRight: 14, height: 32, borderRadius: 9999, border: "1px solid var(--mw-border-strong)", fontSize: 14, fontFamily: "inherit", background: "var(--mw-bg)" }} />
          </div>
        </div>
        <button style={{ height: 32, padding: "0 14px", borderRadius: 9999, border: "1px solid var(--mw-brand-500)", color: "var(--mw-brand-500)", background: "#fff", fontSize: 14, fontWeight: 500, cursor: "pointer", fontFamily: "inherit" }}>Create</button>
        <IconBtn icon="bell" />
        <div style={{ width: 32, height: 32, borderRadius: 8, background: "linear-gradient(135deg,#7BC8FF,#3B7FFF)" }} />
        <div style={{ width: 32, height: 32, borderRadius: "50%", background: "#76ADFF", color: "#fff", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 12, fontWeight: 600 }}>NM</div>
      </div>
      {/* Secondary nav */}
      <div style={{ height: 44, display: "flex", alignItems: "center", padding: "0 24px", gap: 4 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6, marginRight: 16, paddingRight: 16, borderRight: "1px solid var(--mw-border)" }}>
          <img src="assets/icons/menu.svg" style={{ width: 18, height: 18, opacity: 0.7 }} />
          <span style={{ fontSize: 14, fontWeight: 500 }}>{module}</span>
          <img src="assets/icons/expandDown.svg" style={{ width: 12, height: 12, opacity: 0.5, marginLeft: 2 }} />
        </div>
        {tabs.map(t => (
          <button key={t} className={`mw-nav-tab ${t === activeTab ? "active" : ""}`}>{t}</button>
        ))}
      </div>
    </div>
  );
};

const IconBtn = ({ icon, onClick, active }) => (
  <button onClick={onClick} style={{
    width: 32, height: 32, borderRadius: 9999, border: 0, background: active ? "var(--mw-brand-50)" : "transparent",
    display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer",
    color: "var(--mw-text-secondary)"
  }}>
    <img src={`assets/icons/${icon}.svg`} style={{ width: 18, height: 18, opacity: 0.7 }} />
  </button>
);

window.Header = Header;
window.IconBtn = IconBtn;