// DigitalMeta — Inner page components + SVG Illustrations
const { useState: useStateP, useEffect: useEffectP } = React;

// ═══════════════════════════════════════════════════════
// ─── SVG Illustrations
// ═══════════════════════════════════════════════════════

const IlluWeb = () => (
  <svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" style={{width:"100%",height:"100%",maxHeight:300}}>
    <defs>
      <linearGradient id="webAccent" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#00BFEF"/><stop offset="100%" stopColor="#1E90FF"/></linearGradient>
      <filter id="webSh"><feDropShadow dx="0" dy="4" stdDeviation="8" floodColor="#0A2A5E" floodOpacity="0.10"/></filter>
    </defs>
    <rect x="40" y="30" width="310" height="210" rx="12" fill="white" filter="url(#webSh)"/>
    <rect x="40" y="30" width="310" height="34" rx="12" fill="#f5f7fa"/>
    <rect x="40" y="52" width="310" height="12" fill="#f5f7fa"/>
    <circle cx="62" cy="47" r="6" fill="#ff5f56"/>
    <circle cx="80" cy="47" r="6" fill="#ffbd2e"/>
    <circle cx="98" cy="47" r="6" fill="#27c93f"/>
    <rect x="120" y="40" width="170" height="14" rx="7" fill="#e3e8ef"/>
    <rect x="124" y="44" width="60" height="6" rx="3" fill="#00BFEF" opacity="0.6"/>
    <rect x="40" y="64" width="310" height="80" fill="#0A2A5E"/>
    <line x1="40" y1="64" x2="40" y2="144" stroke="white" strokeOpacity="0.05" strokeWidth="1"/>
    <line x1="92" y1="64" x2="92" y2="144" stroke="white" strokeOpacity="0.05" strokeWidth="1"/>
    <line x1="144" y1="64" x2="144" y2="144" stroke="white" strokeOpacity="0.05" strokeWidth="1"/>
    <line x1="196" y1="64" x2="196" y2="144" stroke="white" strokeOpacity="0.05" strokeWidth="1"/>
    <line x1="248" y1="64" x2="248" y2="144" stroke="white" strokeOpacity="0.05" strokeWidth="1"/>
    <line x1="300" y1="64" x2="300" y2="144" stroke="white" strokeOpacity="0.05" strokeWidth="1"/>
    <ellipse cx="280" cy="104" rx="70" ry="45" fill="#00BFEF" opacity="0.15"/>
    <rect x="64" y="84" width="130" height="10" rx="5" fill="white" opacity="0.9"/>
    <rect x="64" y="100" width="100" height="7" rx="3.5" fill="white" opacity="0.5"/>
    <rect x="64" y="116" width="70" height="16" rx="8" fill="#00BFEF"/>
    <rect x="142" y="116" width="60" height="16" rx="8" fill="white" opacity="0.15"/>
    <rect x="40" y="144" width="310" height="96" fill="white"/>
    <rect x="56" y="156" width="80" height="72" rx="8" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/>
    <rect x="64" y="168" width="24" height="24" rx="6" fill="#00BFEF"/>
    <rect x="64" y="200" width="56" height="6" rx="3" fill="#e3e8ef"/>
    <rect x="64" y="212" width="40" height="5" rx="2.5" fill="#e3e8ef" opacity="0.6"/>
    <rect x="152" y="156" width="80" height="72" rx="8" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/>
    <rect x="160" y="168" width="24" height="24" rx="6" fill="#0A2A5E"/>
    <rect x="160" y="200" width="56" height="6" rx="3" fill="#e3e8ef"/>
    <rect x="160" y="212" width="40" height="5" rx="2.5" fill="#e3e8ef" opacity="0.6"/>
    <rect x="248" y="156" width="80" height="72" rx="8" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/>
    <rect x="256" y="168" width="24" height="24" rx="6" fill="#e3e8ef"/>
    <rect x="256" y="200" width="56" height="6" rx="3" fill="#e3e8ef"/>
    <rect x="256" y="212" width="40" height="5" rx="2.5" fill="#e3e8ef" opacity="0.6"/>
    <rect x="370" y="80" width="46" height="24" rx="12" fill="#0A2A5E" filter="url(#webSh)"/>
    <text x="393" y="96" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="white">EN</text>
    <rect x="370" y="116" width="46" height="24" rx="12" fill="white" stroke="#e3e8ef" strokeWidth="1" filter="url(#webSh)"/>
    <text x="393" y="132" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="#0A2A5E">DE</text>
    <rect x="370" y="152" width="46" height="24" rx="12" fill="white" stroke="#e3e8ef" strokeWidth="1" filter="url(#webSh)"/>
    <text x="393" y="168" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="#0A2A5E">AR</text>
    <rect x="40" y="240" width="310" height="3" rx="1.5" fill="url(#webAccent)"/>
    <rect x="358" y="130" width="68" height="118" rx="10" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#webSh)"/>
    <rect x="368" y="140" width="48" height="4" rx="2" fill="#e3e8ef"/>
    <rect x="368" y="150" width="48" height="56" rx="4" fill="#0A2A5E"/>
    <ellipse cx="392" cy="178" rx="18" ry="12" fill="#00BFEF" opacity="0.25"/>
    <rect x="368" y="212" width="30" height="5" rx="2.5" fill="#e3e8ef"/>
    <rect x="368" y="222" width="48" height="16" rx="8" fill="#00BFEF"/>
    <rect x="382" y="238" width="20" height="3" rx="1.5" fill="#e3e8ef"/>
    <rect x="358" y="258" width="68" height="22" rx="6" fill="#f0f6ff" stroke="#00BFEF" strokeWidth="1"/>
    <text x="392" y="273" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#0A2A5E">RTL ⇄ LTR</text>
  </svg>
);

