// Stylized SVG cover art for each game — generated, no external assets

function CoverEchoes() {
  // Echoes of Tomorrow — sci-fi survival, "New Aurora" — abstract aurora over ruined city silhouette
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="ec-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#1A0E2E" />
          <stop offset="60%" stopColor="#2E1A3E" />
          <stop offset="100%" stopColor="#0E1410" />
        </linearGradient>
        <linearGradient id="ec-aurora" x1="0" y1="0" x2="0.3" y2="1">
          <stop offset="0%" stopColor="#6BC8A0" stopOpacity="0" />
          <stop offset="40%" stopColor="#6BC8A0" stopOpacity="0.6" />
          <stop offset="70%" stopColor="#A06BC8" stopOpacity="0.4" />
          <stop offset="100%" stopColor="#A06BC8" stopOpacity="0" />
        </linearGradient>
        <linearGradient id="ec-aurora2" x1="0" y1="0" x2="0.5" y2="1">
          <stop offset="0%" stopColor="#E8A33D" stopOpacity="0" />
          <stop offset="50%" stopColor="#E8A33D" stopOpacity="0.5" />
          <stop offset="100%" stopColor="#D43F2A" stopOpacity="0" />
        </linearGradient>
      </defs>

      <rect width="400" height="300" fill="url(#ec-sky)" />

      {/* Aurora bands */}
      <path d="M -20 60 Q 100 20, 200 80 T 420 70 L 420 120 Q 280 90, 200 130 T -20 110 Z" fill="url(#ec-aurora)" opacity="0.8" />
      <path d="M -20 100 Q 120 50, 240 110 T 420 100 L 420 160 Q 280 130, 200 170 T -20 150 Z" fill="url(#ec-aurora2)" opacity="0.7" />

      {/* Stars */}
      {Array.from({length: 30}).map((_, i) => {
        const x = (i * 37) % 400;
        const y = ((i * 23) % 100) + 10;
        const r = (i % 3 === 0) ? 1.2 : 0.6;
        return <circle key={i} cx={x} cy={y} r={r} fill="#F2EAD8" opacity={0.6 + (i % 4) * 0.1} />;
      })}

      {/* Ruined city skyline */}
      <g fill="#0A0F0C">
        <polygon points="0,300 0,200 30,200 30,180 50,180 50,210 70,210 70,170 90,170 90,200 120,200 120,160 145,160 145,150 165,150 165,190 180,190 180,170 200,170 200,180 215,180 215,150 235,150 235,160 255,160 255,200 285,200 285,180 305,180 305,210 325,210 325,180 345,180 345,200 380,200 380,190 400,190 400,300" />
      </g>
      {/* Window lights */}
      {[[35,185],[55,195],[75,180],[95,185],[125,170],[150,165],[170,180],[205,165],[240,170],[260,185],[290,190],[310,195],[330,190],[350,185]].map(([x,y], i) => (
        <rect key={i} x={x} y={y} width="2" height="2" fill="#E8A33D" opacity={0.7 + (i%3)*0.1} />
      ))}

      {/* Lone figure on rooftop */}
      <g fill="#0A0F0C" stroke="#D43F2A" strokeWidth="0.5">
        <circle cx="200" cy="155" r="2.5" />
        <line x1="200" y1="158" x2="200" y2="170" stroke="#0A0F0C" strokeWidth="2" />
      </g>
      {/* Glow under figure */}
      <ellipse cx="200" cy="172" rx="10" ry="2" fill="#E8A33D" opacity="0.3" />

      {/* Foreground silhouette frame */}
      <polygon points="0,300 0,260 30,250 60,265 100,255 140,270 200,260 260,270 300,255 340,265 380,250 400,255 400,300" fill="#000" />
    </svg>
  );
}

