Social Card Image Generator

async function generateSocialCard({ name, role, stats, avatar }) {
  const statsHtml = stats
    .map(s => `
      <div>
        <div style="font-size:28px;font-weight:700">${s.value}</div>
        <div style="font-size:12px;color:#64748b;text-transform:uppercase">${s.label}</div>
      </div>`)
    .join("");

  const html = `
  <div style="width:1200px;height:630px;
             background:linear-gradient(135deg,#0d1120,#080b12);
             display:flex;align-items:center;padding:0 80px;gap:64px;
             font-family:sans-serif;color:white">
    <div style="flex:1">
      <div style="font-size:14px;color:#22d3ee;margin-bottom:20px;
                  border:1px solid rgba(34,211,238,.3);display:inline-block;
                  padding:5px 14px;border-radius:100px">${role}</div>
      <div style="font-size:52px;font-weight:800;letter-spacing:-2px;
                  line-height:1.05;margin-bottom:12px">${name}</div>
      <div style="display:flex;gap:40px;margin-top:32px">${statsHtml}</div>
    </div>
    <div style="width:200px;height:200px;border-radius:24px;background:#1e2235;
                display:flex;align-items:center;justify-content:center;
                font-size:72px;font-weight:800">${avatar}</div>
  </div>
  `;

  const res = await fetch("https://renderpix.dev/v1/render", {
    method: "POST",
    headers: { "X-API-Key": process.env.RENDERPIX_KEY },
    body: JSON.stringify({ html, width: 1200, height: 630, format: "png" }),
  });
  return res.arrayBuffer();
}