generate-icons.js

const fs = require('fs');
const path = require('path');
const sharp = require('sharp');

const outDir = path.join(__dirname, 'images', 'candidates');
fs.mkdirSync(outDir, { recursive: true });

const ORANGE = '#D97757';
const DEEP_ORANGE = '#B8533A';
const BLUE = '#1E6FBA';
const DARK_BLUE = '#1A3A5C';

// ── Concept 1: The Escaping C ─────────────────────────────────────────────
// A circle with a > shaped cutout on the right

const c1a = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
  <rect width="256" height="256" rx="44" fill="#F5F5F5"/>
  <defs>
    <mask id="m1a">
      <rect width="256" height="256" fill="white"/>
      <polygon points="160,128 230,72 230,184" fill="black"/>
    </mask>
  </defs>
  <circle cx="128" cy="128" r="88" fill="#1A1A1A" mask="url(#m1a)"/>
</svg>`;

const c1b = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
  <rect width="256" height="256" rx="44" fill="#FFF8F5"/>
  <defs>
    <mask id="m1b">
      <rect width="256" height="256" fill="white"/>
      <polygon points="155,128 235,65 235,191" fill="black"/>
    </mask>
  </defs>
  <circle cx="128" cy="128" r="92" fill="${ORANGE}" mask="url(#m1b)"/>
</svg>`;

const c1c = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
  <rect width="256" height="256" rx="44" fill="${DARK_BLUE}"/>
  <defs>
    <mask id="m1c">
      <rect width="256" height="256" fill="white"/>
      <polygon points="158,128 232,68 232,188" fill="black"/>
    </mask>
  </defs>
  <circle cx="128" cy="128" r="90" fill="${ORANGE}" mask="url(#m1c)"/>
</svg>`;

// ── Concept 2: The Extracted Sparkle ──────────────────────────────────────
// 4-point star with the right point detached and flying out

function sparkle(fill, bg, detachedFill, gap) {
  // 4-point star centered at 118,128. Points at top/bottom/left. Right point detached.
  const cx = 118, cy = 128;
  const r = 72, w = 22; // radius and waist width
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
  <rect width="256" height="256" rx="44" fill="${bg}"/>
  <!-- Main star body (3 points + center) -->
  <path d="M ${cx} ${cy-r}
           Q ${cx+w} ${cy-w}, ${cx+w+8} ${cy}
           Q ${cx+w} ${cy+w}, ${cx} ${cy+r}
           Q ${cx-w} ${cy+w}, ${cx-r} ${cy}
           Q ${cx-w} ${cy-w}, ${cx} ${cy-r} Z" fill="${fill}"/>
  <!-- Detached right point (arrow-like) flying outward -->
  <path d="M ${cx+w+8+gap} ${cy}
           L ${cx+r+gap} ${cy}
           L ${cx+w+8+gap} ${cy}" fill="none" stroke="${detachedFill}" stroke-width="0"/>
  <polygon points="${cx+w+gap+4},${cy-w} ${cx+r+gap+8},${cy} ${cx+w+gap+4},${cy+w}"
           fill="${detachedFill}"/>
</svg>`;
}

const c2a = sparkle('#1A1A1A', '#F5F5F5', '#1A1A1A', 12);
const c2b = sparkle(ORANGE, '#FFF8F5', ORANGE, 14);
const c2c = sparkle(ORANGE, DARK_BLUE, '#E8DDD5', 16);

// ── Concept 3: The Origami Bubble ─────────────────────────────────────────
// Chat bubble with dog-ear fold on top-right, terminal cursor tail

