// Shared bits: LI logo symbol, an eyebrow, a callout row, a Tabler icon.
function LiSymbol() {
  return (
    <svg width="0" height="0" style={{position:'absolute'}} aria-hidden="true">
      <symbol id="li" viewBox="0 0 24 24"><path fill="currentColor" d="M20.45 20.45h-3.56v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.35V9h3.42v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.13 2.06 2.06 0 0 1 0 4.13zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.22.79 24 1.77 24h20.45c.98 0 1.78-.78 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/></symbol>
    </svg>
  );
}
function TI({ name, size = 13, color, style }) {
  return <i className={"ti " + name} style={{fontSize: size, color, ...style}} aria-hidden="true" />;
}
function Eyebrow({ text, li, icon, iconColor }) {
  return (
    <p className="eyebrow">
      {li && <svg style={{width:13,height:13,color:'#0A66C2'}} aria-hidden="true"><use href="#li"/></svg>}
      {icon && <TI name={icon} color={iconColor}/>}
      {text}
    </p>
  );
}
const CO_TONE = {
  up:     { bg:'#E4F7E1', color:'#067D0E' },
  warn:   { bg:'#F6F7CE', color:'#6A6C00' },
  danger: { bg:'#F7E3E3', color:'#A32D2D' },
};
function Callout({ tone = 'up', icon, title, body, style }) {
  const t = CO_TONE[tone] || CO_TONE.up;
  return (
    <div className="card co" style={style}>
      <div className="tile" style={{background:t.bg}}><TI name={icon} size={19} color={t.color}/></div>
      <div>
        <p className="ct">{title}</p>
        <p className="cb">{body}</p>
      </div>
    </div>
  );
}
Object.assign(window, { LiSymbol, TI, Eyebrow, Callout });