// Antelope logo — Geometric Horns (horns pointing UP) + wordmark
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 + 6} height={size + 6} viewBox="0 0 28 28" fill="none" aria-hidden="true">
        <defs>
          <linearGradient id="lg-mark" x1="0" y1="0" x2="0" y2="28" gradientUnits="userSpaceOnUse">
            <stop offset="0" stopColor="#7A52FF"/>
            <stop offset="1" stopColor="#5A2DF4"/>
          </linearGradient>
        </defs>
        {/* Two curved horns rising upward from a base point */}
        <path d="M6 2 C 6 12, 10 20, 14 24 C 18 20, 22 12, 22 2" stroke="url(#lg-mark)" strokeWidth="2.4" strokeLinecap="round" fill="none"/>
        <path d="M9 6 C 10 11, 12 15, 14 17" stroke="url(#lg-mark)" strokeWidth="1.6" strokeLinecap="round" fill="none" opacity="0.55"/>
        <path d="M19 6 C 18 11, 16 15, 14 17" stroke="url(#lg-mark)" strokeWidth="1.6" strokeLinecap="round" fill="none" opacity="0.55"/>
        <circle cx="14" cy="24" r="1.6" fill="#F118B2"/>
      </svg>
      antelope
    </span>
  );
};

window.Logo = Logo;