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

  <!-- Social media icons -->
  <g transform="translate(80, 50)">
    <circle cx="40" cy="40" r="35" fill="#3b82f6"/>
    <text x="40" y="50" text-anchor="middle" font-family="system-ui" font-size="24" fill="white" font-weight="bold">f</text>

    <circle cx="120" cy="40" r="35" fill="#06b6d4"/>
    <text x="120" y="50" text-anchor="middle" font-family="system-ui" font-size="24" fill="white" font-weight="bold">T</text>

    <circle cx="200" cy="40" r="35" fill="#8b5cf6"/>
    <text x="200" y="50" text-anchor="middle" font-family="system-ui" font-size="24" fill="white" font-weight="bold">IG</text>

    <circle cx="280" cy="40" r="35" fill="#ef4444"/>
    <text x="280" y="50" text-anchor="middle" font-family="system-ui" font-size="24" fill="white" font-weight="bold">Y</text>
  </g>

  <!-- Engagement metrics -->
  <g transform="translate(60, 120)">
    <rect x="0" y="0" width="280" height="140" rx="10" fill="white" stroke="#d1d5db" stroke-width="2"/>

    <g transform="translate(20, 20)">
      <text x="0" y="0" font-family="system-ui" font-size="11" fill="#6b7280">Followers</text>
      <text x="0" y="20" font-family="system-ui" font-size="16" fill="#3b82f6" font-weight="bold">50,000</text>
    </g>

    <g transform="translate(110, 20)">
      <text x="0" y="0" font-family="system-ui" font-size="11" fill="#6b7280">Engagement</text>
      <text x="0" y="20" font-family="system-ui" font-size="16" fill="#10b981" font-weight="bold">2,500</text>
    </g>

    <g transform="translate(200, 20)">
      <text x="0" y="0" font-family="system-ui" font-size="11" fill="#6b7280">Rate</text>
      <text x="0" y="20" font-family="system-ui" font-size="16" fill="#f59e0b" font-weight="bold">5.0%</text>
    </g>

    <g transform="translate(20, 65)">
      <text x="0" y="0" font-family="system-ui" font-size="11" fill="#6b7280">Clicks</text>
      <text x="0" y="20" font-family="system-ui" font-size="16" fill="#8b5cf6" font-weight="bold">500</text>
    </g>

    <g transform="translate(110, 65)">
      <text x="0" y="0" font-family="system-ui" font-size="11" fill="#6b7280">Conversions</text>
      <text x="0" y="20" font-family="system-ui" font-size="16" fill="#10b981" font-weight="bold">25</text>
    </g>

    <g transform="translate(200, 65)">
      <text x="0" y="0" font-family="system-ui" font-size="11" fill="#6b7280">Revenue</text>
      <text x="0" y="20" font-family="system-ui" font-size="16" fill="#10b981" font-weight="bold">$3,750</text>
    </g>

    <line x1="20" y1="105" x2="260" y2="105" stroke="#e5e7eb" stroke-width="1"/>

    <g transform="translate(85, 110)">
      <text x="0" y="15" font-family="system-ui" font-size="11" fill="#6b7280">ROI</text>
      <text x="55" y="15" font-family="system-ui" font-size="18" fill="#10b981" font-weight="bold">87.5%</text>
    </g>
  </g>

  <!-- ROI badge -->
  <g transform="translate(100, 280)">
    <rect x="0" y="0" width="200" height="90" rx="12" fill="#10b981"/>
    <text x="100" y="30" text-anchor="middle" font-family="system-ui" font-size="14" fill="white">Social Media ROI</text>
    <text x="100" y="58" text-anchor="middle" font-family="system-ui" font-size="32" fill="white" font-weight="bold">87.5%</text>
  </g>

  <text x="200" y="395" text-anchor="middle" font-family="system-ui" font-size="16" font-weight="600" fill="#1f2937">Social Media ROI Calculator</text>
</svg>
