// Gravithas mark — small λ inside a thin orbital ring with two dots
// orbiting around it. Deep-tech monochrome (no pink).
const Logo = ({ size = 30 }) => (
  <span className="logo-mark" style={{ width: size, height: size }}>
    <svg viewBox="0 0 64 64" width={size} height={size} aria-label="Gravithas">
      <defs>
        <radialGradient id="lg-bg" cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor="#1a1c2c" />
          <stop offset="100%" stopColor="#0a0b14" />
        </radialGradient>
      </defs>
      {/* Disk */}
      <circle cx="32" cy="32" r="28" fill="url(#lg-bg)" />
      {/* Ring */}
      <circle cx="32" cy="32" r="27.5" fill="none"
              stroke="rgba(220, 224, 240, 0.30)" strokeWidth="1" />
      {/* λ — smaller, centered */}
      <g stroke="#dfe3f5" strokeWidth="3.6" strokeLinecap="round" fill="none">
        <path d="M 28 22 L 41 46" />
        <path d="M 33 30 L 23 46" />
      </g>
    </svg>
    {/* Two orbiting dots — counter-rotating speeds */}
    <span className="orbit orbit-a"><span className="orbit-dot" /></span>
    <span className="orbit orbit-b"><span className="orbit-dot orbit-dot-b" /></span>
  </span>
);

window.Logo = Logo;