const IlluAI = () => (
  <svg viewBox="0 0 480 300" xmlns="http://www.w3.org/2000/svg" style={{width:"100%",height:"100%",maxHeight:280}}>
    <defs>
      <linearGradient id="aiAcc" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor="#00BFEF"/><stop offset="100%" stopColor="#1E90FF"/></linearGradient>
      <filter id="aiSh"><feDropShadow dx="0" dy="4" stdDeviation="8" floodColor="#0A2A5E" floodOpacity="0.12"/></filter>
    </defs>
    <circle cx="80" cy="60" r="22" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#aiSh)"/>
    <circle cx="80" cy="60" r="8" fill="#00BFEF" opacity="0.8"/>
    <circle cx="80" cy="120" r="22" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#aiSh)"/>
    <circle cx="80" cy="120" r="8" fill="#0A2A5E" opacity="0.8"/>
    <circle cx="80" cy="180" r="22" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#aiSh)"/>
    <circle cx="80" cy="180" r="8" fill="#00BFEF" opacity="0.8"/>
    <circle cx="80" cy="240" r="22" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#aiSh)"/>
    <circle cx="80" cy="240" r="8" fill="#0A2A5E" opacity="0.8"/>
    <circle cx="200" cy="80" r="26" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#aiSh)"/>
    <circle cx="200" cy="80" r="10" fill="url(#aiAcc)" opacity="0.9"/>
    <circle cx="200" cy="150" r="26" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#aiSh)"/>
    <circle cx="200" cy="150" r="10" fill="url(#aiAcc)" opacity="0.9"/>
    <circle cx="200" cy="220" r="26" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#aiSh)"/>
    <circle cx="200" cy="220" r="10" fill="url(#aiAcc)" opacity="0.9"/>
    <circle cx="320" cy="110" r="30" fill="white" stroke="#00BFEF" strokeWidth="2" filter="url(#aiSh)"/>
    <circle cx="320" cy="110" r="12" fill="url(#aiAcc)"/>
    <circle cx="320" cy="110" r="5" fill="white" opacity="0.8"/>
    <circle cx="320" cy="190" r="30" fill="white" stroke="#00BFEF" strokeWidth="2" filter="url(#aiSh)"/>
    <circle cx="320" cy="190" r="12" fill="url(#aiAcc)"/>
    <circle cx="320" cy="190" r="5" fill="white" opacity="0.8"/>
    <circle cx="430" cy="150" r="34" fill="#0A2A5E" filter="url(#aiSh)"/>
    <circle cx="430" cy="150" r="20" fill="url(#aiAcc)" opacity="0.3"/>
    <text x="430" y="147" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="white" fontWeight="600">AI</text>
    <text x="430" y="160" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#00BFEF">OUT</text>
    <line x1="102" y1="60" x2="174" y2="80" stroke="#e3e8ef" strokeWidth="0.8" opacity="0.5"/>
    <line x1="102" y1="60" x2="174" y2="150" stroke="#00BFEF" strokeWidth="1.5" opacity="0.6"/>
    <line x1="102" y1="120" x2="174" y2="80" stroke="#e3e8ef" strokeWidth="0.8" opacity="0.5"/>
    <line x1="102" y1="120" x2="174" y2="220" stroke="#e3e8ef" strokeWidth="0.8" opacity="0.5"/>
    <line x1="102" y1="180" x2="174" y2="150" stroke="#e3e8ef" strokeWidth="0.8" opacity="0.5"/>
    <line x1="102" y1="240" x2="174" y2="220" stroke="#e3e8ef" strokeWidth="0.8" opacity="0.5"/>
    <line x1="226" y1="80" x2="290" y2="110" stroke="#e3e8ef" strokeWidth="0.8" opacity="0.5"/>
    <line x1="226" y1="150" x2="290" y2="110" stroke="#00BFEF" strokeWidth="2" opacity="0.7"/>
    <line x1="226" y1="150" x2="290" y2="190" stroke="#00BFEF" strokeWidth="2" opacity="0.7"/>
    <line x1="226" y1="220" x2="290" y2="190" stroke="#e3e8ef" strokeWidth="0.8" opacity="0.5"/>
    <line x1="350" y1="110" x2="396" y2="150" stroke="url(#aiAcc)" strokeWidth="2" opacity="0.7"/>
    <line x1="350" y1="190" x2="396" y2="150" stroke="url(#aiAcc)" strokeWidth="2" opacity="0.7"/>
    <circle cx="120" cy="108" r="5" fill="#00BFEF"/>
    <circle cx="260" cy="130" r="5" fill="#00BFEF"/>
    <circle cx="373" cy="132" r="5" fill="#00BFEF"/>
    <rect x="50" y="270" width="60" height="20" rx="6" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/>
    <text x="80" y="284" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#0A2A5E">INPUT</text>
    <rect x="174" y="270" width="60" height="20" rx="6" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/>
    <text x="204" y="284" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#0A2A5E">PROCESS</text>
    <rect x="296" y="270" width="60" height="20" rx="6" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/>
    <text x="326" y="284" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#0A2A5E">LEARN</text>
    <rect x="400" y="270" width="60" height="20" rx="6" fill="#0A2A5E"/>
    <text x="430" y="284" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="white">OUTPUT</text>
  </svg>
);

