const { Button } = window.GDVExpressDesignSystem_766357;

/* GDV Express member-portal header — mirrors the live logged-in chrome:
   a navy utility strip (welcome + agent + account/help) over a white bar with
   the logo, centered uppercase nav, and a gold LOGOUT button. */
function SiteHeader({ onNav, member = "Summer Brewer", agent = "CVIOLETTE" }) {
  const items = [
    { label: "Condos" },
    { label: "Special Buys" },
    { label: "Cruises" },
    { label: "Tours" },
    { label: "Hotels", caret: true },
    { label: "Cars" },
    { label: "Flights" },
    { label: "Benefits" },
  ];
  const [active, setActive] = React.useState("Condos");

  const utilLink = {
    display: "inline-flex", alignItems: "center", gap: "6px", background: "none", border: "none",
    cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: "12.5px", fontWeight: 700,
    color: "#fff", letterSpacing: "0.02em", textTransform: "uppercase",
  };

  return (
    <header style={{ position: "sticky", top: 0, zIndex: 20, background: "#fff" }}>
      {/* Navy utility strip */}
      <div style={{ background: "var(--navy-900)", color: "#fff", padding: "9px 26px", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <div style={{ display: "flex", alignItems: "center", gap: "16px", fontSize: "12.5px", fontWeight: 700 }}>
          <span style={{ textTransform: "uppercase", letterSpacing: "0.02em" }}>Welcome, {member}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: "8px", color: "var(--navy-400)", textTransform: "uppercase", letterSpacing: "0.02em" }}>
            Agent: {agent}
            <span aria-hidden="true" style={{ display: "inline-flex", flexDirection: "column", gap: "2px" }}>
              <span style={{ width: "15px", height: "2px", background: "currentColor", display: "block" }}></span>
              <span style={{ width: "15px", height: "2px", background: "currentColor", display: "block" }}></span>
              <span style={{ width: "15px", height: "2px", background: "currentColor", display: "block" }}></span>
            </span>
          </span>
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: "22px" }}>
          <button onClick={() => onNav && onNav("account")} style={utilLink}>
            <span aria-hidden="true">👤</span> Account Info
          </button>
          <button onClick={() => onNav && onNav("account")} style={utilLink}>Help Center</button>
        </div>
      </div>

      {/* White nav bar */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "20px", padding: "12px 26px", borderBottom: "1px solid var(--line-2)" }}>
        <img src="../../assets/logo/gdv-express-logo.png" alt="GDV Express" style={{ height: "44px", cursor: "pointer" }} onClick={() => onNav && onNav("home")} />
        <nav style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "24px", flexWrap: "wrap", flex: 1 }}>
          {items.map((it) => (
            <button key={it.label} onClick={() => { setActive(it.label); onNav && onNav("home"); }} style={{
              display: "inline-flex", alignItems: "center", gap: "5px",
              background: "none", border: "none", cursor: "pointer",
              fontFamily: "var(--font-sans)", fontSize: "14px", fontWeight: 700,
              whiteSpace: "nowrap", textTransform: "uppercase", letterSpacing: "0.02em",
              color: active === it.label ? "var(--gold-600)" : "var(--navy-800)",
              padding: "4px 0",
            }}>
              {it.label}
              {it.caret && <span aria-hidden="true" style={{ fontSize: "9px", opacity: 0.7 }}>▾</span>}
            </button>
          ))}
        </nav>
        <Button variant="primary" size="sm" iconLeft={<span aria-hidden="true" style={{ fontSize: "12px" }}>🔒</span>} onClick={() => onNav && onNav("login")}>Logout</Button>
      </div>
    </header>
  );
}
window.SiteHeader = SiteHeader;