// Hi-fi icon set — thin outline, 24×24 viewBox, currentColor stroke.
// Matches the calm-utility line-icon style of the reference.

const HIcon = ({ kind, size = 18, style = {} }) => {
  const sw = 1.5;
  const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round', style };
  switch (kind) {
    case 'home':
      return (<svg {...props}><path d="M3 11 L12 4 L21 11 V20 H14 V14 H10 V20 H3 Z"/></svg>);
    case 'grid':
      return (<svg {...props}><rect x="3.5" y="3.5" width="7" height="7"/><rect x="13.5" y="3.5" width="7" height="7"/><rect x="3.5" y="13.5" width="7" height="7"/><rect x="13.5" y="13.5" width="7" height="7"/></svg>);
    case 'repeat':
      return (<svg {...props}><path d="M4 9 A5 5 0 0 1 14 6 M20 6 H14 V12 M20 15 A5 5 0 0 1 10 18 M4 18 H10 V12"/></svg>);
    case 'phone':
      return (<svg {...props}><path d="M5 4 H9 L10.5 8 L8.5 9.5 A8 8 0 0 0 14.5 15.5 L16 13.5 L20 15 V19 A2 2 0 0 1 18 21 A15 15 0 0 1 3 6 A2 2 0 0 1 5 4 Z"/></svg>);
    case 'check':
      return (<svg {...props}><rect x="3.5" y="3.5" width="17" height="17" rx="2"/><path d="M7 12 L10.5 15.5 L17 8.5"/></svg>);
    case 'settings':
      return (<svg {...props}><circle cx="12" cy="12" r="3"/><path d="M12 2 V5 M12 19 V22 M2 12 H5 M19 12 H22 M5 5 L7 7 M17 17 L19 19 M5 19 L7 17 M17 7 L19 5"/></svg>);
    case 'search':
      return (<svg {...props}><circle cx="10.5" cy="10.5" r="6.5"/><path d="M15.5 15.5 L21 21"/></svg>);
    case 'plus':
      return (<svg {...props}><path d="M12 5 V19 M5 12 H19"/></svg>);
    case 'bell':
      return (<svg {...props}><path d="M6 16 V10 A6 6 0 0 1 18 10 V16 L20 18 H4 Z M10 21 A2 2 0 0 0 14 21"/></svg>);
    case 'chev':
      return (<svg {...props}><path d="M9 6 L15 12 L9 18"/></svg>);
    case 'chevd':
      return (<svg {...props}><path d="M6 9 L12 15 L18 9"/></svg>);
    case 'chevu':
      return (<svg {...props}><path d="M6 15 L12 9 L18 15"/></svg>);
    case 'arrow-up':
      return (<svg {...props}><path d="M12 19 V5 M5 12 L12 5 L19 12"/></svg>);
    case 'arrow-up-right':
      return (<svg {...props}><path d="M7 17 L17 7 M9 7 H17 V15"/></svg>);
    case 'arrow-down-right':
      return (<svg {...props}><path d="M7 7 L17 17 M17 9 V17 H9"/></svg>);
    case 'cal':
      return (<svg {...props}><rect x="3.5" y="5.5" width="17" height="15" rx="2"/><path d="M3.5 10 H20.5 M8 3 V7 M16 3 V7"/></svg>);
    case 'drop':
      return (<svg {...props}><path d="M12 3 Q5 11 6 16 A6 6 0 0 0 18 16 Q19 11 12 3 Z"/></svg>);
    case 'bolt':
      return (<svg {...props}><path d="M13 3 L4 14 H11 L10 21 L20 9 H13 Z"/></svg>);
    case 'plug':
      return (<svg {...props}><path d="M8 3 V8 M16 3 V8 M5 8 H19 V12 A5 5 0 0 1 9 12 Z M12 17 V21"/></svg>);
    case 'wrench':
      return (<svg {...props}><path d="M14 6 A4 4 0 1 0 18 10 L21 13 L13 21 L3 11 L5 9 L7 11 Z"/></svg>);
    case 'tree':
      return (<svg {...props}><path d="M12 3 L7 10 H10 L6 16 H10 L5 22 H19 L14 16 H18 L14 10 H17 Z"/></svg>);
    case 'sun':
      return (<svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2 V4 M12 20 V22 M2 12 H4 M20 12 H22 M4.5 4.5 L5.9 5.9 M18.1 18.1 L19.5 19.5 M4.5 19.5 L5.9 18.1 M18.1 5.9 L19.5 4.5"/></svg>);
    case 'kingsleigh':
      // Simple geometric "K" mark — square tile with K cut into it.
      return (<svg width={size} height={size} viewBox="0 0 24 24" style={style}><rect x="1.5" y="1.5" width="21" height="21" rx="5" fill="currentColor"/><path d="M8 7 V17 M8 12 L14 7 M8 12 L14 17" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>);
    case 'dots':
      return (<svg {...props}><circle cx="6" cy="12" r="1.4" fill="currentColor"/><circle cx="12" cy="12" r="1.4" fill="currentColor"/><circle cx="18" cy="12" r="1.4" fill="currentColor"/></svg>);
    case 'filter':
      return (<svg {...props}><path d="M3 5 H21 L14 13 V20 L10 18 V13 Z"/></svg>);
    case 'mail':
      return (<svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7 L12 13 L21 7"/></svg>);
    case 'lock':
      return (<svg {...props}><rect x="4.5" y="10.5" width="15" height="9.5" rx="2"/><path d="M8 10.5 V7.5 A4 4 0 0 1 16 7.5 V10.5"/><circle cx="12" cy="15" r="1"/></svg>);
    case 'lockopen':
      return (<svg {...props}><rect x="4.5" y="10.5" width="15" height="9.5" rx="2"/><path d="M8 10.5 V7.5 A4 4 0 0 1 15.8 6.2"/><circle cx="12" cy="15" r="1"/></svg>);
    case 'logout':
      return (<svg {...props}><path d="M14 4 H6 A2 2 0 0 0 4 6 V18 A2 2 0 0 0 6 20 H14 M16 8 L20 12 L16 16 M20 12 H10"/></svg>);
    case 'users':
      return (<svg {...props}><circle cx="9" cy="8" r="3.2"/><path d="M3.5 20 A5.5 5.5 0 0 1 14.5 20 M16 5.2 A3.2 3.2 0 0 1 16 11 M17 13.4 A5.5 5.5 0 0 1 20.5 18.6"/></svg>);
    case 'user':
      return (<svg {...props}><circle cx="12" cy="8" r="3.5"/><path d="M5 20 A7 7 0 0 1 19 20"/></svg>);
    case 'globe':
      return (<svg {...props}><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12 H20.5 M12 3.5 C15 7 15 17 12 20.5 C9 17 9 7 12 3.5"/></svg>);
    case 'clock':
      return (<svg {...props}><circle cx="12" cy="12" r="8.5"/><path d="M12 7 V12 L15.5 14"/></svg>);
    case 'eye':
      return (<svg {...props}><path d="M2.5 12 C5 7 9 5 12 5 C15 5 19 7 21.5 12 C19 17 15 19 12 19 C9 19 5 17 2.5 12 Z"/><circle cx="12" cy="12" r="3"/></svg>);
    case 'eyeoff':
      return (<svg {...props}><path d="M4 5 L20 19 M9.5 9.7 A3 3 0 0 0 14.2 14.4 M6.5 7 C4.7 8.2 3.3 9.9 2.5 12 C5 17 9 19 12 19 C13.4 19 14.9 18.6 16.2 17.9 M19 15.5 C20 14.5 20.9 13.4 21.5 12 C19 7 15 5 12 5 C11.4 5 10.8 5.1 10.2 5.2"/></svg>);
    case 'backspace':
      return (<svg {...props}><path d="M8 5 H20 A1.5 1.5 0 0 1 21.5 6.5 V17.5 A1.5 1.5 0 0 1 20 19 H8 L2.5 12 Z M16 9.5 L11 14.5 M11 9.5 L16 14.5"/></svg>);
    case 'link':
      return (<svg {...props}><path d="M10 14 A4 4 0 0 0 14 14 L17 11 A4 4 0 0 0 11.5 5.5 L10 7 M14 10 A4 4 0 0 0 10 10 L7 13 A4 4 0 0 0 12.5 18.5 L14 17"/></svg>);
    case 'shield':
      return (<svg {...props}><path d="M12 3 L19 6 V11 C19 16 15.5 19.5 12 21 C8.5 19.5 5 16 5 11 V6 Z M9 12 L11 14 L15.5 9.5"/></svg>);
    case 'sync':
      return (<svg {...props}><path d="M20 8 A8 8 0 0 0 5.5 6.5 M20 4 V8 H16 M4 16 A8 8 0 0 0 18.5 17.5 M4 20 V16 H8"/></svg>);
    case 'sparkle':
      return (<svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" style={style}><path d="M12 3.5 L13.8 9.1 L19.4 10.9 L13.8 12.7 L12 18.3 L10.2 12.7 L4.6 10.9 L10.2 9.1 Z"/><path d="M18.5 3 L19.3 5.4 L21.7 6.2 L19.3 7 L18.5 9.4 L17.7 7 L15.3 6.2 L17.7 5.4 Z"/></svg>);
    case 'file':
      return (<svg {...props}><path d="M6.5 3 H14 L18.5 7.5 V21 H6.5 Z"/><path d="M14 3 V7.5 H18.5"/><path d="M9 13 H15 M9 16.5 H15"/></svg>);
    case 'upload':
      return (<svg {...props}><path d="M12 15 V4 M8 8 L12 4 L16 8 M5 15 V19 A1 1 0 0 0 6 20 H18 A1 1 0 0 0 19 19 V15"/></svg>);
    case 'trash':
      return (<svg {...props}><path d="M4 6 H20 M9 6 V4 H15 V6 M7 6 L8 20 H16 L17 6 M10 10 V16 M14 10 V16"/></svg>);
    case 'external':
      return (<svg {...props}><path d="M14 4 H20 V10 M20 4 L11 13 M18 14 V19 A1 1 0 0 1 17 20 H5 A1 1 0 0 1 4 19 V7 A1 1 0 0 1 5 6 H10"/></svg>);
    case 'activity':
      return (<svg {...props}><path d="M3 12 H6.5 L9.5 5 L14.5 19 L17 12 H21"/></svg>);
    case 'pencil':
      return (<svg {...props}><path d="M14.5 5.5 L18.5 9.5 M4 20 L4.8 16 L15 5.8 A1.5 1.5 0 0 1 17.2 5.8 L18.2 6.8 A1.5 1.5 0 0 1 18.2 9 L8 19.2 Z"/></svg>);
    default:
      return (<svg {...props}><circle cx="12" cy="12" r="8"/></svg>);
  }
};

window.HIcon = HIcon;