// Flat-design vector illustrations (characters), custom-built for IDH — no stock photography,
// no external assets. Consistent proportions/palette across all four scenes: navy (--color-navy-800/700/600)
// for uniforms/structure, orange (--color-orange-500/300) for accents, soft flat shading (a single darker
// tone per shape for "fold" shadow, plus a soft ellipse ground shadow), simple dot/curve faces.
// Each is a self-contained <svg> string injected via dangerouslySetInnerHTML (same technique already used
// for the Lucide icon helper in every page file), so they scale cleanly at any size via the viewBox.

function IllustrationWrap({svg,style}){
return React.createElement('div',{style:{lineHeight:0,...style},dangerouslySetInnerHTML:{__html:svg}});
}

// --- Hero: delivery driver + technician, IDH van in the background ---
function IllustrationHero({style}){
const svg = `
<svg viewBox="0 0 560 360" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<ellipse cx="120" cy="330" rx="95" ry="14" fill="var(--color-navy-100)"/>
<ellipse cx="420" cy="332" rx="70" ry="12" fill="var(--color-navy-100)"/>
<circle cx="480" cy="70" r="60" fill="var(--surface-tint-orange)"/>
<circle cx="60" cy="60" r="40" fill="var(--color-navy-50)"/>
<!-- van -->
<g>
<rect x="20" y="196" width="150" height="94" rx="12" fill="#fff" stroke="var(--border-default)" stroke-width="2"/>
<rect x="20" y="196" width="150" height="16" rx="8" fill="var(--brand-accent)"/>
<rect x="36" y="222" width="60" height="40" rx="4" fill="var(--surface-tint-navy)" stroke="var(--brand-primary)" stroke-width="2"/>
<circle cx="66" cy="242" r="14" fill="none" stroke="var(--brand-primary)" stroke-width="3"/>
<path d="M56 242 a10 10 0 0 1 20 0" fill="none" stroke="var(--brand-primary)" stroke-width="3"/>
<path d="M170 210 h34 a16 16 0 0 1 16 16 v58 h-50 z" fill="var(--color-navy-800)"/>
<rect x="184" y="224" width="26" height="22" rx="4" fill="var(--color-navy-300)"/>
<circle cx="62" cy="296" r="17" fill="var(--color-navy-900)"/>
<circle cx="62" cy="296" r="6.5" fill="var(--color-gray-200)"/>
<circle cx="180" cy="296" r="17" fill="var(--color-navy-900)"/>
<circle cx="180" cy="296" r="6.5" fill="var(--color-gray-200)"/>
</g>
<!-- driver character (standing beside the van) -->
<g>
<ellipse cx="255" cy="330" rx="34" ry="8" fill="rgba(14,34,90,0.10)"/>
<rect x="237" y="243" width="16" height="55" rx="7" fill="var(--color-navy-700)"/>
<rect x="257" y="243" width="16" height="55" rx="7" fill="var(--color-navy-800)"/>
<rect x="231" y="178" width="48" height="70" rx="16" fill="var(--brand-accent)"/>
<rect x="231" y="178" width="48" height="24" rx="12" fill="var(--color-orange-600)" opacity="0.35"/>
<circle cx="255" cy="158" r="24" fill="#C68863"/>
<path d="M231 150 a24 24 0 0 1 48 0 v-6 h-48 z" fill="var(--color-navy-900)"/>
<rect x="223" y="144" width="64" height="14" rx="7" fill="var(--brand-accent)"/>
<circle cx="246" cy="161" r="2.6" fill="var(--color-navy-900)"/>
<circle cx="264" cy="161" r="2.6" fill="var(--color-navy-900)"/>
<path d="M247 170 q8 6 16 0" stroke="var(--color-navy-900)" stroke-width="2.4" fill="none" stroke-linecap="round"/>
<rect x="203" y="194" width="26" height="24" rx="6" fill="var(--color-navy-700)" transform="rotate(-18 216 206)"/>
<rect x="281" y="194" width="26" height="24" rx="6" fill="var(--brand-accent)" transform="rotate(24 294 206)"/>
<rect x="291" y="208" width="34" height="28" rx="5" fill="var(--surface-tint-orange)" stroke="var(--color-orange-500)" stroke-width="2"/>
</g>
<!-- technician character -->
<g>
<ellipse cx="430" cy="332" rx="36" ry="8" fill="rgba(14,34,90,0.10)"/>
<rect x="410" y="248" width="16" height="55" rx="7" fill="var(--color-gray-700)"/>
<rect x="432" y="248" width="16" height="55" rx="7" fill="var(--color-gray-900)"/>
<rect x="404" y="182" width="52" height="72" rx="16" fill="var(--brand-primary)"/>
<rect x="404" y="182" width="52" height="22" rx="11" fill="var(--color-navy-900)" opacity="0.4"/>
<circle cx="430" cy="162" r="24" fill="#8D5A3B"/>
<path d="M406 154 a24 24 0 0 1 48 0 q-10 -10 -24 -10 t-24 10 z" fill="var(--color-navy-900)"/>
<circle cx="421" cy="165" r="2.6" fill="var(--color-navy-900)"/>
<circle cx="439" cy="165" r="2.6" fill="var(--color-navy-900)"/>
<path d="M422 174 q8 5 16 0" stroke="var(--color-navy-900)" stroke-width="2.4" fill="none" stroke-linecap="round"/>
<rect x="380" y="198" width="26" height="24" rx="6" fill="var(--brand-primary)" transform="rotate(20 393 210)"/>
<rect x="454" y="198" width="26" height="24" rx="6" fill="var(--brand-primary)" transform="rotate(-18 467 210)"/>
<rect x="372" y="216" width="46" height="34" rx="4" fill="#fff" stroke="var(--border-strong)" stroke-width="2"/>
<rect x="378" y="222" width="34" height="18" rx="2" fill="var(--color-navy-700)"/>
<circle cx="395" cy="234" r="2" fill="var(--brand-accent)"/>
</g>
</svg>`.trim();
return React.createElement(IllustrationWrap,{svg,style});
}

