/* global React */

function Header({ view, onNav, palette }) {
  const items = [
    { id: "home", label: "home" },
    { id: "gallery", label: "gallery" },
    { id: "commission", label: "commissions" },
    { id: "about", label: "about" },
  ];
  const accent = palette === "tide" ? "var(--tide-600)" : palette === "balanced" ? "var(--tide-600)" : "var(--marigold-600)";
  return (
    <header style={{
      position: "sticky",
      top: 0,
      zIndex: 50,
      padding: "14px 0",
      background: "rgba(247, 241, 232, 0.86)",
      backdropFilter: "blur(14px) saturate(130%)",
      WebkitBackdropFilter: "blur(14px) saturate(130%)",
      borderBottom: "1px solid rgba(42, 33, 24, 0.08)",
    }}>
      <div style={{
        maxWidth: 1120,
        margin: "0 auto",
        padding: "0 32px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: 24,
      }}>
        <button
          onClick={() => onNav("home")}
          style={{
            border: 0,
            background: "transparent",
            cursor: "pointer",
            fontFamily: "var(--font-display)",
            fontSize: 32,
            color: "var(--ink)",
            letterSpacing: "-0.01em",
            padding: 0,
            lineHeight: 1,
            display: "inline-flex",
            alignItems: "baseline",
            gap: 8,
          }}
        >
          <span>bah<span style={{ color: accent }}>haus</span></span>
          <span style={{ fontFamily: "var(--font-hand)", fontSize: 18, color: "var(--ink-muted)", fontWeight: 400 }}>by bárbara</span>
        </button>

        <nav style={{ display: "flex", gap: 6, alignItems: "center" }}>
          {items.map((item) => {
            const active = view === item.id;
            return (
              <button
                key={item.id}
                onClick={() => onNav(item.id)}
                style={{
                  border: 0,
                  background: active ? "rgba(42,33,24,0.08)" : "transparent",
                  cursor: "pointer",
                  fontFamily: "var(--font-body)",
                  fontSize: 14.5,
                  fontWeight: active ? 700 : 500,
                  color: "var(--ink)",
                  padding: "8px 14px",
                  borderRadius: 999,
                  transition: "background 180ms cubic-bezier(0.22,1,0.36,1)",
                }}
                onMouseEnter={(e) => { if (!active) e.currentTarget.style.background = "rgba(42,33,24,0.04)"; }}
                onMouseLeave={(e) => { if (!active) e.currentTarget.style.background = "transparent"; }}
              >
                {item.label}
              </button>
            );
          })}
          <div style={{ width: 1, height: 22, background: "rgba(42,33,24,0.18)", margin: "0 10px" }} />
          <Button
            variant="primary"
            size="sm"
            icon="send"
            onClick={() => onNav("commission")}
          >
            start a piece
          </Button>
        </nav>
      </div>
    </header>
  );
}

window.Header = Header;