<svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg" fill="none">
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="chartGradient" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#10b981;stop-opacity:0.8" />
      <stop offset="100%" style="stop-color:#10b981;stop-opacity:0.2" />
    </linearGradient>
    <linearGradient id="gaugeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ef4444;stop-opacity:1" />
      <stop offset="50%" style="stop-color:#f59e0b;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#10b981;stop-opacity:1" />
    </linearGradient>
  </defs>

  <!-- Background -->
  <rect width="800" height="400" fill="url(#bgGradient)"/>

  <!-- Decorative elements -->
  <circle cx="100" cy="80" r="40" fill="white" opacity="0.1"/>
  <circle cx="700" cy="320" r="60" fill="white" opacity="0.1"/>
  <circle cx="650" cy="100" r="30" fill="white" opacity="0.05"/>

  <!-- Main content container -->
  <rect x="50" y="50" width="700" height="300" rx="20" fill="white" opacity="0.95"/>

  <!-- Dashboard/Analyzer Icon -->
  <g transform="translate(80, 80)">
    <!-- Gauge/Speedometer -->
    <circle cx="80" cy="80" r="70" fill="none" stroke="#e5e7eb" stroke-width="8"/>
    <path d="M 80 10 A 70 70 0 1 1 10 80" fill="none" stroke="url(#gaugeGradient)" stroke-width="8" stroke-linecap="round"/>
    <circle cx="80" cy="80" r="12" fill="#3b82f6"/>
    <line x1="80" y1="80" x2="130" y2="50" stroke="#3b82f6" stroke-width="4" stroke-linecap="round"/>

    <!-- Score text -->
    <text x="80" y="120" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="#1f2937" text-anchor="middle">85</text>
    <text x="80" y="140" font-family="Arial, sans-serif" font-size="12" fill="#6b7280" text-anchor="middle">Score</text>
  </g>

  <!-- Bar chart -->
  <g transform="translate(280, 100)">
    <rect x="0" y="100" width="60" height="100" rx="4" fill="#3b82f6" opacity="0.8"/>
    <rect x="80" y="60" width="60" height="140" rx="4" fill="#10b981" opacity="0.8"/>
    <rect x="160" y="80" width="60" height="120" rx="4" fill="#f59e0b" opacity="0.8"/>
    <rect x="240" y="40" width="60" height="160" rx="4" fill="#8b5cf6" opacity="0.8"/>

    <!-- Labels -->
    <text x="30" y="220" font-family="Arial, sans-serif" font-size="11" fill="#6b7280" text-anchor="middle">Rate</text>
    <text x="110" y="220" font-family="Arial, sans-serif" font-size="11" fill="#6b7280" text-anchor="middle">Cookie</text>
    <text x="190" y="220" font-family="Arial, sans-serif" font-size="11" fill="#6b7280" text-anchor="middle">Tiers</text>
    <text x="270" y="220" font-family="Arial, sans-serif" font-size="11" fill="#6b7280" text-anchor="middle">Terms</text>
  </g>

  <!-- Trend line -->
  <g transform="translate(520, 100)">
    <polyline points="0,140 30,120 60,100 90,80 120,60 150,40" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
    <circle cx="0" cy="140" r="5" fill="#10b981"/>
    <circle cx="30" cy="120" r="5" fill="#10b981"/>
    <circle cx="60" cy="100" r="5" fill="#10b981"/>
    <circle cx="90" cy="80" r="5" fill="#10b981"/>
    <circle cx="120" cy="60" r="5" fill="#10b981"/>
    <circle cx="150" cy="40" r="5" fill="#10b981"/>

    <!-- Arrow -->
    <path d="M 140 45 L 150 40 L 145 50" fill="#10b981"/>
  </g>

  <!-- Title text -->
  <text x="400" y="310" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#1f2937" text-anchor="middle">Commission Structure Analyzer</text>
  <text x="400" y="335" font-family="Arial, sans-serif" font-size="14" fill="#6b7280" text-anchor="middle">Optimize your affiliate program with data-driven insights</text>

  <!-- Icons for features -->
  <g transform="translate(100, 260)">
    <!-- Checkmark icon -->
    <circle cx="0" cy="0" r="12" fill="#10b981" opacity="0.2"/>
    <path d="M -4 0 L -2 4 L 4 -4" fill="none" stroke="#10b981" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    <text x="20" y="5" font-family="Arial, sans-serif" font-size="12" fill="#374151">Industry Benchmarks</text>
  </g>

  <g transform="translate(300, 260)">
    <!-- Chart icon -->
    <circle cx="0" cy="0" r="12" fill="#3b82f6" opacity="0.2"/>
    <rect x="-6" y="-2" width="3" height="6" fill="#3b82f6"/>
    <rect x="-1" y="-5" width="3" height="9" fill="#3b82f6"/>
    <rect x="4" y="-3" width="3" height="7" fill="#3b82f6"/>
    <text x="20" y="5" font-family="Arial, sans-serif" font-size="12" fill="#374151">Competitive Analysis</text>
  </g>

  <g transform="translate(520, 260)">
    <!-- Lightbulb icon -->
    <circle cx="0" cy="0" r="12" fill="#f59e0b" opacity="0.2"/>
    <circle cx="0" cy="-2" r="4" fill="none" stroke="#f59e0b" stroke-width="1.5"/>
    <rect x="-2" y="2" width="4" height="3" rx="1" fill="#f59e0b"/>
    <text x="20" y="5" font-family="Arial, sans-serif" font-size="12" fill="#374151">Smart Recommendations</text>
  </g>

  <!-- Decorative elements -->
  <circle cx="720" cy="70" r="3" fill="#10b981"/>
  <circle cx="740" cy="90" r="4" fill="#3b82f6"/>
  <circle cx="760" cy="70" r="3" fill="#f59e0b"/>

  <circle cx="60" cy="320" r="3" fill="#8b5cf6"/>
  <circle cx="40" cy="340" r="4" fill="#ec4899"/>
  <circle cx="70" cy="340" r="3" fill="#10b981"/>
</svg>
