import {
BRANCO,
contraste,
escaparHtml,
familiaDaFonte,
linkDasFontes,
misturar,
pesoDoTitulo,
QUASE_PRETO,
srcSeguro,
textoSobre,
type ImagemDoBanner,
} from "./gerador-de-banner-modelos.ts";
/*
* O desenho da imagem de produto que o assistente gera (gerar_imagem_do_produto).
* HTML puro, testado sem banco; quem fotografa é o Chrome do gerador de
* banners. Dois jeitos:
* - "foto em fundo": a foto do produto centralizada num fundo liso (branco,
* a cor da loja ou a escolhida), com sombra suave quando é recorte, e um
* nome opcional embaixo. Não inventa nada da peça: só arruma a foto.
* - "cartão com nome": sem foto, o nome do produto grande sobre a cor; serve
* de imagem provisória até a foto de verdade chegar.
*/
export const MODOS_DA_IMAGEM = ["foto em fundo", "cartão com nome"] as const;
export type ModoDaImagem = (typeof MODOS_DA_IMAGEM)[number];
export const FORMATOS_DA_IMAGEM = {
quadrado: { largura: 1200, altura: 1200 },
retrato: { largura: 1200, altura: 1500 },
} as const;
export type FormatoDaImagem = keyof typeof FORMATOS_DA_IMAGEM;
export type PedidoDaImagem = {
modo: ModoDaImagem;
formato: FormatoDaImagem;
fundo: string;
imagem: ImagemDoBanner | null;
titulo: string;
subtitulo: string;
fonte: string;
};
/** A cor do texto sobre o fundo: a que se lê melhor. */
export function corDoTextoSobre(fundo: string) {
return textoSobre(fundo) === BRANCO ? BRANCO : QUASE_PRETO;
}
export function htmlDaImagemDoProduto(pedido: PedidoDaImagem): string {
const { largura, altura } = FORMATOS_DA_IMAGEM[pedido.formato];
const fundo = pedido.fundo;
const texto = corDoTextoSobre(fundo);
const suave = misturar(texto, fundo, 0.35);
const fonte = pedido.fonte;
const familia = `'${familiaDaFonte(fonte)}', 'Inter', system-ui, sans-serif`;
const temTitulo = pedido.titulo.trim().length > 0;
const src = pedido.imagem ? srcSeguro(pedido.imagem.src) : null;
let miolo: string;
if (pedido.modo === "foto em fundo" && src) {
const recorte = pedido.imagem!.tipo !== "foto";
const sombra = recorte ? "filter:drop-shadow(0 28px 34px rgba(0,0,0,.18)) drop-shadow(0 6px 10px rgba(0,0,0,.10));" : "box-shadow:0 26px 60px rgba(0,0,0,.18);border-radius:18px;";
const espacoDoTexto = temTitulo ? 0.2 : 0;
miolo = `
${temTitulo ? `
${escaparHtml(pedido.titulo)}
${pedido.subtitulo ? `
${escaparHtml(pedido.subtitulo)}
` : ""}
` : ""}`;
} else {
miolo = `
${escaparHtml(pedido.titulo || "Produto")}
${pedido.subtitulo ? `
${escaparHtml(pedido.subtitulo)}
` : ""}
`;
}
return `
${miolo}
`;
}
/** O fundo pedido, conferido: só cor em hexadecimal. */
export function fundoValido(cor: string | null | undefined, padrao: string) {
const limpa = String(cor ?? "").trim();
return /^#[0-9a-f]{6}$/i.test(limpa) ? limpa.toUpperCase() : padrao;
}
/** Texto escuro em fundo escuro (e o contrário) se lê mal: o aviso da prévia. */
export function contrasteBaixo(fundo: string) {
return contraste(corDoTextoSobre(fundo), fundo) < 3;
}