// @design-system: feedback/EmptyState/illustrations/Maintenance
/**
 * Maintenance — gear + traffic cone + MDLogo on dark brand bg.
 * Used with EmptyState illustration prop for scheduled maintenance states.
 */
import { MDLogo } from '@/components/ui/icons/MDLogo';

export function Maintenance() {
  return (
    <svg
      viewBox="0 0 140 140"
      width="140"
      height="140"
      xmlns="http://www.w3.org/2000/svg"
      aria-hidden="true"
      focusable="false"
    >
      {/* Dark brand halo */}
      <circle cx="70" cy="70" r="64" fill="var(--color-brand-primary-700)" />
      {/* Gear outline */}
      <path
        d="M70 42 L74 36 L80 38 L82 44 L88 46 L94 42 L98 46 L96 52 L100 58 L106 60 L106 66 L100 68 L98 74 L100 80 L96 84 L90 82 L84 86 L82 92 L76 92 L74 86 L68 84 L62 88 L56 84 L58 78 L54 72 L48 70 L48 64 L54 62 L56 56 L52 50 L56 46 L62 48 L68 44 Z"
        fill="none"
        stroke="var(--color-brand-primary-200)"
        strokeWidth="2"
      />
      <circle
        cx="77"
        cy="64"
        r="10"
        fill="none"
        stroke="var(--color-brand-primary-200)"
        strokeWidth="2"
      />
      {/* Traffic cone */}
      <polygon points="70,88 60,114 80,114" fill="var(--color-warning-500)" opacity="0.9" />
      <line
        x1="62"
        y1="104"
        x2="78"
        y2="104"
        stroke="var(--color-brand-primary-50)"
        strokeWidth="2"
      />
      {/* MDLogo bottom right — outline mode for dark bg */}
      <foreignObject x="90" y="100" width="36" height="26">
        <MDLogo size={36} outline />
      </foreignObject>
    </svg>
  );
}