function CoverGrocer() {
  // Go Go Grocer — bright cartoon — flying grocery bag, motion lines, shopping cart
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="gg-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#FFD96B" />
          <stop offset="50%" stopColor="#FFA84A" />
          <stop offset="100%" stopColor="#FF6B3D" />
        </linearGradient>
      </defs>
      <rect width="400" height="300" fill="url(#gg-sky)" />

      {/* Sun */}
      <circle cx="320" cy="80" r="50" fill="#FFE89C" />
      <circle cx="320" cy="80" r="35" fill="#FFD96B" />

      {/* Sun rays */}
      {Array.from({length: 12}).map((_, i) => {
        const angle = (i * 30) * Math.PI / 180;
        const x1 = 320 + Math.cos(angle) * 55;
        const y1 = 80 + Math.sin(angle) * 55;
        const x2 = 320 + Math.cos(angle) * 75;
        const y2 = 80 + Math.sin(angle) * 75;
        return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="#FFE89C" strokeWidth="3" strokeLinecap="round" />;
      })}

      {/* Speed lines */}
      <g stroke="#FFFFFF" strokeWidth="3" strokeLinecap="round" opacity="0.6">
        <line x1="20" y1="80" x2="80" y2="80" />
        <line x1="40" y1="120" x2="120" y2="120" />
        <line x1="10" y1="160" x2="60" y2="160" />
        <line x1="30" y1="200" x2="100" y2="200" />
      </g>

      {/* Ground */}
      <rect x="0" y="220" width="400" height="80" fill="#5BAE3D" />
      <rect x="0" y="218" width="400" height="6" fill="#4A8E32" />

      {/* Road dashes */}
      <g fill="#FFFFFF">
        <rect x="20" y="260" width="20" height="4" />
        <rect x="60" y="260" width="20" height="4" />
        <rect x="100" y="260" width="20" height="4" />
        <rect x="140" y="260" width="20" height="4" />
        <rect x="180" y="260" width="20" height="4" />
        <rect x="220" y="260" width="20" height="4" />
        <rect x="260" y="260" width="20" height="4" />
        <rect x="300" y="260" width="20" height="4" />
        <rect x="340" y="260" width="20" height="4" />
      </g>

      {/* Shopping cart */}
      <g transform="translate(150, 160)">
        {/* Cart body */}
        <path d="M 0 0 L 80 0 L 70 40 L 10 40 Z" fill="#E8513A" stroke="#1A0E0C" strokeWidth="2" />
        {/* Grid pattern */}
        <line x1="20" y1="0" x2="18" y2="40" stroke="#1A0E0C" strokeWidth="1" />
        <line x1="40" y1="0" x2="40" y2="40" stroke="#1A0E0C" strokeWidth="1" />
        <line x1="60" y1="0" x2="62" y2="40" stroke="#1A0E0C" strokeWidth="1" />
        <line x1="5" y1="14" x2="75" y2="14" stroke="#1A0E0C" strokeWidth="1" />
        <line x1="5" y1="28" x2="75" y2="28" stroke="#1A0E0C" strokeWidth="1" />
        {/* Handle */}
        <path d="M 0 0 L -10 -15 L -25 -15" fill="none" stroke="#1A0E0C" strokeWidth="3" strokeLinecap="round" />
        {/* Wheels */}
        <circle cx="15" cy="46" r="6" fill="#1A0E0C" />
        <circle cx="65" cy="46" r="6" fill="#1A0E0C" />
        <circle cx="15" cy="46" r="2" fill="#FFD96B" />
        <circle cx="65" cy="46" r="2" fill="#FFD96B" />
        {/* Items popping out */}
        <circle cx="20" cy="-5" r="6" fill="#5BAE3D" />
        <circle cx="20" cy="-7" r="2" fill="#7BCE5D" />
        <ellipse cx="40" cy="-8" rx="7" ry="5" fill="#FFE89C" />
        <rect x="55" y="-12" width="10" height="14" fill="#A06BC8" stroke="#1A0E0C" strokeWidth="1" />
      </g>

      {/* Motion lines behind cart */}
      <g stroke="#FFFFFF" strokeWidth="4" strokeLinecap="round" opacity="0.8">
        <line x1="100" y1="180" x2="140" y2="180" />
        <line x1="90" y1="200" x2="130" y2="200" />
        <line x1="110" y1="220" x2="150" y2="220" />
      </g>
    </svg>
  );
}

