const Logo = ({ light = false, size = 36 }) => {
  // Use the official PNG assets supplied by the client.
  // `light` mode is for dark backgrounds — we render the wordmark with a CSS
  // brightness/invert filter so the navy stroke becomes near-white.
  const filter = light ? "brightness(0) invert(1)" : "none";
  return (
    <span className="logo-mark">
      <img
        className="glyph"
        src="assets/logo-icon.png"
        alt=""
        aria-hidden="true"
        style={{
          height: size,
          width: "auto",
          display: "block",
          filter,
        }}
      />
      <img
        src="assets/logo-wordmark.png"
        alt="FUJISAWA PLANNING"
        style={{
          height: size * 0.78,
          width: "auto",
          display: "block",
          filter,
        }}
      />
    </span>
  );
};

window.Logo = Logo;