// Brand.jsx — atomic brand pieces (logo lockup, hex motifs, promo wordmark).
const Logo = ({ variant = "dark", showWord = true, height = 30 }) => {
  const mark = variant === "dark" ? "../../assets/logo-mark-white.png" : "../../assets/logo-mark-black.png";
  const word = variant === "dark" ? "../../assets/wordmark-white.png" : "../../assets/wordmark-black.png";
  return (
    <div className="logo">
      <img src={mark} alt="Beestera" style={{ height }} />
      {showWord && <img src={word} alt="beestera" style={{ height: Math.round(height * 0.62) }} />}
    </div>
  );
};

const HexMotif = ({ width = 260, opacity = 1, style = {} }) => (
  <img src="../../assets/hex-outline.png" alt="" className="hex" style={{ width, opacity, ...style }} />
);

const HivePattern = ({ children, style = {} }) => (
  <div
    style={{
      background:
        "linear-gradient(180deg, rgba(252,160,0,.7) 0%, rgba(255,215,0,.7) 50%, rgba(252,160,0,.7) 100%), url('../../assets/hive-pattern.png') center / cover no-repeat",
      ...style,
    }}
  >
    {children}
  </div>
);

const PromoLine = ({ children = "thrive in the hive", size = 72, color = "var(--bee-ink)" }) => (
  <span className="bee-promo-line" style={{ fontSize: size, color }}>
    {children}
  </span>
);

window.Logo = Logo;
window.HexMotif = HexMotif;
window.HivePattern = HivePattern;
window.PromoLine = PromoLine;