// Tiny icon set — stroke-based, line-art. Keep simple.
const Icon = ({name, size=14, stroke=1.6, className=''}) => {
  const s = size, sw = stroke;
  const common = {width:s, height:s, viewBox:'0 0 24 24', fill:'none', stroke:'currentColor', strokeWidth:sw, strokeLinecap:'round', strokeLinejoin:'round', className:'ic '+className};
  switch(name){
    case 'dashboard': return <svg {...common}><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></svg>;
    case 'building': return <svg {...common}><rect x="4" y="3" width="16" height="18"/><path d="M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2"/><path d="M10 21v-3h4v3"/></svg>;
    case 'users': return <svg {...common}><circle cx="9" cy="8" r="3"/><path d="M3 20c0-3 2.7-5 6-5s6 2 6 5"/><circle cx="17" cy="9" r="2.5"/><path d="M15 20c0-2.2 1.8-4 4-4"/></svg>;
    case 'wrench': return <svg {...common}><path d="M14 7a4 4 0 0 0 5.3 5.3l-8.6 8.6a2.1 2.1 0 0 1-3-3l8.6-8.6A4 4 0 0 0 14 7z"/><circle cx="17" cy="7" r="2.5"/></svg>;
    case 'calendar': return <svg {...common}><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'doc': return <svg {...common}><path d="M14 3H6v18h12V7z"/><path d="M14 3v4h4"/><path d="M9 12h6M9 16h4"/></svg>;
    case 'chat': return <svg {...common}><path d="M4 5h16v12H9l-5 4z"/></svg>;
    case 'bell': return <svg {...common}><path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"/><path d="M10 20a2 2 0 0 0 4 0"/></svg>;
    case 'settings': return <svg {...common}><circle cx="12" cy="12" r="3"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></svg>;
    case 'home': return <svg {...common}><path d="M4 10l8-7 8 7v10H4z"/><path d="M10 20v-6h4v6"/></svg>;
    case 'plus': return <svg {...common}><path d="M12 5v14M5 12h14"/></svg>;
    case 'search': return <svg {...common}><circle cx="11" cy="11" r="6"/><path d="M20 20l-4-4"/></svg>;
    case 'chevron-down': return <svg {...common}><path d="M6 9l6 6 6-6"/></svg>;
    case 'chevron-right': return <svg {...common}><path d="M9 6l6 6-6 6"/></svg>;
    case 'chevron-left': return <svg {...common}><path d="M15 6l-6 6 6 6"/></svg>;
    case 'arrow-right': return <svg {...common}><path d="M5 12h14M13 6l6 6-6 6"/></svg>;
    case 'alert': return <svg {...common}><path d="M12 3l10 18H2z"/><path d="M12 10v5M12 18.5v.5"/></svg>;
    case 'check': return <svg {...common}><path d="M4 12l5 5 11-11"/></svg>;
    case 'x': return <svg {...common}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'filter': return <svg {...common}><path d="M3 5h18l-7 9v5l-4 2v-7z"/></svg>;
    case 'grid': return <svg {...common}><rect x="3" y="3" width="8" height="8"/><rect x="13" y="3" width="8" height="8"/><rect x="3" y="13" width="8" height="8"/><rect x="13" y="13" width="8" height="8"/></svg>;
    case 'list': return <svg {...common}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>;
    case 'pin': return <svg {...common}><path d="M12 2v7l3 3v3h-6v-3l3-3V2zM12 15v7"/></svg>;
    case 'image': return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="1"/><circle cx="9" cy="10" r="1.5"/><path d="M21 16l-5-5-8 8"/></svg>;
    case 'paperclip': return <svg {...common}><path d="M21 12l-8.5 8.5a5 5 0 0 1-7-7L14 5a3.5 3.5 0 0 1 5 5l-9 9a2 2 0 0 1-3-3l8-8"/></svg>;
    case 'send': return <svg {...common}><path d="M22 2L11 13"/><path d="M22 2l-7 20-4-9-9-4z"/></svg>;
    case 'eye': return <svg {...common}><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z"/><circle cx="12" cy="12" r="3"/></svg>;
    case 'lock': return <svg {...common}><rect x="4" y="11" width="16" height="10" rx="1"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>;
    case 'shield': return <svg {...common}><path d="M12 2l8 3v7c0 5-3.5 8-8 10-4.5-2-8-5-8-10V5z"/></svg>;
    case 'server': return <svg {...common}><rect x="3" y="4" width="18" height="7" rx="1"/><rect x="3" y="13" width="18" height="7" rx="1"/><path d="M7 8h.01M7 17h.01"/></svg>;
    case 'cube': return <svg {...common}><path d="M12 2l9 5v10l-9 5-9-5V7z"/><path d="M3 7l9 5 9-5M12 12v10"/></svg>;
    case 'sparkle': return <svg {...common}><path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg>;
    case 'euro': return <svg {...common}><path d="M18 6a7 7 0 1 0 0 12"/><path d="M4 10h9M4 14h9"/></svg>;
    case 'chf': return <svg {...common}><path d="M17 5h-7v14"/><path d="M7 12h10"/></svg>;
    case 'phone': return <svg {...common}><path d="M22 16v3a2 2 0 0 1-2 2A19 19 0 0 1 2 4a2 2 0 0 1 2-2h3a2 2 0 0 1 2 1.7l.5 3a2 2 0 0 1-.6 1.9L7.5 10a16 16 0 0 0 6.5 6.5l1.4-1.4a2 2 0 0 1 1.9-.6l3 .5A2 2 0 0 1 22 16z"/></svg>;
    case 'mail': return <svg {...common}><rect x="2" y="5" width="20" height="14" rx="1"/><path d="M2 7l10 7 10-7"/></svg>;
    case 'camera': return <svg {...common}><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>;
    case 'sanitar': return <svg {...common}><path d="M7 3h10v6H7zM9 9v4a3 3 0 0 0 6 0V9M12 16v5"/></svg>;
    case 'electro': return <svg {...common}><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg>;
    case 'door': return <svg {...common}><path d="M6 2v20h12V2zM15 12h.01"/></svg>;
    case 'heat': return <svg {...common}><path d="M12 3s4 4 4 8a4 4 0 0 1-8 0c0-4 4-8 4-8z"/></svg>;
    case 'mold': return <svg {...common}><circle cx="8" cy="10" r="3"/><circle cx="15" cy="14" r="3"/><circle cx="12" cy="7" r="2"/></svg>;
    case 'device': return <svg {...common}><rect x="3" y="4" width="18" height="16" rx="1"/><path d="M3 10h18M7 7h.01"/></svg>;
    case 'washer': return <svg {...common}><rect x="4" y="3" width="16" height="18" rx="1"/><circle cx="12" cy="13" r="5"/><path d="M7 6h.01M10 6h.01"/></svg>;
    case 'key': return <svg {...common}><circle cx="7" cy="15" r="3"/><path d="M9 13l8-8 3 3-3 3-2-2-3 3"/></svg>;
    case 'flag-ch': return (
      <svg width={size} height={size} viewBox="0 0 24 24" className={'ic '+className}>
        <rect width="24" height="24" fill="#DC0018"/>
        <rect x="10" y="5" width="4" height="14" fill="#fff"/>
        <rect x="5" y="10" width="14" height="4" fill="#fff"/>
      </svg>
    );
    case 'logout': return <svg {...common}><path d="M9 21H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5"/><path d="M16 17l5-5-5-5"/><path d="M21 12H9"/></svg>;
    case 'logo-cross': return (
      <span className="brand-mark" aria-hidden="true"></span>
    );
    default: return <svg {...common}><circle cx="12" cy="12" r="8"/></svg>;
  }
};

const CategoryIcon = ({cat}) => {
  const map={
    'Sanitär':'sanitar','Elektro':'electro','Fenster/Türen':'door','Heizung':'heat',
    'Schimmel':'mold','Geräte':'device','Allgemein':'cube','Allgemeinbereich':'cube','Sonstiges':'cube'
  };
  return <Icon name={map[cat]||'cube'} size={13}/>;
};

Object.assign(window, {Icon, CategoryIcon});