import type { FeatureIconKind, BrandVertical } from "@/lib/generation/brand-visual-style";
import type { SocialImageContext } from "@/lib/generation/social-image";
export function escapeXml(value: string): string {
return value
.replace(/&/g, "&")
.replace(//g, ">")
.replace(/"/g, """);
}
export function wrapText(text: string, maxChars: number, maxLines: number): string[] {
const words = text.split(/\s+/).filter(Boolean);
const lines: string[] = [];
let current = "";
for (const word of words) {
const next = current ? `${current} ${word}` : word;
if (next.length > maxChars && current) {
lines.push(current);
current = word;
} else {
current = next;
}
if (lines.length >= maxLines) break;
}
if (lines.length < maxLines && current) lines.push(current);
return lines.slice(0, maxLines);
}
export function multilineTextSvg(
x: number,
y: number,
lines: string[],
opts: {
fontSize: number;
fill: string;
lineHeight: number;
fontWeight?: string;
anchor?: "start" | "middle";
},
): string {
if (!lines.length) return "";
const weight = opts.fontWeight ?? "normal";
const anchor = opts.anchor ? ` text-anchor="${opts.anchor}"` : "";
const tspans = lines
.map(
(line, i) =>
`${escapeXml(line)}`,
)
.join("");
return `${tspans}`;
}
export function buildLogoBlock(
ctx: SocialImageContext,
opts: { x: number; y: number; maxWidth: number; maxHeight: number },
): string {
// Exact logo is stamped by FFmpeg after rasterize (FFmpeg cannot render SVG data-URL images).
// Reserve empty space only — no white/dark plate (those looked like stickers).
if (ctx.logoDataUrl) {
return ``;
}
return `${escapeXml(ctx.companyName)}`;
}
export function featureIconSvg(
vertical: BrandVertical,
kind: FeatureIconKind,
cx: number,
cy: number,
color: string,
size = 40,
): string {
const r = size / 2;
const s = size * 0.45;
const ox = cx - s / 2;
const oy = cy - s / 2;
let glyph = "";
if (kind === "challenge") {
glyph = ``;
} else if (kind === "impact") {
glyph = ``;
} else if (kind === "solution") {
glyph = ``;
} else if (kind === "service") {
if (vertical === "sms") {
glyph = ``;
} else if (vertical === "fax") {
glyph = ``;
} else if (vertical === "email") {
glyph = ``;
} else {
glyph = ``;
}
} else {
glyph = ``;
}
return `
${glyph}`;
}
export function buildVerticalProductPanel(
ctx: SocialImageContext,
box: { x: number; y: number; width: number; height: number },
): string {
const { primaryColor, accentColor, vertical } = ctx.brandStyle;
const { x, y, width, height } = box;
const labelLines = wrapText(ctx.brandStyle.primaryService, 22, 1);
const subLines = wrapText(ctx.brandStyle.tagline, 32, 2);
const base = `
`;
let illustration = "";
if (vertical === "sms") {
illustration = `
`;
} else if (vertical === "fax") {
illustration = `
`;
} else {
illustration = `
`;
}
const captionY = y + height - 120;
return `${base}${illustration}
${multilineTextSvg(x + width / 2, captionY + 32, labelLines.map((l) => l.toUpperCase()), {
fontSize: 20,
fontWeight: "bold",
fill: "white",
lineHeight: 24,
anchor: "middle",
})}
${multilineTextSvg(x + width / 2, captionY + 56, subLines, {
fontSize: 16,
fill: accentColor,
lineHeight: 20,
anchor: "middle",
})}`;
}
export function buildFooterBenefitsRow(
benefits: string[],
primaryColor: string,
canvasWidth = 1080,
): string {
const icons = ["$", "⏱", "🛡", "📈"];
const items = benefits.slice(0, 4);
if (!items.length) return "";
const slot = canvasWidth / Math.max(items.length, 1);
return items
.map((benefit, i) => {
const x = slot * i + slot / 2;
const icon = icons[i] ?? "•";
return `${icon} ${escapeXml(benefit.slice(0, 22))}`;
})
.join("");
}
/** Lifestyle photo zone + product infographic overlay (reference poster style). */
function buildProductInfographic(
cx: number,
cy: number,
vertical: BrandVertical,
primaryColor: string,
accentColor: string,
serviceLabel = "DOC",
): string {
if (vertical === "fax") {
const label = serviceLabel.slice(0, 8).toUpperCase() || "DOC";
return `
${escapeXml(label)}
`;
}
if (vertical === "sms") {
return `
`;
}
if (vertical === "email") {
return `
`;
}
return `
`;
}
export function buildPhotoHeroPanel(
ctx: SocialImageContext,
box: { x: number; y: number; width: number; height: number },
): string {
const { primaryColor, accentColor } = ctx.brandStyle;
const { x, y, width, height } = box;
const cx = x + width / 2;
const cy = y + height / 2 + 20;
const clipId = `photoClip${(ctx.layoutSeed ?? 0) % 9973}`;
// Prefer disk path for FFmpeg (data-URLs in SVG often fail to rasterize).
let imageHref: string | null = null;
if (ctx.heroImageFilePath?.trim()) {
const normalized = ctx.heroImageFilePath.replace(/\\/g, "/");
imageHref = normalized.match(/^[A-Za-z]:\//)
? `file:///${normalized}`
: normalized.startsWith("file:")
? normalized
: `file://${normalized}`;
} else if (ctx.heroImageDataUrl?.startsWith("data:image")) {
imageHref = ctx.heroImageDataUrl.replace(/"/g, """);
}
if (imageHref) {
return `
`;
}
// Fallback: product storytelling graphics (not a generic headshot silhouette).
const service = ctx.brandStyle.primaryService || ctx.brandStyle.solutionCategory || "OPS";
const info = buildProductInfographic(cx, cy - 20, ctx.brandStyle.vertical, primaryColor, accentColor, service);
return `
${info}
`;
}
export function buildRightPanelCta(ctx: SocialImageContext, box: { x: number; y: number; width: number; height: number }): string {
const { primaryColor, accentColor } = ctx.brandStyle;
const { x, y, width, height } = box;
const ctaLines = wrapText(ctx.brandStyle.ctaLine, 32, 2);
const subLines = wrapText(ctx.brandStyle.ctaSubline, 32, 1);
return `
${multilineTextSvg(x + 64, y + 32, ctaLines, { fontSize: 12, fontWeight: "bold", fill: "white", lineHeight: 15 })}
${multilineTextSvg(x + 64, y + 32 + ctaLines.length * 15 + 4, subLines, { fontSize: 11, fontWeight: "bold", fill: accentColor, lineHeight: 14 })}`;
}
export function buildRightPanelVisual(
ctx: SocialImageContext,
box?: { x: number; y: number; width: number; height: number },
): string {
const px = box?.x ?? 560;
const py = box?.y ?? 150;
const pw = box?.width ?? 480;
const photoH = box?.height ?? 520;
return buildPhotoHeroPanel(ctx, { x: px, y: py, width: pw, height: photoH });
}