/* 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)";

  const [isMobile, setIsMobile] = React.useState(
    typeof window !== "undefined" ? window.innerWidth < 760 : false
  );
  const [menuOpen, setMenuOpen] = React.useState(false);

  React.useEffect(() => {
    const onResize = () => setIsMobile(window.innerWidth < 760);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, []);

  React.useEffect(() => {
    if (menuOpen && window.lucide) window.lucide.createIcons();
  }, [menuOpen, isMobile]);

  const handleNav = (id) => {
    setMenuOpen(false);
    onNav(id);
  };

  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: isMobile ? "0 20px" : "0 32px",
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        gap: isMobile ? 12 : 24,
      }}>
        <button
          onClick={() => handleNav("home")}
          style={{
            border: 0,
            background: "transparent",
            cursor: "pointer",
            fontFamily: "var(--font-display)",
            fontSize: isMobile ? 26 : 32,
            color: "var(--ink)",
            letterSpacing: "-0.01em",
            padding: 0,
            lineHeight: 1,
            display: "inline-flex",
            alignItems: "baseline",
            gap: isMobile ? 6 : 8,
            flexWrap: "wrap",
            textAlign: "left",
          }}
        >
          <span>bah<span style={{ color: accent }}>haus</span></span>
          <span style={{ fontFamily: "var(--font-hand)", fontSize: isMobile ? 15 : 18, color: "var(--ink-muted)", fontWeight: 400 }}>by bárbara</span>
        </button>

        {!isMobile && (
          <nav style={{ display: "flex", gap: 6, alignItems: "center" }}>
            {items.map((item) => {
              const active = view === item.id;
              return (
                <button
                  key={item.id}
                  onClick={() => handleNav(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={() => handleNav("commission")}
            >
              start a piece
            </Button>
          </nav>
        )}

        {isMobile && (
          <button
            onClick={() => setMenuOpen((v) => !v)}
            aria-label={menuOpen ? "close menu" : "open menu"}
            aria-expanded={menuOpen}
            style={{
              border: "1px solid rgba(42,33,24,0.12)",
              background: "transparent",
              cursor: "pointer",
              padding: 8,
              borderRadius: 999,
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              color: "var(--ink)",
              width: 40,
              height: 40,
            }}
          >
            <i data-lucide={menuOpen ? "x" : "menu"} style={{ width: 20, height: 20, strokeWidth: 2 }}></i>
          </button>
        )}
      </div>

      {isMobile && menuOpen && (
        <div style={{
          padding: "12px 20px 16px",
          display: "flex",
          flexDirection: "column",
          gap: 4,
          borderTop: "1px solid rgba(42,33,24,0.06)",
          marginTop: 14,
        }}>
          {items.map((item) => {
            const active = view === item.id;
            return (
              <button
                key={item.id}
                onClick={() => handleNav(item.id)}
                style={{
                  border: 0,
                  background: active ? "rgba(42,33,24,0.08)" : "transparent",
                  cursor: "pointer",
                  fontFamily: "var(--font-body)",
                  fontSize: 16,
                  fontWeight: active ? 700 : 500,
                  color: "var(--ink)",
                  padding: "12px 14px",
                  borderRadius: 12,
                  textAlign: "left",
                }}
              >
                {item.label}
              </button>
            );
          })}
          <div style={{ marginTop: 8 }}>
            <Button
              variant="primary"
              size="sm"
              icon="send"
              onClick={() => handleNav("commission")}
            >
              start a piece
            </Button>
          </div>
        </div>
      )}
    </header>
  );
}

window.Header = Header;