// Clustermind logo — AI-flavored orbital marks
// Builds on the orbital concept with neural/signal cues:
//  - Synaptic nodes pulse along the orbits
//  - Asymmetric "thinking" with a probability arc
//  - Tilted axes = perceptron / attention head feel

// Primary: Synaptic Orbital
// A nucleus with two crossing orbits; neural nodes sit on the orbits,
// with one pulsing accent node ("active synapse"). Reads as both atom and brain.
function LogoSynapticOrbital({ size = 40, color = "currentColor", accent = "var(--accent)", animate = true }) {
  const c = size / 2;
  const rxA = size * 0.42, ryA = size * 0.17;
  const rxB = size * 0.42, ryB = size * 0.17;
  // points on the ellipses (parametric)
  const pt = (rx, ry, t, rot) => {
    const x = rx * Math.cos(t);
    const y = ry * Math.sin(t);
    const cs = Math.cos(rot), sn = Math.sin(rot);
    return [c + x * cs - y * sn, c + x * sn + y * cs];
  };
  const rotA = (-30 * Math.PI) / 180;
  const rotB = (35 * Math.PI) / 180;

  // synaptic node positions
  const nodesA = [0.4, 1.6, 2.9, 4.4].map((t) => pt(rxA, ryA, t, rotA));
  const nodesB = [0.7, 2.1, 3.6, 5.0].map((t) => pt(rxB, ryB, t, rotB));

  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ overflow: 'visible' }}>
      {/* faint outer halo */}
      <circle cx={c} cy={c} r={size * 0.46} fill="none" stroke={color} strokeWidth={size * 0.008} opacity="0.18" />
      {/* orbits */}
      <g transform={`rotate(${(-30)} ${c} ${c})`}>
        <ellipse cx={c} cy={c} rx={rxA} ry={ryA} fill="none" stroke={color} strokeWidth={size * 0.018} opacity="0.7" strokeLinecap="round" />
      </g>
      <g transform={`rotate(${35} ${c} ${c})`}>
        <ellipse cx={c} cy={c} rx={rxB} ry={ryB} fill="none" stroke={color} strokeWidth={size * 0.018} opacity="0.7" strokeLinecap="round" />
      </g>
      {/* synaptic nodes on orbits */}
      {nodesA.concat(nodesB).map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r={size * 0.035} fill={color} opacity={0.85} />
      ))}
      {/* accent active node — bigger + ring */}
      {(() => {
        const [x, y] = pt(rxA, ryA, 0.4, rotA);
        return (
          <g key="active">
            <circle cx={x} cy={y} r={size * 0.075} fill="none" stroke={accent} strokeWidth={size * 0.014} className={animate ? "cm-pulse" : ""}
              style={{ transformOrigin: `${x}px ${y}px` }} />
            <circle cx={x} cy={y} r={size * 0.045} fill={accent} />
          </g>
        );
      })()}
      {/* nucleus */}
      <circle cx={c} cy={c} r={size * 0.10} fill={color} />
      <circle cx={c} cy={c} r={size * 0.18} fill="none" stroke={color} strokeWidth={size * 0.006} opacity="0.4" />
    </svg>
  );
}

// Variant: Probabilistic Orbital
// A nucleus with three thin probability arcs (open ellipses) and a soft
// gradient halo node — feels generative/diffusion-like.
function LogoProbOrbital({ size = 40, color = "currentColor", accent = "var(--accent)" }) {
  const c = size / 2;
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <defs>
        <radialGradient id={`po-glow-${size}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={accent} stopOpacity="0.55" />
          <stop offset="100%" stopColor={accent} stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx={c} cy={c} r={size * 0.46} fill={`url(#po-glow-${size})`} />
      {/* three probability arcs */}
      {[-40, 0, 40].map((deg, i) => (
        <g key={i} transform={`rotate(${deg} ${c} ${c})`}>
          <path
            d={`M ${c - size * 0.4} ${c} A ${size * 0.4} ${size * 0.16} 0 0 1 ${c + size * 0.4} ${c}`}
            fill="none" stroke={color} strokeWidth={size * 0.018} strokeLinecap="round"
            opacity={0.55 + i * 0.15}
          />
        </g>
      ))}
      {/* sparkle nodes */}
      <circle cx={c + size * 0.34} cy={c - size * 0.18} r={size * 0.04} fill={accent} />
      <circle cx={c - size * 0.30} cy={c + size * 0.20} r={size * 0.03} fill={color} opacity="0.7" />
      <circle cx={c} cy={c - size * 0.30} r={size * 0.025} fill={color} opacity="0.55" />
      {/* nucleus — slightly off-center for asymmetric "thought" */}
      <circle cx={c} cy={c} r={size * 0.10} fill={color} />
      <circle cx={c} cy={c} r={size * 0.05} fill={accent} />
    </svg>
  );
}

function Wordmark({ Mark = LogoSynapticOrbital, size = 22, color = "currentColor", showDot = false, accent }) {
  return (
    <span className="cm-wordmark" style={{ color }}>
      <Mark size={size} color={color} accent={accent || "var(--accent)"} />
      <span style={{ fontWeight: 600, letterSpacing: '-0.025em' }}>
        Clustermind{showDot && <span style={{ color: 'var(--accent)' }}>.</span>}
      </span>
    </span>
  );
}

Object.assign(window, { LogoSynapticOrbital, LogoProbOrbital, Wordmark });