// Skori brand mark — a flat, Kurzgesagt-style ringed planet in brand teal.
// Geometric, two-tone flat shading, an orbit ring and a sparkle. Pure SVG so it
// stays crisp at any size and inherits no theming surprises.
export function PlanetMark({
  size = 96,
  className = "",
}: {
  size?: number;
  className?: string;
}) {
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      fill="none"
      className={className}
      role="img"
      aria-label="Skori"
    >
      <defs>
        <linearGradient id="skori-planet" x1="20" y1="18" x2="78" y2="82">
          <stop offset="0%" stopColor="#5eead4" />
          <stop offset="55%" stopColor="#14b8a6" />
          <stop offset="100%" stopColor="#0d9488" />
        </linearGradient>
        <clipPath id="skori-clip">
          <circle cx="50" cy="50" r="28" />
        </clipPath>
      </defs>

      {/* Orbit ring — back half (behind the planet) */}
      <path
        d="M 12 66 A 42 14 -18 0 1 88 40"
        stroke="#a5f3fc"
        strokeWidth="4.5"
        strokeLinecap="round"
        className="dark:opacity-90"
      />

      {/* Planet body */}
      <circle cx="50" cy="50" r="28" fill="url(#skori-planet)" />

      {/* Flat two-tone shading + craters, clipped to the planet */}
      <g clipPath="url(#skori-clip)">
        <circle cx="72" cy="70" r="30" fill="#0f766e" opacity="0.5" />
        <circle cx="40" cy="40" r="6" fill="#99f6e4" opacity="0.55" />
        <circle cx="58" cy="56" r="4" fill="#0f766e" opacity="0.45" />
        <circle cx="46" cy="62" r="3" fill="#0f766e" opacity="0.4" />
      </g>

      {/* Orbit ring — front half (in front of the planet) */}
      <path
        d="M 12 66 A 42 14 -18 0 0 88 40"
        stroke="#22d3ee"
        strokeWidth="4.5"
        strokeLinecap="round"
      />

      {/* Sparkle */}
      <path
        d="M 80 20 q 2 6 8 8 q -6 2 -8 8 q -2 -6 -8 -8 q 6 -2 8 -8 z"
        fill="#fde68a"
      />
    </svg>
  );
}
