// Generate the social preview image (public/og.png, 1200x630) from an inline SVG.
// Run: node scripts/gen-og.mjs  (or: npm run gen:og)
// Self-hosted asset → no third-party OG service, nothing external at runtime.
import sharp from "sharp";
import { fileURLToPath } from "node:url";

const out = fileURLToPath(new URL("../public/og.png", import.meta.url));

const W = 1200;
const H = 630;

const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}">
  <defs>
    <!-- Electric cyan->violet->magenta — mirrors the live hero nameplate. -->
    <linearGradient id="title" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#3fbaf5"/>
      <stop offset="0.5" stop-color="#9a7cf2"/>
      <stop offset="1" stop-color="#e879f9"/>
    </linearGradient>
    <linearGradient id="bar" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#3fbaf5"/>
      <stop offset="1" stop-color="#e879f9"/>
    </linearGradient>
    <radialGradient id="glow" cx="14%" cy="0%" r="85%">
      <stop offset="0" stop-color="#3fbaf5" stop-opacity="0.20"/>
      <stop offset="55%" stop-color="#3fbaf5" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="glow2" cx="92%" cy="100%" r="70%">
      <stop offset="0" stop-color="#e879f9" stop-opacity="0.16"/>
      <stop offset="60%" stop-color="#e879f9" stop-opacity="0"/>
    </radialGradient>
    <pattern id="grid" width="44" height="44" patternUnits="userSpaceOnUse">
      <path d="M44 0H0V44" fill="none" stroke="#3fbaf5" stroke-opacity="0.05" stroke-width="1"/>
    </pattern>
  </defs>

  <rect width="${W}" height="${H}" fill="#090c14"/>
  <rect width="${W}" height="${H}" fill="url(#grid)"/>
  <rect width="${W}" height="${H}" fill="url(#glow)"/>
  <rect width="${W}" height="${H}" fill="url(#glow2)"/>
  <rect x="0" y="0" width="${W}" height="6" fill="url(#bar)"/>

  <text x="80" y="150" font-family="monospace" font-size="24" letter-spacing="4"
        fill="#3fbaf5">~/ PLATFORM &amp; INFRASTRUCTURE ENGINEER</text>

  <text x="78" y="300" font-family="sans-serif" font-size="118" font-weight="700"
        letter-spacing="-3" fill="url(#title)">Jonathon Wright</text>

  <!-- Editorial italic serif subtitle (smaller, for hierarchy). -->
  <text x="80" y="386" font-family="C059, serif" font-style="italic" font-size="35"
        fill="#aeb9c9">Secure Kubernetes platforms &#183; automated fleets</text>
  <text x="80" y="434" font-family="C059, serif" font-style="italic" font-size="35"
        fill="#aeb9c9">&#183; GPU-backed edge systems</text>

  <text x="80" y="560" font-family="monospace" font-size="20" fill="#8aa0b8">RHEL <tspan fill="#3fbaf5">&#9656;</tspan> Kubernetes <tspan fill="#3fbaf5">&#9656;</tspan> GitOps <tspan fill="#3fbaf5">&#9656;</tspan> Ansible <tspan fill="#3fbaf5">&#9656;</tspan> Observability <tspan fill="#3fbaf5">&#9656;</tspan> Edge AI</text>
  <text x="${W - 80}" y="560" text-anchor="end" font-family="monospace" font-size="22"
        fill="#e879f9">www.bztmon.com</text>
</svg>`;

await sharp(Buffer.from(svg)).png().toFile(out);
console.log("wrote", out);
