// SVG icons
const Icon = ({ name, size = 20, stroke = 1.5, className = "" }) => {
  const props = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round", className };
  switch (name) {
    case "bell":
      return <svg {...props}><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>;
    case "briefcase":
      return <svg {...props}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M3 13h18"/></svg>;
    case "home":
      return <svg {...props}><path d="M3 10.5 12 3l9 7.5"/><path d="M5 9.5V20a1 1 0 0 0 1 1h4v-6h4v6h4a1 1 0 0 0 1-1V9.5"/></svg>;
    case "stethoscope":
      return <svg {...props}><path d="M6 3v6a4 4 0 0 0 8 0V3"/><path d="M6 3h2M12 3h2"/><path d="M10 13v3a5 5 0 0 0 10 0v-1"/><circle cx="20" cy="13" r="2"/></svg>;
    case "file":
      return <svg {...props}><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/><path d="M9 13h6M9 17h4"/></svg>;
    case "phone":
      return <svg {...props}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    case "mobile":
      return <svg {...props}><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></svg>;
    case "mail":
      return <svg {...props}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>;
    case "fax":
      return <svg {...props}><path d="M6 9V3h12v6"/><rect x="3" y="9" width="18" height="9" rx="2"/><path d="M6 18v3h12v-3"/><path d="M9 13h6"/></svg>;
    case "map":
      return <svg {...props}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "arrow-right":
      return <svg {...props}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "check":
      return <svg {...props} strokeWidth={2.5}><path d="m5 12 5 5L20 7"/></svg>;
    case "leaf":
      return <svg {...props}><path d="M11 20A7 7 0 0 1 4 13c0-5.5 4.5-10 10-10h6v6c0 5.5-4.5 10-10 10H4"/><path d="M4 13c5-1 8-4 9-9"/></svg>;
    case "naver":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M14.4 12.6 9.4 5.4H4.5v13.2h5.1V11.4l5 7.2h4.9V5.4h-5.1z"/></svg>;
    case "kakao":
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 4C6.8 4 2.5 7.4 2.5 11.5c0 2.7 1.8 5.1 4.5 6.4l-1 3.7c-.1.4.3.6.6.4l4.4-2.9c.3 0 .7.1 1 .1 5.2 0 9.5-3.4 9.5-7.5S17.2 4 12 4z"/></svg>;
    case "menu":
      return <svg {...props}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    default: return null;
  }
};

// Logo SVG — stylized version inspired by the brand mark
const LogoMark = ({ size = 36, color = "#8E8878", leafColor = "#8FB186" }) => (
  <svg width={size} height={size} viewBox="0 0 60 60" fill="none">
    {/* Rounded arch container */}
    <path d="M30 6 C 17 6 8 16 8 30 L 8 50 C 8 52 9.5 53 11.5 53 L 48.5 53 C 50.5 53 52 52 52 50 L 52 30 C 52 16 43 6 30 6 Z"
      stroke={color} strokeWidth="2.5" fill="none"/>
    {/* Korean character impression — circles for ㅇ + ㅗ feeling */}
    <circle cx="22" cy="26" r="3.4" stroke={color} strokeWidth="2" fill="none"/>
    <path d="M24 38 Q 30 32 36 38" stroke={color} strokeWidth="2" strokeLinecap="round" fill="none"/>
    <circle cx="38" cy="26" r="2.6" stroke={color} strokeWidth="2" fill="none"/>
    {/* Leaf accent */}
    <path d="M40 14 Q 44 10 48 14 Q 44 16 40 14 Z" fill={leafColor}/>
    <path d="M44 14 L 44 18" stroke={leafColor} strokeWidth="1.2" strokeLinecap="round"/>
  </svg>
);

window.Icon = Icon;
window.LogoMark = LogoMark;