<svg width="800" height="320" viewBox="0 0 800 320" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- Dubber Integration Flow Diagram -->
  <defs>
    <linearGradient id="flowBg" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fbfbfe"/>
      <stop offset="1" stop-color="#f2f3ff"/>
    </linearGradient>
    <linearGradient id="flowA" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#818cf8"/>
      <stop offset="1" stop-color="#4f46e5"/>
    </linearGradient>
    <linearGradient id="flowB" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#0891b2"/>
    </linearGradient>
    <linearGradient id="flowC" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#22d3ee"/>
      <stop offset="1" stop-color="#0891b2"/>
    </linearGradient>
    <linearGradient id="flowArrow" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#4f46e5"/>
      <stop offset="1" stop-color="#06b6d4"/>
    </linearGradient>
    <filter id="flowShadow" x="-20%" y="-20%" width="140%" height="160%">
      <feDropShadow dx="0" dy="6" stdDeviation="8" flood-color="#4f46e5" flood-opacity="0.12"/>
    </filter>
    <marker id="flowHead" markerWidth="9" markerHeight="9" refX="6" refY="3" orient="auto">
      <polygon points="0 0, 7 3, 0 6" fill="#06b6d4"/>
    </marker>
  </defs>

  <!-- Background panel -->
  <rect width="800" height="320" fill="url(#flowBg)"/>

  <!-- Title -->
  <text x="400" y="42" font-family="Inter, sans-serif" font-size="19" font-weight="700" fill="#1f2937" text-anchor="middle">Complete Integration Flow</text>
  <text x="400" y="65" font-family="Inter, sans-serif" font-size="13" fill="#6b7280" text-anchor="middle">Secure, scalable, and production-ready</text>

  <!-- Connectors -->
  <path d="M 246 155 L 292 155" stroke="url(#flowArrow)" stroke-width="2.5" stroke-linecap="round" marker-end="url(#flowHead)"/>
  <text x="269" y="146" font-family="Inter, sans-serif" font-size="11" font-weight="500" fill="#6b7280" text-anchor="middle">OAuth</text>
  <path d="M 506 155 L 552 155" stroke="url(#flowArrow)" stroke-width="2.5" stroke-linecap="round" marker-end="url(#flowHead)"/>
  <text x="529" y="146" font-family="Inter, sans-serif" font-size="11" font-weight="500" fill="#6b7280" text-anchor="middle">Secure</text>

  <!-- Card 1: Dubber API -->
  <g filter="url(#flowShadow)">
    <rect x="40" y="95" width="200" height="120" rx="16" fill="#ffffff" stroke="#e0e7ff" stroke-width="1.5"/>
  </g>
  <circle cx="140" cy="133" r="22" fill="url(#flowA)"/>
  <rect x="131" y="128" width="3" height="10" rx="1.5" fill="#fff"/>
  <rect x="136" y="123" width="3" height="20" rx="1.5" fill="#fff"/>
  <rect x="141" y="126" width="3" height="14" rx="1.5" fill="#fff"/>
  <rect x="146" y="122" width="3" height="22" rx="1.5" fill="#fff"/>
  <text x="140" y="179" font-family="Inter, sans-serif" font-size="15" font-weight="600" fill="#1f2937" text-anchor="middle">Dubber API</text>
  <text x="140" y="199" font-family="Inter, sans-serif" font-size="12" fill="#6b7280" text-anchor="middle">Call recordings</text>

  <!-- Card 2: Your Integration -->
  <g filter="url(#flowShadow)">
    <rect x="300" y="95" width="200" height="120" rx="16" fill="#ffffff" stroke="#e0e7ff" stroke-width="1.5"/>
  </g>
  <circle cx="400" cy="133" r="22" fill="url(#flowB)"/>
  <path d="M404 121 l-13 16 h8 l-4 12 14 -17 h-8 z" fill="#fff"/>
  <text x="400" y="179" font-family="Inter, sans-serif" font-size="15" font-weight="600" fill="#1f2937" text-anchor="middle">Your Integration</text>
  <text x="400" y="199" font-family="Inter, sans-serif" font-size="12" fill="#6b7280" text-anchor="middle">Retrieval &#183; Webhooks</text>

  <!-- Card 3: Client Storage -->
  <g filter="url(#flowShadow)">
    <rect x="560" y="95" width="200" height="120" rx="16" fill="#ffffff" stroke="#e0e7ff" stroke-width="1.5"/>
  </g>
  <circle cx="660" cy="133" r="22" fill="url(#flowC)"/>
  <ellipse cx="660" cy="124" rx="13" ry="4.5" fill="#fff"/>
  <path d="M647 124 v16 a13 4.5 0 0 0 26 0 v-16" fill="#fff"/>
  <ellipse cx="660" cy="132" rx="13" ry="4.5" fill="#0891b2" opacity="0.35"/>
  <text x="660" y="179" font-family="Inter, sans-serif" font-size="15" font-weight="600" fill="#1f2937" text-anchor="middle">Client Storage</text>
  <text x="660" y="199" font-family="Inter, sans-serif" font-size="12" fill="#6b7280" text-anchor="middle">S3 / R2 &#183; Encrypted</text>

  <!-- Supporting pills -->
  <path d="M 400 215 L 400 244" stroke="#c7d2fe" stroke-width="2" stroke-dasharray="3 4" stroke-linecap="round"/>
  <rect x="283" y="246" width="112" height="42" rx="10" fill="#ffffff" stroke="#e5e7eb" stroke-width="1"/>
  <text x="339" y="264" font-family="Inter, sans-serif" font-size="11.5" font-weight="500" fill="#4b5563" text-anchor="middle">Monitoring</text>
  <text x="339" y="279" font-family="Inter, sans-serif" font-size="11.5" font-weight="500" fill="#4b5563" text-anchor="middle">&amp; Alerts</text>
  <rect x="405" y="246" width="112" height="42" rx="10" fill="#ffffff" stroke="#e5e7eb" stroke-width="1"/>
  <text x="461" y="264" font-family="Inter, sans-serif" font-size="11.5" font-weight="500" fill="#4b5563" text-anchor="middle">Compliance</text>
  <text x="461" y="279" font-family="Inter, sans-serif" font-size="11.5" font-weight="500" fill="#4b5563" text-anchor="middle">Logging</text>
</svg>
