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

  <!-- Marketing spend -->
  <g transform="translate(60, 60)">
    <rect x="0" y="0" width="120" height="80" rx="10" fill="#ef4444"/>
    <text x="60" y="25" text-anchor="middle" font-family="system-ui" font-size="12" fill="white">Marketing</text>
    <text x="60" y="45" text-anchor="middle" font-family="system-ui" font-size="12" fill="white">Spend</text>
    <text x="60" y="68" text-anchor="middle" font-family="system-ui" font-size="22" fill="white" font-weight="bold">$10K</text>
  </g>

  <!-- Divide arrow -->
  <g transform="translate(200, 95)">
    <circle cx="0" cy="0" r="20" fill="#6b7280"/>
    <text x="0" y="5" text-anchor="middle" font-family="system-ui" font-size="20" fill="white" font-weight="bold">÷</text>
  </g>

  <!-- Customers acquired -->
  <g transform="translate(240, 60)">
    <rect x="0" y="0" width="120" height="80" rx="10" fill="#3b82f6"/>
    <text x="60" y="25" text-anchor="middle" font-family="system-ui" font-size="12" fill="white">Customers</text>
    <text x="60" y="45" text-anchor="middle" font-family="system-ui" font-size="12" fill="white">Acquired</text>
    <text x="60" y="68" text-anchor="middle" font-family="system-ui" font-size="22" fill="white" font-weight="bold">200</text>
  </g>

  <!-- Equals arrow -->
  <g transform="translate(175, 180)">
    <line x1="0" y1="0" x2="50" y2="0" stroke="#9ca3af" stroke-width="3" marker-end="url(#arrowhead)"/>
  </g>
  <defs>
    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
      <polygon points="0 0, 10 3, 0 6" fill="#9ca3af"/>
    </marker>
  </defs>

  <!-- CAC result -->
  <g transform="translate(80, 220)">
    <rect x="0" y="0" width="240" height="100" rx="12" fill="#10b981"/>
    <text x="120" y="35" text-anchor="middle" font-family="system-ui" font-size="16" fill="white">Customer Acquisition Cost</text>
    <text x="120" y="70" text-anchor="middle" font-family="system-ui" font-size="36" fill="white" font-weight="bold">$50</text>
  </g>

  <!-- Channel breakdown -->
  <g transform="translate(60, 340)">
    <rect x="0" y="0" width="80" height="35" rx="6" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="40" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">Ads</text>
    <text x="40" y="27" text-anchor="middle" font-family="system-ui" font-size="12" fill="#3b82f6" font-weight="600">$30</text>
  </g>

  <g transform="translate(160, 340)">
    <rect x="0" y="0" width="80" height="35" rx="6" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="40" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">SEO</text>
    <text x="40" y="27" text-anchor="middle" font-family="system-ui" font-size="12" fill="#3b82f6" font-weight="600">$15</text>
  </g>

  <g transform="translate(260, 340)">
    <rect x="0" y="0" width="80" height="35" rx="6" fill="white" stroke="#d1d5db" stroke-width="2"/>
    <text x="40" y="13" text-anchor="middle" font-family="system-ui" font-size="9" fill="#6b7280">Social</text>
    <text x="40" y="27" text-anchor="middle" font-family="system-ui" font-size="12" fill="#3b82f6" font-weight="600">$20</text>
  </g>

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