// Inline SVG icons — stroke style, rounded
const Icon = ({ name, size = 20, color = "currentColor", ...rest }) => {
  const c = color;
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: c, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", ...rest };
  switch (name) {
    case "compass": return <svg {...common}><circle cx="12" cy="12" r="9"/><polygon points="15.5 8.5 10 10 8.5 15.5 14 14" fill={c} stroke="none"/></svg>;
    case "sun": return <svg {...common}><circle cx="12" cy="12" r="4"/><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 "moon": return <svg {...common}><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>;
    case "leaf": return <svg {...common}><path d="M5 20A10 10 0 0 1 20 5c.5 5-2 11-9 13.5-1 .5-3 1-6 1.5Z"/><path d="M5 20c4-4 7-7 12-11"/></svg>;
    case "arrow": return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "mail": return <svg {...common}><rect x="3" y="5" width="18" height="14" rx="3"/><path d="m4 7 8 6 8-6"/></svg>;
    case "phone": return <svg {...common}><path d="M5 4h4l2 5-3 2a11 11 0 0 0 5 5l2-3 5 2v4a2 2 0 0 1-2 2A17 17 0 0 1 3 6a2 2 0 0 1 2-2Z"/></svg>;
    case "pin": return <svg {...common}><path d="M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13Z"/><circle cx="12" cy="9" r="2.5"/></svg>;
    case "external": return <svg {...common}><path d="M7 17 17 7M9 7h8v8"/></svg>;
    case "sparkle": return <svg {...common}><path d="M12 3l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6Z"/></svg>;
    case "diamond": return <svg {...common}><path d="M12 3 3 12l9 9 9-9-9-9Z"/></svg>;
    case "hex": return <svg {...common}><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3Z"/></svg>;
    case "cloud": return <svg {...common}><path d="M7 18a4 4 0 0 1 .5-7.9 6 6 0 0 1 11.5 1.9A3.5 3.5 0 0 1 18 18Z"/></svg>;
    case "close": return <svg {...common}><path d="M6 6l12 12M18 6 6 18"/></svg>;
    case "palette": return <svg {...common}><path d="M12 3a9 9 0 0 0 0 18c1.5 0 2-1.5 1-2.5s-.5-2.5 1-2.5h2a5 5 0 0 0 5-5 8 8 0 0 0-9-8Z"/><circle cx="7.5" cy="10.5" r="1" fill={c}/><circle cx="12" cy="7.5" r="1" fill={c}/><circle cx="16.5" cy="10.5" r="1" fill={c}/></svg>;
    default: return null;
  }
};

// Cute character placeholder, tinted by research area
const Character = ({ area = "ai", initials = "" }) => {
  const bg = { ai: "#FFE6D1", ds: "#D7ECF4", bc: "#E4DAF3", cl: "#DCEFDF" }[area] || "#EFEFEF";
  const fg = { ai: "#E8A26B", ds: "#5BA8C9", bc: "#9C7BD1", cl: "#6FB48A" }[area] || "#888";
  const dark = { ai: "#7A4A20", ds: "#1E4A63", bc: "#4C3B80", cl: "#2E5A3E" }[area] || "#222";
  return (
    <svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <rect width="120" height="120" rx="20" fill={bg}/>
      {/* Pattern dots */}
      <circle cx="18" cy="22" r="2" fill={fg} opacity=".35"/>
      <circle cx="104" cy="28" r="2.5" fill={fg} opacity=".3"/>
      <circle cx="20" cy="96" r="2" fill={fg} opacity=".3"/>
      <circle cx="100" cy="98" r="3" fill={fg} opacity=".3"/>
      {/* Head */}
      <ellipse cx="60" cy="58" rx="34" ry="32" fill="#FFF8EB" stroke={dark} strokeWidth="2.5"/>
      {/* Hair / hat arc */}
      <path d={`M26 55 Q60 22 94 55`} fill={fg} stroke={dark} strokeWidth="2.5"/>
      <path d={`M26 55 Q60 22 94 55 L94 64 Q60 46 26 64 Z`} fill={fg} opacity=".55"/>
      {/* Eyes */}
      <circle cx="48" cy="62" r="3.5" fill={dark}/>
      <circle cx="72" cy="62" r="3.5" fill={dark}/>
      <circle cx="49" cy="60.5" r="1.2" fill="#fff"/>
      <circle cx="73" cy="60.5" r="1.2" fill="#fff"/>
      {/* Cheeks */}
      <ellipse cx="42" cy="72" rx="4" ry="2.5" fill={fg} opacity=".5"/>
      <ellipse cx="78" cy="72" rx="4" ry="2.5" fill={fg} opacity=".5"/>
      {/* Smile */}
      <path d="M54 75 Q60 80 66 75" stroke={dark} strokeWidth="2.2" fill="none" strokeLinecap="round"/>
      {/* Neck/shoulder */}
      <path d="M32 110 Q60 92 88 110 L88 120 L32 120 Z" fill={fg} stroke={dark} strokeWidth="2.5" strokeLinejoin="round"/>
      {initials && <text x="60" y="116" fontSize="9" fontWeight="800" textAnchor="middle" fill="#fff" fontFamily="Nunito">{initials}</text>}
    </svg>
  );
};

window.Icon = Icon;
window.Character = Character;