function CoverLoonies() {
  // Loonie Trouble — cabin in Canadian wilderness, pine trees, loon silhouettes attacking
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="lo-sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3A4A5A" />
          <stop offset="50%" stopColor="#5A6A6E" />
          <stop offset="100%" stopColor="#8A9088" />
        </linearGradient>
        <linearGradient id="lo-water" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#2A3A4A" />
          <stop offset="100%" stopColor="#1A2A38" />
        </linearGradient>
      </defs>
      <rect width="400" height="300" fill="url(#lo-sky)" />

      {/* Mountains background */}
      <polygon points="0,140 60,80 100,110 160,60 220,100 280,70 340,110 400,90 400,180 0,180" fill="#4A5A60" opacity="0.6" />
      <polygon points="0,170 80,120 140,150 200,110 260,140 320,115 400,140 400,200 0,200" fill="#3A4A50" />

      {/* Moon */}
      <circle cx="80" cy="60" r="22" fill="#F2EAD8" opacity="0.9" />
      <circle cx="74" cy="55" r="3" fill="#D8D0BC" opacity="0.6" />
      <circle cx="85" cy="65" r="2" fill="#D8D0BC" opacity="0.5" />

      {/* Lake */}
      <rect x="0" y="200" width="400" height="100" fill="url(#lo-water)" />
      {/* Moon reflection */}
      <ellipse cx="80" cy="220" rx="15" ry="3" fill="#F2EAD8" opacity="0.3" />
      <ellipse cx="80" cy="240" rx="20" ry="2" fill="#F2EAD8" opacity="0.2" />
      <ellipse cx="80" cy="260" rx="12" ry="1.5" fill="#F2EAD8" opacity="0.15" />

      {/* Loons attacking — silhouettes flying */}
      <g fill="#0E1410">
        {/* Loon 1 */}
        <g transform="translate(180, 90)">
          <ellipse cx="0" cy="0" rx="14" ry="4" />
          <ellipse cx="-12" cy="-2" rx="6" ry="3" />
          <line x1="-16" y1="-2" x2="-22" y2="-2" stroke="#0E1410" strokeWidth="2" />
          <path d="M -4 -2 Q 0 -10, 4 -2 Z" />
          <path d="M -8 -2 Q -4 -8, 0 -2 Z" />
        </g>
        {/* Loon 2 */}
        <g transform="translate(260, 70) rotate(-10)">
          <ellipse cx="0" cy="0" rx="11" ry="3" />
          <ellipse cx="-9" cy="-2" rx="5" ry="2.5" />
          <line x1="-12" y1="-2" x2="-18" y2="-2" stroke="#0E1410" strokeWidth="2" />
          <path d="M -3 -2 Q 0 -7, 3 -2 Z" />
        </g>
        {/* Loon 3 — diving */}
        <g transform="translate(310, 130) rotate(25)">
          <ellipse cx="0" cy="0" rx="10" ry="3" />
          <ellipse cx="-8" cy="-2" rx="4" ry="2" />
          <line x1="-11" y1="-2" x2="-16" y2="-2" stroke="#0E1410" strokeWidth="2" />
        </g>
      </g>

      {/* Pine trees */}
      <g fill="#1A2A1F">
        {[20, 45, 75, 340, 365].map((x, i) => {
          const h = 60 + (i % 3) * 20;
          return (
            <g key={i} transform={`translate(${x}, ${200 - h})`}>
              <polygon points={`0,${h} -12,${h*0.7} -8,${h*0.7} -16,${h*0.4} -10,${h*0.4} -18,${h*0.1} -4,${h*0.1} -4,0 4,0 4,${h*0.1} 18,${h*0.1} 10,${h*0.4} 16,${h*0.4} 8,${h*0.7} 12,${h*0.7}`} />
            </g>
          );
        })}
      </g>

      {/* Cabin */}
      <g transform="translate(170, 155)">
        {/* Body */}
        <rect x="0" y="20" width="60" height="35" fill="#5A3A28" stroke="#1A0E0C" strokeWidth="1.5" />
        {/* Logs */}
        <line x1="0" y1="28" x2="60" y2="28" stroke="#1A0E0C" strokeWidth="1" opacity="0.6" />
        <line x1="0" y1="36" x2="60" y2="36" stroke="#1A0E0C" strokeWidth="1" opacity="0.6" />
        <line x1="0" y1="44" x2="60" y2="44" stroke="#1A0E0C" strokeWidth="1" opacity="0.6" />
        {/* Roof */}
        <polygon points="-5,20 65,20 30,-5" fill="#3A2418" stroke="#1A0E0C" strokeWidth="1.5" />
        {/* Window — glowing */}
        <rect x="10" y="30" width="14" height="14" fill="#E8A33D" />
        <line x1="17" y1="30" x2="17" y2="44" stroke="#1A0E0C" strokeWidth="1" />
        <line x1="10" y1="37" x2="24" y2="37" stroke="#1A0E0C" strokeWidth="1" />
        {/* Door */}
        <rect x="38" y="34" width="12" height="21" fill="#3A2418" />
        <circle cx="47" cy="44" r="0.8" fill="#E8A33D" />
        {/* Chimney smoke */}
        <rect x="42" y="-2" width="6" height="10" fill="#3A2418" />
        <circle cx="45" cy="-8" r="3" fill="#5A6A6E" opacity="0.6" />
        <circle cx="48" cy="-15" r="4" fill="#5A6A6E" opacity="0.4" />
      </g>

      {/* Window light glow on ground */}
      <ellipse cx="190" cy="200" rx="30" ry="6" fill="#E8A33D" opacity="0.15" />
    </svg>
  );
}

window.CoverEchoes = CoverEchoes;
window.CoverGrocer = CoverGrocer;
window.CoverLoonies = CoverLoonies;