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

  <!-- Price tags -->
  <g transform="translate(60, 80)">
    <rect x="0" y="0" width="100" height="70" rx="8" fill="#ef4444" opacity="0.7"/>
    <text x="50" y="30" text-anchor="middle" font-family="system-ui" font-size="12" fill="white">Old Price</text>
    <text x="50" y="55" text-anchor="middle" font-family="system-ui" font-size="24" fill="white" font-weight="bold">$99</text>
  </g>

  <g transform="translate(240, 80)">
    <rect x="0" y="0" width="100" height="70" rx="8" fill="#10b981"/>
    <text x="50" y="30" text-anchor="middle" font-family="system-ui" font-size="12" fill="white">New Price</text>
    <text x="50" y="55" text-anchor="middle" font-family="system-ui" font-size="24" fill="white" font-weight="bold">$129</text>
  </g>

  <!-- Arrow -->
  <g transform="translate(170, 110)">
    <line x1="0" y1="0" x2="60" y2="0" stroke="#3b82f6" stroke-width="3" marker-end="url(#arrow2)"/>
    <text x="30" y="-10" text-anchor="middle" font-family="system-ui" font-size="14" fill="#3b82f6" font-weight="600">+30%</text>
  </g>
  <defs>
    <marker id="arrow2" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#3b82f6"/>
    </marker>
  </defs>

  <!-- Impact boxes -->
  <g transform="translate(50, 180)">
    <rect x="0" y="0" width="300" height="120" rx="10" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <g transform="translate(20, 25)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Revenue Impact</text>
      <text x="0" y="25" font-family="system-ui" font-size="20" fill="#10b981" font-weight="bold">+$45,000</text>
    </g>

    <g transform="translate(160, 25)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Volume Change</text>
      <text x="0" y="25" font-family="system-ui" font-size="20" fill="#ef4444" font-weight="bold">-15%</text>
    </g>

    <g transform="translate(20, 70)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Net Profit Impact</text>
      <text x="0" y="25" font-family="system-ui" font-size="20" fill="#3b82f6" font-weight="bold">+$32,000</text>
    </g>

    <g transform="translate(160, 70)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Elasticity</text>
      <text x="0" y="25" font-family="system-ui" font-size="20" fill="#6b7280" font-weight="bold">-0.5</text>
    </g>
  </g>

  <!-- Chart -->
  <g transform="translate(80, 320)">
    <rect x="0" y="0" width="30" height="40" rx="4" fill="#ef4444"/>
    <rect x="40" y="0" width="30" height="55" rx="4" fill="#10b981"/>
    <rect x="80" y="0" width="30" height="48" rx="4" fill="#3b82f6"/>
    <rect x="120" y="0" width="30" height="50" rx="4" fill="#f59e0b"/>
    <rect x="160" y="0" width="30" height="60" rx="4" fill="#8b5cf6"/>
    <rect x="200" y="0" width="30" height="52" rx="4" fill="#06b6d4"/>
  </g>

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