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

  <!-- Cookie Icon with Timer -->
  <g transform="translate(50, 60)">
    <!-- Cookie Circle -->
    <circle cx="60" cy="60" r="50" fill="#d97706" stroke="#92400e" stroke-width="3"/>

    <!-- Cookie Bite -->
    <circle cx="85" cy="35" r="20" fill="#f3f4f6"/>

    <!-- Chocolate Chips -->
    <circle cx="50" cy="50" r="6" fill="#78350f"/>
    <circle cx="70" cy="60" r="5" fill="#78350f"/>
    <circle cx="55" cy="75" r="5" fill="#78350f"/>
    <circle cx="40" cy="65" r="4" fill="#78350f"/>
    <circle cx="65" cy="40" r="4" fill="#78350f"/>

    <!-- Clock/Timer overlay -->
    <g transform="translate(60, 60)">
      <circle cx="0" cy="0" r="18" fill="white" fill-opacity="0.9" stroke="#3b82f6" stroke-width="2"/>
      <line x1="0" y1="0" x2="0" y2="-10" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
      <line x1="0" y1="0" x2="7" y2="0" stroke="#3b82f6" stroke-width="2" stroke-linecap="round"/>
    </g>

    <!-- Duration label -->
    <text x="60" y="135" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="14" font-weight="600" fill="#1f2937">30 Days</text>
  </g>

  <!-- Timeline Visualization -->
  <g transform="translate(50, 220)">
    <!-- Timeline bar -->
    <rect x="0" y="0" width="300" height="12" rx="6" fill="#e5e7eb"/>

    <!-- Progress segments -->
    <!-- Segment 1: Active (Green) -->
    <rect x="0" y="0" width="150" height="12" rx="6" fill="#10b981"/>

    <!-- Segment 2: Expiring (Yellow) -->
    <rect x="150" y="0" width="75" height="12" rx="6" fill="#fbbf24"/>

    <!-- Segment 3: Expired (Red) -->
    <rect x="225" y="0" width="75" height="12" rx="6" fill="#ef4444"/>

    <!-- Timeline markers -->
    <circle cx="0" cy="6" r="5" fill="#059669" stroke="white" stroke-width="2"/>
    <circle cx="150" cy="6" r="5" fill="#d97706" stroke="white" stroke-width="2"/>
    <circle cx="225" cy="6" r="5" fill="#dc2626" stroke="white" stroke-width="2"/>
    <circle cx="300" cy="6" r="5" fill="#7f1d1d" stroke="white" stroke-width="2"/>

    <!-- Labels -->
    <text x="0" y="35" text-anchor="start" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#059669" font-weight="600">Click</text>
    <text x="150" y="35" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#d97706" font-weight="600">Day 30</text>
    <text x="300" y="35" text-anchor="end" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#dc2626" font-weight="600">Purchase</text>
  </g>

  <!-- Bar Chart Comparison -->
  <g transform="translate(220, 60)">
    <!-- Chart bars -->
    <!-- Bar 1: Short duration -->
    <rect x="0" y="80" width="35" height="40" rx="4" fill="#ef4444"/>
    <text x="17.5" y="75" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#6b7280">7d</text>
    <text x="17.5" y="133" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#dc2626">60%</text>

    <!-- Bar 2: Medium duration -->
    <rect x="45" y="50" width="35" height="70" rx="4" fill="#fbbf24"/>
    <text x="62.5" y="45" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#6b7280">30d</text>
    <text x="62.5" y="133" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#d97706">85%</text>

    <!-- Bar 3: Long duration -->
    <rect x="90" y="20" width="35" height="100" rx="4" fill="#10b981"/>
    <text x="107.5" y="15" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="10" fill="#6b7280">90d</text>
    <text x="107.5" y="133" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#059669">100%</text>

    <!-- Baseline -->
    <line x1="-5" y1="120" x2="130" y2="120" stroke="#9ca3af" stroke-width="1.5"/>
  </g>

  <!-- Conversion Icons -->
  <g transform="translate(50, 285)">
    <!-- Captured conversions (checkmarks) -->
    <circle cx="15" cy="15" r="12" fill="#10b981"/>
    <path d="M 9 15 L 13 19 L 21 11" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

    <circle cx="45" cy="15" r="12" fill="#10b981"/>
    <path d="M 39 15 L 43 19 L 51 11" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

    <circle cx="75" cy="15" r="12" fill="#10b981"/>
    <path d="M 69 15 L 73 19 L 81 11" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

    <!-- Lost conversions (X marks) -->
    <circle cx="110" cy="15" r="12" fill="#ef4444"/>
    <path d="M 105 10 L 115 20 M 115 10 L 105 20" stroke="white" stroke-width="2" stroke-linecap="round"/>

    <circle cx="140" cy="15" r="12" fill="#ef4444"/>
    <path d="M 135 10 L 145 20 M 145 10 L 135 20" stroke="white" stroke-width="2" stroke-linecap="round"/>

    <!-- Labels -->
    <text x="45" y="45" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#059669" font-weight="600">Captured</text>
    <text x="125" y="45" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#dc2626" font-weight="600">Lost</text>
  </g>

  <!-- Calculator Icon -->
  <g transform="translate(240, 280)">
    <rect x="0" y="0" width="110" height="75" rx="8" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <!-- Display screen -->
    <rect x="8" y="8" width="94" height="25" rx="4" fill="#1f2937"/>
    <text x="55" y="25" text-anchor="middle" font-family="monospace" font-size="14" fill="#10b981" font-weight="600">+42%</text>

    <!-- Buttons -->
    <rect x="10" y="40" width="20" height="15" rx="3" fill="#3b82f6"/>
    <rect x="35" y="40" width="20" height="15" rx="3" fill="#3b82f6"/>
    <rect x="60" y="40" width="20" height="15" rx="3" fill="#3b82f6"/>
    <rect x="85" y="40" width="12" height="15" rx="3" fill="#6366f1"/>

    <rect x="10" y="58" width="20" height="12" rx="3" fill="#e5e7eb"/>
    <rect x="35" y="58" width="20" height="12" rx="3" fill="#e5e7eb"/>
    <rect x="60" y="58" width="20" height="12" rx="3" fill="#e5e7eb"/>
    <rect x="85" y="58" width="12" height="12" rx="3" fill="#10b981"/>
  </g>

  <!-- Title -->
  <text x="200" y="385" text-anchor="middle" font-family="system-ui, -apple-system, sans-serif" font-size="16" font-weight="600" fill="#1f2937">Cookie Duration Impact</text>
</svg>
