<svg width="800" height="600" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" fill="none">
  <!-- Background gradient -->
  <defs>
    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#EFF6FF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#DBEAFE;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="cardGrad" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
      <stop offset="100%" style="stop-color:#F9FAFB;stop-opacity:1" />
    </linearGradient>
    <linearGradient id="patternGrad" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:#3B82F6;stop-opacity:0.1" />
      <stop offset="100%" style="stop-color:#3B82F6;stop-opacity:0.05" />
    </linearGradient>
    <filter id="shadow">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

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

  <!-- Decorative circles -->
  <circle cx="120" cy="80" r="50" fill="#3B82F6" opacity="0.05"/>
  <circle cx="680" cy="520" r="70" fill="#8B5CF6" opacity="0.05"/>
  <circle cx="700" cy="100" r="35" fill="#10B981" opacity="0.05"/>

  <!-- Main card container -->
  <rect x="80" y="60" width="640" height="480" rx="16" fill="url(#cardGrad)" filter="url(#shadow)"/>
  <rect x="80" y="60" width="640" height="480" rx="16" stroke="#E5E7EB" stroke-width="2" fill="none"/>

  <!-- Title bar -->
  <rect x="80" y="60" width="640" height="50" rx="16" fill="#3B82F6" opacity="0.1"/>
  <text x="110" y="92" font-family="system-ui, -apple-system, sans-serif" font-size="18" font-weight="700" fill="#1E40AF">Regex Tester</text>

  <!-- Pattern input section -->
  <rect x="110" y="130" width="580" height="80" rx="8" fill="url(#patternGrad)" stroke="#3B82F6" stroke-width="2"/>

  <!-- Regex delimiters -->
  <text x="130" y="165" font-family="Monaco, Consolas, monospace" font-size="24" font-weight="bold" fill="#6B7280">/</text>

  <!-- Pattern text -->
  <text x="150" y="165" font-family="Monaco, Consolas, monospace" font-size="16" fill="#3B82F6">\d{3}</text>
  <text x="210" y="165" font-family="Monaco, Consolas, monospace" font-size="16" fill="#6B7280">-</text>
  <text x="225" y="165" font-family="Monaco, Consolas, monospace" font-size="16" fill="#3B82F6">\d{3}</text>
  <text x="285" y="165" font-family="Monaco, Consolas, monospace" font-size="16" fill="#6B7280">-</text>
  <text x="300" y="165" font-family="Monaco, Consolas, monospace" font-size="16" fill="#3B82F6">\d{4}</text>

  <text x="660" y="165" font-family="Monaco, Consolas, monospace" font-size="24" font-weight="bold" fill="#6B7280">/</text>

  <!-- Flags -->
  <text x="150" y="192" font-family="Monaco, Consolas, monospace" font-size="12" fill="#8B5CF6">g</text>
  <text x="170" y="192" font-family="Monaco, Consolas, monospace" font-size="12" fill="#6B7280">i</text>
  <text x="185" y="192" font-family="Monaco, Consolas, monospace" font-size="12" fill="#6B7280">m</text>

  <text x="220" y="192" font-family="system-ui, -apple-system, sans-serif" font-size="11" fill="#6B7280">Phone Number Pattern</text>

  <!-- Test string section -->
  <rect x="110" y="230" width="280" height="250" rx="8" fill="#F9FAFB" stroke="#E5E7EB" stroke-width="1"/>

  <text x="125" y="255" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600" fill="#374151">Test String</text>

  <!-- Sample text with highlighting -->
  <text x="125" y="280" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">Call me at </text>

  <!-- Highlighted match -->
  <rect x="125" y="288" width="82" height="18" rx="3" fill="#FEF3C7"/>
  <text x="130" y="302" font-family="Monaco, Consolas, monospace" font-size="11" font-weight="600" fill="#92400E">555-123-4567</text>

  <text x="125" y="325" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">or text </text>

  <!-- Second highlighted match -->
  <rect x="125" y="333" width="82" height="18" rx="3" fill="#FEF3C7"/>
  <text x="130" y="347" font-family="Monaco, Consolas, monospace" font-size="11" font-weight="600" fill="#92400E">555-987-6543</text>

  <text x="125" y="370" font-family="Monaco, Consolas, monospace" font-size="11" fill="#6B7280">anytime.</text>

  <!-- Match count badge -->
  <rect x="125" y="400" width="90" height="26" rx="13" fill="#10B981"/>
  <circle cx="140" cy="413" r="4" fill="white"/>
  <text x="150" y="418" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="white">2 Matches</text>

  <!-- Results section -->
  <rect x="410" y="230" width="280" height="250" rx="8" fill="#F9FAFB" stroke="#E5E7EB" stroke-width="1"/>

  <text x="425" y="255" font-family="system-ui, -apple-system, sans-serif" font-size="13" font-weight="600" fill="#374151">Match Results</text>

  <!-- Match 1 -->
  <rect x="425" y="270" width="250" height="70" rx="6" fill="white" stroke="#E5E7EB" stroke-width="1"/>
  <text x="435" y="290" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#1F2937">Match 1</text>
  <text x="630" y="290" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#9CA3AF">Index: 11-23</text>

  <rect x="435" y="295" width="90" height="20" rx="3" fill="#F3F4F6"/>
  <text x="440" y="309" font-family="Monaco, Consolas, monospace" font-size="10" fill="#3B82F6">555-123-4567</text>

  <text x="435" y="330" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#6B7280">Groups: 3</text>

  <!-- Match 2 -->
  <rect x="425" y="355" width="250" height="70" rx="6" fill="white" stroke="#E5E7EB" stroke-width="1"/>
  <text x="435" y="375" font-family="system-ui, -apple-system, sans-serif" font-size="11" font-weight="600" fill="#1F2937">Match 2</text>
  <text x="630" y="375" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#9CA3AF">Index: 33-45</text>

  <rect x="435" y="380" width="90" height="20" rx="3" fill="#F3F4F6"/>
  <text x="440" y="394" font-family="Monaco, Consolas, monospace" font-size="10" fill="#3B82F6">555-987-6543</text>

  <text x="435" y="415" font-family="system-ui, -apple-system, sans-serif" font-size="9" fill="#6B7280">Groups: 3</text>

  <!-- Bottom action buttons -->
  <g transform="translate(110, 495)">
    <!-- Test button -->
    <rect width="100" height="32" rx="6" fill="#10B981"/>
    <text x="50" y="21" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Test Pattern</text>
  </g>

  <g transform="translate(230, 495)">
    <!-- Code Gen button -->
    <rect width="110" height="32" rx="6" fill="#6366F1"/>
    <text x="55" y="21" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Generate Code</text>
  </g>

  <g transform="translate(360, 495)">
    <!-- Cheat Sheet button -->
    <rect width="110" height="32" rx="6" fill="#8B5CF6"/>
    <text x="55" y="21" font-family="system-ui, -apple-system, sans-serif" font-size="12" font-weight="600" fill="white" text-anchor="middle">Cheat Sheet</text>
  </g>

  <!-- Feature icons at bottom right -->
  <g transform="translate(510, 495)">
    <rect width="55" height="32" rx="6" fill="#DBEAFE"/>
    <path d="M 15 10 L 20 10 L 20 15 L 15 15 Z M 22 13 L 27 13 L 27 18 L 22 18 Z M 29 8 L 34 8 L 34 13 L 29 13 Z" fill="#3B82F6"/>
  </g>

  <g transform="translate(580, 495)">
    <rect width="55" height="32" rx="6" fill="#D1FAE5"/>
    <circle cx="27" cy="16" r="6" stroke="#10B981" stroke-width="2" fill="none"/>
    <path d="M 24 16 L 26 18 L 30 14" stroke="#10B981" stroke-width="2" fill="none" stroke-linecap="round"/>
  </g>

  <!-- Execution time indicator -->
  <text x="110" y="520" font-family="Monaco, Consolas, monospace" font-size="10" fill="#9CA3AF">Execution: 0.42ms</text>
</svg>
