// CampaignHeader.jsx
function CampaignHeader({ onDonateClick }) {
  const bp = useBreakpoint();

  // ── Scroll-hide logic (commented out — header is now static) ──
  // const [scrolled, setScrolled] = React.useState(false);
  // const [visible, setVisible] = React.useState(true);
  // const lastY = React.useRef(0);
  // React.useEffect(() => {
  //   const handle = () => {
  //     const y = window.scrollY;
  //     setScrolled(y > 60);
  //     if (y < 60) { setVisible(true); }
  //     else if (y > lastY.current) { setVisible(false); }
  //     else { setVisible(true); }
  //     lastY.current = y;
  //   };
  //   window.addEventListener("scroll", handle, { passive: true });
  //   handle();
  //   return () => window.removeEventListener("scroll", handle);
  // }, []);

  // const logoWidth = scrolled ? (bp.isMobile ? 100 : 120) : (bp.isMobile ? 130 : 180);
  // const padV = scrolled ? "var(--lin_space-2)" : (bp.isMobile ? "var(--lin_space-3)" : "var(--lin_space-4)");
  const logoWidth = bp.isMobile ? 150 : 180;
  const padH = bp.isMobile ? "var(--lin_space-4)" : "var(--lin_space-8)";

  return (
    <header data-component="CampaignHeader" style={{
      position: "relative",
      background: "rgba(255,255,255,1)",
      borderBottom: "1px solid var(--lin_grey-200)",
    }}>
      <div style={{
        maxWidth: "var(--lin_container-xl)", margin: "0 auto",
        height: "80px", maxHeight: "80px",
        padding: `0 ${padH}`,
        display: "flex", alignItems: "center", justifyContent: "space-between",
        gap: "var(--lin_space-6)",
      }}>
        <a href="#" style={{ display: "flex", alignItems: "center", textDecoration: "none", flexShrink: 0 }}>
          <div style={{ overflow: "hidden" }}>
            <Logo width={logoWidth} />
          </div>
        </a>
        <button onClick={() => openGivebutter()} style={{
          background: "var(--lin_blue-500)", color: "#fff",
          padding: "var(--lin_space-3) var(--lin_space-5)",
          borderRadius: "var(--lin_radius-md)", border: "none",
          fontSize: "var(--lin_text-sm)", fontWeight: "var(--lin_weight-semibold)",
          letterSpacing: "var(--lin_tracking-wide)", cursor: "pointer",
          transition: "background 150ms ease",
          flexShrink: 0, whiteSpace: "nowrap",
        }}>Donate now</button>
      </div>
    </header>
  );
}

Object.assign(window, { CampaignHeader });