<svg width="400" height="400" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
  <rect width="400" height="400" fill="#f3f4f6"/>

  <!-- Discount badge -->
  <g transform="translate(140, 60)">
    <circle cx="60" cy="60" r="55" fill="#ef4444"/>
    <text x="60" y="55" text-anchor="middle" font-family="system-ui" font-size="36" fill="white" font-weight="bold">20%</text>
    <text x="60" y="75" text-anchor="middle" font-family="system-ui" font-size="14" fill="white">OFF</text>
  </g>

  <!-- Before/After comparison -->
  <g transform="translate(60, 160)">
    <rect x="0" y="0" width="130" height="100" rx="10" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="65" y="25" text-anchor="middle" font-family="system-ui" font-size="12" fill="#6b7280" font-weight="600">Regular Price</text>

    <g transform="translate(15, 40)">
      <text x="0" y="0" font-family="system-ui" font-size="10" fill="#6b7280">Price</text>
      <text x="0" y="18" font-family="system-ui" font-size="16" fill="#3b82f6" font-weight="bold">$100</text>
    </g>

    <g transform="translate(65, 40)">
      <text x="0" y="0" font-family="system-ui" font-size="10" fill="#6b7280">Revenue</text>
      <text x="0" y="18" font-family="system-ui" font-size="16" fill="#10b981" font-weight="bold">$50K</text>
    </g>

    <text x="65" y="80" text-anchor="middle" font-family="system-ui" font-size="10" fill="#6b7280">500 units sold</text>
  </g>

  <g transform="translate(210, 160)">
    <rect x="0" y="0" width="130" height="100" rx="10" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="65" y="25" text-anchor="middle" font-family="system-ui" font-size="12" fill="#ef4444" font-weight="600">With 20% Discount</text>

    <g transform="translate(15, 40)">
      <text x="0" y="0" font-family="system-ui" font-size="10" fill="#6b7280">Price</text>
      <text x="0" y="18" font-family="system-ui" font-size="16" fill="#3b82f6" font-weight="bold">$80</text>
    </g>

    <g transform="translate(65, 40)">
      <text x="0" y="0" font-family="system-ui" font-size="10" fill="#6b7280">Revenue</text>
      <text x="0" y="18" font-family="system-ui" font-size="16" fill="#10b981" font-weight="bold">$56K</text>
    </g>

    <text x="65" y="80" text-anchor="middle" font-family="system-ui" font-size="10" fill="#6b7280">700 units sold</text>
  </g>

  <!-- Net impact -->
  <g transform="translate(100, 280)">
    <rect x="0" y="0" width="200" height="70" rx="12" fill="#10b981"/>
    <text x="100" y="28" text-anchor="middle" font-family="system-ui" font-size="14" fill="white">Revenue Impact</text>
    <text x="100" y="54" text-anchor="middle" font-family="system-ui" font-size="28" fill="white" font-weight="bold">+$6,000</text>
  </g>

  <text x="200" y="385" text-anchor="middle" font-family="system-ui" font-size="16" font-weight="600" fill="#1f2937">Discount Impact Calculator</text>
</svg>
