import type { FeatureIconKind } from "@/lib/generation/brand-visual-style";
import type { SocialImageContext } from "@/lib/generation/social-image";
import {
buildLogoBlock,
buildVerticalProductPanel,
escapeXml,
featureIconSvg,
multilineTextSvg,
wrapText,
} from "@/lib/generation/brand-svg-shared";
export const STORY_SLIDE_COUNT = 5;
/** One vertical 9:16 frame for multi-screen marketing video. */
export function buildStorySlideSvg(ctx: SocialImageContext, slideIndex: number): string {
const style = ctx.brandStyle;
const w = 1080;
const h = 1920;
const idx = Math.max(0, Math.min(slideIndex, STORY_SLIDE_COUNT - 1));
const seed = ctx.layoutSeed ?? 0;
// Per-regenerate composition shift so every video scene layout differs.
const layoutShift = (seed + idx * 17) % 3;
const primary = style.primaryColor;
const accent = style.accentColor;
const headline =
idx === 0
? ctx.headline
: idx === 1
? ctx.problemTheme || ctx.headline
: idx === 2
? ctx.subheadline || ctx.brandStyle.tagline
: idx === 3
? ctx.brandResponse || ctx.brandStyle.primaryService || ctx.headline
: ctx.brandStyle.ctaLine || "Ready to get started?";
const body =
idx === 0
? style.tagline
: idx === 1
? ctx.problemTheme
: idx === 2
? ctx.subheadline
: idx === 3
? ctx.brandResponse || style.features.find((f) => f.icon === "solution")?.detail || style.primaryService
: [style.website, style.contactPhone, style.contactEmail].filter(Boolean).join(" · ") ||
`${style.ctaSubline}`;
const slideLabel =
idx === 0
? "THE HOOK"
: idx === 1
? "THE CHALLENGE"
: idx === 2
? "THE IMPACT"
: idx === 3
? style.primaryService.slice(0, 18).toUpperCase() || "HOW WE HELP"
: "TAKE ACTION";
const iconKind: FeatureIconKind =
idx === 0 ? "benefit" : idx === 1 ? "challenge" : idx === 2 ? "impact" : idx === 3 ? "solution" : "service";
const headlineLines = wrapText(headline, idx === 0 ? 18 : 22, idx === 0 ? 3 : 2);
const bodyLines = wrapText(body, 36, 4);
const logoX = layoutShift === 1 ? 812 : 48;
const logo = buildLogoBlock(ctx, { x: logoX, y: 36, maxWidth: 220, maxHeight: 72 });
const panelY = layoutShift === 2 ? 880 : 920;
const productPanel = buildVerticalProductPanel(ctx, {
x: layoutShift === 1 ? 60 : 80,
y: panelY,
width: 920,
height: 560,
});
const stepDots = Array.from({ length: STORY_SLIDE_COUNT }, (_, i) => {
const cx = 540 + (i - 2) * 56;
const fill = i === idx ? accent : "#cbd5e1";
return ``;
}).join("");
const contentX = layoutShift === 1 ? 100 : 80;
const headlineSvg = multilineTextSvg(contentX, 280, headlineLines, {
fontSize: idx === 0 ? 52 : 44,
fontWeight: "bold",
fill: primary,
lineHeight: 58,
});
const accentLine = ``;
const bodySvg = multilineTextSvg(contentX, 320 + headlineLines.length * 58 + 48, bodyLines, {
fontSize: 28,
fill: "#334155",
lineHeight: 38,
});
const iconX = layoutShift === 1 ? 120 : 920;
const iconBlock = featureIconSvg(style.vertical, iconKind, iconX, 220, accent, 56);
const badgeX = contentX;
const slideBadge = `
${escapeXml(slideLabel)}`;
const ctaBlock =
idx === 4
? `
${escapeXml(style.ctaLine.slice(0, 40))}
${escapeXml(ctx.companyName)} · ${escapeXml(style.website)}`
: "";
const seedMark = `shift-${layoutShift}`;
const svg = ``;
return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
}
/** Decode data-URL SVG to raw markup for file write. */
export function decodeSvgDataUrl(dataUrl: string): string | null {
if (!dataUrl.startsWith("data:image/svg+xml")) return null;
if (dataUrl.includes(";base64,")) {
const b64 = dataUrl.split(";base64,")[1];
if (!b64) return null;
return Buffer.from(b64, "base64").toString("utf-8");
}
const encoded = dataUrl.replace(/^data:image\/svg\+xml;charset=utf-8,/, "");
try {
return decodeURIComponent(encoded);
} catch {
return null;
}
}