// Custom icon set — 24x24, 1.75 stroke, rounded. Hand-drawn for liturgical feel.
const Icon = ({ name, size = 24, color = 'currentColor', strokeWidth = 1.75, ...rest }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24', fill: 'none',
    stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round',
    ...rest,
  };
  switch (name) {
    case 'home':       return (<svg {...props}><path d="M3 11l9-7 9 7v9a2 2 0 0 1-2 2h-3v-7h-8v7H5a2 2 0 0 1-2-2z"/></svg>);
    case 'book':       return (<svg {...props}><path d="M4 5a2 2 0 0 1 2-2h12v16H6a2 2 0 0 0-2 2zM4 19a2 2 0 0 1 2-2h12"/></svg>);
    case 'music':      return (<svg {...props}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>);
    case 'mic':        return (<svg {...props}><rect x="9" y="3" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M8 21h8"/></svg>);
    case 'user':       return (<svg {...props}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>);
    case 'search':     return (<svg {...props}><circle cx="11" cy="11" r="7"/><path d="m20 20-4.35-4.35"/></svg>);
    case 'play':       return (<svg {...props} fill="currentColor" stroke="none"><path d="M7 4.5v15l13-7.5z"/></svg>);
    case 'pause':      return (<svg {...props} fill="currentColor" stroke="none"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>);
    case 'skip-fwd':   return (<svg {...props}><path d="m5 4 10 8-10 8zM19 4v16"/></svg>);
    case 'skip-back':  return (<svg {...props}><path d="M19 20 9 12l10-8zM5 4v16"/></svg>);
    case 'flame':      return (<svg {...props}><path d="M12 2s5 5 5 10a5 5 0 1 1-10 0c0-2 1-3 1-3s1 2 3 2c0-3-2-5 1-9z"/></svg>);
    case 'star':       return (<svg {...props}><path d="m12 3 2.7 6 6.3.6-4.8 4.3 1.5 6.1L12 17l-5.7 3 1.5-6.1L3 9.6 9.3 9z"/></svg>);
    case 'check':      return (<svg {...props}><path d="m4 12 5 5L20 6"/></svg>);
    case 'check-circle': return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="m8 12 3 3 5-6"/></svg>);
    case 'lock':       return (<svg {...props}><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>);
    case 'calendar':   return (<svg {...props}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>);
    case 'bookmark':   return (<svg {...props}><path d="M6 3h12v18l-6-4-6 4z"/></svg>);
    case 'cross':      return (<svg {...props}><path d="M12 3v18M9 7h6M5 11h14"/></svg>);
    case 'chevron-r':  return (<svg {...props}><path d="m9 6 6 6-6 6"/></svg>);
    case 'chevron-l':  return (<svg {...props}><path d="m15 6-6 6 6 6"/></svg>);
    case 'chevron-d':  return (<svg {...props}><path d="m6 9 6 6 6-6"/></svg>);
    case 'chevron-u':  return (<svg {...props}><path d="m6 15 6-6 6 6"/></svg>);
    case 'x':          return (<svg {...props}><path d="M5 5l14 14M19 5 5 19"/></svg>);
    case 'plus':       return (<svg {...props}><path d="M12 5v14M5 12h14"/></svg>);
    case 'menu':       return (<svg {...props}><path d="M4 7h16M4 12h16M4 17h16"/></svg>);
    case 'volume':     return (<svg {...props}><path d="M5 9v6h4l5 4V5L9 9z"/><path d="M17 8a5 5 0 0 1 0 8M20 5a9 9 0 0 1 0 14"/></svg>);
    case 'settings':   return (<svg {...props}><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1A1.7 1.7 0 0 0 4.6 9a1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></svg>);
    case 'sun':        return (<svg {...props}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>);
    case 'moon':       return (<svg {...props}><path d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z"/></svg>);
    case 'ankh':       return (<svg {...props}><circle cx="12" cy="7" r="4"/><path d="M12 11v11M7 16h10"/></svg>);
    case 'incense':    return (<svg {...props}><path d="M12 3c-1 2 1 3 0 5M9 9h6l-1 5h-4z"/><path d="M8 17h8M10 17v3M14 17v3"/></svg>);
    case 'scroll':     return (<svg {...props}><path d="M5 6a2 2 0 1 1 4 0v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-2H7M9 6h10v10"/></svg>);
    case 'wave':       return (<svg {...props}><path d="M3 12c2-4 4-4 6 0s4 4 6 0 4-4 6 0"/></svg>);
    case 'trophy':     return (<svg {...props}><path d="M8 4h8v6a4 4 0 0 1-8 0z"/><path d="M8 4H5v3a3 3 0 0 0 3 3M16 4h3v3a3 3 0 0 1-3 3M9 18h6M12 14v4"/></svg>);
    case 'fire':       return (<svg {...props}><path d="M12 2c0 4-3 5-3 9a3 3 0 0 0 6 0c0-1 0-2-1-3 1 0 3 2 3 5a5 5 0 1 1-10 0c0-3 2-5 3-7s2-3 2-4z"/></svg>);
    case 'heart':      return (<svg {...props}><path d="M20.8 7.6a5 5 0 0 0-8.8-3 5 5 0 1 0-7 7l7 7 7-7a5 5 0 0 0 1.8-4z"/></svg>);
    case 'eye':        return (<svg {...props}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>);
    case 'sparkle':    return (<svg {...props}><path d="M12 3v5M12 16v5M3 12h5M16 12h5M5.6 5.6l3.5 3.5M14.9 14.9l3.5 3.5M5.6 18.4l3.5-3.5M14.9 9.1l3.5-3.5"/></svg>);
    case 'globe':      return (<svg {...props}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>);
    case 'arrow-r':    return (<svg {...props}><path d="M5 12h14M13 6l6 6-6 6"/></svg>);
    case 'shuffle':    return (<svg {...props}><path d="M16 3h5v5M21 3l-7 7M21 16v5h-5M14 14l7 7M3 3l5 5M16 16l5 5"/></svg>);
    case 'list':       return (<svg {...props}><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>);
    case 'grid':       return (<svg {...props}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>);
    default:           return (<svg {...props}><circle cx="12" cy="12" r="9"/></svg>);
  }
};

window.Icon = Icon;