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

  <!-- Customer icon -->
  <g transform="translate(80, 60)">
    <circle cx="60" cy="40" r="30" fill="#3b82f6"/>
    <path d="M 20 100 Q 60 80 100 100" fill="#3b82f6"/>
  </g>

  <!-- Timeline -->
  <g transform="translate(220, 70)">
    <line x1="0" y1="40" x2="120" y2="40" stroke="#9ca3af" stroke-width="2"/>
    <circle cx="0" cy="40" r="6" fill="#10b981"/>
    <circle cx="40" cy="40" r="6" fill="#10b981"/>
    <circle cx="80" cy="40" r="6" fill="#10b981"/>
    <circle cx="120" cy="40" r="6" fill="#10b981"/>
    <text x="60" y="65" text-anchor="middle" font-family="system-ui" font-size="11" fill="#6b7280">Lifetime</text>
  </g>

  <!-- Value boxes -->
  <g transform="translate(50, 160)">
    <rect x="0" y="0" width="300" height="140" rx="12" 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">Avg Purchase Value</text>
      <text x="0" y="25" font-family="system-ui" font-size="18" fill="#3b82f6" font-weight="bold">$100</text>
    </g>

    <g transform="translate(160, 25)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Purchase Freq.</text>
      <text x="0" y="25" font-family="system-ui" font-size="18" fill="#3b82f6" font-weight="bold">12/year</text>
    </g>

    <g transform="translate(20, 75)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Customer Lifespan</text>
      <text x="0" y="25" font-family="system-ui" font-size="18" fill="#3b82f6" font-weight="bold">3 years</text>
    </g>

    <g transform="translate(160, 75)">
      <text x="0" y="0" font-family="system-ui" font-size="12" fill="#6b7280">Profit Margin</text>
      <text x="0" y="25" font-family="system-ui" font-size="18" fill="#3b82f6" font-weight="bold">30%</text>
    </g>
  </g>

  <!-- CLV result -->
  <g transform="translate(100, 320)">
    <rect x="0" y="0" width="200" height="50" rx="10" fill="#10b981"/>
    <text x="100" y="22" text-anchor="middle" font-family="system-ui" font-size="12" fill="white">Customer Lifetime Value</text>
    <text x="100" y="40" text-anchor="middle" font-family="system-ui" font-size="20" fill="white" font-weight="bold">$1,080</text>
  </g>

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