/* Editorial SVG cover art — abstract scientific motifs, no AI-slop drawings */
/* Each cover takes a palette [bg, ink, accent] and a motif key */

function CoverArt({ palette = ['#F4F1EA', '#1F2937', '#7BC47F'], motif = 'wave', label }) {
  const [bg, ink, acc] = palette;
  const motifs = {
    wave: (
      <g>
        {Array.from({length: 18}).map((_, i) => (
          <path key={i}
            d={`M0 ${40 + i * 18} Q 80 ${40 + i * 18 - 22}, 160 ${40 + i * 18} T 320 ${40 + i * 18}`}
            fill="none" stroke={ink} strokeWidth={i % 4 === 0 ? 1.6 : 0.6}
            opacity={i % 4 === 0 ? 0.85 : 0.4} />
        ))}
        <circle cx="240" cy="120" r="48" fill={acc} opacity="0.85" />
        <circle cx="240" cy="120" r="48" fill="none" stroke={ink} strokeWidth="1.5" />
      </g>
    ),
    globe: (
      <g>
        <circle cx="160" cy="160" r="118" fill={acc} opacity="0.9" />
        <circle cx="160" cy="160" r="118" fill="none" stroke={ink} strokeWidth="1.5" />
        {Array.from({length: 9}).map((_, i) => (
          <ellipse key={i} cx="160" cy="160" rx={118 - i*13} ry="118" fill="none" stroke={ink} strokeWidth="0.6" opacity="0.5" />
        ))}
        {Array.from({length: 7}).map((_, i) => (
          <ellipse key={i} cx="160" cy="160" rx="118" ry={118 - i*16} fill="none" stroke={ink} strokeWidth="0.6" opacity="0.5" />
        ))}
        <circle cx="100" cy="120" r="6" fill={ink} />
        <circle cx="200" cy="180" r="4" fill={ink} />
        <circle cx="180" cy="100" r="3" fill={ink} />
      </g>
    ),
    lock: (
      <g>
        <rect x="100" y="140" width="120" height="100" rx="6" fill={acc} stroke={ink} strokeWidth="1.5" />
        <path d="M125 140 V110 a35 35 0 0 1 70 0 V140" fill="none" stroke={ink} strokeWidth="3" />
        <circle cx="160" cy="180" r="10" fill={ink} />
        <line x1="160" y1="180" x2="160" y2="208" stroke={ink} strokeWidth="3" />
        {Array.from({length: 10}).map((_, i) => (
          <line key={i} x1="40" y1={40 + i*22} x2="280" y2={40 + i*22} stroke={ink} strokeWidth="0.4" opacity="0.25" />
        ))}
      </g>
    ),
    flask: (
      <g>
        <path d="M130 70 v50 L80 230 a10 10 0 0 0 9 14 h142 a10 10 0 0 0 9 -14 L190 120 V70" fill={acc} stroke={ink} strokeWidth="1.5" />
        <line x1="125" y1="70" x2="195" y2="70" stroke={ink} strokeWidth="3" strokeLinecap="round" />
        <circle cx="120" cy="200" r="4" fill={ink} opacity="0.7" />
        <circle cx="170" cy="220" r="3" fill={ink} opacity="0.7" />
        <circle cx="200" cy="195" r="5" fill={ink} opacity="0.7" />
        <path d="M100 175 H 220" stroke={ink} strokeWidth="0.6" opacity="0.5" />
        <path d="M90 200 H 230" stroke={ink} strokeWidth="0.6" opacity="0.5" />
      </g>
    ),
    gear: (
      <g>
        <g transform="translate(160 160)">
          {Array.from({length: 12}).map((_, i) => (
            <rect key={i} x="-8" y="-90" width="16" height="22"
              transform={`rotate(${i * 30})`} fill={ink} />
          ))}
          <circle r="68" fill={acc} stroke={ink} strokeWidth="1.5" />
          <circle r="22" fill={bg} stroke={ink} strokeWidth="1.5" />
        </g>
      </g>
    ),
    dna: (
      <g>
        {Array.from({length: 14}).map((_, i) => {
          const y = 30 + i * 18;
          const offset = Math.sin(i * 0.7) * 50;
          return (
            <g key={i}>
              <circle cx={160 - offset} cy={y} r="6" fill={acc} stroke={ink} strokeWidth="1" />
              <circle cx={160 + offset} cy={y} r="6" fill={ink} />
              <line x1={160 - offset} y1={y} x2={160 + offset} y2={y} stroke={ink} strokeWidth="1" opacity="0.6" />
            </g>
          );
        })}
      </g>
    ),
    cell: (
      <g>
        <ellipse cx="160" cy="160" rx="120" ry="100" fill={acc} stroke={ink} strokeWidth="1.5" />
        <circle cx="140" cy="150" r="38" fill={bg} stroke={ink} strokeWidth="1.5" />
        <circle cx="140" cy="150" r="14" fill={ink} />
        <circle cx="200" cy="180" r="6" fill={ink} opacity="0.6" />
        <circle cx="220" cy="140" r="4" fill={ink} opacity="0.6" />
        <circle cx="100" cy="200" r="5" fill={ink} opacity="0.6" />
        <path d="M75 135 q40 -25 80 0" fill="none" stroke={ink} strokeWidth="1" opacity="0.5" />
      </g>
    ),
    door: (
      <g>
        <rect x="80" y="50" width="160" height="220" rx="4" fill={acc} stroke={ink} strokeWidth="1.5" />
        <rect x="100" y="70" width="120" height="180" fill="none" stroke={ink} strokeWidth="0.6" opacity="0.6" />
        <circle cx="210" cy="160" r="5" fill={ink} />
        <path d="M30 280 H 290" stroke={ink} strokeWidth="2" />
        <text x="160" y="170" fontFamily="monospace" fontSize="20" fill={ink} textAnchor="middle" fontWeight="600">EXIT</text>
      </g>
    ),
  };
  return (
    <svg className="cover-art" viewBox="0 0 320 320" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
      <rect width="320" height="320" fill={bg} />
      <g>{motifs[motif] || motifs.wave}</g>
      {label && (
        <g>
          <rect x="14" y="282" width="auto" />
          <text x="16" y="304" fontFamily="JetBrains Mono, monospace" fontSize="9" fill={ink} opacity="0.7" letterSpacing="1.5">
            {label}
          </text>
        </g>
      )}
    </svg>
  );
}

window.CoverArt = CoverArt;
