const { useState } = React;
function TalosLogo({ size = 30 }) {
  return (<svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <circle cx="16" cy="16" r="15" stroke="#1c3a8f" strokeWidth="2.4"></circle>
    <path d="M9 12 h14 M16 12 v11" stroke="#e11d33" strokeWidth="2.8" strokeLinecap="round"></path>
  </svg>);
}
function PoleBadge({ pole }) {
  return <span className="t-pole" style={{ color: TALOS_POLES[pole], borderColor: TALOS_POLES[pole] + '55' }}>{pole}</span>;
}
function StageDot({ stage }) {
  const s = TALOS_STAGES.find(x => x.id === stage);
  return <span className="t-stagedot" style={{ background: s.color + '18', color: s.color }}><i style={{ background: s.color }}></i>{s.label}</span>;
}
function ChanIcon({ t }) {
  if (t === 'sms') return (<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M2 3h12v8H6l-3 3v-3H2V3z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"></path></svg>);
  if (t === 'courrier') return (<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="1" stroke="currentColor" strokeWidth="1.4"></rect><path d="M2 5l6 4 6-4" stroke="currentColor" strokeWidth="1.4"></path></svg>);
  return (<svg width="14" height="14" viewBox="0 0 16 16" fill="none"><rect x="2" y="3.5" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4"></rect><path d="M2 5.5l6 4 6-4" stroke="currentColor" strokeWidth="1.4"></path></svg>);
}
function Kpi({ label, value, tone }) {
  return (<div className={'t-kpi' + (tone ? ' t-kpi--' + tone : '')}><span className="t-kpi-v">{value}</span><span className="t-kpi-l">{label}</span></div>);
}
Object.assign(window, { TalosLogo, PoleBadge, StageDot, ChanIcon, Kpi });