// --- Matériel Informatique: technician at a desk configuring a computer ---
function IllustrationMateriel({style}){
const svg = `
<svg viewBox="0 0 480 320" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<circle cx="70" cy="60" r="46" fill="var(--surface-tint-navy)"/>
<circle cx="420" cy="240" r="60" fill="var(--surface-tint-orange)"/>
<ellipse cx="235" cy="290" rx="150" ry="14" fill="var(--color-navy-100)"/>
<!-- desk -->
<rect x="90" y="210" width="300" height="14" rx="4" fill="var(--color-gray-200)"/>
<rect x="110" y="224" width="14" height="52" fill="var(--color-gray-300)"/>
<rect x="350" y="224" width="14" height="52" fill="var(--color-gray-300)"/>
<!-- monitor -->
<rect x="175" y="130" width="130" height="82" rx="8" fill="var(--brand-primary)"/>
<rect x="185" y="140" width="110" height="62" rx="4" fill="var(--color-navy-600)"/>
<rect x="222" y="212" width="36" height="14" fill="var(--color-gray-300)"/>
<rect x="205" y="226" width="70" height="8" rx="4" fill="var(--color-gray-300)"/>
<circle cx="240" cy="171" r="16" fill="none" stroke="var(--brand-accent)" stroke-width="4"/>
<path d="M240 163 v16 M232 171 h16" stroke="var(--brand-accent)" stroke-width="4" stroke-linecap="round"/>
<!-- printer beside desk -->
<rect x="60" y="176" width="70" height="40" rx="6" fill="#fff" stroke="var(--border-strong)" stroke-width="2"/>
<rect x="66" y="184" width="58" height="10" rx="2" fill="var(--color-navy-700)"/>
<rect x="80" y="196" width="30" height="14" rx="2" fill="var(--surface-tint-orange)"/>
<!-- keyboard -->
<rect x="185" y="204" width="90" height="10" rx="3" fill="var(--color-gray-300)"/>
<!-- character seated -->
<g>
<ellipse cx="330" cy="288" rx="40" ry="9" fill="rgba(14,34,90,0.10)"/>
<rect x="300" y="150" width="60" height="80" rx="18" fill="var(--brand-primary)"/>
<rect x="300" y="150" width="60" height="24" rx="12" fill="var(--color-navy-900)" opacity="0.35"/>
<circle cx="330" cy="128" r="26" fill="#E8B08C"/>
<path d="M304 120 a26 26 0 0 1 52 0 q-12 -14 -26 -14 t-26 14z" fill="var(--color-gray-900)"/>
<circle cx="320" cy="130" r="2.8" fill="var(--color-navy-900)"/>
<circle cx="340" cy="130" r="2.8" fill="var(--color-navy-900)"/>
<path d="M320 140 q10 6 20 0" stroke="var(--color-navy-900)" stroke-width="2.6" fill="none" stroke-linecap="round"/>
<rect x="272" y="176" width="24" height="46" rx="10" fill="var(--brand-primary)" transform="rotate(-24 284 199)"/>
<rect x="352" y="168" width="24" height="20" rx="8" fill="#E8B08C" transform="rotate(-8 364 178)"/>
<rect x="298" y="228" width="20" height="58" rx="8" fill="var(--color-gray-700)"/>
<rect x="336" y="228" width="20" height="58" rx="8" fill="var(--color-gray-900)"/>
<rect x="352" y="172" width="22" height="8" rx="4" fill="var(--color-gray-500)" transform="rotate(-8 363 176)"/>
</g>
</svg>`.trim();
return React.createElement(IllustrationWrap,{svg,style});
}

