// Custom geometric monogram-marks for each project.
// All inherit currentColor + thin-stroke aesthetic.

const LogoPMClaws = ({ size = 64 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round">
    <path d="M14 14 Q26 26 14 50" />
    <path d="M32 10 Q32 26 32 54" />
    <path d="M50 14 Q38 26 50 50" />
    <circle cx="32" cy="22" r="1.6" fill="currentColor" stroke="none" />
  </svg>
);

const LogoAIRadar = ({ size = 64 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round">
    <circle cx="32" cy="32" r="22" />
    <circle cx="32" cy="32" r="14" opacity="0.55" />
    <circle cx="32" cy="32" r="6.5" opacity="0.35" />
    <line x1="32" y1="32" x2="50" y2="14" />
    <circle cx="50" cy="14" r="1.8" fill="currentColor" stroke="none" />
  </svg>
);

const LogoTabsAI = ({ size = 64 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" strokeLinecap="round">
    <path d="M10 22 L22 22 L25 18 L54 18 L54 50 L10 50 Z" />
    <line x1="10" y1="26" x2="54" y2="26" opacity="0.5" />
    <path d="M18 32 L34 32" opacity="0.5" />
    <path d="M18 38 L30 38" opacity="0.35" />
    <path d="M18 44 L26 44" opacity="0.25" />
  </svg>
);

// Freya Fun: a joyful 8-point star/sparkle, with a soft smile glyph at center.
// Reads as "play, spark, joy" without being a kid-emoji cliche.
const LogoFreyaFun = ({ size = 64 }) => {
  const cx = 32, cy = 32;
  const rays = [];
  for (let i = 0; i < 8; i++) {
    const a = (i * Math.PI) / 4;
    const inner = i % 2 === 0 ? 14 : 10;
    const outer = i % 2 === 0 ? 24 : 18;
    rays.push(
      <line key={i}
        x1={cx + Math.cos(a) * inner}
        y1={cy + Math.sin(a) * inner}
        x2={cx + Math.cos(a) * outer}
        y2={cy + Math.sin(a) * outer}
        opacity={i % 2 === 0 ? 0.9 : 0.5}
      />
    );
  }
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round">
      <circle cx={cx} cy={cy} r="9" />
      {rays}
      {/* tiny smile inside */}
      <path d="M28 32 Q32 36 36 32" opacity="0.7" />
    </svg>
  );
};

const LogoMyNewEra = ({ size = 64 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round">
    <line x1="8" y1="44" x2="56" y2="44" />
    <path d="M16 44 A16 16 0 0 1 48 44" />
    <line x1="6" y1="50" x2="14" y2="50" opacity="0.55" />
    <line x1="20" y1="50" x2="44" y2="50" opacity="0.55" />
    <line x1="50" y1="50" x2="58" y2="50" opacity="0.55" />
    <circle cx="32" cy="44" r="1.6" fill="currentColor" stroke="none" />
  </svg>
);

// ─── Agent logos: gradient shape + letterform + ears ────────────────
// Each agent has its own primary shape (rounded square / circle / diamond)
// filled with a soft gradient. The letter sits inside the shape, with two
// little antenna-ears on top giving it a friendly creature read.

const AGENT_GRADIENT_ID_R = "agent-grad-r";
const AGENT_GRADIENT_ID_A = "agent-grad-a";
const AGENT_GRADIENT_ID_E = "agent-grad-e";

const AgentGradient = ({ id }) => (
  <defs>
    <radialGradient id={id} cx="35%" cy="30%" r="80%">
      <stop offset="0%" stopColor="currentColor" stopOpacity="0.22" />
      <stop offset="60%" stopColor="currentColor" stopOpacity="0.10" />
      <stop offset="100%" stopColor="currentColor" stopOpacity="0.04" />
    </radialGradient>
  </defs>
);

const LogoRaeya = ({ size = 64 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round">
    <AgentGradient id={AGENT_GRADIENT_ID_R} />
    {/* Ears */}
    <line x1="20" y1="6" x2="20" y2="12" />
    <line x1="44" y1="6" x2="44" y2="12" />
    <circle cx="20" cy="6" r="1.2" fill="currentColor" stroke="none" />
    <circle cx="44" cy="6" r="1.2" fill="currentColor" stroke="none" />
    {/* Rounded-square head with gradient fill */}
    <rect x="14" y="14" width="36" height="38" rx="6" fill={`url(#${AGENT_GRADIENT_ID_R})`} stroke="currentColor" strokeOpacity="0.45" />
    {/* R-mark inside */}
    <path d="M22 22 L22 46" />
    <path d="M22 22 L36 22 Q42 22 42 28 Q42 34 36 34 L22 34" />
    <path d="M32 34 L42 46" />
  </svg>
);

const LogoAva = ({ size = 64 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" strokeLinecap="round">
    <AgentGradient id={AGENT_GRADIENT_ID_A} />
    {/* Ears */}
    <line x1="22" y1="8" x2="22" y2="14" />
    <line x1="42" y1="8" x2="42" y2="14" />
    <circle cx="22" cy="8" r="1.2" fill="currentColor" stroke="none" />
    <circle cx="42" cy="8" r="1.2" fill="currentColor" stroke="none" />
    {/* Circle head with gradient fill */}
    <circle cx="32" cy="35" r="20" fill={`url(#${AGENT_GRADIENT_ID_A})`} stroke="currentColor" strokeOpacity="0.45" />
    {/* A-mark inside */}
    <path d="M24 46 L32 24 L40 46" />
    <path d="M27 40 L37 40" opacity="0.85" />
  </svg>
);

const LogoEra = ({ size = 64 }) => (
  <svg width={size} height={size} viewBox="0 0 64 64" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" strokeLinecap="round">
    <AgentGradient id={AGENT_GRADIENT_ID_E} />
    {/* Ears */}
    <line x1="26" y1="4" x2="26" y2="10" />
    <line x1="38" y1="4" x2="38" y2="10" />
    <circle cx="26" cy="4" r="1.2" fill="currentColor" stroke="none" />
    <circle cx="38" cy="4" r="1.2" fill="currentColor" stroke="none" />
    {/* Diamond head with gradient fill */}
    <path d="M32 12 L54 34 L32 56 L10 34 Z" fill={`url(#${AGENT_GRADIENT_ID_E})`} stroke="currentColor" strokeOpacity="0.45" />
    {/* E-mark inside */}
    <path d="M26 28 L38 28" />
    <path d="M26 35 L36 35" opacity="0.85" />
    <path d="M26 42 L38 42" />
    <path d="M26 28 L26 42" opacity="0.5" />
  </svg>
);

window.ProjectLogos = {
  pmclaws: LogoPMClaws,
  airadar: LogoAIRadar,
  tabsai: LogoTabsAI,
  freya: LogoFreyaFun,
  mynewera: LogoMyNewEra,
  raeya: LogoRaeya,
  ava: LogoAva,
  era: LogoEra,
};