const IlluMS = () => (
  <svg viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" style={{width:"100%",height:"100%",maxHeight:320}}>
    <defs>
      <linearGradient id="msGrad" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor="#0078d4"/><stop offset="100%" stopColor="#00BFEF"/></linearGradient>
      <filter id="msSh"><feDropShadow dx="0" dy="4" stdDeviation="10" floodColor="#0A2A5E" floodOpacity="0.12"/></filter>
    </defs>
    <circle cx="240" cy="180" r="52" fill="#0A2A5E" filter="url(#msSh)"/>
    <circle cx="240" cy="180" r="36" fill="url(#msGrad)" opacity="0.2"/>
    <rect x="222" y="162" width="16" height="16" rx="2" fill="#f25022"/>
    <rect x="241" y="162" width="16" height="16" rx="2" fill="#7fba00"/>
    <rect x="222" y="181" width="16" height="16" rx="2" fill="#00a4ef"/>
    <rect x="241" y="181" width="16" height="16" rx="2" fill="#ffb900"/>
    <rect x="20" y="40" width="110" height="72" rx="12" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#msSh)"/>
    <rect x="32" y="52" width="20" height="20" rx="5" fill="#0078d4"/>
    <rect x="58" y="54" width="58" height="7" rx="3.5" fill="#e3e8ef"/>
    <rect x="58" y="65" width="40" height="5" rx="2.5" fill="#e3e8ef" opacity="0.6"/>
    <rect x="32" y="80" width="85" height="20" rx="6" fill="#f5f7fa"/>
    <rect x="38" y="86" width="14" height="8" rx="3" fill="#0078d4" opacity="0.7"/>
    <rect x="56" y="86" width="14" height="8" rx="3" fill="#00BFEF" opacity="0.5"/>
    <text x="75" y="124" textAnchor="middle" fontSize="11" fontFamily="monospace" fontWeight="600" fill="#0A2A5E">Dynamics 365</text>
    <rect x="350" y="40" width="110" height="72" rx="12" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#msSh)"/>
    <rect x="362" y="52" width="86" height="14" rx="7" fill="#f5f7fa"/>
    <rect x="368" y="56" width="50" height="6" rx="3" fill="#00BFEF" opacity="0.8"/>
    <rect x="368" y="74" width="8" height="16" rx="2" fill="#00BFEF" opacity="0.8"/>
    <rect x="380" y="78" width="8" height="12" rx="2" fill="#0A2A5E" opacity="0.8"/>
    <rect x="392" y="82" width="8" height="8" rx="2" fill="#e3e8ef"/>
    <text x="405" y="124" textAnchor="middle" fontSize="11" fontFamily="monospace" fontWeight="600" fill="#0A2A5E">Business Central</text>
    <rect x="20" y="260" width="110" height="60" rx="12" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#msSh)"/>
    <rect x="32" y="272" width="18" height="18" rx="4" fill="#185abd"/>
    <text x="41" y="285" textAnchor="middle" fontSize="9" fontFamily="sans-serif" fontWeight="700" fill="white">W</text>
    <rect x="56" y="272" width="18" height="18" rx="4" fill="#107c41"/>
    <text x="65" y="285" textAnchor="middle" fontSize="9" fontFamily="sans-serif" fontWeight="700" fill="white">X</text>
    <rect x="80" y="272" width="18" height="18" rx="4" fill="#c43e1c"/>
    <text x="89" y="285" textAnchor="middle" fontSize="9" fontFamily="sans-serif" fontWeight="700" fill="white">P</text>
    <rect x="32" y="296" width="86" height="6" rx="3" fill="#e3e8ef"/>
    <rect x="32" y="306" width="60" height="5" rx="2.5" fill="#e3e8ef" opacity="0.6"/>
    <text x="75" y="332" textAnchor="middle" fontSize="11" fontFamily="monospace" fontWeight="600" fill="#0A2A5E">Microsoft 365</text>
    <rect x="350" y="260" width="110" height="60" rx="12" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#msSh)"/>
    <rect x="362" y="272" width="86" height="40" rx="6" fill="#f5f7fa"/>
    <rect x="368" y="278" width="24" height="22" rx="4" fill="#e3e8ef"/>
    <rect x="396" y="278" width="24" height="22" rx="4" fill="#742774"/>
    <text x="408" y="292" textAnchor="middle" fontSize="7" fill="white">Flow</text>
    <rect x="424" y="278" width="24" height="22" rx="4" fill="#e3e8ef"/>
    <text x="405" y="332" textAnchor="middle" fontSize="11" fontFamily="monospace" fontWeight="600" fill="#0A2A5E">Power Platform</text>
    <line x1="197" y1="153" x2="130" y2="112" stroke="#00BFEF" strokeWidth="1.5" strokeDasharray="5,3" opacity="0.6"/>
    <line x1="283" y1="153" x2="350" y2="112" stroke="#00BFEF" strokeWidth="1.5" strokeDasharray="5,3" opacity="0.6"/>
    <line x1="197" y1="207" x2="130" y2="270" stroke="#00BFEF" strokeWidth="1.5" strokeDasharray="5,3" opacity="0.6"/>
    <line x1="283" y1="207" x2="350" y2="270" stroke="#00BFEF" strokeWidth="1.5" strokeDasharray="5,3" opacity="0.6"/>
    <circle cx="163" cy="132" r="5" fill="#00BFEF"/>
    <circle cx="317" cy="132" r="5" fill="#00BFEF"/>
    <circle cx="163" cy="238" r="5" fill="#00BFEF"/>
    <circle cx="317" cy="238" r="5" fill="#00BFEF"/>
  </svg>
);

