/* ============================================================
   Icon set — single <Icon name= size= color= /> component
   Stroke icons (Ionicons-ish), plus a few filled.
   ============================================================ */
const ICON_PATHS = {
  // stroke
  mail:        '<path d="M4 6h16a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z"/><path d="m3.5 7 8.5 6 8.5-6"/>',
  lock:        '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/>',
  eye:         '<path d="M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z"/><circle cx="12" cy="12" r="3"/>',
  eyeOff:      '<path d="M4 4l16 16"/><path d="M9.5 9.6A3 3 0 0 0 12 15a3 3 0 0 0 2.4-1.2"/><path d="M6.3 6.4C3.9 7.9 2.5 12 2.5 12s3.5 6.5 9.5 6.5a9 9 0 0 0 4-.9"/><path d="M17.8 16.2C20 14.7 21.5 12 21.5 12S18 5.5 12 5.5c-.7 0-1.4.1-2 .2"/>',
  person:      '<circle cx="12" cy="8" r="4"/><path d="M4.5 20a7.5 7.5 0 0 1 15 0"/>',
  home:        '<path d="M4 11.5 12 4l8 7.5"/><path d="M6 10v9a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1v-9"/><path d="M10 20v-5h4v5"/>',
  calendar:    '<rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17M8 3v4M16 3v4"/>',
  chat:        '<path d="M4 5h16a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H9l-4 3.5V16H4a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Z"/>',
  send:        '<path d="M21 4 3 11l6 2.5L11 20l3.5-7L21 4Z"/><path d="m9 13.5 5.5-5.5"/>',
  notes:       '<path d="M9 4h7l4 4v12a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z"/><path d="M15 4v5h5M11 13h6M11 16.5h6"/>',
  logout:      '<path d="M14 5H6a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8"/><path d="m15 8 4 4-4 4M9 12h10"/>',
  back:        '<path d="m14 6-6 6 6 6"/>',
  arrowRight:  '<path d="m9 6 6 6-6 6"/>',
  chevDown:    '<path d="m6 9 6 6 6-6"/>',
  check:       '<path d="m4.5 12.5 5 5 10-11"/>',
  checkCircle: '<circle cx="12" cy="12" r="9"/><path d="m8 12 2.6 2.6L16 9"/>',
  bulb:        '<path d="M9 18h6M10 21h4"/><path d="M12 3a6 6 0 0 0-3.6 10.8c.6.5 1.1 1.2 1.3 2.2h4.6c.2-1 .7-1.7 1.3-2.2A6 6 0 0 0 12 3Z"/>',
  link:        '<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7L11.3 7"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 1 0 5.7 5.7L12.7 17"/>',
  clock:       '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/>',
  target:      '<circle cx="12" cy="12" r="8.5"/><circle cx="12" cy="12" r="4.5"/><circle cx="12" cy="12" r=".6" fill="currentColor"/>',
  guitar:      '<path d="M16.5 4.2a1.6 1.6 0 0 1 2.3 0l1 1a1.6 1.6 0 0 1 0 2.3l-6 6"/><path d="m13.8 13.5-1.6-1.6"/><path d="M12.4 12.1c-1.3-1.3-3.2-1.1-4.7.1-1.8 1.4-2 3-3 4-1.4 1.4-1.5 3.6-.2 4.9s3.5 1.2 4.9-.2c1-1 1.4-2.4 2.8-3.4 1.5-1.2 1.5-3.1.2-5.4Z"/><circle cx="9" cy="15" r="1.6"/>',
  trash:       '<path d="M5 7h14M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M7 7l1 13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1l1-13"/>',
  play:        '<path d="M8 5.5v13l11-6.5-11-6.5Z" fill="currentColor" stroke="none"/>',
  people:      '<circle cx="9" cy="8" r="3.4"/><path d="M3.5 19a5.5 5.5 0 0 1 11 0"/><path d="M16 5.2a3.4 3.4 0 0 1 0 6.4M17.5 19a5.5 5.5 0 0 0-2-4.3"/>',
  video:       '<rect x="3" y="6" width="13" height="12" rx="2"/><path d="m16 10 5-3v10l-5-3"/>',
  clipboard:   '<rect x="6" y="4" width="12" height="17" rx="2"/><rect x="9" y="2.5" width="6" height="3.2" rx="1"/><path d="M9 11h6M9 14.5h4"/>',
  grid:        '<rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/>',
  search:      '<circle cx="11" cy="11" r="6.5"/><path d="m16 16 4.5 4.5"/>',
  bell:        '<path d="M6 16V11a6 6 0 0 1 12 0v5l1.5 2.5H4.5L6 16Z"/><path d="M10 19a2 2 0 0 0 4 0"/>',
  music:       '<path d="M9 18V6l10-2v12"/><circle cx="6.5" cy="18" r="2.5"/><circle cx="16.5" cy="16" r="2.5"/>',
  wifi:        '<path d="M2 8.5C4.8 6 8.2 4.6 12 4.6S19.2 6 22 8.5M5 11.6C7 9.9 9.4 9 12 9s5 .9 7 2.6M8 14.7c1.1-1 2.5-1.5 4-1.5s2.9.5 4 1.5"/><circle cx="12" cy="18" r="1.2" fill="currentColor" stroke="none"/>',
  signal:      '<rect x="2" y="13" width="3" height="6" rx="1" fill="currentColor" stroke="none"/><rect x="7" y="9" width="3" height="10" rx="1" fill="currentColor" stroke="none"/><rect x="12" y="5.5" width="3" height="13.5" rx="1" fill="currentColor" stroke="none"/><rect x="17" y="2.5" width="3" height="16.5" rx="1" fill="currentColor" stroke="none"/>',
};

function Icon({ name, size = 22, color = 'currentColor', stroke = 2, fill = 'none', style }) {
  const isFilled = name === 'play';
  return (
    <svg width={size} height={size} viewBox="0 0 24 24"
      fill={isFilled ? color : fill}
      stroke={isFilled ? 'none' : color}
      strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
      style={style}
      dangerouslySetInnerHTML={{ __html: ICON_PATHS[name] || '' }} />
  );
}

// battery glyph for status bar
function Battery({ color = '#EFECEC' }) {
  return (
    <svg width="26" height="14" viewBox="0 0 26 14" fill="none">
      <rect x="1" y="1.5" width="21" height="11" rx="3" stroke={color} strokeOpacity="0.5" strokeWidth="1.2"/>
      <rect x="2.6" y="3" width="16" height="8" rx="1.6" fill={color}/>
      <path d="M23.5 5v4c1 -.3 1.6 -1 1.6 -2s-.6 -1.7 -1.6 -2Z" fill={color} fillOpacity="0.5"/>
    </svg>
  );
}

window.Icon = Icon;
window.Battery = Battery;