<svg viewBox="0 0 1000 420" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
      <path d="M0 0 L10 5 L0 10 z" fill="#1de9b6"/>
    </marker>
  </defs>
  <rect width="1000" height="420" fill="#050b10"/>
  <text x="30" y="45" font-family="IBM Plex Mono, monospace" font-size="13" letter-spacing="2" fill="#1de9b6" font-weight="600">FLUXO REAL · AGENTE DIY NO WHATSAPP</text>

  <!-- Step 1: Cliente -->
  <g transform="translate(30,110)">
    <rect width="180" height="110" rx="12" fill="#0c1720" stroke="#2b8ce0" stroke-width="2"/>
    <text x="90" y="45" font-family="Inter, sans-serif" font-size="17" font-weight="700" fill="#f0f7f6" text-anchor="middle">Cliente</text>
    <text x="90" y="68" font-family="Inter, sans-serif" font-size="13" fill="#8fa8a5" text-anchor="middle">envia mensagem</text>
    <text x="90" y="86" font-family="Inter, sans-serif" font-size="13" fill="#8fa8a5" text-anchor="middle">no WhatsApp</text>
  </g>
  <line x1="210" y1="165" x2="248" y2="165" stroke="#1de9b6" stroke-width="2" marker-end="url(#arrow)"/>

  <!-- Step 2: Evolution API -->
  <g transform="translate(250,80)">
    <rect width="200" height="170" rx="12" fill="#0c1720" stroke="#1de9b6" stroke-width="2"/>
    <text x="100" y="45" font-family="Inter, sans-serif" font-size="17" font-weight="700" fill="#f0f7f6" text-anchor="middle">Evolution API</text>
    <text x="100" y="70" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">sessão WhatsApp Web</text>
    <text x="100" y="90" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">captura o webhook</text>
    <text x="100" y="115" font-family="IBM Plex Mono, monospace" font-size="12" fill="#2b8ce0" text-anchor="middle">porta 8080</text>
    <text x="100" y="140" font-family="Inter, sans-serif" font-size="11" fill="#8fa8a5" text-anchor="middle">não oficial · risco baixo/médio</text>
  </g>
  <line x1="450" y1="165" x2="488" y2="165" stroke="#1de9b6" stroke-width="2" marker-end="url(#arrow)"/>

  <!-- Step 3: n8n -->
  <g transform="translate(490,60)">
    <rect width="200" height="210" rx="12" fill="#0c1720" stroke="#1de9b6" stroke-width="2"/>
    <text x="100" y="40" font-family="Inter, sans-serif" font-size="17" font-weight="700" fill="#f0f7f6" text-anchor="middle">n8n</text>
    <text x="100" y="62" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">webhook recebe o texto</text>
    <text x="100" y="86" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">nó AI Agent consulta o</text>
    <text x="100" y="104" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">modelo com contexto</text>
    <text x="100" y="132" font-family="IBM Plex Mono, monospace" font-size="12" fill="#2b8ce0" text-anchor="middle">porta 5678</text>
    <rect x="30" y="150" width="140" height="34" rx="8" fill="rgba(29,233,182,0.10)" stroke="rgba(29,233,182,0.35)"/>
    <text x="100" y="171" font-family="IBM Plex Mono, monospace" font-size="11" fill="#1de9b6" text-anchor="middle">Session ID = nº tel.</text>
  </g>
  <line x1="590" y1="270" x2="590" y2="300" stroke="#1de9b6" stroke-width="2" marker-end="url(#arrow)"/>

  <!-- Step 4: Redis -->
  <g transform="translate(490,300)">
    <rect width="200" height="90" rx="12" fill="#0c1720" stroke="#2b8ce0" stroke-width="2" stroke-dasharray="4 3"/>
    <text x="100" y="35" font-family="Inter, sans-serif" font-size="16" font-weight="700" fill="#f0f7f6" text-anchor="middle">Redis</text>
    <text x="100" y="56" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">memória de contexto</text>
    <text x="100" y="75" font-family="IBM Plex Mono, monospace" font-size="11" fill="#2b8ce0" text-anchor="middle">TTL 24h · maxmemory 256mb</text>
  </g>

  <line x1="690" y1="165" x2="728" y2="165" stroke="#1de9b6" stroke-width="2" marker-end="url(#arrow)"/>

  <!-- Step 5: Modelo IA -->
  <g transform="translate(730,80)">
    <rect width="220" height="170" rx="12" fill="#0c1720" stroke="#1de9b6" stroke-width="2"/>
    <text x="110" y="45" font-family="Inter, sans-serif" font-size="17" font-weight="700" fill="#f0f7f6" text-anchor="middle">Modelo de IA</text>
    <text x="110" y="70" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">Groq / OpenAI / Claude</text>
    <text x="110" y="95" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">processa ~20-25k tokens</text>
    <text x="110" y="113" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">gera a resposta</text>
    <text x="110" y="140" font-family="IBM Plex Mono, monospace" font-size="12" fill="#2b8ce0" text-anchor="middle">custo por token</text>
  </g>

  <!-- return path -->
  <path d="M 950 165 C 980 165 980 380 590 380 C 300 380 250 380 130 250" fill="none" stroke="#8fa8a5" stroke-width="1.5" stroke-dasharray="5 4" marker-end="url(#arrow)"/>
  <text x="500" y="405" font-family="Inter, sans-serif" font-size="12" fill="#8fa8a5" text-anchor="middle">resposta volta pelo mesmo caminho até o cliente</text>
</svg>
