// Lola orb — purple-to-navy radial sphere. Gradient is fixed by brand spec.
function LolaOrb({ size = 24, style = {}, className = "" }) {
  const id = React.useId();
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      className={className}
      style={{ display: "inline-block", flexShrink: 0, ...style }}
      aria-label="Lola"
    >
      <defs>
        <radialGradient id={`lola-${id}`} cx="35%" cy="30%" r="75%">
          <stop offset="0%" stopColor="#C9A8FF" />
          <stop offset="35%" stopColor="#8B5CF6" />
          <stop offset="75%" stopColor="#3B2A8C" />
          <stop offset="100%" stopColor="#0F0B3D" />
        </radialGradient>
        <radialGradient id={`lola-hl-${id}`} cx="32%" cy="25%" r="22%">
          <stop offset="0%" stopColor="rgba(255,255,255,0.55)" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </radialGradient>
      </defs>
      <circle cx="50" cy="50" r="48" fill={`url(#lola-${id})`} />
      <circle cx="50" cy="50" r="48" fill={`url(#lola-hl-${id})`} />
    </svg>
  );
}

window.LolaOrb = LolaOrb;