// OVERCUT PPF logo — uses the brand SVG asset directly.
// `variant`: "full" shows the full square emblem (mark + PPF + dark plate);
//            "mark" shows only the OC mark area, color-shifted via mask.
// For the navbar pill we use the raw image; for footer we go bigger.

const Logo = ({ className = "h-8", showPlate = true }) => {
  if (showPlate) {
    return (
      <img
        src="assets/logo.svg"
        alt="OVERCUT PPF"
        className={className}
        draggable={false}
      />
    );
  }
  // Plate-less variant: render the SVG inside a CSS mask so it picks up currentColor.
  return (
    <span
      role="img"
      aria-label="OVERCUT PPF"
      className={className}
      style={{
        display: "inline-block",
        backgroundColor: "currentColor",
        WebkitMaskImage: "url(assets/logo.svg)",
        maskImage: "url(assets/logo.svg)",
        WebkitMaskRepeat: "no-repeat",
        maskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        maskPosition: "center",
        WebkitMaskSize: "contain",
        maskSize: "contain",
        aspectRatio: "1192 / 1120",
      }}
    />
  );
};

window.Logo = Logo;