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

  <!-- Calendar with payment date -->
  <g transform="translate(40, 50)">
    <rect x="0" y="0" width="160" height="180" rx="12" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <!-- Calendar header -->
    <rect x="0" y="0" width="160" height="40" rx="12" fill="#3b82f6"/>
    <text x="80" y="26" text-anchor="middle" font-family="system-ui" font-size="16" fill="white" font-weight="600">MARCH 2026</text>

    <!-- Calendar grid -->
    <text x="20" y="65" font-family="system-ui" font-size="10" fill="#6b7280" font-weight="500">S M T W T F S</text>

    <!-- Days -->
    <g transform="translate(15, 75)">
      <text x="5" y="20" font-family="system-ui" font-size="12" fill="#9ca3af">1</text>
      <text x="25" y="20" font-family="system-ui" font-size="12" fill="#9ca3af">2</text>
      <text x="45" y="20" font-family="system-ui" font-size="12" fill="#9ca3af">3</text>
      <text x="65" y="20" font-family="system-ui" font-size="12" fill="#9ca3af">4</text>
      <text x="85" y="20" font-family="system-ui" font-size="12" fill="#9ca3af">5</text>
      <text x="105" y="20" font-family="system-ui" font-size="12" fill="#9ca3af">6</text>
      <text x="125" y="20" font-family="system-ui" font-size="12" fill="#9ca3af">7</text>

      <text x="5" y="40" font-family="system-ui" font-size="12" fill="#1f2937">8</text>
      <text x="25" y="40" font-family="system-ui" font-size="12" fill="#1f2937">9</text>
      <text x="45" y="40" font-family="system-ui" font-size="12" fill="#1f2937">10</text>
      <text x="65" y="40" font-family="system-ui" font-size="12" fill="#1f2937">11</text>
      <text x="85" y="40" font-family="system-ui" font-size="12" fill="#1f2937">12</text>
      <text x="105" y="40" font-family="system-ui" font-size="12" fill="#1f2937">13</text>
      <text x="125" y="40" font-family="system-ui" font-size="12" fill="#1f2937">14</text>

      <!-- Payment date highlighted -->
      <circle cx="68" cy="56" r="12" fill="#10b981"/>
      <text x="65" y="60" font-family="system-ui" font-size="12" fill="white" font-weight="600">15</text>

      <text x="85" y="60" font-family="system-ui" font-size="12" fill="#1f2937">16</text>
      <text x="105" y="60" font-family="system-ui" font-size="12" fill="#1f2937">17</text>
      <text x="125" y="60" font-family="system-ui" font-size="12" fill="#1f2937">18</text>
    </g>

    <!-- Payment icon -->
    <g transform="translate(60, 145)">
      <circle cx="20" cy="20" r="18" fill="#10b981"/>
      <text x="20" y="27" text-anchor="middle" font-size="20" fill="white">💰</text>
    </g>
  </g>

  <!-- Progress bar with milestones -->
  <g transform="translate(230, 60)">
    <rect x="0" y="0" width="140" height="160" rx="12" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <text x="70" y="25" text-anchor="middle" font-family="system-ui" font-size="14" fill="#1f2937" font-weight="600">Progress</text>

    <!-- Progress bar background -->
    <rect x="20" y="40" width="100" height="20" rx="10" fill="#e5e7eb"/>
    <!-- Progress bar fill -->
    <rect x="20" y="40" width="65" height="20" rx="10" fill="#10b981"/>

    <text x="70" y="76" text-anchor="middle" font-family="system-ui" font-size="12" fill="#059669" font-weight="600">65%</text>

    <!-- Milestones -->
    <g transform="translate(25, 95)">
      <circle cx="0" cy="0" r="5" fill="#10b981"/>
      <text x="12" y="5" font-family="system-ui" font-size="11" fill="#1f2937">$0</text>

      <circle cx="0" cy="20" r="5" fill="#10b981"/>
      <text x="12" y="25" font-family="system-ui" font-size="11" fill="#1f2937">$25 (25%)</text>

      <circle cx="0" cy="40" r="5" fill="#10b981"/>
      <text x="12" y="45" font-family="system-ui" font-size="11" fill="#1f2937">$50 (50%)</text>

      <circle cx="0" cy="60" r="5" fill="#3b82f6"/>
      <text x="12" y="65" font-family="system-ui" font-size="11" fill="#3b82f6" font-weight="600">$65 (You)</text>
    </g>
  </g>

  <!-- Timeline chart -->
  <g transform="translate(40, 260)">
    <rect x="0" y="0" width="320" height="110" rx="12" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <text x="160" y="20" text-anchor="middle" font-family="system-ui" font-size="12" fill="#1f2937" font-weight="600">Earnings Timeline</text>

    <!-- Chart axes -->
    <line x1="20" y1="85" x2="300" y2="85" stroke="#9ca3af" stroke-width="1"/>
    <line x1="20" y1="35" x2="20" y2="85" stroke="#9ca3af" stroke-width="1"/>

    <!-- Threshold line -->
    <line x1="20" y1="45" x2="300" y2="45" stroke="#ef4444" stroke-width="1" stroke-dasharray="4,2"/>
    <text x="305" y="48" font-family="system-ui" font-size="9" fill="#ef4444">$100</text>

    <!-- Earnings curve -->
    <polyline points="20,85 80,75 140,65 200,55 260,48 300,42" fill="none" stroke="#10b981" stroke-width="2.5" stroke-linecap="round"/>

    <!-- Data points -->
    <circle cx="20" cy="85" r="3" fill="#3b82f6"/>
    <circle cx="80" cy="75" r="3" fill="#10b981"/>
    <circle cx="140" cy="65" r="3" fill="#10b981"/>
    <circle cx="200" cy="55" r="3" fill="#10b981"/>
    <circle cx="260" cy="48" r="3" fill="#10b981"/>
    <circle cx="300" cy="42" r="4" fill="#10b981" stroke="#059669" stroke-width="2"/>

    <!-- X-axis labels -->
    <text x="20" y="98" text-anchor="middle" font-family="system-ui" font-size="8" fill="#6b7280">Day 0</text>
    <text x="160" y="98" text-anchor="middle" font-family="system-ui" font-size="8" fill="#6b7280">Day 15</text>
    <text x="300" y="98" text-anchor="middle" font-family="system-ui" font-size="8" fill="#6b7280">Day 30</text>
  </g>

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