// Motion-ready SVG illustrations for special states.
// Kept restrained, monotone with brand blue accent; use currentColor
// so parents can tint. Named groups (data-anim) mark elements
// intended for later animation.

function AtRiskIllus({ size = 128 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128" fill="none" aria-hidden="true">
      <defs>
        <radialGradient id="ari-halo" cx="50%" cy="50%" r="50%">
          <stop offset="0%"  stopColor="#FF381C" stopOpacity="0.14" />
          <stop offset="70%" stopColor="#FF381C" stopOpacity="0.02" />
          <stop offset="100%" stopColor="#FF381C" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="64" cy="64" r="60" fill="url(#ari-halo)" data-anim="pulse" />
      {/* rays */}
      <g stroke="#FF381C" strokeWidth="1.75" strokeLinecap="round" opacity="0.45" data-anim="rays">
        <path d="M64 12 v10" />
        <path d="M64 106 v10" />
        <path d="M12 64 h10" />
        <path d="M106 64 h10" />
        <path d="M28 28 l7 7" />
        <path d="M93 93 l7 7" />
        <path d="M100 28 l-7 7" />
        <path d="M35 93 l-7 7" />
      </g>
      {/* clock */}
      <circle cx="64" cy="64" r="30" fill="#FDFDFD" stroke="#FF381C" strokeWidth="1.75" />
      <circle cx="64" cy="64" r="30" fill="none" stroke="#101010" strokeWidth="1.5" opacity="0.08" />
      {/* tick marks */}
      <g stroke="#101010" strokeWidth="1.5" strokeLinecap="round" opacity="0.35">
        <path d="M64 40 v3" />
        <path d="M64 85 v3" />
        <path d="M40 64 h3" />
        <path d="M85 64 h3" />
      </g>
      {/* hands */}
      <g data-anim="hands" stroke="#101010" strokeLinecap="round">
        <path d="M64 64 v-14" strokeWidth="2.25" />
        <path d="M64 64 l12 6"  strokeWidth="2" opacity="0.75" />
      </g>
      <circle cx="64" cy="64" r="2.5" fill="#FF381C" />
      {/* exclamation */}
      <g transform="translate(93 34)" data-anim="badge">
        <circle cx="10" cy="10" r="10" fill="#FF381C" />
        <path d="M10 5 v6"  stroke="white" strokeWidth="2" strokeLinecap="round" />
        <circle cx="10" cy="14" r="1.25" fill="white" />
      </g>
    </svg>
  );
}

function BlockedIllus({ size = 128 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128" fill="none" aria-hidden="true">
      <defs>
        <linearGradient id="bl-gate" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FDFDFD" />
          <stop offset="1" stopColor="#F1F1F1" />
        </linearGradient>
      </defs>
      <circle cx="64" cy="64" r="56" fill="#F52495" opacity="0.06" />
      {/* gate arm */}
      <g data-anim="gate">
        <rect x="18" y="60" width="88" height="10" rx="2.5" fill="url(#bl-gate)" stroke="#7B7B7B" strokeWidth="1.5" />
        <g fill="#FF381C">
          <rect x="24" y="60" width="10" height="10" />
          <rect x="46" y="60" width="10" height="10" />
          <rect x="68" y="60" width="10" height="10" />
          <rect x="90" y="60" width="10" height="10" />
        </g>
      </g>
      {/* pole */}
      <rect x="12" y="40" width="6" height="60" rx="3" fill="#7B7B7B" opacity="0.6" />
      <circle cx="15" cy="40" r="6" fill="#FF381C" />
      {/* base */}
      <path d="M8 108 h112" stroke="#101010" strokeWidth="1.5" strokeLinecap="round" opacity="0.18" strokeDasharray="2 5" />
    </svg>
  );
}

