// Antelope logo — original mark recolored, with wordmark
// Uses the actual antelope head silhouette (mask PNG) tinted by CSS background
const Logo = ({ size = 22, color, variant = "purple" }) => {
  const c = color || "currentColor";
  // Mark height = wordmark size * 1.4 for a balanced lockup
  const markH = Math.round(size * 1.4);
  const markW = Math.round(markH * 246 / 288);

  // Variant → CSS background
  const bgs = {
    purple: "#5A2DF4",
    "purple-gradient": "linear-gradient(180deg, #9F7DFF 0%, #5A2DF4 60%, #2A0F8E 100%)",
    "brand-gradient": "linear-gradient(135deg, #5A2DF4 0%, #F118B2 100%)",
    pink: "#F118B2",
    copper: "linear-gradient(180deg, #F2C9A8 0%, #C77F58 50%, #8B4F31 100%)",
    white: "#ECECF6",
    black: "#0B0B18",
    spectrum: "linear-gradient(135deg, #5A2DF4 0%, #F118B2 50%, #FF7A45 100%)",
  };
  const bg = bgs[variant] || bgs.purple;

  // Resolve mask path relative to current page (works from /pages/* too)
  const maskUrl = (typeof location !== "undefined" && location.pathname.includes("/pages/"))
    ? "../antelope-mask.png"
    : "antelope-mask.png";

  return (
    <span style={{
      display: "inline-flex",
      alignItems: "center",
      gap: 10,
      color: c,
      fontFamily: "var(--font-display)",
      fontWeight: 700,
      letterSpacing: "-0.02em",
      fontSize: size,
    }}>
      <span style={{
        display: "inline-block",
        width: markW,
        height: markH,
        background: bg,
        WebkitMaskImage: `url(${maskUrl})`,
        maskImage: `url(${maskUrl})`,
        WebkitMaskSize: "contain",
        maskSize: "contain",
        WebkitMaskRepeat: "no-repeat",
        maskRepeat: "no-repeat",
        WebkitMaskPosition: "center",
        maskPosition: "center",
        WebkitMaskMode: "alpha",
        maskMode: "alpha",
        flexShrink: 0,
      }}/>
      antelope
    </span>
  );
};

window.Logo = Logo;