/* Loominost logo — uses uploaded PNG asset */

const LOGO_SRC = "assets/loominost-logo.png";
const LOGO_RATIO = 622 / 202; // ~3.08

const LoominostLogo = ({ size = 22, color = "var(--ink)" }) => {
  // size = visual height of the wordmark in px
  const height = size + 8;
  const width = Math.round(height * LOGO_RATIO);
  const isLight = color === "#fff" || color === "white";
  return (
    <img
      src={LOGO_SRC}
      alt="Loominost"
      width={width}
      height={height}
      style={{
        display: "block",
        height,
        width: "auto",
        // Source PNG is dark-on-transparent; invert when used on dark backgrounds
        filter: isLight ? "invert(1) brightness(2)" : "none",
      }}
    />
  );
};

// Backwards compatible — anywhere the standalone mark was used, render the full logo
const LoominostMark = (props) => <LoominostLogo {...props} />;

Object.assign(window, { LoominostMark, LoominostLogo });