const IlluWorkflow = () => (
  <svg viewBox="0 0 380 260" xmlns="http://www.w3.org/2000/svg" style={{width:"100%",height:"100%"}}>
    <defs>
      <linearGradient id="wfLine" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#0A2A5E"/><stop offset="50%" stopColor="#00BFEF"/><stop offset="100%" stopColor="#0A2A5E"/></linearGradient>
      <filter id="wfSh"><feDropShadow dx="0" dy="3" stdDeviation="6" floodColor="#0A2A5E" floodOpacity="0.1"/></filter>
    </defs>
    <g filter="url(#wfSh)">
      <rect x="4" y="98" width="88" height="64" rx="14" fill="white" stroke="#e3e8ef" strokeWidth="1.5"/>
      <rect x="4" y="98" width="88" height="4" rx="2" fill="#0078d4"/>
      <text x="48" y="134" textAnchor="middle" fontSize="13" fontFamily="monospace" fontWeight="700" fill="#0078d4">D365</text>
      <text x="48" y="150" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#6b7a92">CRM / ERP</text>
    </g>
    <g filter="url(#wfSh)">
      <rect x="146" y="48" width="88" height="64" rx="14" fill="white" stroke="#00BFEF" strokeWidth="2"/>
      <rect x="146" y="48" width="88" height="4" rx="2" fill="#00BFEF"/>
      <text x="190" y="84" textAnchor="middle" fontSize="13" fontFamily="monospace" fontWeight="700" fill="#00BFEF">Flow</text>
      <text x="190" y="100" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#6b7a92">Logic App</text>
    </g>
    <g filter="url(#wfSh)">
      <rect x="146" y="148" width="88" height="64" rx="14" fill="white" stroke="#e3e8ef" strokeWidth="1.5"/>
      <rect x="146" y="148" width="88" height="4" rx="2" fill="#0A2A5E"/>
      <text x="190" y="184" textAnchor="middle" fontSize="13" fontFamily="monospace" fontWeight="700" fill="#0A2A5E">API</text>
      <text x="190" y="200" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#6b7a92">Bridge</text>
    </g>
    <g filter="url(#wfSh)">
      <rect x="288" y="98" width="88" height="64" rx="14" fill="white" stroke="#e3e8ef" strokeWidth="1.5"/>
      <rect x="288" y="98" width="88" height="4" rx="2" fill="#107c41"/>
      <text x="332" y="134" textAnchor="middle" fontSize="13" fontFamily="monospace" fontWeight="700" fill="#107c41">BC</text>
      <text x="332" y="150" textAnchor="middle" fontSize="9" fontFamily="monospace" fill="#6b7a92">Finance</text>
    </g>
    <path d="M94 118 Q120 80 146 80" fill="none" stroke="url(#wfLine)" strokeWidth="2" strokeDasharray="6,3"/>
    <path d="M94 142 Q120 180 146 180" fill="none" stroke="url(#wfLine)" strokeWidth="2" strokeDasharray="6,3"/>
    <path d="M234 80 Q260 118 288 130" fill="none" stroke="url(#wfLine)" strokeWidth="2" strokeDasharray="6,3"/>
    <path d="M234 180 Q260 142 288 130" fill="none" stroke="url(#wfLine)" strokeWidth="2" strokeDasharray="6,3"/>
    <circle cx="120" cy="100" r="5" fill="#00BFEF"/>
    <circle cx="120" cy="160" r="5" fill="#00BFEF"/>
    <circle cx="260" cy="113" r="5" fill="#00BFEF"/>
    <circle cx="260" cy="147" r="5" fill="#00BFEF"/>
    <rect x="90" y="228" width="200" height="22" rx="11" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/>
    <text x="190" y="243" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="#0A2A5E">Automated · real-time sync</text>
  </svg>
);

