/* global React */

/* ============ Stylized SVG album covers (no copyrighted artwork; abstract recreations) ============ */
/* Each cover takes width/height and renders a unique gradient-or-shape signature. */

function CoverThaCarter({ size = 110 }) {
  // Black backdrop with WAYNE THA CARTER III stacked text
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <rect width="100" height="100" fill="#1a1a1a" />
      <rect x="0" y="0" width="100" height="55" fill="#2a2a2a" opacity="0.5" />
      <text x="92" y="14" textAnchor="end" fill="#d62828" fontFamily="Archivo Black, sans-serif" fontSize="10" letterSpacing="0.5">WAYNE</text>
      <text x="92" y="24" textAnchor="end" fill="#d62828" fontFamily="Archivo Black, sans-serif" fontSize="10" letterSpacing="0.5">THA</text>
      <text x="92" y="34" textAnchor="end" fill="#d62828" fontFamily="Archivo Black, sans-serif" fontSize="10" letterSpacing="0.5">CARTER</text>
      <text x="92" y="44" textAnchor="end" fill="#d62828" fontFamily="Archivo Black, sans-serif" fontSize="14">III</text>
      <circle cx="35" cy="62" r="22" fill="#5a4030" />
      <ellipse cx="35" cy="58" rx="14" ry="10" fill="#7a5742" />
      <rect x="20" y="78" width="30" height="22" fill="#3a4a55" />
    </svg>
  );
}
function CoverKanyeRed({ size = 110 }) {
  // Red background with pixelated central image
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <rect width="100" height="100" fill="#c8102e" />
      <g transform="translate(28,28)">
        <rect width="44" height="44" fill="#1a1a2e" />
        {Array.from({ length: 11 }).map((_, y) =>
          Array.from({ length: 11 }).map((_, x) => {
            const cols = ['#ffd700','#1a1a2e','#c8102e','#0066cc','#1a1a2e','#ff6b35','#1a1a2e','#7a3b8f'];
            const c = cols[(x*3 + y*5) % cols.length];
            return <rect key={`${x}-${y}`} x={x*4} y={y*4} width="4" height="4" fill={c} />;
          })
        )}
        <rect x="2" y="2" width="40" height="40" fill="none" stroke="#ffb347" strokeWidth="1.5" />
      </g>
    </svg>
  );
}
function CoverRayeStorm({ size = 110 }) {
  // Stormy sky with figure
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <defs>
        <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3a4a5e" />
          <stop offset="60%" stopColor="#5a6a7e" />
          <stop offset="100%" stopColor="#2a3540" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" fill="url(#sky)" />
      <ellipse cx="55" cy="35" rx="40" ry="18" fill="#7a8a9e" opacity="0.6" />
      <ellipse cx="30" cy="50" rx="30" ry="12" fill="#8a9aae" opacity="0.5" />
      <path d="M58 40 L52 65 L48 72 L46 90 L62 90 L58 75 L62 60 L65 45 Z" fill="#e8d5b7" />
      <ellipse cx="58" cy="38" rx="6" ry="8" fill="#d8c5a7" />
      <path d="M50 42 Q50 32 60 32 Q70 32 70 50 Q68 60 58 60 Z" fill="#3a2a1e" />
    </svg>
  );
}
function CoverSlayyyter({ size = 110 }) {
  // Pink/yellow with dollar sign
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <defs>
        <linearGradient id="sla" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#a8c8e0" />
          <stop offset="100%" stopColor="#7a98c0" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" fill="url(#sla)" />
      <circle cx="50" cy="50" r="32" fill="none" stroke="#d62828" strokeWidth="3" />
      <text x="50" y="64" textAnchor="middle" fill="#d62828" fontFamily="Archivo Black, sans-serif" fontSize="38">$</text>
      <rect x="12" y="74" width="76" height="20" fill="rgba(0,0,0,0.4)" />
    </svg>
  );
}
function CoverThisMusicMay({ size = 110 }) {
  // Blue stormy with figure flying
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <defs>
        <linearGradient id="storm" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#5a6a8e" />
          <stop offset="100%" stopColor="#1a2a3e" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" fill="url(#storm)" />
      <circle cx="80" cy="20" r="6" fill="#ff6b9d" />
      <circle cx="80" cy="20" r="3" fill="#ff8eb5" />
      <path d="M0 60 Q30 50 60 65 T100 70 L100 100 L0 100 Z" fill="#1a2438" opacity="0.7" />
      <ellipse cx="50" cy="55" rx="3" ry="10" fill="#e8d5b7" transform="rotate(15 50 55)" />
      <path d="M48 50 L52 60 L46 65 L42 58 Z" fill="#c8b5a0" />
    </svg>
  );
}
function CoverBadGirls({ size = 110 }) {
  // Pink with figure
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <rect width="100" height="100" fill="#e8b5c0" />
      <text x="50" y="14" textAnchor="middle" fill="#1a1a1a" fontFamily="Archivo Black, sans-serif" fontSize="9" letterSpacing="2">BAD GIRLS</text>
      <ellipse cx="50" cy="22" rx="7" ry="5" fill="#ff7a90" />
      <path d="M30 50 Q30 35 50 35 Q70 35 70 50 L70 90 L30 90 Z" fill="#3a2a3e" />
      <ellipse cx="50" cy="44" rx="11" ry="14" fill="#d8a895" />
      <path d="M38 38 Q38 28 50 28 Q62 28 62 42 Q62 50 56 52 L44 52 Q38 50 38 38" fill="#1a1a1a" />
    </svg>
  );
}
function CoverTPAB({ size = 110 }) {
  // White house, group on lawn
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <rect width="100" height="100" fill="#1a1a1a" />
      <rect x="0" y="0" width="100" height="55" fill="#3a4a5e" />
      <rect x="20" y="20" width="60" height="35" fill="#e8e8e8" />
      <polygon points="20,20 50,5 80,20" fill="#d8d8d8" />
      <rect x="35" y="35" width="8" height="20" fill="#1a1a1a" />
      <rect x="55" y="35" width="8" height="20" fill="#1a1a1a" />
      <rect x="0" y="55" width="100" height="45" fill="#2a3a2e" />
      <circle cx="20" cy="75" r="6" fill="#d8a895" />
      <circle cx="35" cy="78" r="5" fill="#a87a5a" />
      <circle cx="50" cy="74" r="6" fill="#7a5a3a" />
      <circle cx="65" cy="77" r="5" fill="#d8a895" />
      <circle cx="80" cy="75" r="5" fill="#5a3a2a" />
    </svg>
  );
}
function CoverFoundersClub({ size = 110 }) {
  // Disco's own founders club — purple violet w/ disco logo
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block', borderRadius: 6 }}>
      <defs>
        <linearGradient id="fc" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#3a1a5a" />
          <stop offset="100%" stopColor="#1a0a3e" />
        </linearGradient>
      </defs>
      <rect width="100" height="100" fill="url(#fc)" />
      <circle cx="50" cy="50" r="28" fill="none" stroke="#FF2D78" strokeWidth="1.5" opacity="0.8" />
      <circle cx="50" cy="50" r="20" fill="none" stroke="#FF2D78" strokeWidth="1" opacity="0.6" />
      <text x="50" y="46" textAnchor="middle" fill="#fff" fontFamily="Archivo Black, sans-serif" fontSize="11" opacity="0.85">FOUNDERS</text>
      <text x="50" y="58" textAnchor="middle" fill="#fff" fontFamily="Archivo Black, sans-serif" fontSize="11" opacity="0.85">CLUB</text>
    </svg>
  );
}

Object.assign(window, {
  CoverThaCarter, CoverKanyeRed, CoverRayeStorm, CoverSlayyyter,
  CoverThisMusicMay, CoverBadGirls, CoverTPAB, CoverFoundersClub,
});
