// B&L — visual placeholders (no AI-drawn imagery; the user replaces these with real photos)

const Placeholder = ({ label, dark = false, style }) => (
  <div className={"ph" + (dark ? " dark" : "")} style={style}>
    <span className="ph-label">{label}</span>
  </div>
);

// B&L mark — símbolo redesenhado (em curva), a partir de assets/bl-symbol*.svg.
// `tone="brand"` → símbolo azul gradiente; `tone="mono"` → símbolo branco (fundos escuros).
const BLMark = ({ size = 36, tone = "brand", color = "currentColor" }) => {
  const isMono = tone === "mono";
  return (
    <img
      src={isMono ? "assets/bl-symbol-white.svg" : "assets/bl-symbol.svg"}
      alt="B&L Engenharia"
      style={{ display: "block", height: size, width: "auto" }}
    />
  );
};

// Full lockup: símbolo + wordmark "B&L ENGENHARIA" — SVG redesenhado (em curva).
// `variant`: "dark" (fundo claro, wordmark escura) | "light"/"blue" (fundo escuro, wordmark branca)
const BLLockup = ({ height = 44, variant = "dark", tone }) => {
  const light = variant !== "dark";
  return (
    <img
      src={light ? "assets/bl-lockup-light.svg" : "assets/bl-lockup.svg"}
      alt="B&L Engenharia"
      style={{ display: "block", height: height * 1.5, width: "auto" }}
    />
  );
};

Object.assign(window, { Placeholder, BLMark, BLLockup });