/* Beigman wordmark — uses the real PNG provided by the brand owner. */

function BeigmanLogo({ tone = "dark", compact = false, className = "" }) {
  const h = compact ? 44 : 68;
  const filterStyle = tone === "light"
    // brighten wordmark when on dark surfaces (PNG has dark-on-light artwork)
    ? { filter: "invert(1) brightness(1.05) hue-rotate(180deg) saturate(0)" }
    : {};
  return (
    <div className={`flex items-center select-none ${className}`}>
      <img
        src="assets/logo-transparent.png"
        alt="Beigman Engineering"
        decoding="async"
        style={{ height: h, width: "auto", ...filterStyle }}
        draggable="false"
      />
    </div>
  );
}

/* For dark backgrounds we need a version of the logo where the BLACK 'BEIGMAN'
   wordmark becomes light. The transparent PNG already has copper for the mark
   and 'ENGINEERING' — only the 'BEIGMAN' portion is near-black. We rely on the
   layout to use the dark-on-light variant inside an off-white card whenever
   placed on the midnight section, or render it inverted via CSS filter. */

function BeigmanLogoLight({ compact = false, className = "" }) {
  const h = compact ? 32 : 44;
  return (
    <div className={`flex items-center select-none ${className}`}>
      <img
        src="assets/logo-transparent.png"
        alt="Beigman Engineering"
        decoding="async"
        style={{ height: h, width: "auto", filter: "invert(1) hue-rotate(180deg)" }}
        draggable="false"
      />
    </div>
  );
}

Object.assign(window, { BeigmanLogo, BeigmanLogoLight });