---
// A stylized Camel route topology. Two linked routes with a cross-route
// (cyan, dashed) reference — the signature Cameleer diagnostic that a
// generic APM cannot produce.
---
<div class="relative w-full aspect-[16/10] max-w-3xl mx-auto">
  <svg viewBox="0 0 800 500" class="w-full h-full" role="img" aria-label="Camel route topology with cross-route reference">
    <defs>
      <marker id="arrow-amber" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M0,0 L10,5 L0,10 z" fill="#f0b429"/>
      </marker>
      <marker id="arrow-cyan" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
        <path d="M0,0 L10,5 L0,10 z" fill="#5cc8ff"/>
      </marker>
      <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
        <feGaussianBlur stdDeviation="4" result="b"/>
        <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
      </filter>
    </defs>

    {/* Route labels */}
    <text x="40" y="80" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="13" letter-spacing="1">▸ order-ingest</text>
    <text x="40" y="340" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="13" letter-spacing="1">▸ pricing-enrich</text>

    {/* Route 1 edges */}
    <line x1="100" y1="130" x2="230" y2="130" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="280" y1="130" x2="380" y2="90" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="280" y1="130" x2="380" y2="170" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="430" y1="90" x2="560" y2="90" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="430" y1="170" x2="560" y2="170" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="610" y1="130" x2="720" y2="130" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>

    {/* Route 1 nodes */}
    <g>
      <circle cx="90" cy="130" r="18" fill="#060a13" stroke="#f0b429" stroke-width="2" filter="url(#glow)"/>
      <text x="90" y="110" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">kafka</text>
      <text x="90" y="160" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">from</text>

      <rect x="240" y="115" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="265" y="134" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">choice</text>

      <rect x="380" y="75" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="405" y="94" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">bean</text>
      <text x="405" y="65" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="9" text-anchor="middle">premium</text>

      <rect x="380" y="155" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="405" y="174" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">bean</text>
      <text x="405" y="206" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="9" text-anchor="middle">standard</text>

      <rect x="560" y="75" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="585" y="94" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">log</text>

      <rect x="560" y="155" width="50" height="30" rx="4" fill="#060a13" stroke="#5cc8ff" stroke-width="1.8"/>
      <text x="585" y="174" fill="#5cc8ff" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">http</text>

      <circle cx="735" cy="130" r="14" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="735" y="160" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">to</text>
    </g>

    {/* Cross-route dashed cyan link */}
    <path
      d="M 585 185 C 585 290, 300 250, 230 340"
      stroke="#5cc8ff"
      stroke-width="2"
      stroke-dasharray="6 4"
      fill="none"
      marker-end="url(#arrow-cyan)"
      opacity="0.9"
    />
    <text x="430" y="255" fill="#5cc8ff" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">cross-route correlation</text>

    {/* Route 2 edges */}
    <line x1="100" y1="390" x2="230" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="280" y1="390" x2="380" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="430" y1="390" x2="560" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>
    <line x1="610" y1="390" x2="720" y2="390" stroke="#2a3242" stroke-width="2" marker-end="url(#arrow-amber)"/>

    {/* Route 2 nodes */}
    <g>
      <circle cx="230" cy="390" r="14" fill="#060a13" stroke="#5cc8ff" stroke-width="1.8"/>
      <text x="230" y="418" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">rest</text>
      <text x="230" y="370" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">from</text>

      <rect x="330" y="375" width="50" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="355" y="394" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">enrich</text>

      <rect x="480" y="375" width="80" height="30" rx="4" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="520" y="394" fill="#f0b429" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">transform</text>

      <circle cx="735" cy="390" r="14" fill="#060a13" stroke="#f0b429" stroke-width="1.6"/>
      <text x="735" y="418" fill="#6b7280" font-family="'JetBrains Mono', monospace" font-size="10" text-anchor="middle">to</text>
      <text x="735" y="370" fill="#9aa3b2" font-family="'JetBrains Mono', monospace" font-size="11" text-anchor="middle">kafka</text>
    </g>
  </svg>
</div>