function bubble(fill, bg, foldFill, foldLine) {
  const foldSize = 28;
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
  <rect width="256" height="256" rx="44" fill="${bg}"/>
  <defs>
    <mask id="mbub">
      <rect width="256" height="256" fill="white"/>
      <!-- Cut the dog-ear triangle -->
      <polygon points="${200-foldSize},48 ${200},48 ${200},${48+foldSize}" fill="black"/>
    </mask>
  </defs>
  <!-- Main bubble body -->
  <path d="M 68 48
           L ${200-foldSize} 48
           L 200 ${48+foldSize}
           L 200 164
           Q 200 176, 188 176
           L 108 176
           L 78 206
           L 78 176
           L 68 176
           Q 56 176, 56 164
           L 56 60
           Q 56 48, 68 48 Z" fill="${fill}"/>
  <!-- Dog-ear fold triangle -->
  <polygon points="${200-foldSize},48 ${200},${48+foldSize} ${200-foldSize},${48+foldSize}"
           fill="${foldFill}" opacity="0.7"/>
  <!-- Fold crease line -->
  <line x1="${200-foldSize}" y1="48" x2="${200}" y2="${48+foldSize}"
        stroke="${foldLine}" stroke-width="1.5" opacity="0.3"/>
  <!-- Terminal cursor (underscore in tail area) -->
  <rect x="82" y="196" width="16" height="3" rx="1.5" fill="${fill}" opacity="0.6"/>
</svg>`;
}

const c3a = bubble('#1A1A1A', '#F5F5F5', '#999999', '#666666');
const c3b = bubble(ORANGE, '#FFF8F5', '#F0C5B0', DEEP_ORANGE);
const c3c = bubble(ORANGE, DARK_BLUE, BLUE, '#88BBDD');

// ── Concept 4: The Leaking Slash ──────────────────────────────────────────
// Two slashes //, right one drips into a droplet

function slashes(fill, bg, dropFill) {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="256" height="256">
  <rect width="256" height="256" rx="44" fill="${bg}"/>
  <!-- Left slash -->
  <rect x="72" y="52" width="20" height="120" rx="10" fill="${fill}"
        transform="rotate(-16, 82, 112)"/>
  <!-- Right slash (upper part only, cut short) -->
  <rect x="132" y="52" width="20" height="84" rx="10" fill="${fill}"
        transform="rotate(-16, 142, 94)"/>
  <!-- Droplet detaching from right slash bottom -->
  <g transform="translate(148, 168)">
    <path d="M 0,-8 Q 8,-2 8,8 Q 8,18 0,18 Q -8,18 -8,8 Q -8,-2 0,-8 Z"
          fill="${dropFill}"/>
  </g>
  <!-- Tiny thread connecting slash to drop -->
  <line x1="144" y1="148" x2="147" y2="160" stroke="${fill}" stroke-width="2.5"
        stroke-linecap="round" opacity="0.4"/>
</svg>`;
}

const c4a = slashes('#1A1A1A', '#F5F5F5', '#1A1A1A');
const c4b = slashes(ORANGE, '#FFF8F5', DEEP_ORANGE);
const c4c = slashes(ORANGE, DARK_BLUE, '#E8DDD5');

// ── Generate all PNGs ─────────────────────────────────────────────────────
const all = {
  'c1a_escaping_c_black': c1a,
  'c1b_escaping_c_orange': c1b,
  'c1c_escaping_c_contrast': c1c,
  'c2a_sparkle_black': c2a,
  'c2b_sparkle_orange': c2b,
  'c2c_sparkle_contrast': c2c,
  'c3a_origami_black': c3a,
  'c3b_origami_orange': c3b,
  'c3c_origami_contrast': c3c,
  'c4a_slash_black': c4a,
  'c4b_slash_orange': c4b,
  'c4c_slash_contrast': c4c,
};

async function main() {
  for (const [name, svg] of Object.entries(all)) {
    const svgPath = path.join(outDir, name + '.svg');
    const pngPath = path.join(outDir, name + '.png');
    fs.writeFileSync(svgPath, svg);
    await sharp(Buffer.from(svg)).resize(256, 256).png().toFile(pngPath);
    console.log('OK', name);
  }
  console.log('Done! Generated', Object.keys(all).length, 'icons');
}

main().catch(console.error);