// RLC logo components — using real brand assets from /assets
// Mark variants: light (light bg), dark (dark bg), white (transparent on color)
// Lockup variants: light (for light bg), dark (for dark bg)

function RLCMark({ size = 56, variant = "dark" }) {
  // variant: "dark" (for dark bg, blue+white), "light" (for light bg, blue+navy), "white" (all white)
  const src = {
    dark: "assets/mark-primary-dark.png",
    light: "assets/mark-primary-light.png",
    white: "assets/mark-white.png",
  }[variant] || "assets/mark-primary-dark.png";

  return (
    <img
      src={src}
      alt="RLC Development Solutions"
      width={size}
      height={size}
      style={{ display: "block", width: size, height: size, objectFit: "contain" }}
    />
  );
}

function RLCLockup({ height = 40, variant = "dark" }) {
  // variant: "dark" (for dark bg) or "light" (for light bg)
  const src = variant === "light" ? "assets/lockup-light.png" : "assets/lockup-dark.png";
  return (
    <img
      src={src}
      alt="RLC Development Solutions"
      style={{ display: "block", height: height, width: "auto", objectFit: "contain" }}
    />
  );
}

window.RLCMark = RLCMark;
window.RLCLockup = RLCLockup;