/* ===== Shared UI primitives + icons ===== */
const Icon = ({name, size=18, stroke=1.8, style}) => {
  const p = {width:size, height:size, viewBox:"0 0 24 24", fill:"none",
    stroke:"currentColor", strokeWidth:stroke, strokeLinecap:"round", strokeLinejoin:"round", style};
  const paths = {
    clock:<><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    bell:<><path d="M6 9a6 6 0 0 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></>,
    search:<><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>,
    plus:<><path d="M12 5v14M5 12h14"/></>,
    check:<><path d="M5 12.5l4.5 4.5L19 7"/></>,
    arrowR:<><path d="M5 12h14M13 6l6 6-6 6"/></>,
    arrowL:<><path d="M19 12H5M11 18l-6-6 6-6"/></>,
    box:<><path d="M3 8l9-5 9 5v8l-9 5-9-5z"/><path d="M3 8l9 5 9-5M12 13v8"/></>,
    truck:<><path d="M3 6h11v9H3zM14 9h4l3 3v3h-7"/><circle cx="7" cy="18" r="1.6"/><circle cx="17.5" cy="18" r="1.6"/></>,
    list:<><path d="M8 6h12M8 12h12M8 18h12M3.5 6h.01M3.5 12h.01M3.5 18h.01"/></>,
    pin:<><path d="M12 21s7-6.5 7-11a7 7 0 1 0-14 0c0 4.5 7 11 7 11z"/><circle cx="12" cy="10" r="2.4"/></>,
    doc:<><path d="M6 2h8l4 4v16H6z"/><path d="M14 2v4h4M9 13h6M9 17h6"/></>,
    chart:<><path d="M4 20V4M4 20h16M8 16v-4M13 16V8M18 16v-7"/></>,
    chat:<><path d="M4 5h16v11H9l-4 4v-4H4z"/></>,
    flag:<><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></>,
    info:<><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></>,
    eye:<><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="2.5"/></>,
    folder:<><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></>,
    cal:<><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 9h18M8 3v4M16 3v4"/></>,
    grid:<><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></>,
    settings:<><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M4.93 4.93a10 10 0 0 0 0 14.14"/></>,
    archive:<><path d="M4 4h16v4H4zM6 8v12h12V8M10 12h4"/></>,
  };
  return <svg {...p}>{paths[name]||null}</svg>;
};

const Glyph = ({c, glyph, size=36, r=9, fs=13}) =>
  <div className="glyph" style={{background:c, width:size, height:size, borderRadius:r, fontSize:fs}}>{glyph}</div>;

const FaseBadge = ({c}) => {
  if(c.tipo==="gara" && c.fase==="preventivo")
    return <span className="badge red"><span className="pip"></span>Gara</span>;
  if(c.fase==="preventivo")
    return <span className="badge blue"><span className="pip"></span>Preventivo</span>;
  return <span className="badge green"><span className="pip"></span>Cantiere</span>;
};

const ageClass = (days) => { const d=Math.abs(days); return d>=8?"":"warm cool".split(" ")[+(d<4)]; };

Object.assign(window,{ Icon, Glyph, FaseBadge, ageClass });