<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:#3B82F6;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#8B5CF6;stop-opacity:0.1" />
    </linearGradient>
    <linearGradient id="csvGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#10B981;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="jsonGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#2563EB;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="arrowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#8B5CF6;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#6366F1;stop-opacity:1" />
    </linearGradient>
  </defs>

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

  <!-- Decorative grid lines -->
  <g opacity="0.1" stroke="#3B82F6" stroke-width="1">
    <line x1="0" y1="150" x2="800" y2="150"/>
    <line x1="0" y1="300" x2="800" y2="300"/>
    <line x1="0" y1="450" x2="800" y2="450"/>
    <line x1="200" y1="0" x2="200" y2="600"/>
    <line x1="400" y1="0" x2="400" y2="600"/>
    <line x1="600" y1="0" x2="600" y2="600"/>
  </g>

  <!-- CSV Document (Left) -->
  <g transform="translate(100, 150)">
    <!-- Document background -->
    <rect width="220" height="280" rx="12" fill="white" stroke="url(#csvGradient)" stroke-width="3"/>

    <!-- Document header -->
    <rect width="220" height="50" rx="12" fill="url(#csvGradient)"/>
    <text x="110" y="32" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">CSV</text>

    <!-- CSV content lines -->
    <g transform="translate(20, 70)">
      <!-- Header row -->
      <rect width="180" height="28" rx="4" fill="#10B98120"/>
      <text x="10" y="19" font-family="Monaco, monospace" font-size="12" font-weight="bold" fill="#059669">name,age,email</text>

      <!-- Data rows -->
      <g transform="translate(0, 38)">
        <rect width="180" height="24" rx="3" fill="#F3F4F6"/>
        <text x="10" y="16" font-family="Monaco, monospace" font-size="11" fill="#374151">John,30,john@ex...</text>
      </g>

      <g transform="translate(0, 70)">
        <rect width="180" height="24" rx="3" fill="#F9FAFB"/>
        <text x="10" y="16" font-family="Monaco, monospace" font-size="11" fill="#374151">Jane,25,jane@ex...</text>
      </g>

      <g transform="translate(0, 102)">
        <rect width="180" height="24" rx="3" fill="#F3F4F6"/>
        <text x="10" y="16" font-family="Monaco, monospace" font-size="11" fill="#374151">Bob,35,bob@exa...</text>
      </g>

      <g transform="translate(0, 134)">
        <rect width="180" height="24" rx="3" fill="#F9FAFB"/>
        <text x="10" y="16" font-family="Monaco, monospace" font-size="11" fill="#374151">Alice,28,alice@...</text>
      </g>
    </g>

    <!-- CSV icon -->
    <g transform="translate(185, 15)">
      <circle cx="10" cy="10" r="8" fill="white" opacity="0.3"/>
      <path d="M 6 10 L 10 14 L 14 6" stroke="white" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
  </g>

  <!-- Conversion Arrows (Center) -->
  <g transform="translate(360, 270)">
    <!-- Forward arrow -->
    <g>
      <circle cx="40" cy="20" r="35" fill="url(#arrowGradient)" opacity="0.2"/>
      <circle cx="40" cy="20" r="28" fill="url(#arrowGradient)"/>
      <path d="M 30 20 L 50 20 M 45 15 L 50 20 L 45 25" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </g>

    <!-- Reverse arrow -->
    <g transform="translate(0, 60)">
      <circle cx="40" cy="20" r="35" fill="url(#arrowGradient)" opacity="0.2"/>
      <circle cx="40" cy="20" r="28" fill="url(#arrowGradient)"/>
      <path d="M 50 20 L 30 20 M 35 15 L 30 20 L 35 25" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
    </g>
  </g>

  <!-- JSON Document (Right) -->
  <g transform="translate(480, 150)">
    <!-- Document background -->
    <rect width="220" height="280" rx="12" fill="white" stroke="url(#jsonGradient)" stroke-width="3"/>

    <!-- Document header -->
    <rect width="220" height="50" rx="12" fill="url(#jsonGradient)"/>
    <text x="110" y="32" font-family="Arial, sans-serif" font-size="20" font-weight="bold" fill="white" text-anchor="middle">JSON</text>

    <!-- JSON content -->
    <g transform="translate(20, 70)">
      <text x="0" y="15" font-family="Monaco, monospace" font-size="11" fill="#374151">[</text>

      <!-- Object 1 -->
      <g transform="translate(10, 20)">
        <text x="0" y="15" font-family="Monaco, monospace" font-size="11" fill="#374151">{</text>
        <text x="15" y="30" font-family="Monaco, monospace" font-size="10" fill="#3B82F6">"name":</text>
        <text x="70" y="30" font-family="Monaco, monospace" font-size="10" fill="#10B981">"John"</text>
        <text x="115" y="30" font-family="Monaco, monospace" font-size="10" fill="#374151">,</text>
        <text x="15" y="45" font-family="Monaco, monospace" font-size="10" fill="#3B82F6">"age":</text>
        <text x="65" y="45" font-family="Monaco, monospace" font-size="10" fill="#F59E0B">30</text>
        <text x="0" y="60" font-family="Monaco, monospace" font-size="11" fill="#374151">},</text>
      </g>

      <!-- Object 2 (abbreviated) -->
      <g transform="translate(10, 80)">
        <text x="0" y="15" font-family="Monaco, monospace" font-size="11" fill="#374151">{</text>
        <text x="15" y="30" font-family="Monaco, monospace" font-size="10" fill="#3B82F6">"name":</text>
        <text x="70" y="30" font-family="Monaco, monospace" font-size="10" fill="#10B981">"Jane"</text>
        <text x="115" y="30" font-family="Monaco, monospace" font-size="10" fill="#374151">,</text>
        <text x="15" y="45" font-family="Monaco, monospace" font-size="10" fill="#9CA3AF">...</text>
        <text x="0" y="60" font-family="Monaco, monospace" font-size="11" fill="#374151">},</text>
      </g>

      <!-- Ellipsis for more objects -->
      <text x="15" y="165" font-family="Monaco, monospace" font-size="14" fill="#9CA3AF">...</text>

      <text x="0" y="190" font-family="Monaco, monospace" font-size="11" fill="#374151">]</text>
    </g>

    <!-- JSON icon -->
    <g transform="translate(185, 15)">
      <circle cx="10" cy="10" r="8" fill="white" opacity="0.3"/>
      <text x="10" y="14" font-family="Monaco, monospace" font-size="10" font-weight="bold" fill="white" text-anchor="middle">{}</text>
    </g>
  </g>

  <!-- Title -->
  <g transform="translate(400, 80)">
    <text x="0" y="0" font-family="Arial, sans-serif" font-size="32" font-weight="bold" fill="#1F2937" text-anchor="middle">CSV ⇄ JSON</text>
    <text x="0" y="30" font-family="Arial, sans-serif" font-size="16" fill="#6B7280" text-anchor="middle">Bidirectional Converter</text>
  </g>

  <!-- Feature badges -->
  <g transform="translate(200, 480)">
    <!-- Badge 1 -->
    <rect width="120" height="32" rx="16" fill="#10B98120" stroke="#10B981" stroke-width="2"/>
    <text x="60" y="21" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#059669" text-anchor="middle">Auto-Detect</text>

    <!-- Badge 2 -->
    <g transform="translate(140, 0)">
      <rect width="100" height="32" rx="16" fill="#3B82F620" stroke="#3B82F6" stroke-width="2"/>
      <text x="50" y="21" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#2563EB" text-anchor="middle">Preview</text>
    </g>

    <!-- Badge 3 -->
    <g transform="translate(260, 0)">
      <rect width="120" height="32" rx="16" fill="#8B5CF620" stroke="#8B5CF6" stroke-width="2"/>
      <text x="60" y="21" font-family="Arial, sans-serif" font-size="12" font-weight="600" fill="#7C3AED" text-anchor="middle">Multi-Format</text>
    </g>
  </g>

  <!-- Decorative elements -->
  <g opacity="0.3">
    <circle cx="80" cy="100" r="4" fill="#3B82F6"/>
    <circle cx="720" cy="120" r="6" fill="#10B981"/>
    <circle cx="750" cy="500" r="5" fill="#8B5CF6"/>
    <circle cx="50" cy="520" r="4" fill="#F59E0B"/>
  </g>
</svg>