// --- Fourniture & Consommables: warehouse worker with cartridge/toner stock ---
function IllustrationConsommables({style}){
const svg = `
<svg viewBox="0 0 480 320" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<circle cx="410" cy="70" r="50" fill="var(--surface-tint-orange)"/>
<circle cx="55" cy="240" r="40" fill="var(--surface-tint-navy)"/>
<ellipse cx="240" cy="290" rx="160" ry="14" fill="var(--color-navy-100)"/>
<!-- shelving -->
<g>
<rect x="60" y="80" width="220" height="10" fill="var(--color-gray-300)"/>
<rect x="60" y="150" width="220" height="10" fill="var(--color-gray-300)"/>
<rect x="60" y="220" width="220" height="10" fill="var(--color-gray-300)"/>
<rect x="60" y="80" width="10" height="150" fill="var(--color-gray-500)"/>
<rect x="270" y="80" width="10" height="150" fill="var(--color-gray-500)"/>
<!-- boxes on shelves -->
<rect x="82" y="98" width="40" height="46" rx="3" fill="var(--brand-primary)"/>
<rect x="130" y="104" width="34" height="40" rx="3" fill="var(--brand-accent)"/>
<rect x="172" y="100" width="38" height="44" rx="3" fill="var(--color-navy-600)"/>
<rect x="218" y="106" width="32" height="38" rx="3" fill="var(--color-orange-300)"/>
<rect x="90" y="168" width="36" height="46" rx="3" fill="var(--color-orange-400)"/>
<rect x="134" y="172" width="40" height="42" rx="3" fill="var(--brand-primary)"/>
<rect x="182" y="166" width="34" height="48" rx="3" fill="var(--color-navy-700)"/>
<rect x="224" y="174" width="32" height="40" rx="3" fill="var(--brand-accent)"/>
</g>
<!-- handcart -->
<g>
<rect x="310" y="196" width="56" height="60" rx="4" fill="none" stroke="var(--color-gray-500)" stroke-width="4"/>
<circle cx="318" cy="264" r="9" fill="var(--color-gray-900)"/>
<circle cx="358" cy="264" r="9" fill="var(--color-gray-900)"/>
<rect x="320" y="150" width="34" height="42" rx="3" fill="var(--brand-accent)"/>
<rect x="320" y="112" width="34" height="34" rx="3" fill="var(--brand-primary)"/>
</g>
<!-- worker character -->
<g>
<ellipse cx="230" cy="292" rx="38" ry="9" fill="rgba(14,34,90,0.10)"/>
<rect x="210" y="250" width="16" height="50" rx="7" fill="var(--color-navy-700)"/>
<rect x="230" y="250" width="16" height="50" rx="7" fill="var(--color-navy-800)"/>
<rect x="200" y="184" width="56" height="74" rx="16" fill="var(--brand-primary)"/>
<rect x="200" y="184" width="56" height="22" rx="11" fill="var(--color-navy-900)" opacity="0.35"/>
<circle cx="228" cy="162" r="25" fill="#B97A56"/>
<path d="M203 154 a25 25 0 0 1 50 0 q-11 -13 -25 -13t-25 13z" fill="var(--color-navy-900)"/>
<circle cx="219" cy="165" r="2.6" fill="var(--color-navy-900)"/>
<circle cx="237" cy="165" r="2.6" fill="var(--color-navy-900)"/>
<path d="M219 174 q9 6 18 0" stroke="var(--color-navy-900)" stroke-width="2.4" fill="none" stroke-linecap="round"/>
<rect x="176" y="196" width="24" height="46" rx="10" fill="var(--brand-primary)" transform="rotate(18 188 219)"/>
<rect x="254" y="196" width="24" height="46" rx="10" fill="var(--brand-primary)" transform="rotate(-18 266 219)"/>
<rect x="196" y="188" width="66" height="46" rx="4" fill="var(--brand-accent)"/>
<rect x="204" y="196" width="50" height="30" rx="3" fill="#fff" opacity="0.85"/>
</g>
</svg>`.trim();
return React.createElement(IllustrationWrap,{svg,style});
}

