// Shared atoms — icons, placeholder image slots, mini chrome
const RDIcon = ({ name, size = 22, stroke = 1.6 }) => {
  const common = {
    width: size, height: size, viewBox: "0 0 24 24",
    fill: "none", stroke: "currentColor",
    strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round"
  };
  switch (name) {
    case "drop":
      return <svg {...common}><path d="M12 3.5s5.5 6 5.5 10a5.5 5.5 0 0 1-11 0c0-4 5.5-10 5.5-10Z" /></svg>;
    case "thermo":
      return <svg {...common}><path d="M14 14.8V5a2 2 0 1 0-4 0v9.8a4 4 0 1 0 4 0Z" /><path d="M12 9v6" /></svg>;
    case "shield":
      return <svg {...common}><path d="M12 3 5 6v6c0 4.5 3.2 7.5 7 9 3.8-1.5 7-4.5 7-9V6l-7-3Z" /></svg>;
    case "bulb":
      return <svg {...common}><path d="M9 18h6" /><path d="M10 21h4" /><path d="M12 3a6 6 0 0 0-4 10.5c.8.8 1.5 1.7 2 3h4c.5-1.3 1.2-2.2 2-3A6 6 0 0 0 12 3Z" /></svg>;
    case "leaf":
      return <svg {...common}><path d="M20 4C9 4 4 11 4 20" /><path d="M20 4c0 9-5 16-16 16" /></svg>;
    case "wifi-off":
      return <svg {...common}><path d="M2 8.8C5 6 8.4 4.5 12 4.5c1.6 0 3.2.3 4.6.8" /><path d="M5 12.7c1.5-1.2 3.2-2 5-2.4" /><path d="M8.5 16.3c1-.6 2.2-1 3.5-1" /><path d="M12 20h.01" /><path d="m2 2 20 20" /></svg>;
    case "mic":
      return <svg {...common}><rect x="9" y="3" width="6" height="12" rx="3" /><path d="M5 11a7 7 0 0 0 14 0" /><path d="M12 18v3" /></svg>;
    case "zap":
      return <svg {...common}><path d="m13 2-9 12h8l-1 8 9-12h-8l1-8Z" /></svg>;
    case "house":
      return <svg {...common}><path d="M3 11 12 4l9 7" /><path d="M5 10v9h14v-9" /></svg>;
    case "phone":
      return <svg {...common}><rect x="7" y="2" width="10" height="20" rx="2.5" /><path d="M11 18h2" /></svg>;
    case "gauge":
      return <svg {...common}><path d="M4 13a8 8 0 0 1 16 0" /><path d="M12 13 9 8" /><circle cx="12" cy="13" r="1.2" fill="currentColor" /></svg>;
    case "valve":
      return <svg {...common}><circle cx="12" cy="12" r="4" /><path d="M12 4v4M12 16v4M4 12h4M16 12h4" /></svg>;
    case "motion":
      return <svg {...common}><circle cx="12" cy="6" r="2" /><path d="M14 11l3 3-3 6" /><path d="M10 11l-3 3 3 6" /><path d="M12 8v6" /></svg>;
    case "door":
      return <svg {...common}><path d="M6 3h12v18H6z" /><circle cx="14.5" cy="12.5" r="0.8" fill="currentColor" /></svg>;
    case "camera":
      return <svg {...common}><rect x="3" y="6" width="14" height="12" rx="2" /><path d="m21 8-4 4 4 4V8Z" /></svg>;
    case "humid":
      return <svg {...common}><path d="M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11Z" /><path d="M9 14a3 3 0 0 0 3 3" /></svg>;
    case "fan":
      return <svg {...common}><path d="M12 12c0-6 6-3 6 0s-6 0-6 0Z" /><path d="M12 12c6 0 3 6 0 6s0-6 0-6Z" /><path d="M12 12c0 6-6 3-6 0s6 0 6 0Z" /><path d="M12 12c-6 0-3-6 0-6s0 6 0 6Z" /></svg>;
    case "sprout":
      return <svg {...common}><path d="M12 21V11" /><path d="M12 11c0-3 2-5 5-5 0 3-2 5-5 5Z" /><path d="M12 13C9 13 7 11 7 8c3 0 5 2 5 5Z" /></svg>;
    case "play":
      return <svg {...common}><path d="M6 4v16l14-8L6 4Z" fill="currentColor" /></svg>;
    case "check":
      return <svg {...common}><path d="m5 12 5 5 9-11" /></svg>;
    case "x":
      return <svg {...common}><path d="m6 6 12 12M18 6 6 18" /></svg>;
    case "arrow-right":
      return <svg {...common}><path d="M5 12h14" /><path d="m13 6 6 6-6 6" /></svg>;
    case "arrow-down":
      return <svg {...common}><path d="M12 5v14" /><path d="m6 13 6 6 6-6" /></svg>;
    case "plus":
      return <svg {...common}><path d="M5 12h14M12 5v14" /></svg>;
    case "minus":
      return <svg {...common}><path d="M5 12h14" /></svg>;
    case "moon":
      return <svg {...common}><path d="M20 14A8 8 0 0 1 10 4a8 8 0 1 0 10 10Z" /></svg>;
    case "sun":
      return <svg {...common}><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>;
    case "key":
      return <svg {...common}><circle cx="8" cy="14" r="4" /><path d="m11 11 9-9" /><path d="m17 5 3 3" /><path d="m14 8 2 2" /></svg>;
    case "cloud-off":
      return <svg {...common}><path d="M17 17H7a4 4 0 0 1-1-7.8" /><path d="M9 6a5 5 0 0 1 9 3" /><path d="m2 2 20 20" /></svg>;
    case "blinds":
      return <svg {...common}><rect x="4" y="3" width="16" height="14" rx="1.5" /><path d="M4 7h16M4 10.5h16M4 14h16" /><path d="M12 17v3" /><path d="M9.5 20h5" /></svg>;
    case "curtain":
      return <svg {...common}><path d="M3 3h18" /><path d="M6 3c0 7-1.5 12-3 16" /><path d="M10 3c0 8 .5 12 0 17" /><path d="M14 3c-.5 5 0 9 0 17" /><path d="M18 3c1.5 4 2.5 9 3 16" /></svg>;
    case "switch":
      return <svg {...common}><rect x="5" y="3" width="14" height="18" rx="3" /><circle cx="12" cy="9" r="2.4" /><path d="M12 14v3" /></svg>;
    case "mirror":
      return <svg {...common}><rect x="6" y="2.5" width="12" height="19" rx="6" /><path d="M9 6.5a4 4 0 0 1 3-1.5" /></svg>;
    case "vacuum":
      return <svg {...common}><circle cx="12" cy="12" r="8.5" /><circle cx="12" cy="12" r="2.2" /><path d="M12 3.5v3M12 17.5v3M3.5 12h3M17.5 12h3" /></svg>;
    case "kettle":
      return <svg {...common}><path d="M6 9h12l-1.2 9.5a2 2 0 0 1-2 1.5H9.2a2 2 0 0 1-2-1.5L6 9Z" /><path d="M6 9 4 6" /><path d="M9 5h6" /></svg>;
    case "snow":
      return <svg {...common}><path d="M12 2v20M4.5 6.5 19.5 17.5M19.5 6.5 4.5 17.5" /><path d="M9 4l3 2 3-2M9 20l3-2 3 2M4.5 9.5l.5 3.3 3-.8M19.5 9.5l-.5 3.3-3-.8M5 14.8l-.5-3.3M19 14.8l.5-3.3" /></svg>;
    case "boiler":
      return <svg {...common}><rect x="6" y="3" width="12" height="18" rx="5" /><path d="M9 8h6" /><circle cx="12" cy="15" r="2.2" /></svg>;
    case "pool":
      return <svg {...common}><path d="M3 15c1.5 0 1.5-1.5 3-1.5s1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5" /><path d="M3 19c1.5 0 1.5-1.5 3-1.5s1.5 1.5 3 1.5 1.5-1.5 3-1.5 1.5 1.5 3 1.5 1.5-1.5 3-1.5" /><path d="M8 11V5a2 2 0 0 1 4 0M16 11V5" /></svg>;
    case "flame":
      return <svg {...common}><path d="M12 3c1 3 4 4.5 4 8a4 4 0 0 1-8 0c0-1.5.7-2.5 1.5-3.3C10 8.5 11.5 6 12 3Z" /></svg>;
    case "smoke":
      return <svg {...common}><path d="M6 16h12a3.4 3.4 0 0 0 .4-6.8 5 5 0 0 0-9.7-1.5A3.6 3.6 0 0 0 6 16Z" /><path d="M8.5 19.5c.9-.7.9-1.7 0-2.4M12 19.5c.9-.7.9-1.7 0-2.4M15.5 19.5c.9-.7.9-1.7 0-2.4" /></svg>;
    case "panel":
      return <svg {...common}><rect x="3" y="4" width="18" height="14" rx="2.5" /><path d="M7 9h4M7 13h7" /><circle cx="16.5" cy="9" r="1.6" /></svg>;
    case "doc":
      return <svg {...common}><path d="M6 2h8l4 4v16H6V2Z" /><path d="M14 2v4h4" /><path d="M9 13h6M9 17h6" /></svg>;
    case "palette":
      return <svg {...common}><path d="M12 3a9 9 0 1 0 0 18c1 0 1.6-.8 1.6-1.7 0-1.4-1-1.8-1-2.8 0-.8.7-1.5 1.6-1.5H16a5 5 0 0 0 5-5c0-3.9-4-7-9-7Z" /><circle cx="8" cy="11" r="1" fill="currentColor" /><circle cx="12" cy="8" r="1" fill="currentColor" /><circle cx="16" cy="11" r="1" fill="currentColor" /></svg>;
    case "gear":
      return <svg {...common}><circle cx="12" cy="12" r="3" /><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8" /></svg>;
    case "edit":
      return <svg {...common}><path d="M4 20h4l10-10-4-4L4 16v4Z" /><path d="m13.5 6.5 4 4" /></svg>;
    case "trash":
      return <svg {...common}><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13h10l1-13" /></svg>;
    case "logo":
      return <img src="assets/logo-mark.png" width={size} height={size} alt="РазумДом"
        style={{ display: "block", flexShrink: 0, borderRadius: Math.round(size * 0.25), objectFit: "cover" }} />;
    default:return null;
  }
};

// Diagonal-striped placeholder image
const Placeholder = ({ label, height = 220, style }) =>
<div className="ph" style={{ height, ...(style || {}) }}>
    <div className="ph-label">{label}</div>
  </div>;


window.RDIcon = RDIcon;
window.Placeholder = Placeholder;