// Lightweight top header
function Header({ view, onNav, onLogout, user }) {
  const tabs = [
    { id: "form", label: "Log a lead", icon: "filePlus" },
    { id: "table", label: "My leads", icon: "list" },
  ];
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 50, background: "#ffffffe6",
      backdropFilter: "saturate(180%) blur(12px)", borderBottom: "1px solid var(--border)" }}>
      <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 28px", height: 64,
        display: "flex", alignItems: "center", gap: 28 }}>
        {/* co-brand: ROA platform + Mainstay partner */}
        <div style={{ display: "flex", alignItems: "center", gap: 13, flexShrink: 0 }}>
          <img src="assets/roa-logo.svg" alt="Realty of America" style={{ height: 21, width: "auto", display: "block" }} />
          <span style={{ width: 1, height: 26, background: "var(--border)" }}></span>
          <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
            <span style={{ fontWeight: 800, fontSize: 15, color: "var(--navy)", letterSpacing: "-.01em", whiteSpace: "nowrap" }}>Mainstay</span>
            <span style={{ fontSize: 11, fontWeight: 700, color: "var(--emerald)", whiteSpace: "nowrap",
              background: "var(--st-high-bg)", padding: "3px 9px", borderRadius: 99 }}>Partner</span>
          </div>
        </div>

        {/* nav */}
        <nav style={{ display: "flex", gap: 4, marginLeft: 8, flexShrink: 0 }}>
          {tabs.map((t) => (
            <button key={t.id} onClick={() => onNav(t.id)}
              style={{ display: "flex", alignItems: "center", gap: 8, border: "none", cursor: "pointer", whiteSpace: "nowrap",
                background: view === t.id ? "var(--accent-soft)" : "transparent",
                color: view === t.id ? "var(--accent)" : "var(--muted)",
                fontWeight: 600, fontSize: 14, fontFamily: "inherit", padding: "9px 15px", borderRadius: 9,
                transition: "all .15s ease" }}>
              <Icon name={t.icon} size={16} stroke={2.2} />{t.label}
            </button>
          ))}
        </nav>

        <div style={{ flex: 1 }}></div>

        {/* primary action shortcut + account */}
        {view !== "form" && (
          <button className="btn btn-navy btn-sm" onClick={() => onNav("form")}>
            <Icon name="plus" size={16} stroke={2.5} /> Log a lead
          </button>
        )}
        <AccountMenu onLogout={onLogout} user={user} />
      </div>
    </header>
  );
}

function AccountMenu({ onLogout, user }) {
  const [open, setOpen] = React.useState(false);
  const ref = React.useRef(null);
  React.useEffect(() => {
    function h(e) { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }
    document.addEventListener("mousedown", h);
    return () => document.removeEventListener("mousedown", h);
  }, []);
  return (
    <div style={{ position: "relative" }} ref={ref}>
      <button onClick={() => setOpen(!open)} style={{ display: "flex", alignItems: "center", gap: 9,
        border: "1px solid var(--border)", background: "#fff", cursor: "pointer", padding: "5px 10px 5px 5px",
        borderRadius: 99, fontFamily: "inherit" }}>
        <span style={{ width: 30, height: 30, borderRadius: 99, background: "var(--navy)", color: "#fff",
          display: "grid", placeItems: "center", fontWeight: 700, fontSize: 12 }}>MS</span>
        <span style={{ fontSize: 13, fontWeight: 600, color: "var(--label-2)", whiteSpace: "nowrap" }}>Mainstay partner</span>
        <Icon name="chevDown" size={15} style={{ color: "var(--muted)" }} />
      </button>
      {open && (
        <div style={{ position: "absolute", right: 0, top: "calc(100% + 8px)", width: 230, background: "#fff",
          border: "1px solid var(--border)", borderRadius: 12, boxShadow: "var(--card-shadow)", padding: 7,
          animation: "fadeUp .18s ease both", zIndex: 60 }}>
          <div style={{ padding: "9px 11px 11px", borderBottom: "1px solid var(--border)", marginBottom: 6 }}>
            <div style={{ fontWeight: 700, fontSize: 13.5 }}>{user?.full_name || "Mainstay partner"}</div>
            <div style={{ fontSize: 12, color: "var(--muted)", marginTop: 1 }}>{user?.email || "mainstay.partner"}</div>
            <div style={{ marginTop: 8, fontSize: 11.5, color: "var(--muted)", display: "flex", alignItems: "center", gap: 6 }}>
              <Icon name="shield" size={13} style={{ color: "var(--emerald)" }} /> Shared partner account
            </div>
          </div>
          <button onClick={onLogout} style={{ width: "100%", display: "flex", alignItems: "center", gap: 10,
            border: "none", background: "transparent", cursor: "pointer", fontFamily: "inherit", fontSize: 13.5,
            fontWeight: 600, color: "var(--label-2)", padding: "9px 11px", borderRadius: 8 }}
            onMouseEnter={(e) => e.currentTarget.style.background = "#00000007"}
            onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}>
            <Icon name="logout" size={16} style={{ color: "var(--muted)" }} /> Sign out
          </button>
        </div>
      )}
    </div>
  );
}

window.Header = Header;