// --- Contact / support: friendly, responsive team (WhatsApp 7j/7) ---
function IllustrationContact({style}){
const svg = `
<svg viewBox="0 0 480 320" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<circle cx="380" cy="80" r="52" fill="var(--surface-tint-orange)"/>
<circle cx="80" cy="230" r="42" fill="var(--surface-tint-navy)"/>
<ellipse cx="230" cy="292" rx="130" ry="13" fill="var(--color-navy-100)"/>
<!-- chat bubble -->
<g>
<rect x="270" y="70" width="130" height="80" rx="20" fill="#fff" stroke="var(--border-default)" stroke-width="2"/>
<path d="M300 150 l-4 22 24 -22 z" fill="#fff" stroke="var(--border-default)" stroke-width="2"/>
<circle cx="305" cy="110" r="7" fill="var(--color-navy-300)"/>
<circle cx="330" cy="110" r="7" fill="var(--brand-accent)"/>
<circle cx="355" cy="110" r="7" fill="var(--color-navy-300)"/>
<circle cx="392" cy="66" r="17" fill="#25D366"/>
<path d="M385 65 q2 6 8 6 q2 3 5 2 l-1 -5 q3 -3 2 -7 q-1 -6 -8 -6 q-7 0 -6 10z" fill="#fff"/>
</g>
<!-- headset character -->
<g>
<ellipse cx="190" cy="292" rx="46" ry="10" fill="rgba(14,34,90,0.10)"/>
<rect x="166" y="220" width="18" height="60" rx="8" fill="var(--color-navy-700)"/>
<rect x="192" y="220" width="18" height="60" rx="8" fill="var(--color-navy-800)"/>
<rect x="156" y="150" width="68" height="82" rx="20" fill="var(--brand-primary)"/>
<rect x="156" y="150" width="68" height="24" rx="12" fill="var(--color-navy-900)" opacity="0.35"/>
<circle cx="190" cy="124" r="30" fill="#C68863"/>
<path d="M160 116 a30 30 0 0 1 60 0 q-13 -16 -30 -16t-30 16z" fill="var(--color-navy-900)"/>
<circle cx="179" cy="128" r="3" fill="var(--color-navy-900)"/>
<circle cx="201" cy="128" r="3" fill="var(--color-navy-900)"/>
<path d="M177 140 q13 10 26 0" stroke="var(--color-navy-900)" stroke-width="2.8" fill="none" stroke-linecap="round"/>
<path d="M160 118 q-14 4 -14 22" stroke="var(--color-gray-900)" stroke-width="5" fill="none" stroke-linecap="round"/>
<rect x="140" y="136" width="16" height="20" rx="8" fill="var(--color-gray-900)"/>
<path d="M158 96 a32 32 0 0 1 32 -14" stroke="var(--color-gray-900)" stroke-width="5" fill="none" stroke-linecap="round"/>
<rect x="184" y="76" width="18" height="14" rx="6" fill="var(--color-gray-900)"/>
<rect x="122" y="176" width="24" height="48" rx="10" fill="var(--brand-primary)" transform="rotate(-26 134 200)"/>
<rect x="234" y="176" width="24" height="48" rx="10" fill="var(--brand-primary)" transform="rotate(30 246 200)"/>
<circle cx="118" cy="182" r="10" fill="#C68863"/>
</g>
</svg>`.trim();
return React.createElement(IllustrationWrap,{svg,style});
}

window.IllustrationHero = IllustrationHero;
window.IllustrationMateriel = IllustrationMateriel;
window.IllustrationConsommables = IllustrationConsommables;
window.IllustrationContact = IllustrationContact;
