<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#667eea;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#764ba2;stop-opacity:0.1" />
    </linearGradient>
    <linearGradient id="primaryGradient" 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="textGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#8b5cf6;stop-opacity:1" />
    </linearGradient>
  </defs>

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

  <!-- Decorative circles -->
  <circle cx="100" cy="100" r="60" fill="#667eea" opacity="0.1"/>
  <circle cx="700" cy="500" r="80" fill="#764ba2" opacity="0.1"/>
  <circle cx="650" cy="100" r="40" fill="#3b82f6" opacity="0.15"/>

  <!-- Main document illustration -->
  <g transform="translate(150, 100)">
    <!-- Document background -->
    <rect x="0" y="0" width="500" height="400" rx="12" fill="white" stroke="#e5e7eb" stroke-width="2"/>

    <!-- Document header with title -->
    <rect x="30" y="30" width="200" height="24" rx="4" fill="url(#textGradient)"/>
    <rect x="30" y="70" width="440" height="12" rx="3" fill="#d1d5db"/>
    <rect x="30" y="95" width="380" height="12" rx="3" fill="#d1d5db"/>

    <!-- Text lines with varying lengths -->
    <rect x="30" y="130" width="440" height="10" rx="2" fill="#e5e7eb"/>
    <rect x="30" y="150" width="420" height="10" rx="2" fill="#e5e7eb"/>
    <rect x="30" y="170" width="400" height="10" rx="2" fill="#e5e7eb"/>
    <rect x="30" y="190" width="435" height="10" rx="2" fill="#e5e7eb"/>

    <!-- Paragraph break -->
    <rect x="30" y="220" width="430" height="10" rx="2" fill="#e5e7eb"/>
    <rect x="30" y="240" width="410" height="10" rx="2" fill="#e5e7eb"/>
    <rect x="30" y="260" width="390" height="10" rx="2" fill="#e5e7eb"/>

    <!-- Highlighted text (showing analysis) -->
    <rect x="30" y="290" width="300" height="10" rx="2" fill="#fbbf24" opacity="0.5"/>
    <rect x="30" y="310" width="360" height="10" rx="2" fill="#e5e7eb"/>
    <rect x="30" y="330" width="340" height="10" rx="2" fill="#e5e7eb"/>
  </g>

  <!-- Stats panel (floating card) -->
  <g transform="translate(50, 250)">
    <!-- Card background with shadow -->
    <rect x="3" y="3" width="180" height="220" rx="8" fill="#000" opacity="0.1"/>
    <rect x="0" y="0" width="180" height="220" rx="8" fill="white" stroke="#e5e7eb" stroke-width="2"/>

    <!-- Card title -->
    <text x="15" y="30" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#111827">Statistics</text>

    <!-- Stats items -->
    <!-- Words -->
    <text x="15" y="60" font-family="Arial, sans-serif" font-size="11" fill="#6b7280">Words</text>
    <text x="165" y="60" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="url(#primaryGradient)" text-anchor="end">1,247</text>

    <!-- Characters -->
    <text x="15" y="85" font-family="Arial, sans-serif" font-size="11" fill="#6b7280">Characters</text>
    <text x="165" y="85" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="url(#primaryGradient)" text-anchor="end">6,834</text>

    <!-- Sentences -->
    <text x="15" y="110" font-family="Arial, sans-serif" font-size="11" fill="#6b7280">Sentences</text>
    <text x="165" y="110" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="url(#primaryGradient)" text-anchor="end">53</text>

    <!-- Reading time -->
    <text x="15" y="135" font-family="Arial, sans-serif" font-size="11" fill="#6b7280">Reading Time</text>
    <text x="165" y="135" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="url(#primaryGradient)" text-anchor="end">6 min</text>

    <!-- Divider -->
    <line x1="15" y1="150" x2="165" y2="150" stroke="#e5e7eb" stroke-width="1"/>

    <!-- Readability score -->
    <text x="15" y="175" font-family="Arial, sans-serif" font-size="11" fill="#6b7280">Readability</text>
    <text x="165" y="175" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#10b981" text-anchor="end">Good</text>

    <!-- Progress bar -->
    <rect x="15" y="185" width="150" height="6" rx="3" fill="#e5e7eb"/>
    <rect x="15" y="185" width="105" height="6" rx="3" fill="#10b981"/>
  </g>

  <!-- Readability gauge (circular) -->
  <g transform="translate(600, 150)">
    <!-- Gauge background -->
    <circle cx="0" cy="0" r="80" fill="white" stroke="#e5e7eb" stroke-width="3"/>

    <!-- Gauge arc background -->
    <path d="M -56,-56 A 80,80 0 1,1 56,-56" fill="none" stroke="#e5e7eb" stroke-width="12" stroke-linecap="round"/>

    <!-- Gauge arc fill (70% = good readability) -->
    <path d="M -56,-56 A 80,80 0 1,1 40,70" fill="none" stroke="url(#primaryGradient)" stroke-width="12" stroke-linecap="round"/>

    <!-- Center text -->
    <text x="0" y="-10" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#111827" text-anchor="middle">72</text>
    <text x="0" y="10" font-family="Arial, sans-serif" font-size="11" fill="#6b7280" text-anchor="middle">Flesch Score</text>
    <text x="0" y="25" font-family="Arial, sans-serif" font-size="10" fill="#10b981" text-anchor="middle">Easy to Read</text>
  </g>

  <!-- Word frequency bars -->
  <g transform="translate(350, 520)">
    <!-- Bar chart representation -->
    <rect x="0" y="-50" width="30" height="50" rx="2" fill="#667eea" opacity="0.8"/>
    <rect x="40" y="-35" width="30" height="35" rx="2" fill="#764ba2" opacity="0.7"/>
    <rect x="80" y="-42" width="30" height="42" rx="2" fill="#3b82f6" opacity="0.7"/>
    <rect x="120" y="-28" width="30" height="28" rx="2" fill="#8b5cf6" opacity="0.6"/>
    <rect x="160" y="-20" width="30" height="20" rx="2" fill="#667eea" opacity="0.5"/>

    <!-- Axis line -->
    <line x1="-10" y1="0" x2="200" y2="0" stroke="#9ca3af" stroke-width="1"/>

    <!-- Label -->
    <text x="0" y="20" font-family="Arial, sans-serif" font-size="11" fill="#6b7280">Word Frequency</text>
  </g>

  <!-- Decorative icons -->
  <!-- Checkmark icon -->
  <g transform="translate(660, 380)">
    <circle cx="0" cy="0" r="20" fill="#10b981" opacity="0.2"/>
    <circle cx="0" cy="0" r="15" fill="#10b981"/>
    <path d="M -5,0 L -2,5 L 6,-5" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  </g>

  <!-- Text quality badge -->
  <g transform="translate(100, 50)">
    <rect x="0" y="0" width="100" height="30" rx="15" fill="url(#primaryGradient)"/>
    <text x="50" y="20" font-family="Arial, sans-serif" font-size="12" font-weight="bold" fill="white" text-anchor="middle">Analyzed</text>
  </g>

  <!-- Keyword density indicator -->
  <g transform="translate(620, 450)">
    <rect x="0" y="0" width="120" height="40" rx="8" fill="white" stroke="#e5e7eb" stroke-width="2"/>
    <text x="10" y="15" font-family="Arial, sans-serif" font-size="9" fill="#6b7280">Density</text>
    <text x="10" y="32" font-family="Arial, sans-serif" font-size="16" font-weight="bold" fill="#3b82f6">1.8%</text>
    <circle cx="100" cy="20" r="8" fill="#10b981"/>
    <text x="100" y="24" font-family="Arial, sans-serif" font-size="10" font-weight="bold" fill="white" text-anchor="middle">✓</text>
  </g>

  <!-- Floating particles for dynamic feel -->
  <circle cx="250" cy="80" r="3" fill="#667eea" opacity="0.4"/>
  <circle cx="580" cy="280" r="4" fill="#764ba2" opacity="0.3"/>
  <circle cx="420" cy="540" r="3" fill="#3b82f6" opacity="0.4"/>
  <circle cx="180" cy="450" r="2" fill="#8b5cf6" opacity="0.5"/>
</svg>
