// Site header — brand bar, lockup, nav, CTA.

const SiteHeader = ({ active, onNav }) => {
  const items = ["Home", "Services", "Equipment", "Projects", "About", "Contact"];
  const isMobile = useIsMobile(1024);
  const [menuOpen, setMenuOpen] = React.useState(false);
  const handleNav = (item) => { setMenuOpen(false); onNav(item); };

  return (
    <div>
      <BrandBar />
      <header className="section-pad" style={{
        background: "var(--ink)", color: "var(--bone)",
        padding: "18px 56px",
        display: "flex", alignItems: "center", justifyContent: "space-between",
        borderBottom: "1px solid var(--border-on-dark)",
      }}>
        <button onClick={() => handleNav("Home")} style={{
          background: "none", border: "none", cursor: "pointer",
          display: "flex", alignItems: "center", gap: 12, color: "var(--bone)",
        }}>
          <img src="assets/claw-red.png" alt="" style={{ height: 30 }} />
          <span style={{ font: "700 22px/1 var(--font-display)", letterSpacing: ".18em", textTransform: "uppercase" }}>HUNTER</span>
          <span style={{ font: "500 10px/1 var(--font-mono)", letterSpacing: ".18em", color: "var(--steel-3)", marginLeft: 4, marginTop: 6 }}>INVEST · LTD</span>
        </button>

        {!isMobile && (
          <nav style={{ display: "flex", gap: 28 }}>
            {items.map(i => (
              <button
                key={i} onClick={() => handleNav(i)}
                style={{
                  background: "none", border: "none", cursor: "pointer",
                  font: "600 12px/1 var(--font-body)",
                  letterSpacing: ".14em", textTransform: "uppercase",
                  color: i === active ? "var(--bone)" : "var(--steel-3)",
                  paddingBottom: 4,
                  borderBottom: i === active ? "2px solid var(--claw-red)" : "2px solid transparent",
                }}
              >{i}</button>
            ))}
          </nav>
        )}

        {!isMobile && (
          <Button variant="primary" onClick={() => handleNav("Contact")}>Request a quote →</Button>
        )}

        {isMobile && (
          <button
            onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            style={{
              background: "none", border: "none", cursor: "pointer",
              color: "var(--bone)", padding: 4,
              display: "flex", flexDirection: "column", justifyContent: "center", gap: 5,
            }}
          >
            {menuOpen
              ? <span style={{ font: "600 22px/1 var(--font-body)", color: "var(--bone)", lineHeight: 1 }}>✕</span>
              : <>
                  <span style={{ display: "block", width: 24, height: 2, background: "var(--bone)", borderRadius: 1 }} />
                  <span style={{ display: "block", width: 24, height: 2, background: "var(--bone)", borderRadius: 1 }} />
                  <span style={{ display: "block", width: 24, height: 2, background: "var(--bone)", borderRadius: 1 }} />
                </>
            }
          </button>
        )}
      </header>

      {isMobile && menuOpen && (
        <nav style={{
          background: "var(--ink)",
          borderTop: "1px solid var(--border-on-dark)",
          display: "flex", flexDirection: "column",
          padding: "8px 20px 24px",
        }}>
          {items.map(i => (
            <button
              key={i} onClick={() => handleNav(i)}
              style={{
                background: "none", border: "none", cursor: "pointer",
                font: "600 14px/1 var(--font-body)",
                letterSpacing: ".14em", textTransform: "uppercase",
                color: i === active ? "var(--bone)" : "var(--steel-3)",
                padding: "14px 0 14px 12px",
                borderBottom: "1px solid var(--border-on-dark)",
                borderLeft: i === active ? "3px solid var(--claw-red)" : "3px solid transparent",
                textAlign: "left",
              }}
            >{i}</button>
          ))}
          <Button variant="primary" onClick={() => handleNav("Contact")}
            style={{ marginTop: 20, alignSelf: "stretch", justifyContent: "center" }}>
            Request a quote →
          </Button>
        </nav>
      )}
    </div>
  );
};

Object.assign(window, { SiteHeader });