<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
<defs>
<linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#1e40af;stop-opacity:1" />
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
</linearGradient>
<pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
<circle cx="20" cy="20" r="2" fill="#f59e0b" opacity="0.3"/>
<circle cx="80" cy="80" r="2" fill="#ef4444" opacity="0.3"/>
<circle cx="40" cy="60" r="1.5" fill="#10b981" opacity="0.3"/>
<circle cx="60" cy="40" r="1.5" fill="#8b5cf6" opacity="0.3"/>
</pattern>
</defs>
<!-- Background -->
<rect width="1200" height="630" fill="url(#bg)"/>
<rect width="1200" height="630" fill="url(#dots)"/>
<!-- Main content -->
<g transform="translate(600, 315)">
<!-- Icon -->
<rect x="-40" y="-200" width="80" height="80" rx="20" fill="rgba(255,255,255,0.2)"/>
<text x="0" y="-150" text-anchor="middle" font-size="40" fill="white">🗺️</text>
<!-- Title -->
<text x="0" y="-50" text-anchor="middle" font-size="64" font-weight="700" fill="white" font-family="system-ui, sans-serif">ICE Facility Heatmap</text>
<!-- Subtitle -->
<text x="0" y="20" text-anchor="middle" font-size="32" font-weight="400" fill="white" opacity="0.9" font-family="system-ui, sans-serif">Immigration Detention Centers</text>
<!-- Description -->
<text x="0" y="70" text-anchor="middle" font-size="24" font-weight="300" fill="white" opacity="0.8" font-family="system-ui, sans-serif">Interactive visualization of detention facilities</text>
<text x="0" y="100" text-anchor="middle" font-size="24" font-weight="300" fill="white" opacity="0.8" font-family="system-ui, sans-serif">across the United States with population data</text>
<!-- Stats -->
<g transform="translate(0, 150)">
<!-- 186 Facilities -->
<g transform="translate(-200, 0)">
<text x="0" y="0" text-anchor="middle" font-size="36" font-weight="700" fill="white" font-family="system-ui, sans-serif">186</text>
<text x="0" y="25" text-anchor="middle" font-size="18" font-weight="400" fill="white" opacity="0.8" font-family="system-ui, sans-serif">Facilities</text>
</g>
<!-- 62K+ Population -->
<g transform="translate(0, 0)">
<text x="0" y="0" text-anchor="middle" font-size="36" font-weight="700" fill="white" font-family="system-ui, sans-serif">62K+</text>
<text x="0" y="25" text-anchor="middle" font-size="18" font-weight="400" fill="white" opacity="0.8" font-family="system-ui, sans-serif">Population</text>
</g>
<!-- 50 States -->
<g transform="translate(200, 0)">
<text x="0" y="0" text-anchor="middle" font-size="36" font-weight="700" fill="white" font-family="system-ui, sans-serif">50</text>
<text x="0" y="25" text-anchor="middle" font-size="18" font-weight="400" fill="white" opacity="0.8" font-family="system-ui, sans-serif">States</text>
</g>
</g>
</g>
</svg>
