// Shared SVG icons and little bits
const Icons = {
  Check: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M2 8 Q 4 11, 6 11 T 14 3" stroke={color} strokeWidth="1.8" strokeLinecap="round" fill="none" />
    </svg>
  ),
  X: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 3 L 13 13 M 13 3 L 3 13" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  ),
  Arrow: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8 L 13 8 M 9 4 L 13 8 L 9 12" stroke={color} strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" fill="none" />
    </svg>
  ),
  Eye: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M1 8 Q 4 3, 8 3 T 15 8 Q 12 13, 8 13 T 1 8 Z" stroke={color} strokeWidth="1.2" fill="none" />
      <circle cx="8" cy="8" r="2" fill={color} />
    </svg>
  ),
  EyeOff: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M1 8 Q 4 3, 8 3 T 15 8" stroke={color} strokeWidth="1.2" fill="none" />
      <path d="M2 3 L 14 13" stroke={color} strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  ),
  Lock: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <rect x="3" y="7" width="10" height="7" stroke={color} strokeWidth="1.2" fill="none" />
      <path d="M5 7 V 5 Q 5 2, 8 2 T 11 5 V 7" stroke={color} strokeWidth="1.2" fill="none" />
    </svg>
  ),
  Pause: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <rect x="4" y="3" width="2.5" height="10" fill={color} />
      <rect x="9.5" y="3" width="2.5" height="10" fill={color} />
    </svg>
  ),
  Quill: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M2 14 L 5 11 M 5 11 Q 9 7, 13 3 Q 12 6, 10 9 T 5 11" stroke={color} strokeWidth="1.2" fill="none" strokeLinejoin="round" />
    </svg>
  ),
  Plus: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M8 3 V 13 M 3 8 H 13" stroke={color} strokeWidth="1.6" strokeLinecap="round" />
    </svg>
  ),
  Stamp: ({ size = 14, color = "currentColor" }) => (
    <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 13 H 13 M 5 10 L 6 6 Q 8 4, 10 6 L 11 10 Z" stroke={color} strokeWidth="1.2" fill="none" strokeLinejoin="round" />
    </svg>
  ),
};

// Scribbled checkmark, for established truths
function ScribbleCheck({ color = "oklch(40% 0.15 145)" }) {
  return (
    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
      <path d="M1 9 Q 3 12, 5 11.5 Q 7 10, 8 11.5 Q 9 13, 11 10 Q 13 7, 16 2.5"
        stroke={color} strokeWidth="2" strokeLinecap="round" fill="none" />
    </svg>
  );
}

function InkLine({ width = 100, height = 6, opacity = 0.45 }) {
  return (
    <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} style={{ display: 'block' }}>
      <path d={`M0 ${height/2} Q ${width*0.25} ${height*0.1}, ${width*0.5} ${height*0.5} T ${width} ${height*0.5}`}
        stroke="var(--ink)" strokeWidth="1" fill="none" opacity={opacity} />
    </svg>
  );
}

// Thermometer — conversation temperature
function Thermometer({ value = 0.3, label = "temp" }) {
  // value 0..1
  const pct = Math.max(0, Math.min(1, value));
  return (
    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
      <div className="thermometer">
        <div className="thermometer-fill" style={{ height: `${pct * 100}%` }} />
        {/* tick marks */}
        {[0.25, 0.5, 0.75].map((t, i) => (
          <div key={i} style={{
            position: 'absolute',
            left: -2,
            right: 12,
            top: `${(1 - t) * 100}%`,
            height: 1,
            background: 'var(--ink-3)',
            opacity: 0.5,
          }} />
        ))}
      </div>
      <div className="thermometer-bulb" />
      <div className="micro" style={{ marginTop: 3, letterSpacing: '0.1em' }}>{label}</div>
    </div>
  );
}

// Small pin on a card
function Pin({ color = "red" }) {
  return <div className={`pin pin-${color}`} style={{ position: 'absolute', top: -5, left: '50%', transform: 'translateX(-50%)' }} />;
}

// Agent badge
function AgentBadge({ agent }) {
  const map = {
    coachA: { cls: 'agent-coach-a', label: 'COACH · A' },
    coachB: { cls: 'agent-coach-b', label: 'COACH · B' },
    mediator: { cls: 'agent-mediator', label: 'MEDIATOR' },
  };
  const m = map[agent] || map.mediator;
  return <span className={`agent-badge ${m.cls}`}>{m.label}</span>;
}

Object.assign(window, { Icons, ScribbleCheck, InkLine, Thermometer, Pin, AgentBadge });