// ============================================================
// Coccinelle — pictos (SVG line icons) + marque
// ============================================================
const Ico = ({ d, s = 18, w = 1.8, fill, children, ...p }) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill={fill || "none"}
       stroke={fill ? "none" : "currentColor"} strokeWidth={w}
       strokeLinecap="round" strokeLinejoin="round" {...p}>
    {d ? <path d={d} /> : children}
  </svg>
);

const I = {
  search: (p) => <Ico {...p} d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM21 21l-4.3-4.3" />,
  phoneIn: (p) => <Ico {...p}><path d="M16 3l5 5M21 3l-5 5M16 8V3h5"/><path d="M5 4h3l1.5 4-2 1.5a12 12 0 0 0 6 6l1.5-2 4 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/></Ico>,
  phoneOut: (p) => <Ico {...p}><path d="M21 3l-5 5M21 3v5h-5M21 3l-5 5"/><path d="M5 4h3l1.5 4-2 1.5a12 12 0 0 0 6 6l1.5-2 4 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z"/></Ico>,
  user: (p) => <Ico {...p}><circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/></Ico>,
  building: (p) => <Ico {...p}><rect x="5" y="3" width="14" height="18" rx="1.5"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/></Ico>,
  map: (p) => <Ico {...p}><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z"/><circle cx="12" cy="10" r="2.5"/></Ico>,
  chat: (p) => <Ico {...p} d="M21 12a8 8 0 0 1-11.5 7.2L4 20l1-4.5A8 8 0 1 1 21 12Z" />,
  clock: (p) => <Ico {...p}><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></Ico>,
  check: (p) => <Ico {...p} d="M5 12.5l4.5 4.5L19 7" />,
  checkBold: (p) => <Ico {...p} w={2.6} d="M5 12.5l4.5 4.5L19 7" />,
  flag: (p) => <Ico {...p}><path d="M5 21V4M5 4h11l-2 4 2 4H5"/></Ico>,
  plus: (p) => <Ico {...p} d="M12 5v14M5 12h14" />,
  calendar: (p) => <Ico {...p}><rect x="4" y="5" width="16" height="16" rx="2"/><path d="M4 9h16M8 3v4M16 3v4"/></Ico>,
  doc: (p) => <Ico {...p}><path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5M10 13h6M10 17h6"/></Ico>,
  wrench: (p) => <Ico {...p} d="M14.5 6a3.5 3.5 0 0 0-4.6 4.3l-5.6 5.6a2 2 0 0 0 2.8 2.8l5.6-5.6A3.5 3.5 0 0 0 18 9l-2.3 2.3-2-2L16 7" />,
  info: (p) => <Ico {...p}><circle cx="12" cy="12" r="9"/><path d="M12 11v5M12 8h.01"/></Ico>,
  chart: (p) => <Ico {...p}><path d="M4 20h16M7 20v-6M12 20V8M17 20v-9"/></Ico>,
  x: (p) => <Ico {...p} d="M6 6l12 12M18 6L6 18" />,
  arrowRight: (p) => <Ico {...p} d="M5 12h14M13 6l6 6-6 6" />,
  mail: (p) => <Ico {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></Ico>,
  phone: (p) => <Ico {...p} d="M5 4h3l1.5 4-2 1.5a12 12 0 0 0 6 6l1.5-2 4 1.5V19a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2Z" />,
  hash: (p) => <Ico {...p} d="M9 4L7 20M17 4l-2 16M5 9h14M4 15h14" />,
  filter: (p) => <Ico {...p} d="M4 5h16l-6 7v6l-4 2v-8L4 5Z" />,
  history: (p) => <Ico {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 4v4h4M12 8v4l3 2"/></Ico>,
  download: (p) => <Ico {...p}><path d="M12 4v11M7 11l5 5 5-5"/><path d="M5 20h14"/></Ico>,
  trend: (p) => <Ico {...p}><path d="M3 17l6-6 4 4 7-7"/><path d="M14 8h6v6"/></Ico>,
  pie: (p) => <Ico {...p}><path d="M12 3v9h9"/><path d="M21 12a9 9 0 1 1-9-9"/></Ico>,
  target: (p) => <Ico {...p}><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor" stroke="none"/></Ico>,
  lock: (p) => <Ico {...p}><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></Ico>,
  eye: (p) => <Ico {...p}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></Ico>,
  eyeOff: (p) => <Ico {...p}><path d="M3 3l18 18M10.6 10.6a3 3 0 0 0 4.2 4.2"/><path d="M9.9 5.1A10 10 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.3 3.9M6.2 6.2A17 17 0 0 0 2 12s3.5 7 10 7a10 10 0 0 0 3.3-.5"/></Ico>,
  shield: (p) => <Ico {...p}><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z"/><path d="M9 12l2 2 4-4"/></Ico>,
  sliders: (p) => <Ico {...p}><path d="M4 8h10M18 8h2M4 16h2M10 16h10"/><circle cx="16" cy="8" r="2.2"/><circle cx="8" cy="16" r="2.2"/></Ico>,
  headset: (p) => <Ico {...p}><path d="M4 13v-1a8 8 0 0 1 16 0v1"/><rect x="3" y="13" width="4" height="6" rx="1.5"/><rect x="17" y="13" width="4" height="6" rx="1.5"/><path d="M20 19a4 4 0 0 1-4 3h-2"/></Ico>,
  grid: (p) => <Ico {...p}><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="1.5"/></Ico>,
  logout: (p) => <Ico {...p}><path d="M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3M10 12h10M16 8l4 4-4 4"/></Ico>,
  edit: (p) => <Ico {...p}><path d="M4 20h4L19 9a2.1 2.1 0 0 0-3-3L5 17v3Z"/><path d="M14 6l4 4"/></Ico>,
  trash: (p) => <Ico {...p}><path d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 13a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2l1-13"/></Ico>,
  grip: (p) => <Ico {...p} fill="currentColor" stroke="none"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></Ico>,
  chevronD: (p) => <Ico {...p} d="M6 9l6 6 6-6" />,
  chevronR: (p) => <Ico {...p} d="M9 6l6 6-6 6" />,
  arrowLeft: (p) => <Ico {...p} d="M19 12H5M11 6l-6 6 6 6" />,
  save: (p) => <Ico {...p}><path d="M5 4h11l3 3v13H5z"/><path d="M8 4v5h7M8 14h8v6H8z"/></Ico>,
  plusC: (p) => <Ico {...p}><circle cx="12" cy="12" r="9"/><path d="M12 8v8M8 12h8"/></Ico>,
  users: (p) => <Ico {...p}><circle cx="9" cy="8" r="3.2"/><path d="M3 20a6 6 0 0 1 12 0"/><path d="M16 5.5a3 3 0 0 1 0 5.5M21 20a6 6 0 0 0-4-5.6"/></Ico>,
  key: (p) => <Ico {...p}><circle cx="8" cy="14" r="4"/><path d="M11 11l9-9M17 5l2 2M14 8l2 2"/></Ico>,
  dot: (p) => <Ico {...p} fill="currentColor" stroke="none"><circle cx="12" cy="12" r="4"/></Ico>,
  bolt: (p) => <Ico {...p} d="M13 3L5 13h5l-1 8 8-10h-5l1-8Z" />,
  signal: (p) => <Ico {...p}><path d="M5 20v-3M10 20v-7M15 20v-11M20 20V6"/></Ico>,
  car: (p) => <Ico {...p}><path d="M5 16l1.5-5h11L19 16M3 16h18v3h-2v-1H5v1H3v-3Z"/><circle cx="7.5" cy="16.5" r="1"/><circle cx="16.5" cy="16.5" r="1"/></Ico>,
  image: (p) => <Ico {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><circle cx="8.5" cy="9.5" r="1.5"/><path d="M21 16l-5-5L5 20"/></Ico>,
  cog: (p) => <Ico {...p}><circle cx="12" cy="12" r="3.2"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M19.1 4.9L17 7M7 17l-2.1 2.1"/></Ico>,
  upload: (p) => <Ico {...p}><path d="M12 16V5M7 10l5-5 5 5"/><path d="M5 20h14"/></Ico>,
  building2: (p) => <Ico {...p}><rect x="5" y="3" width="14" height="18" rx="1.5"/><path d="M9 7h2M13 7h2M9 11h2M13 11h2M9 15h2M13 15h2"/></Ico>,
  moon: (p) => <Ico {...p} d="M20 14.5A8 8 0 0 1 9.5 4a7 7 0 1 0 10.5 10.5Z" />,
  sun: (p) => <Ico {...p}><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></Ico>,
  // canaux de provenance
  whatsapp: (p) => <Ico {...p}><path d="M3.5 20.5l1.35-4.6A8 8 0 1 1 8 19.1L3.5 20.5Z"/><path d="M9 8.6c0 3.5 2.9 6.4 6.4 6.4.7 0 1.3-.6 1.3-1.4 0-.3-1.7-1.1-2-1.1-.3 0-.6.7-.9.7-.7 0-2.7-1.6-2.7-2.4 0-.2.6-.5.6-.9 0-.2-.8-1.9-1.1-1.9-.8 0-1.6.5-1.6 1.6Z"/></Ico>,
  instagram: (p) => <Ico {...p}><rect x="3.5" y="3.5" width="17" height="17" rx="5"/><circle cx="12" cy="12" r="3.6"/><circle cx="17.2" cy="6.8" r="1.05" fill="currentColor" stroke="none"/></Ico>,
  facebook: (p) => <Ico {...p} fill="currentColor" stroke="none"><path d="M13.4 21v-7h2.25l.42-2.82h-2.67V9.36c0-.82.28-1.38 1.48-1.38h1.3V5.46c-.64-.06-1.5-.14-2.42-.14-2.05 0-3.4 1.22-3.4 3.5v1.96H8.1V14h2.24v7Z"/></Ico>,
  globe: (p) => <Ico {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.6 2.5 2.6 15 0 18M12 3c-2.6 2.5-2.6 15 0 18"/></Ico>,
  inbox: (p) => <Ico {...p}><path d="M4 13l2-7h12l2 7M4 13v5a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-5M4 13h4l1.5 2.5h5L16 13h4"/></Ico>,
  restore: (p) => <Ico {...p}><path d="M3 12a9 9 0 1 0 3-6.7L3 8"/><path d="M3 4v4h4"/><path d="M12 8v4l3 1.6"/></Ico>,
};

// Marque coccinelle — composée de formes simples (cercle, ligne, points)
const Ladybug = ({ s = 34 }) => (
  <svg width={s} height={s} viewBox="0 0 36 36" fill="none" aria-label="Coccinelle">
    <ellipse cx="18" cy="20.5" rx="12" ry="12.5" fill="#d12b2b" />
    <path d="M18 8.2v24.6" stroke="#1c1a19" strokeWidth="2" />
    <circle cx="18" cy="8" r="5" fill="#1c1a19" />
    <circle cx="11.5" cy="16" r="2.1" fill="#1c1a19" />
    <circle cx="24.5" cy="16" r="2.1" fill="#1c1a19" />
    <circle cx="12" cy="25" r="2.1" fill="#1c1a19" />
    <circle cx="24" cy="25" r="2.1" fill="#1c1a19" />
    <circle cx="15.4" cy="6" r="1.1" fill="#fff" opacity=".85" />
  </svg>
);

// Marque Polycall — logo personnalisé (si défini) sinon quatre pastilles
const Polymark = ({ s = 34 }) => {
  const brand = React.useContext(BrandCtx) || {};
  if (brand.logo) {
    return <img src={brand.logo} alt="Polycall" style={{ width: s, height: s, borderRadius: Math.round(s * 0.26), objectFit: "cover", display: "block", flexShrink: 0 }} />;
  }
  return (
    <svg width={s} height={s} viewBox="0 0 36 36" fill="none" aria-label="Polycall">
      <rect width="36" height="36" rx="9" fill="#1c1a19" />
      <circle cx="13" cy="13" r="4.4" fill="#d12b2b" />
      <circle cx="23" cy="13" r="4.4" fill="#c8810f" />
      <circle cx="13" cy="23" r="4.4" fill="#5b54d6" />
      <circle cx="23" cy="23" r="4.4" fill="#f4f2ef" />
    </svg>
  );
};

// Pastille d'opération : logo image si défini, sinon initiales teintées
const OpMark = ({ op, s = 38, radius }) => {
  const rad = radius != null ? radius : Math.round(s * 0.28);
  if (op && op.logo) {
    return <img src={op.logo} alt={op.name || ""} style={{ width: s, height: s, borderRadius: rad, objectFit: "cover", display: "block", flexShrink: 0, border: "1px solid var(--line)" }} />;
  }
  return (
    <span style={{
      width: s, height: s, flexShrink: 0, borderRadius: rad,
      background: op.accent[2], color: op.accent[0], border: "1px solid " + op.accent[3],
      display: "inline-flex", alignItems: "center", justifyContent: "center",
      fontWeight: 800, fontSize: s * 0.4, letterSpacing: "-.02em",
    }}>{op.mark}</span>
  );
};

Object.assign(window, { Ico, I, Ladybug, Polymark, OpMark });
