// Custom Antelope-inspired wordmark + gem mark (original — not their actual logo)
const Logo = ({ size = 22, color }) => {
  const c = color || "currentColor";
  return (
    <span style={{ display: "inline-flex", alignItems: "center", gap: 9, color: c, fontFamily: "var(--font-display)", fontWeight: 700, letterSpacing: "-0.02em", fontSize: size }}>
      <svg width={size + 4} height={size + 4} viewBox="0 0 28 28" fill="none" aria-hidden="true">
        <defs>
          <linearGradient id="lg-mark" x1="0" y1="0" x2="28" y2="28" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#7A52FF"/>
            <stop offset="0.55" stopColor="#5A2DF4"/>
            <stop offset="1" stopColor="#F118B2"/>
          </linearGradient>
        </defs>
        <path d="M14 2 L25 9 L21 26 L14 21 L7 26 L3 9 Z" fill="url(#lg-mark)"/>
        <path d="M14 2 L25 9 L21 26 L14 21 L7 26 L3 9 Z" fill="none" stroke="rgba(255,255,255,0.18)" strokeWidth="1"/>
        <path d="M14 8 L19 11 L17 19 L14 17 L11 19 L9 11 Z" fill="rgba(255,255,255,0.14)"/>
      </svg>
      antelope
    </span>
  );
};

window.Logo = Logo;