function ContractReminderIllus({ size = 128 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128" fill="none" aria-hidden="true">
      <defs>
        <linearGradient id="cri-paper" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#FDFDFD" />
          <stop offset="1" stopColor="#F1F1F1" />
        </linearGradient>
      </defs>
      <circle cx="64" cy="64" r="52" fill="#FF9D34" opacity="0.10" data-anim="halo" />
      {/* back paper */}
      <g transform="rotate(-6 60 68)">
        <rect x="30" y="30" width="60" height="76" rx="8" fill="url(#cri-paper)" stroke="#E2E2E2" strokeWidth="1.5" />
        <path d="M78 30 l0 12 l12 0" fill="#F1F1F1" stroke="#E2E2E2" strokeWidth="1.5" />
        <g stroke="#7B7B7B" strokeWidth="1.5" strokeLinecap="round" opacity="0.45">
          <path d="M38 52 h32" />
          <path d="M38 60 h44" />
          <path d="M38 68 h40" />
          <path d="M38 76 h30" />
        </g>
      </g>
      {/* orbital clock */}
      <g data-anim="orbit" transform="translate(84 84)">
        <circle r="18" fill="#FDFDFD" stroke="#FF9D34" strokeWidth="1.75" />
        <path d="M0 0 v-11" stroke="#101010" strokeWidth="2" strokeLinecap="round" />
        <path d="M0 0 l8 4" stroke="#101010" strokeWidth="1.75" strokeLinecap="round" opacity="0.75" />
        <circle r="1.75" fill="#FF9D34" />
      </g>
    </svg>
  );
}

function NoResultsIllus({ size = 128 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128" fill="none" aria-hidden="true">
      <defs>
        <pattern id="nr-grid" x="0" y="0" width="16" height="16" patternUnits="userSpaceOnUse">
          <path d="M16 0 L0 0 0 16" stroke="#E2E2E2" strokeWidth="1" fill="none" />
        </pattern>
      </defs>
      <circle cx="64" cy="64" r="56" fill="#F9F9F9" />
      <rect x="12" y="12" width="104" height="104" rx="14" fill="url(#nr-grid)" opacity="0.7" />
      <g transform="translate(46 40)" data-anim="magnify">
        <circle cx="26" cy="26" r="22" fill="#FDFDFD" stroke="#2A85FF" strokeWidth="2" />
        <path d="M42 42 L58 58" stroke="#2A85FF" strokeWidth="3" strokeLinecap="round" />
        <path d="M18 26 h16" stroke="#7B7B7B" strokeWidth="1.75" strokeLinecap="round" />
      </g>
    </svg>
  );
}

function ResearchHighlightIllus({ size = 128 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128" fill="none" aria-hidden="true">
      <circle cx="64" cy="64" r="52" fill="#CABDFF" opacity="0.18" />
      <g data-anim="layers">
        <rect x="26" y="46" width="56" height="66" rx="6" fill="#FDFDFD" stroke="#E2E2E2" strokeWidth="1.5" transform="rotate(-4 54 79)" />
        <rect x="36" y="34" width="60" height="72" rx="6" fill="#FDFDFD" stroke="#E2E2E2" strokeWidth="1.5" />
        <g stroke="#7B7B7B" strokeWidth="1.5" strokeLinecap="round" opacity="0.45">
          <path d="M46 52 h32" />
          <path d="M46 60 h40" />
          <path d="M46 68 h30" />
          <path d="M46 76 h36" />
          <path d="M46 84 h22" />
        </g>
        <rect x="46" y="42" width="18" height="4" rx="1.5" fill="#7F5FFF" />
      </g>
      {/* highlight glow */}
      <circle cx="94" cy="42" r="10" fill="#F52495" opacity="0.12" data-anim="pulse" />
      <circle cx="94" cy="42" r="5" fill="#F52495" />
    </svg>
  );
}

// Small utility mark for empty file/doc slots
function EmptyDocIllus({ size = 128 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 128 128" fill="none" aria-hidden="true">
      <circle cx="64" cy="64" r="56" fill="#F9F9F9" />
      <g data-anim="doc" transform="translate(38 26)">
        <rect x="0" y="0" width="52" height="76" rx="8" fill="#FDFDFD" stroke="#E2E2E2" strokeWidth="1.5" />
        <path d="M40 0 L40 12 L52 12" stroke="#E2E2E2" strokeWidth="1.5" fill="#F1F1F1" />
        <g stroke="#E2E2E2" strokeWidth="1.5" strokeLinecap="round">
          <path d="M8 26 h30" />
          <path d="M8 34 h36" />
          <path d="M8 42 h24" />
          <path d="M8 50 h30" />
        </g>
      </g>
      {/* plus badge */}
      <g transform="translate(84 76)">
        <circle cx="10" cy="10" r="12" fill="#2A85FF" />
        <path d="M10 5 v10 M5 10 h10" stroke="white" strokeWidth="2" strokeLinecap="round" />
      </g>
    </svg>
  );
}

Object.assign(window, {
  AtRiskIllus, BlockedIllus, ContractReminderIllus,
  NoResultsIllus, ResearchHighlightIllus, EmptyDocIllus,
});
