// Icons + procedural key-art
const Icon = ({ name, size = 16, stroke = 1.6 }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "ios": return <svg {...common}><path d="M16.5 12.5c0-2.2 1.8-3.2 1.9-3.3-1-1.5-2.6-1.7-3.2-1.7-1.4-.1-2.7.8-3.3.8-.7 0-1.7-.8-2.9-.8-1.5 0-2.9.9-3.6 2.2-1.6 2.7-.4 6.7 1.1 8.9.7 1.1 1.6 2.3 2.8 2.2 1.1 0 1.5-.7 2.9-.7 1.3 0 1.7.7 2.9.7 1.2 0 2-1.1 2.7-2.2.6-.8 1-1.6 1.3-2.5-1.1-.4-2.6-1.5-2.6-3.6z" fill="currentColor" stroke="none"/><path d="M14.2 5.5c.6-.7 1-1.7.9-2.7-.9 0-1.9.6-2.5 1.3-.6.7-1.1 1.7-.9 2.6 1 .1 1.9-.5 2.5-1.2z" fill="currentColor" stroke="none"/></svg>;
    case "android": return <svg {...common}><path d="M3 17h18v-1c0-3.5-2-6.6-5-8"/><path d="M6 8c3-2 6-2 9 0"/><circle cx="8.5" cy="13" r=".6" fill="currentColor"/><circle cx="15.5" cy="13" r=".6" fill="currentColor"/><path d="M6 8l-1.5-2.5"/><path d="M18 8l1.5-2.5"/></svg>;
    case "windows": return <svg {...common}><path d="M3 5.5l8-1.2v7.2H3V5.5zM11 4.3l10-1.5v9H11V4.3zM3 12.5h8v7.2l-8-1.2v-6zM11 12.5h10v9l-10-1.5v-7.5z" fill="currentColor" stroke="none"/></svg>;
    case "mac": return <svg {...common}><circle cx="12" cy="12" r="9"/><path d="M12 7v10M7 12h10"/></svg>;
    case "steam": return <svg {...common}><circle cx="12" cy="12" r="9"/><circle cx="15" cy="10" r="2.6"/><circle cx="9" cy="14.5" r="1.4" fill="currentColor"/></svg>;
    case "itch": return <svg {...common}><path d="M3 7l2-2h14l2 2v2c-1 .5-2 .5-3 0-1 .5-2 .5-3 0-1 .5-2 .5-3 0-1 .5-2 .5-3 0-1 .5-2 .5-3 0-1 .5-2 .5-3 0V7z" fill="currentColor" stroke="none"/><path d="M4 10v9h16v-9"/><path d="M9 14h6v3H9z"/></svg>;
    case "arrow-tr": return <svg {...common}><path d="M7 17L17 7"/><path d="M9 7h8v8"/></svg>;
    case "arrow-r": return <svg {...common}><path d="M5 12h14"/><path d="M13 6l6 6-6 6"/></svg>;
    case "arrow-l": return <svg {...common}><path d="M19 12H5"/><path d="M11 18l-6-6 6-6"/></svg>;
    case "play": return <svg {...common}><path d="M7 5l12 7-12 7V5z" fill="currentColor" stroke="none"/></svg>;
    case "x-twitter": return <svg {...common}><path d="M4 4l7 9-7 7h2.5l5.7-5.5L16.5 20H20l-7.5-9.5L19.5 4H17l-5 5L8 4H4z" fill="currentColor" stroke="none"/></svg>;
    case "instagram": return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17" cy="7" r=".8" fill="currentColor"/></svg>;
    case "github": return <svg {...common}><path d="M12 2a10 10 0 00-3.2 19.5c.5.1.7-.2.7-.5v-2c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.5-1.1-1.5-.9-.6.1-.6.1-.6 1 .1 1.5 1 1.5 1 .9 1.5 2.3 1.1 2.9.8.1-.6.3-1.1.6-1.3-2.2-.2-4.5-1.1-4.5-5 0-1.1.4-2 1-2.7-.1-.3-.4-1.3.1-2.7 0 0 .8-.3 2.7 1a9.3 9.3 0 015 0c1.9-1.3 2.7-1 2.7-1 .5 1.4.2 2.4.1 2.7.6.7 1 1.6 1 2.7 0 3.9-2.3 4.8-4.5 5 .4.3.7.9.7 1.8v2.7c0 .3.2.6.7.5A10 10 0 0012 2z" fill="currentColor" stroke="none"/></svg>;
    case "sliders": return <svg {...common}><path d="M4 7h10M18 7h2M4 17h4M12 17h8"/><circle cx="16" cy="7" r="2"/><circle cx="10" cy="17" r="2"/></svg>;
    case "download": return <svg {...common}><path d="M12 3v12"/><path d="M6 11l6 6 6-6"/><path d="M4 21h16"/></svg>;
    case "check": return <svg {...common}><path d="M5 12l4 4 10-10"/></svg>;
    default: return null;
  }
};

