<svg width="1200" height="600" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="redGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#ef4444;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#dc2626;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="greenGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="1200" height="600" fill="#ffffff"/>

  <!-- Title -->
  <text x="600" y="50" font-family="Arial, sans-serif" font-size="32" font-weight="bold" text-anchor="middle" fill="#111827">
    Monthly Moderation Cost Comparison
  </text>

  <!-- Subtitle -->
  <text x="600" y="85" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" fill="#6b7280">
    Manual vs. AI-Powered Comment Moderation
  </text>

  <!-- Grid lines -->
  <line x1="150" y1="500" x2="1050" y2="500" stroke="#e5e7eb" stroke-width="2"/>
  <line x1="150" y1="400" x2="1050" y2="400" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,5"/>
  <line x1="150" y1="300" x2="1050" y2="300" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,5"/>
  <line x1="150" y1="200" x2="1050" y2="200" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,5"/>
  <line x1="150" y1="100" x2="1050" y2="100" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="5,5"/>

  <!-- Y-axis labels -->
  <text x="130" y="505" font-family="Arial, sans-serif" font-size="16" text-anchor="end" fill="#6b7280">$0</text>
  <text x="130" y="405" font-family="Arial, sans-serif" font-size="16" text-anchor="end" fill="#6b7280">$400</text>
  <text x="130" y="305" font-family="Arial, sans-serif" font-size="16" text-anchor="end" fill="#6b7280">$800</text>
  <text x="130" y="205" font-family="Arial, sans-serif" font-size="16" text-anchor="end" fill="#6b7280">$1,200</text>
  <text x="130" y="105" font-family="Arial, sans-serif" font-size="16" text-anchor="end" fill="#6b7280">$1,600</text>

  <!-- Manual Moderation Bar -->
  <rect x="250" y="140" width="280" height="360" fill="url(#redGradient)" rx="8"/>
  <text x="390" y="120" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#ef4444">
    Manual Moderation
  </text>
  <text x="390" y="320" font-family="Arial, sans-serif" font-size="48" font-weight="bold" text-anchor="middle" fill="#ffffff">
    $1,600
  </text>
  <text x="390" y="355" font-family="Arial, sans-serif" font-size="18" text-anchor="middle" fill="#ffffff">
    per month
  </text>
  <text x="390" y="530" font-family="Arial, sans-serif" font-size="16" text-anchor="middle" fill="#4b5563">
    15-25 hrs/week labor
  </text>

  <!-- AI Moderation Bar -->
  <rect x="670" y="455" width="280" height="45" fill="url(#greenGradient)" rx="8"/>
  <text x="810" y="435" font-family="Arial, sans-serif" font-size="20" font-weight="bold" text-anchor="middle" fill="#10b981">
    AI Moderation
  </text>
  <text x="810" y="485" font-family="Arial, sans-serif" font-size="32" font-weight="bold" text-anchor="middle" fill="#ffffff">
    $150
  </text>
  <text x="810" y="530" font-family="Arial, sans-serif" font-size="16" text-anchor="middle" fill="#4b5563">
    2-3 hrs/week oversight
  </text>

  <!-- Savings Badge -->
  <circle cx="1000" cy="250" r="80" fill="#10b981"/>
  <text x="1000" y="240" font-family="Arial, sans-serif" font-size="32" font-weight="bold" text-anchor="middle" fill="#ffffff">
    90%
  </text>
  <text x="1000" y="270" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#ffffff">
    SAVINGS
  </text>

  <!-- Arrow showing savings -->
  <path d="M 530 200 L 670 200" stroke="#10b981" stroke-width="3" fill="none" marker-end="url(#arrowhead)"/>
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#10b981"/>
    </marker>
  </defs>
  <text x="600" y="185" font-family="Arial, sans-serif" font-size="16" font-weight="bold" text-anchor="middle" fill="#10b981">
    Save $1,450/month
  </text>
</svg>