const IlluIntegration = () => (
  <svg viewBox="0 0 380 260" xmlns="http://www.w3.org/2000/svg" style={{width:"100%",height:"100%"}}>
    <defs>
      <filter id="intSh"><feDropShadow dx="0" dy="3" stdDeviation="5" floodColor="#0A2A5E" floodOpacity="0.08"/></filter>
    </defs>
    <g filter="url(#intSh)"><rect x="10" y="14" width="80" height="56" rx="10" fill="white" stroke="#0078d4" strokeWidth="2"/><rect x="10" y="14" width="80" height="3" rx="1.5" fill="#0078d4"/><text x="50" y="46" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="#0078d4">MS Cloud</text><circle cx="82" cy="22" r="5" fill="#0078d4"/></g>
    <g filter="url(#intSh)"><rect x="110" y="14" width="80" height="56" rx="10" fill="white" stroke="#00BFEF" strokeWidth="2"/><rect x="110" y="14" width="80" height="3" rx="1.5" fill="#00BFEF"/><text x="150" y="46" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="#00BFEF">REST API</text><circle cx="182" cy="22" r="5" fill="#00BFEF"/></g>
    <g filter="url(#intSh)"><rect x="210" y="14" width="80" height="56" rx="10" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/><text x="250" y="46" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="#9aa5b4">Database</text></g>
    <g filter="url(#intSh)"><rect x="290" y="14" width="80" height="56" rx="10" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/><text x="330" y="46" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="#9aa5b4">External</text></g>
    <g filter="url(#intSh)"><rect x="10" y="96" width="80" height="56" rx="10" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/><text x="50" y="128" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="#9aa5b4">ERP Core</text></g>
    <g filter="url(#intSh)"><rect x="110" y="96" width="180" height="56" rx="10" fill="#0A2A5E"/><text x="200" y="128" textAnchor="middle" fontSize="14" fontFamily="monospace" fontWeight="700" fill="white">⚡ HUB</text></g>
    <g filter="url(#intSh)"><rect x="300" y="96" width="80" height="56" rx="10" fill="white" stroke="#c43e1c" strokeWidth="2"/><rect x="300" y="96" width="80" height="3" rx="1.5" fill="#c43e1c"/><text x="340" y="128" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="#c43e1c">CRM</text><circle cx="372" cy="104" r="5" fill="#c43e1c"/></g>
    <g filter="url(#intSh)"><rect x="10" y="178" width="80" height="56" rx="10" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/><text x="50" y="210" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="#9aa5b4">Power BI</text></g>
    <g filter="url(#intSh)"><rect x="110" y="178" width="80" height="56" rx="10" fill="#f5f7fa" stroke="#e3e8ef" strokeWidth="1"/><text x="150" y="210" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="#9aa5b4">SharePt</text></g>
    <g filter="url(#intSh)"><rect x="210" y="178" width="170" height="56" rx="10" fill="white" stroke="#107c41" strokeWidth="2"/><rect x="210" y="178" width="170" height="3" rx="1.5" fill="#107c41"/><text x="295" y="210" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="#107c41">Business Central</text></g>
    <line x1="110" y1="42" x2="50" y2="96" stroke="#00BFEF" strokeWidth="1" strokeDasharray="4,3" opacity="0.4"/>
    <line x1="150" y1="70" x2="150" y2="96" stroke="#00BFEF" strokeWidth="1" strokeDasharray="4,3" opacity="0.4"/>
    <line x1="200" y1="152" x2="50" y2="178" stroke="#00BFEF" strokeWidth="1" strokeDasharray="4,3" opacity="0.4"/>
    <line x1="200" y1="152" x2="150" y2="178" stroke="#00BFEF" strokeWidth="1" strokeDasharray="4,3" opacity="0.4"/>
    <text x="190" y="248" textAnchor="middle" fontSize="10" fontFamily="monospace" fill="#6b7a92">Seamless system integration</text>
  </svg>
);

const IlluPortfolio = ({ tag }) => (
  <svg viewBox="0 0 500 340" xmlns="http://www.w3.org/2000/svg" style={{width:"100%",height:"100%"}}>
    <defs>
      <linearGradient id="pfH" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stopColor="#0A2A5E"/><stop offset="100%" stopColor="#0d3572"/></linearGradient>
      <linearGradient id="pfA" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stopColor="#00BFEF"/><stop offset="100%" stopColor="#1E90FF"/></linearGradient>
      <filter id="pfSh"><feDropShadow dx="0" dy="6" stdDeviation="12" floodColor="#0A2A5E" floodOpacity="0.18"/></filter>
      <clipPath id="pfC"><rect x="30" y="24" width="380" height="280" rx="14"/></clipPath>
    </defs>
    <rect x="30" y="24" width="380" height="280" rx="14" fill="white" filter="url(#pfSh)"/>
    <rect x="30" y="24" width="380" height="36" rx="14" fill="#f5f7fa"/>
    <rect x="30" y="46" width="380" height="14" fill="#f5f7fa"/>
    <circle cx="52" cy="42" r="5" fill="#ff5f56"/>
    <circle cx="68" cy="42" r="5" fill="#ffbd2e"/>
    <circle cx="84" cy="42" r="5" fill="#27c93f"/>
    <rect x="108" y="36" width="200" height="12" rx="6" fill="#e3e8ef"/>
    <rect x="112" y="39" width="80" height="6" rx="3" fill="#00BFEF" opacity="0.5"/>
    <g clipPath="url(#pfC)">
      <rect x="30" y="60" width="380" height="36" fill="white"/>
      <rect x="42" y="70" width="60" height="16" rx="4" fill="#0A2A5E" opacity="0.9"/>
      <rect x="116" y="74" width="28" height="8" rx="4" fill="#e3e8ef"/>
      <rect x="152" y="74" width="28" height="8" rx="4" fill="#e3e8ef"/>
      <rect x="188" y="74" width="28" height="8" rx="4" fill="#e3e8ef"/>
      <rect x="340" y="68" width="58" height="20" rx="10" fill="#0A2A5E"/>
      <rect x="30" y="96" width="380" height="110" fill="url(#pfH)"/>
      <ellipse cx="320" cy="150" rx="90" ry="60" fill="#00BFEF" opacity="0.12"/>
      <rect x="50" y="116" width="150" height="14" rx="7" fill="white" opacity="0.9"/>
      <rect x="50" y="136" width="120" height="10" rx="5" fill="white" opacity="0.5"/>
      <rect x="50" y="156" width="100" height="10" rx="5" fill="white" opacity="0.35"/>
      <rect x="50" y="175" width="90" height="22" rx="11" fill="url(#pfA)"/>
      <rect x="148" y="175" width="70" height="22" rx="11" fill="white" opacity="0.12"/>
      <rect x="30" y="206" width="380" height="98" fill="#f5f7fa"/>
      <rect x="46" y="218" width="108" height="70" rx="8" fill="white" stroke="#e3e8ef" strokeWidth="1"/>
      <rect x="46" y="218" width="108" height="4" rx="2" fill="#00BFEF"/>
      <rect x="58" y="232" width="28" height="28" rx="7" fill="rgba(0,191,239,0.12)"/>
      <rect x="58" y="266" width="72" height="7" rx="3.5" fill="#e3e8ef"/>
      <rect x="168" y="218" width="108" height="70" rx="8" fill="white" stroke="#e3e8ef" strokeWidth="1"/>
      <rect x="168" y="218" width="108" height="4" rx="2" fill="#0A2A5E"/>
      <rect x="180" y="232" width="28" height="28" rx="7" fill="rgba(10,42,94,0.08)"/>
      <rect x="180" y="266" width="72" height="7" rx="3.5" fill="#e3e8ef"/>
      <rect x="290" y="218" width="108" height="70" rx="8" fill="white" stroke="#e3e8ef" strokeWidth="1"/>
      <rect x="290" y="218" width="108" height="4" rx="2" fill="#e3e8ef"/>
      <rect x="302" y="232" width="28" height="28" rx="7" fill="#f5f7fa"/>
      <rect x="302" y="266" width="72" height="7" rx="3.5" fill="#e3e8ef"/>
    </g>
    <rect x="42" y="286" width="90" height="24" rx="12" fill="#0A2A5E" filter="url(#pfSh)"/>
    <text x="87" y="301" textAnchor="middle" fontSize="10" fontFamily="monospace" fontWeight="600" fill="white">{tag || "WEB · NGO"}</text>
    <rect x="420" y="80" width="62" height="110" rx="10" fill="white" stroke="#e3e8ef" strokeWidth="1.5" filter="url(#pfSh)"/>
    <rect x="428" y="90" width="46" height="60" rx="4" fill="url(#pfH)"/>
    <ellipse cx="451" cy="120" rx="14" ry="9" fill="#00BFEF" opacity="0.2"/>
    <rect x="428" y="156" width="28" height="5" rx="2.5" fill="#e3e8ef"/>
    <rect x="428" y="165" width="46" height="14" rx="7" fill="url(#pfA)"/>
    <rect x="441" y="183" width="20" height="3" rx="1.5" fill="#e3e8ef"/>
  </svg>
);

