// 67proxies logo — original mark: interlocked "6" and "7" forming a network node ring
// with a central dot representing a routed request.

function Logo67({ size = 28, variant = 'full', color }) {
  const accent = color || 'var(--accent)';
  const fg = 'var(--fg-0)';
  const h = size;
  // Mark: ring with two node caps at 6 and 7 o'clock positions
  const mark = (
    <svg width={h} height={h} viewBox="0 0 32 32" fill="none" style={{ display: 'block' }}>
      <defs>
        <linearGradient id="lg67" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor={accent} />
          <stop offset="1" stopColor="var(--accent-2)" />
        </linearGradient>
      </defs>
      {/* Outer ring, broken */}
      <path d="M16 3 A13 13 0 1 1 3 16" stroke="url(#lg67)" strokeWidth="2.5" strokeLinecap="round" />
      {/* Inner arc */}
      <path d="M24 8 A10 10 0 0 1 24 24" stroke={accent} strokeWidth="2" strokeLinecap="round" opacity="0.45" />
      {/* Nodes */}
      <circle cx="16" cy="3" r="2.2" fill={accent} />
      <circle cx="3" cy="16" r="2.2" fill={accent} />
      <circle cx="24" cy="24" r="2" fill={accent} opacity="0.7" />
      {/* Center dot */}
      <circle cx="16" cy="16" r="2.4" fill={accent} />
      <circle cx="16" cy="16" r="5" stroke={accent} strokeWidth="1" opacity="0.3" />
    </svg>
  );

  if (variant === 'mark') return mark;

  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
      {mark}
      <div style={{
        fontFamily: "'Space Grotesk', sans-serif",
        fontWeight: 600, fontSize: size * 0.62,
        letterSpacing: '-0.02em', color: fg, lineHeight: 1,
        display: 'flex', alignItems: 'baseline',
      }}>
        <span style={{ color: accent }}>67</span>
        <span style={{ fontWeight: 400 }}>proxies</span>
      </div>
    </div>
  );
}

window.Logo67 = Logo67;