function storeIcon(key) {
  if (key === 'appstore') return 'ios';
  if (key === 'playstore') return 'android';
  if (key === 'steam') return 'steam';
  if (key === 'itch') return 'itch';
  return 'download';
}

// Procedural key-art — deterministic per project
function drawKeyArt(canvas, project, variant = 0) {
  if (!canvas) return;
  const dpr = Math.min(window.devicePixelRatio || 1, 2);
  const rect = canvas.getBoundingClientRect();
  const w = Math.max(400, rect.width) * dpr;
  const h = Math.max(250, rect.height) * dpr;
  canvas.width = w; canvas.height = h;
  const ctx = canvas.getContext('2d');
  const [bg, mid, accent, light] = project.palette;

  // Bg
  const grad = ctx.createLinearGradient(0, 0, w, h);
  grad.addColorStop(0, bg); grad.addColorStop(1, mid);
  ctx.fillStyle = grad; ctx.fillRect(0, 0, w, h);

  let seed = variant * 31 + 7;
  for (let i = 0; i < project.id.length; i++) seed += project.id.charCodeAt(i);
  const rnd = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };

  if (project.kind === 'game') {
    const horizonY = h * 0.62;
    // Sun
    const sunR = h * 0.28, sunX = w * 0.5, sunY = horizonY - sunR * 0.3;
    const sg = ctx.createRadialGradient(sunX, sunY, 0, sunX, sunY, sunR);
    sg.addColorStop(0, light); sg.addColorStop(0.45, accent); sg.addColorStop(1, 'transparent');
    ctx.fillStyle = sg; ctx.fillRect(sunX - sunR * 1.5, sunY - sunR * 1.5, sunR * 3, sunR * 3);
    // Sun bands
    ctx.fillStyle = bg;
    for (let i = 0; i < 5; i++) {
      const y = sunY + sunR * (0.2 + i * 0.15);
      ctx.fillRect(sunX - sunR, y, sunR * 2, h * 0.012);
    }
    // Horizon glow
    const hg = ctx.createLinearGradient(0, horizonY - h * 0.1, 0, horizonY);
    hg.addColorStop(0, 'transparent'); hg.addColorStop(1, accent + '66');
    ctx.fillStyle = hg; ctx.fillRect(0, horizonY - h * 0.1, w, h * 0.1);
    // Horizon line
    ctx.strokeStyle = accent; ctx.lineWidth = 2 * dpr;
    ctx.shadowColor = accent; ctx.shadowBlur = 20 * dpr;
    ctx.beginPath(); ctx.moveTo(0, horizonY); ctx.lineTo(w, horizonY); ctx.stroke();
    ctx.shadowBlur = 0;
    // Grid
    ctx.strokeStyle = accent; ctx.lineWidth = 1 * dpr;
    for (let i = 1; i < 14; i++) {
      const t = i / 14;
      const y = horizonY + Math.pow(t, 2.2) * (h - horizonY);
      ctx.globalAlpha = 0.15 + t * 0.55;
      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
    }
    const vpX = w * 0.5;
    for (let i = -8; i <= 8; i++) {
      ctx.globalAlpha = 0.3;
      ctx.beginPath(); ctx.moveTo(vpX, horizonY); ctx.lineTo(vpX + i * w * 0.14, h); ctx.stroke();
    }
    ctx.globalAlpha = 1;
    // Stars
    ctx.fillStyle = light;
    for (let i = 0; i < 80; i++) {
      const x = rnd() * w, y = rnd() * (horizonY - 20);
      const s = rnd() * 1.6 * dpr;
      ctx.globalAlpha = 0.4 + rnd() * 0.6;
      ctx.fillRect(x, y, s, s);
    }
    ctx.globalAlpha = 1;
  } else {
    // App: floating cards
    const blob = ctx.createRadialGradient(w * 0.75, h * 0.2, 0, w * 0.75, h * 0.2, h * 0.95);
    blob.addColorStop(0, accent + 'bb'); blob.addColorStop(1, 'transparent');
    ctx.fillStyle = blob; ctx.fillRect(0, 0, w, h);

    for (let i = 0; i < 5; i++) {
      const cw = w * (0.14 + rnd() * 0.1);
      const ch = cw * (1.3 + rnd() * 0.4);
      const cx = w * (0.15 + i * 0.16) + (rnd() - 0.5) * w * 0.04;
      const cy = h * (0.42 + rnd() * 0.32);
      const rot = (rnd() - 0.5) * 0.3;
      ctx.save();
      ctx.translate(cx, cy); ctx.rotate(rot);
      ctx.fillStyle = 'rgba(0,0,0,0.5)';
      ctx.fillRect(-cw / 2 + 6 * dpr, -ch / 2 + 14 * dpr, cw, ch);
      const cg = ctx.createLinearGradient(0, -ch / 2, 0, ch / 2);
      cg.addColorStop(0, light + 'ee'); cg.addColorStop(1, mid);
      ctx.fillStyle = cg;
      const r = 16 * dpr, x = -cw / 2, y = -ch / 2;
      ctx.beginPath();
      ctx.moveTo(x + r, y);
      ctx.lineTo(x + cw - r, y); ctx.arcTo(x + cw, y, x + cw, y + r, r);
      ctx.lineTo(x + cw, y + ch - r); ctx.arcTo(x + cw, y + ch, x + cw - r, y + ch, r);
      ctx.lineTo(x + r, y + ch); ctx.arcTo(x, y + ch, x, y + ch - r, r);
      ctx.lineTo(x, y + r); ctx.arcTo(x, y, x + r, y, r);
      ctx.closePath(); ctx.fill();
      ctx.fillStyle = bg;
      for (let j = 0; j < 4; j++) {
        const rowW = cw * (0.35 + rnd() * 0.5);
        ctx.fillRect(-cw / 2 + 12 * dpr, -ch / 2 + (20 + j * 20) * dpr, rowW, 4 * dpr);
      }
      ctx.fillStyle = accent;
      ctx.beginPath(); ctx.arc(-cw / 2 + cw * 0.15, -ch / 2 + cw * 0.15, 6 * dpr, 0, Math.PI * 2); ctx.fill();
      ctx.restore();
    }
  }

  // Title
  ctx.font = `600 ${Math.floor(48 * dpr)}px 'Space Grotesk', sans-serif`;
  ctx.textAlign = 'left'; ctx.textBaseline = 'top';
  ctx.fillStyle = light; ctx.globalAlpha = 0.95;
  ctx.fillText(project.title, 32 * dpr, 28 * dpr);
  ctx.globalAlpha = 1;
  ctx.font = `500 ${Math.floor(12 * dpr)}px 'JetBrains Mono', monospace`;
  ctx.fillStyle = accent;
  ctx.fillText('//  ' + project.tagline.en.toUpperCase(), 32 * dpr, 86 * dpr);

  // Scanline
  ctx.globalAlpha = 0.06; ctx.fillStyle = '#000';
  for (let y = 0; y < h; y += 3 * dpr) ctx.fillRect(0, y, w, 1 * dpr);
  ctx.globalAlpha = 1;
}

window.Icon = Icon;
window.storeIcon = storeIcon;
window.drawKeyArt = drawKeyArt;