// ═══════════════════════════════════════════════════════
// ─── Shared inner page header
// ═══════════════════════════════════════════════════════
const PageHeader = ({ eyebrow, title, lede }) => (
  <section className="dm-page-header">
    <div className="dm-page-header-bg" aria-hidden="true">
      <div className="dm-hero-grid-lines" />
      <div className="dm-hero-glow dm-hero-glow-a" />
    </div>
    <div className="dm-container">
      <div className="dm-eyebrow"><span className="dm-eyebrow-dot"/>{eyebrow}</div>
      <h1 className="dm-h1">{title}</h1>
      {lede && <p className="dm-lede" style={{maxWidth: "70ch"}}>{lede}</p>}
    </div>
  </section>
);

// ─── Services overview page
const ServicesPage = ({ lang, navigate }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.services;
  const illustrations = [<IlluWeb/>, <IlluAI/>, <IlluMS/>];
  const services = [
    { ...p.web, icon: "web", page: "web" },
    { ...p.ai,  icon: "ai",  page: "ai"  },
    { ...p.ms,  icon: "ms",  page: "microsoft" },
  ];
  return (
    <>
      <PageHeader eyebrow={p.intro.eyebrow} title={p.intro.title} lede={p.intro.lede} />
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <div className="dm-svc-stack">
            {services.map((s, i) => (
              <article key={i} className={"dm-svc-row" + (i % 2 ? " is-rev" : "")}>
                <div className="dm-svc-row-visual" aria-hidden="true" style={{background:"linear-gradient(135deg,rgba(0,191,239,0.05),rgba(10,42,94,0.03))",border:"1px solid var(--line)",padding:24,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden"}}>
                  <div className="dm-svc-row-pattern" style={{position:"absolute",inset:0,zIndex:0}}/>
                  <div style={{position:"relative",zIndex:1,width:"100%"}}>{illustrations[i]}</div>
                </div>
                <div className="dm-svc-row-copy">
                  <div className="dm-eyebrow"><span className="dm-eyebrow-dot"/>{s.tag}</div>
                  <h2 className="dm-h2">{s.title}</h2>
                  <p className="dm-lede">{s.lede}</p>
                  <ul className="dm-feature-list">
                    {s.features.map((f, j) => (
                      <li key={j}><span className="dm-feature-bullet"><Icon name="check" size={14}/></span>{f}</li>
                    ))}
                  </ul>
                  <a href={"/"+s.page} onClick={(e) => { e.preventDefault(); navigate(s.page); }} className="dm-btn dm-btn-primary" style={{marginTop: 12}}>
                    {t.cta.learnMore}<Icon name="arrow" size={16}/>
                  </a>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
      <DM_FinalCta lang={lang} />
    </>
  );
};

// ─── Microsoft Solutions page
const MicrosoftPage = ({ lang, navigate }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.microsoft;
  return (
    <>
      <PageHeader eyebrow={p.intro.eyebrow} title={p.intro.title} lede={p.intro.lede} />
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <h2 className="dm-section-h">Products</h2>
          <div className="dm-ms-products-grid">
            {p.products.map((prod, i) => (
              <article key={i} className="dm-ms-product-card">
                <div className="dm-ms-product-card-head">
                  <div className="dm-ms-product-icon" style={{width: 48, height: 48}}><Icon name="ms" size={24}/></div>
                  <div className="dm-ms-tag">{prod.tag}</div>
                </div>
                <h3 className="dm-ms-product-card-name">{prod.name}</h3>
                <p className="dm-ms-product-card-desc">{prod.desc}</p>
                <ul className="dm-feature-list dm-feature-list-sm">
                  {prod.points.map((pt, j) => (
                    <li key={j}><span className="dm-feature-bullet"><Icon name="check" size={12}/></span>{pt}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section className="dm-section dm-section-why">
        <div className="dm-container">
          <div className="dm-split-grid">
            <div>
              <h2 className="dm-h2">{p.workflow.title}</h2>
              <p className="dm-lede">{p.workflow.desc}</p>
            </div>
            <div className="dm-split-visual" style={{padding:24,background:"white"}}>
              <IlluWorkflow/>
            </div>
          </div>
        </div>
      </section>
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <div className="dm-split-grid is-rev">
            <div className="dm-split-visual" style={{padding:24,background:"white"}}>
              <IlluIntegration/>
            </div>
            <div>
              <h2 className="dm-h2">{p.integration.title}</h2>
              <p className="dm-lede">{p.integration.desc}</p>
            </div>
          </div>
        </div>
      </section>
      <section className="dm-section dm-section-why">
        <div className="dm-container">
          <h2 className="dm-section-h">Use cases</h2>
          <div className="dm-grid-2-2">
            {p.useCases.map((uc, i) => (
              <div key={i} className="dm-use-case">
                <span className="dm-use-tag">{uc.tag}</span>
                <h3 className="dm-use-title">{uc.title}</h3>
                <p className="dm-use-desc">{uc.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <DM_FinalCta lang={lang} />
    </>
  );
};

// ─── AI Solutions page
const AiPage = ({ lang }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.ai;
  return (
    <>
      <PageHeader eyebrow={p.intro.eyebrow} title={p.intro.title} lede={p.intro.lede} />
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <div className="dm-grid-2-2">
            {p.areas.map((a, i) => (
              <article key={i} className="dm-area-card">
                <div className="dm-area-card-head">
                  <span className="dm-area-tag">{a.tag}</span>
                  <span className="dm-area-icon"><Icon name="spark" size={20}/></span>
                </div>
                <h3 className="dm-area-title">{a.title}</h3>
                <p className="dm-area-desc">{a.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section className="dm-section dm-section-why">
        <div className="dm-container">
          <h2 className="dm-section-h">Benefits</h2>
          <div className="dm-grid-3">
            {p.benefits.map((b, i) => (
              <div key={i} className="dm-benefit">
                <div className="dm-benefit-num">0{i+1}</div>
                <h3 className="dm-benefit-title">{b.title}</h3>
                <p className="dm-benefit-desc">{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <DM_FinalCta lang={lang} />
    </>
  );
};

// ─── Web Design page
const WebPage = ({ lang }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.web;
  return (
    <>
      <PageHeader eyebrow={p.intro.eyebrow} title={p.intro.title} lede={p.intro.lede} />
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <div className="dm-grid-3">
            {p.types.map((tp, i) => (
              <article key={i} className="dm-type-card">
                <span className="dm-type-tag">{tp.tag}</span>
                <h3 className="dm-type-title">{tp.title}</h3>
                <p className="dm-type-desc">{tp.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section className="dm-section dm-section-why">
        <div className="dm-container">
          <div className="dm-grid-2-2">
            {p.features.map((f, i) => (
              <div key={i} className="dm-why-item">
                <div className="dm-why-icon"><Icon name="check" size={20}/></div>
                <div>
                  <h4 className="dm-why-title">{f.title}</h4>
                  <p className="dm-why-desc">{f.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <DM_FinalCta lang={lang} />
    </>
  );
};

// ─── About page
const AboutPage = ({ lang }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.about;
  return (
    <>
      <PageHeader eyebrow={p.intro.eyebrow} title={p.intro.title} lede={p.intro.lede} />
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <div className="dm-grid-2-2">
            {p.blocks.map((b, i) => (
              <div key={i} className="dm-about-block">
                <div className="dm-about-num">0{i+1}</div>
                <h3 className="dm-about-title">{b.title}</h3>
                <p className="dm-about-desc">{b.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
      <DM_FinalCta lang={lang} />
    </>
  );
};

// ─── Contact page
const ContactPage = ({ lang, navigate }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.contact;
  return (
    <>
      <PageHeader eyebrow={p.intro.eyebrow} title={p.intro.title} lede={p.intro.lede} />
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <div className="dm-contact-grid">
            <DM_ContactFormX lang={lang} navigate={navigate} />
            <aside className="dm-contact-side">
              {p.channels.map((c, i) => (
                <div key={i} className="dm-channel">
                  <div className="dm-channel-label">{c.label}</div>
                  {c.href ? <a href={c.href} className="dm-channel-value">{c.value}</a> : <div className="dm-channel-value">{c.value}</div>}
                </div>
              ))}
            </aside>
          </div>
        </div>
      </section>
    </>
  );
};

// ─── Legal page
const LegalPage = ({ lang, type }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages[type];
  return (
    <>
      <section className="dm-page-header dm-page-header-sm">
        <div className="dm-page-header-bg" aria-hidden="true"><div className="dm-hero-grid-lines" /></div>
        <div className="dm-container">
          <h1 className="dm-h1" style={{fontSize: "clamp(32px, 4vw, 48px)"}}>{p.title}</h1>
          <div className="dm-legal-updated">{p.updated}</div>
        </div>
      </section>
      <section className="dm-section dm-section-services">
        <div className="dm-container dm-legal-container">
          {type === "cookies" ? <CookiesContent p={p} lang={lang}/> : (
            <div className="dm-legal-body">
              {p.sections.map((sec, i) => (
                <div key={i} className="dm-legal-section">
                  <h2 className="dm-legal-h">{sec.h}</h2>
                  <p className="dm-legal-p">{sec.p}</p>
                </div>
              ))}
            </div>
          )}
        </div>
      </section>
    </>
  );
};

const CookiesContent = ({ p, lang }) => {
  const [prefs, setPrefs] = useStateP(() => {
    try { return JSON.parse(localStorage.getItem("dm_cookie_prefs")) || { Preferences: false, Analytics: false, Marketing: false }; } catch { return { Preferences: false, Analytics: false, Marketing: false }; }
  });
  const toggle = (k) => {
    const next = { ...prefs, [k]: !prefs[k] };
    setPrefs(next);
    try { localStorage.setItem("dm_cookie_prefs", JSON.stringify(next)); } catch {}
  };
  return (
    <div className="dm-legal-body">
      <p className="dm-legal-p" style={{fontSize: 17, marginBottom: 32}}>{p.intro}</p>
      <div className="dm-cookies-list">
        {p.categories.map((c, i) => (
          <div key={i} className="dm-cookies-row">
            <div className="dm-cookies-row-info">
              <h3 className="dm-cookies-name">{c.name}</h3>
              <p className="dm-cookies-desc">{c.desc}</p>
            </div>
            <div className="dm-cookies-row-control">
              {c.required ? (
                <span className="dm-cookies-locked">Always on</span>
              ) : (
                <label className="dm-toggle">
                  <input type="checkbox" checked={!!prefs[c.name === "Preferences" || c.name === "\u0627\u0644\u062a\u0641\u0636\u064a\u0644\u0627\u062a" || c.name === "Pr\u00e4ferenzen" ? "Preferences" : c.name === "Analytics" || c.name === "\u0627\u0644\u062a\u062d\u0644\u064a\u0644\u0627\u062a" || c.name === "Analyse" ? "Analytics" : "Marketing"]} onChange={() => toggle(c.name === "Preferences" || c.name === "\u0627\u0644\u062a\u0641\u0636\u064a\u0644\u0627\u062a" || c.name === "Pr\u00e4ferenzen" ? "Preferences" : c.name === "Analytics" || c.name === "\u0627\u0644\u062a\u062d\u0644\u064a\u0644\u0627\u062a" || c.name === "Analyse" ? "Analytics" : "Marketing")} />
                  <span className="dm-toggle-track"/>
                </label>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

// ─── Cookie banner
const CookieBanner = ({ lang, navigate }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.cookies.banner;
  const [open, setOpen] = useStateP(false);
  useEffectP(() => {
    try {
      if (!localStorage.getItem("dm_cookie_choice")) setOpen(true);
    } catch {}
  }, []);
  const choose = (val) => {
    try { localStorage.setItem("dm_cookie_choice", val); } catch {}
    setOpen(false);
  };
  if (!open) return null;
  return (
    <div className="dm-cookie-banner" role="dialog" aria-label="Cookie consent">
      <div className="dm-cookie-banner-inner">
        <div className="dm-cookie-banner-copy">
          <h3>{p.title}</h3>
          <p>{p.body}</p>
        </div>
        <div className="dm-cookie-banner-actions">
          <button className="dm-btn dm-btn-ghost dm-btn-sm" onClick={() => { navigate("cookies"); setOpen(false); }}>{p.settings}</button>
          <button className="dm-btn dm-btn-ghost dm-btn-sm" onClick={() => choose("rejected")}>{p.reject}</button>
          <button className="dm-btn dm-btn-primary dm-btn-sm" onClick={() => choose("accepted")}>{p.accept}</button>
        </div>
      </div>
    </div>
  );
};

// ─── E-Commerce page
const EcommercePage = ({ lang, navigate }) => {
  const t = window.DM_I18N[lang];
  const p = t.pages.ecommerce;
  return (
    <>
      <PageHeader eyebrow={p.intro.eyebrow} title={p.intro.title} lede={p.intro.lede} />
      <section className="dm-section dm-section-services">
        <div className="dm-container">
          <div className="dm-grid-3">
            {p.types.map((tp, i) => (
              <article key={i} className="dm-type-card">
                <span className="dm-type-tag">{tp.tag}</span>
                <h3 className="dm-type-title">{tp.title}</h3>
                <p className="dm-type-desc">{tp.desc}</p>
              </article>
            ))}
          </div>
        </div>
      </section>
      <section className="dm-section dm-section-why">
        <div className="dm-container">
          <div className="dm-grid-2-2">
            {p.features.map((f, i) => (
              <div key={i} className="dm-why-item">
                <div className="dm-why-icon"><Icon name="check" size={20}/></div>
                <div>
                  <h4 className="dm-why-title">{f.title}</h4>
                  <p className="dm-why-desc">{f.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <DM_FinalCta lang={lang} />
    </>
  );
};

Object.assign(window, {
  DM_PageHeader:     PageHeader,
  DM_ServicesPage:   ServicesPage,
  DM_MicrosoftPage:  MicrosoftPage,
  DM_AiPage:         AiPage,
  DM_WebPage:        WebPage,
  DM_EcommercePage:  EcommercePage,
  DM_AboutPage:      AboutPage,
  DM_ContactPage:    ContactPage,
  DM_LegalPage:      LegalPage,
  DM_CookieBanner:   CookieBanner,
  IlluPortfolio:     IlluPortfolio,
});
