import { escalarPeca, novoId, solida, type EfeitoDaPeca, type Peca, type PecaDeForma, type PecaDeIcone, type PecaDeTexto, type Pintura } from "./documento";
import { ICONES_EXTRAS } from "./icones-extras";
import { forma as formaPronta, texto as textoPronto, type Medida } from "./pecas-novas";
import { Caneta, cartaoRecortado, circuloDeNos, escudo, linhaReta, poligonoRedondo, roseta, serrilha, silhueta } from "./silhuetas";

/*
 * Cupons, vales e selos de venda prontos: cada um é um conjunto de peças
 * (agrupadas, andam juntas) com a silhueta de verdade (mordida, serrilha,
 * furo de etiqueta), letras escolhidas a dedo e tudo editável. Desenhados
 * numa prancha de 1000 de largura e escalados para a arte na hora de pôr.
 */

export type ElementoPronto = { chave: string; nome: string; busca: string; criar: (m: Medida) => Peca[] };

const lado = (m: Medida) => Math.min(m.largura, m.altura);
const SEM: Medida = { largura: 1000, altura: 1000 };

/* ----------------------------------------------------------- ajudantes */

type CamposDoTexto = Partial<PecaDeTexto> & { cor?: string };
function t(texto: string, x: number, y: number, w: number, h: number, campos: CamposDoTexto = {}): PecaDeTexto {
  const { cor, ...resto } = campos;
  return { ...textoPronto(SEM, { texto, tamanho: h * 0.8, linha: 1, ...(cor ? { pintura: solida(cor) } : {}), ...resto }, w, h), x, y, nome: texto.split("\n")[0].slice(0, 30) };
}
function f(tipo: PecaDeForma["forma"], x: number, y: number, w: number, h: number, cor: string, campos: Partial<PecaDeForma> = {}): PecaDeForma {
  return { ...formaPronta(SEM, tipo, w, h, cor, { raio: 0, ...campos }), x, y };
}
function ic(chave: string, x: number, y: number, tamanho: number, cor: string, espessura = 1.8, campos: Partial<PecaDeIcone> = {}): PecaDeIcone {
  const desenho = ICONES_EXTRAS[chave];
  return { id: novoId("ic"), tipo: "icone", nome: "Ícone", x, y, w: tamanho, h: tamanho, rot: 0, opacidade: 1, icone: desenho ? `lucide-${chave}` : chave, ...(desenho ? { desenho } : {}), pintura: solida(cor), espessura, preenchido: false, sombra: null, ...campos };
}
const linear = (cor: string, cor2: string, angulo = 135, paradas?: Pintura["paradas"]): Pintura => ({ tipo: "linear", cor, cor2, angulo, ...(paradas ? { paradas } : {}) });
const sombraMacia = (y = 18, desfoque = 36, opacidade = 0.28, cor = "#000000"): EfeitoDaPeca => ({ tipo: "sombra", cor, x: 0, y, desfoque, opacidade });
const brilho = (cor: string, desfoque = 30, opacidade = 0.75): EfeitoDaPeca => ({ tipo: "brilho", cor, x: 0, y: 0, desfoque, opacidade });

/** A peça na escala, com os efeitos (sombra, brilho, contorno) também. */
function escalar(p: Peca, k: number): Peca {
  const e = escalarPeca(p, k);
  const efeitos = p.efeitos?.map((x) => ({ ...x, x: x.x * k, y: x.y * k, desfoque: x.desfoque * k, ...(x.largura !== undefined ? { largura: x.largura * k } : {}) }));
  return { ...e, ...(efeitos ? { efeitos } : {}) } as Peca;
}

/** As peças giradas juntas em volta de um ponto (o carimbo torto): cada uma anda no círculo e gira o mesmo tanto. */
function girarJuntas(pecas: Peca[], cx: number, cy: number, graus: number): Peca[] {
  const a = (graus * Math.PI) / 180;
  return pecas.map((p) => {
    const px = p.x + p.w / 2 - cx;
    const py = p.y + p.h / 2 - cy;
    const nx = cx + px * Math.cos(a) - py * Math.sin(a);
    const ny = cy + px * Math.sin(a) + py * Math.cos(a);
    return { ...p, x: nx - p.w / 2, y: ny - p.h / 2, rot: p.rot + graus } as Peca;
  });
}

/** O desenho da prancha (larguraLocal × alturaLocal) no meio da arte, ocupando `fracao` do lado menor, num grupo só. */
function montar(m: Medida, larguraLocal: number, alturaLocal: number, fracao: number, pecas: Peca[]): Peca[] {
  const k = (lado(m) * fracao) / Math.max(larguraLocal, alturaLocal);
  const ox = (m.largura - larguraLocal * k) / 2;
  const oy = (m.altura - alturaLocal * k) / 2;
  const grupo = novoId("g");
  return pecas.map((p) => ({ ...escalar(p, k), x: ox + p.x * k, y: oy + p.y * k, grupo }) as Peca);
}

/* -------------------------------------------------------------- cupons */

export const CUPONS_PRONTOS: ElementoPronto[] = [
  {
    chave: "cupom-classico",
    nome: "Cupom com canhoto",
    busca: "cupom desconto porcentagem canhoto codigo",
    criar: (m) => {
      const W = 1000;
      const H = 420;
      const corte = 0.68;
      const base = silhueta([cartaoRecortado(W, H, { raio: 34, topo: { onde: [corte], raio: 30 }, base: { onde: [corte], raio: 30 } })], 0, 0, linear("#FF9A3C", "#FF4D1A", 120), { nome: "Cupom", efeitos: [sombraMacia(20, 40, 0.3, "#7C2D12")] });
      return montar(m, W, H, 0.82, [
        base,
        t("CUPOM DE DESCONTO", 64, 62, 560, 40, { fonte: "montserrat", peso: 800, tamanho: 26, espaco: 0.32, cor: "#FFF1E6", alinhamento: "esquerda" }),
        t("20%", 52, 112, 440, 200, { fonte: "anton", peso: 400, tamanho: 180, cor: "#FFFFFF", alinhamento: "esquerda", efeitos: [sombraMacia(8, 0, 0.18, "#7C2D12")] }),
        t("OFF", 470, 140, 190, 100, { fonte: "anton", peso: 400, tamanho: 96, cor: "#3B0A00", alinhamento: "esquerda" }),
        t("na primeira\ncompra", 472, 244, 190, 72, { fonte: "poppins", peso: 600, tamanho: 26, linha: 1.2, cor: "#FFF1E6", alinhamento: "esquerda" }),
        linhaReta(W * corte, 50, W * corte, H - 50, "#FFFFFF", 5, "pontilhado", { opacidade: 0.75 }),
        t("USE O CÓDIGO", 712, 112, 252, 34, { fonte: "montserrat", peso: 800, tamanho: 22, espaco: 0.2, cor: "#FFF1E6" }),
        silhueta([cartaoRecortado(246, 86, { raio: 14 })], 716, 160, solida("#FFFFFF"), { nome: "Código", efeitos: [sombraMacia(6, 14, 0.18, "#7C2D12")] }),
        t("BEMVINDO", 716, 172, 246, 62, { fonte: "space-grotesk", peso: 700, tamanho: 40, espaco: 0.06, cor: "#C2410C" }),
        t("válido até 30/11", 712, 268, 252, 34, { fonte: "poppins", peso: 500, tamanho: 22, cor: "#FFE4D2" }),
      ]);
    },
  },
  {
    chave: "frete-serrilhado",
    nome: "Frete grátis serrilhado",
    busca: "frete gratis cupom selo serrilhado entrega caminhao",
    criar: (m) => {
      const W = 1000;
      const H = 400;
      const d = { raio: 15, onde: [] as number[] };
      const base = silhueta(
        [cartaoRecortado(W, H, { topo: { ...d, onde: serrilha(W, 15, 50) }, base: { ...d, onde: serrilha(W, 15, 50) }, esquerda: { ...d, onde: serrilha(H, 15, 50) }, direita: { ...d, onde: serrilha(H, 15, 50) } })],
        0,
        0,
        linear("#22C55E", "#15803D", 135),
        { nome: "Selo serrilhado", efeitos: [sombraMacia(16, 34, 0.25, "#052E16")] },
      );
      const moldura = silhueta([cartaoRecortado(W - 96, H - 96, { raio: 18 })], 48, 48, { tipo: "nenhuma", cor: "#FFFFFF", cor2: "#FFFFFF", angulo: 0 }, { nome: "Moldura", cor: "#DCFCE7", espessura: 3, tracejado: "tracejado", opacidade: 0.8 });
      return montar(m, W, H, 0.8, [
        base,
        moldura,
        f("circulo", 96, 104, 192, 192, "#FFFFFF", { efeitos: [sombraMacia(8, 18, 0.2, "#052E16")] }),
        ic("caminhao-lucide", 140, 148, 104, "#15803D", 2),
        t("FRETE", 320, 72, 600, 120, { fonte: "anton", peso: 400, tamanho: 112, espaco: 0.03, cor: "#FFFFFF", alinhamento: "esquerda" }),
        t("GRÁTIS", 322, 196, 600, 90, { fonte: "anton", peso: 400, tamanho: 80, espaco: 0.1, cor: "#BBF7D0", alinhamento: "esquerda" }),
        t("nas compras acima de R$ 199", 324, 294, 600, 40, { fonte: "poppins", peso: 600, tamanho: 27, cor: "#F0FDF4", alinhamento: "esquerda" }),
      ]);
    },
  },
  {
    chave: "vale-presente",
    nome: "Vale-presente",
    busca: "vale presente gift card cartao presente laco dourado",
    criar: (m) => {
      const W = 1000;
      const H = 560;
      const ouro = linear("#F7E08A", "#B8860B", 120, [{ pos: 0.45, cor: "#E9C25A" }, { pos: 0.7, cor: "#FFF1B8" }]);
      const base = silhueta([cartaoRecortado(W, H, { raio: 40 })], 0, 0, linear("#2A1145", "#0F0620", 140), { nome: "Cartão", efeitos: [sombraMacia(22, 44, 0.35)] });
      return montar(m, W, H, 0.8, [
        base,
        f("retangulo", 250, 0, 64, H, "#E9C25A", { pintura: ouro, nome: "Fita" }),
        f("retangulo", 0, 372, W, 64, "#E9C25A", { pintura: ouro, nome: "Fita" }),
        ic("laco-presente", 182, 296, 200, "#F2D27A", 2, { preenchido: true, pintura: ouro, efeitos: [sombraMacia(8, 14, 0.4)] }),
        t("Vale-presente", 380, 70, 580, 120, { fonte: "great-vibes", peso: 400, tamanho: 104, cor: "#F2D27A", alinhamento: "esquerda", pintura: ouro }),
        t("R$ 100", 384, 186, 580, 150, { fonte: "playfair-display", peso: 900, tamanho: 140, cor: "#FFFFFF", alinhamento: "esquerda" }),
        t("PARA USAR EM TODA A LOJA", 392, 460, 580, 36, { fonte: "montserrat", peso: 700, tamanho: 24, espaco: 0.28, cor: "#D8C7F0", alinhamento: "esquerda" }),
        t("N.º 0001", 40, 470, 190, 36, { fonte: "space-grotesk", peso: 500, tamanho: 22, espaco: 0.12, cor: "#A28CC6", alinhamento: "esquerda" }),
      ]);
    },
  },
  {
    chave: "etiqueta-de-preco",
    nome: "Etiqueta de preço",
    busca: "etiqueta preco de por oferta furo tag",
    criar: (m) => {
      const W = 1000;
      const H = 440;
      const ponta = 190;
      const contorno = poligonoRedondo(
        [
          { x: ponta, y: 0 },
          { x: W, y: 0 },
          { x: W, y: H },
          { x: ponta, y: H },
          { x: 0, y: H / 2 },
        ],
        [30, 34, 34, 30, 26],
      );
      const base = silhueta([contorno, circuloDeNos(150, H / 2, 30)], 0, 0, linear("#FB3B6A", "#BE123C", 120), { nome: "Etiqueta", efeitos: [sombraMacia(18, 36, 0.3, "#4C0519")] });
      const aro = f("circulo", 108, H / 2 - 42, 84, 84, "#FFFFFF", { pintura: { tipo: "nenhuma", cor: "#FFFFFF", cor2: "#FFFFFF", angulo: 0 }, borda: { cor: "#FFE4E6", largura: 7 }, nome: "Ilhós" });
      return montar(m, W, H, 0.8, [
        base,
        aro,
        silhueta([cartaoRecortado(W - ponta - 90, H - 80, { raio: 22 })], ponta + 50, 40, { tipo: "nenhuma", cor: "#FFFFFF", cor2: "#FFFFFF", angulo: 0 }, { nome: "Fio", cor: "#FFFFFF", espessura: 3, opacidade: 0.45 }),
        t("OFERTA", ponta + 90, 72, 640, 46, { fonte: "montserrat", peso: 800, tamanho: 30, espaco: 0.42, cor: "#FFE4E6" }),
        t("de R$ 89,90", ponta + 90, 124, 640, 50, { fonte: "poppins", peso: 500, tamanho: 36, riscado: true, cor: "#FECDD3" }),
        t("R$ 59,90", ponta + 90, 170, 640, 170, { fonte: "anton", peso: 400, tamanho: 162, cor: "#FFFFFF", efeitos: [sombraMacia(6, 0, 0.18, "#4C0519")] }),
        t("ou 3x de R$ 19,97", ponta + 90, 342, 640, 40, { fonte: "poppins", peso: 600, tamanho: 28, cor: "#FFE4E6" }),
      ]);
    },
  },
  {
    chave: "cupom-vertical",
    nome: "Cupom para story",
    busca: "cupom story vertical codigo copiar primeira compra",
    criar: (m) => {
      const W = 600;
      const H = 1000;
      const yc = 640;
      const base = silhueta([cartaoRecortado(W, H, { raio: 44, esquerda: { onde: [yc / H], raio: 40 }, direita: { onde: [yc / H], raio: 40 } })], 0, 0, solida("#FFFFFF"), { nome: "Cupom", efeitos: [sombraMacia(24, 50, 0.3, "#2E1065")] });
      /* A parte de cima, colorida: os cantos redondos em cima e as meias-mordidas embaixo. */
      const r = 44;
      const contornoDeCima = new Caneta()
        .ate(r, 0)
        .arco(W - r, r, r, -90, 0)
        .ate(W, yc - 40)
        .arco(W, yc, 40, -90, -180)
        .ate(40, yc)
        .arco(0, yc, 40, 0, -90)
        .ate(0, r)
        .arco(r, r, r, 180, 270)
        .fechar();
      const cima = silhueta(
        [contornoDeCima],
        0,
        0,
        linear("#8B5CF6", "#5B21B6", 150),
        { nome: "Parte de cima" },
      );
      return montar(m, W, H, 0.82, [
        base,
        cima,
        f("circulo", 360, -120, 380, 380, "#FFFFFF", { opacidade: 0.08, nome: "Luz" }),
        t("PRIMEIRA COMPRA", 40, 96, 520, 44, { fonte: "montserrat", peso: 800, tamanho: 30, espaco: 0.3, cor: "#EDE9FE" }),
        t("15%", 40, 150, 520, 270, { fonte: "anton", peso: 400, tamanho: 260, cor: "#FFFFFF", efeitos: [sombraMacia(10, 0, 0.2, "#2E1065")] }),
        t("OFF EM TUDO", 40, 420, 520, 80, { fonte: "anton", peso: 400, tamanho: 74, espaco: 0.06, cor: "#FDE68A" }),
        t("para clientes novos", 40, 510, 520, 44, { fonte: "poppins", peso: 500, tamanho: 30, cor: "#EDE9FE" }),
        linhaReta(70, yc, W - 70, yc, "#C4B5FD", 6, "pontilhado"),
        t("Copie o código", 40, 700, 520, 44, { fonte: "poppins", peso: 600, tamanho: 30, cor: "#6B21A8" }),
        silhueta([cartaoRecortado(400, 120, { raio: 22 })], 100, 760, { tipo: "solida", cor: "#F5F3FF", cor2: "#F5F3FF", angulo: 0 }, { nome: "Caixa do código", cor: "#8B5CF6", espessura: 4, tracejado: "tracejado" }),
        t("OLA15", 120, 776, 300, 88, { fonte: "space-grotesk", peso: 700, tamanho: 64, espaco: 0.12, cor: "#4C1D95" }),
        ic("copiar", 420, 796, 50, "#7C3AED", 2.2),
        t("válido por 7 dias", 40, 906, 520, 40, { fonte: "poppins", peso: 500, tamanho: 26, cor: "#8B7FA8" }),
      ]);
    },
  },
  {
    chave: "leve-pague",
    nome: "Leve 3 pague 2",
    busca: "leve pague promocao combo cupom ondulado amarelo",
    criar: (m) => {
      const W = 1000;
      const H = 420;
      const ondas = { raio: 26, onde: serrilha(H, 26, 70, 46), fora: true };
      const base = silhueta([cartaoRecortado(W - 52, H, { direita: ondas, esquerda: ondas })], 26, 0, linear("#FDE047", "#FACC15", 160), { nome: "Cupom ondulado", efeitos: [sombraMacia(16, 32, 0.25, "#713F12")] });
      return montar(m, W, H, 0.82, [
        base,
        t("LEVE", 92, 60, 260, 150, { fonte: "anton", peso: 400, tamanho: 128, cor: "#1C1917", alinhamento: "esquerda" }),
        t("3", 334, 60, 140, 150, { fonte: "anton", peso: 400, tamanho: 128, cor: "#DC2626", alinhamento: "esquerda", efeitos: [sombraMacia(6, 0, 0.2, "#7F1D1D")] }),
        t("PAGUE", 92, 210, 320, 150, { fonte: "anton", peso: 400, tamanho: 128, cor: "#1C1917", alinhamento: "esquerda" }),
        t("2", 410, 210, 140, 150, { fonte: "anton", peso: 400, tamanho: 128, cor: "#DC2626", alinhamento: "esquerda", efeitos: [sombraMacia(6, 0, 0.2, "#7F1D1D")] }),
        f("retangulo", 590, 70, 6, 280, "#1C1917", { opacidade: 0.15, nome: "Divisória" }),
        t("em toda a linha\nde camisetas", 630, 120, 320, 110, { fonte: "poppins", peso: 700, tamanho: 38, linha: 1.15, cor: "#1C1917", alinhamento: "esquerda" }),
        t("SÓ ESTA SEMANA", 624, 250, 330, 56, { fonte: "montserrat", peso: 800, tamanho: 21, espaco: 0.14, cor: "#FDE047", alinhamento: "centro", fundo: { forma: "pilula", pintura: solida("#1C1917"), borda: null, raio: 30, pontas: 16, profundidade: 0.2 } }),
      ]);
    },
  },
  {
    chave: "cupom-neon",
    nome: "Cupom neon",
    busca: "cupom neon escuro semana do cliente brilho laranja",
    criar: (m) => {
      const W = 1000;
      const H = 460;
      const base = silhueta([cartaoRecortado(W, H, { raio: 30, esquerda: { onde: [0.5], raio: 40 }, direita: { onde: [0.5], raio: 40 } })], 0, 0, linear("#1E1631", "#100B1C", 160), { nome: "Cupom", cor: "#FF7A1A", espessura: 6, efeitos: [brilho("#FF7A1A", 34, 0.8)] });
      return montar(m, W, H, 0.82, [
        base,
        t("PREPARE-SE!", 80, 54, 840, 60, { fonte: "unbounded", peso: 800, tamanho: 40, espaco: 0.1, cor: "#FF8A3D" }),
        t("SEMANA DO\nCLIENTE", 80, 120, 840, 200, { fonte: "unbounded", peso: 800, tamanho: 88, linha: 1.02, cor: "#FFFFFF", efeito: { tipo: "neon", cor: "#FF7A1A", forca: 0.55 } }),
        linhaReta(120, 340, W - 120, 340, "#FF7A1A", 4, "tracejado", { opacidade: 0.7 }),
        t("ATÉ 40% OFF · COMEÇA EM 5 DIAS", 80, 362, 840, 50, { fonte: "montserrat", peso: 800, tamanho: 32, espaco: 0.08, cor: "#FFB37A" }),
      ]);
    },
  },
  {
    chave: "ingresso",
    nome: "Ingresso",
    busca: "ingresso ticket evento show vip entrada canhoto",
    criar: (m) => {
      const W = 1000;
      const H = 380;
      const corte = 0.74;
      const mordida = { onde: [corte], raio: 34 };
      const base = silhueta([cartaoRecortado(W, H, { raio: 26, topo: mordida, base: mordida })], 0, 0, linear("#0EA5E9", "#1D4ED8", 135), { nome: "Ingresso", efeitos: [sombraMacia(18, 36, 0.3, "#172554")] });
      const pontos = Array.from({ length: 6 }, (_, i) => f("circulo", 36, 56 + i * 52, 14, 14, "#FFFFFF", { opacidade: 0.35, nome: "Furo" }));
      return montar(m, W, H, 0.82, [
        base,
        ...pontos,
        t("WORKSHOP", 84, 56, 620, 46, { fonte: "montserrat", peso: 800, tamanho: 30, espaco: 0.4, cor: "#BAE6FD", alinhamento: "esquerda" }),
        t("Noite de\nlançamento", 84, 104, 620, 180, { fonte: "dm-serif-display", peso: 400, tamanho: 84, linha: 1, cor: "#FFFFFF", alinhamento: "esquerda" }),
        t("SÁB · 14 DEZ · 19H", 84, 296, 620, 40, { fonte: "space-grotesk", peso: 700, tamanho: 28, espaco: 0.14, cor: "#E0F2FE", alinhamento: "esquerda" }),
        linhaReta(W * corte, 52, W * corte, H - 52, "#FFFFFF", 5, "pontilhado", { opacidade: 0.7 }),
        t("VIP", W * corte + 20, 80, 220, 120, { fonte: "anton", peso: 400, tamanho: 116, cor: "#FDE68A" }),
        t("ENTRADA\nINDIVIDUAL", W * corte + 20, 210, 220, 80, { fonte: "montserrat", peso: 800, tamanho: 24, linha: 1.25, espaco: 0.16, cor: "#E0F2FE" }),
      ]);
    },
  },
];

/* ------------------------------------------------------- selos de venda */

export const SELOS_DE_VENDA: ElementoPronto[] = [
  {
    chave: "selo-mais-vendido",
    nome: "Mais vendido",
    busca: "selo roseta mais vendido premio medalha fita",
    criar: (m) => {
      const W = 600;
      const H = 720;
      const ouro = linear("#FDE68A", "#B45309", 135, [{ pos: 0.5, cor: "#F59E0B" }]);
      const fita = (x: number, inclinar: number, cor: Pintura) =>
        silhueta([poligonoRedondo([{ x: 0, y: 0 }, { x: 150, y: 0 }, { x: 150, y: 300 }, { x: 75, y: 250 }, { x: 0, y: 300 }], 6)], x, 380, cor, { nome: "Fita", rot: inclinar });
      return montar(m, W, H, 0.6, [
        fita(150, 14, linear("#DC2626", "#991B1B", 180)),
        fita(300, -14, linear("#DC2626", "#991B1B", 180)),
        silhueta([roseta(300, 300, 290, 24, 0.9, 16)], 0, 0, ouro, { nome: "Roseta", efeitos: [sombraMacia(16, 30, 0.3, "#78350F")] }),
        f("circulo", 70, 70, 460, 460, "#B91C1C", { pintura: linear("#EF4444", "#991B1B", 160), borda: { cor: "#FDE68A", largura: 8 } }),
        f("circulo", 100, 100, 400, 400, "#FFFFFF", { pintura: { tipo: "nenhuma", cor: "#FFFFFF", cor2: "#FFFFFF", angulo: 0 }, borda: { cor: "#FCA5A5", largura: 3 }, opacidade: 0.8 }),
        ic("estrela-cheia", 255, 150, 90, "#FDE68A", 1.5, { preenchido: true }),
        t("MAIS", 110, 250, 380, 92, { fonte: "anton", peso: 400, tamanho: 88, espaco: 0.08, cor: "#FFFFFF" }),
        t("VENDIDO", 110, 336, 380, 80, { fonte: "anton", peso: 400, tamanho: 74, espaco: 0.08, cor: "#FDE68A" }),
      ]);
    },
  },
  {
    chave: "carimbo-original",
    nome: "Carimbo original",
    busca: "carimbo selo original qualidade garantida 100% circulo",
    criar: (m) => {
      const W = 600;
      const cor = "#B91C1C";
      return montar(m, W, W, 0.55, girarJuntas([
        f("circulo", 0, 0, W, W, cor, { pintura: { tipo: "nenhuma", cor, cor2: cor, angulo: 0 }, borda: { cor, largura: 16 } }),
        f("circulo", 130, 130, 340, 340, cor, { pintura: { tipo: "nenhuma", cor, cor2: cor, angulo: 0 }, borda: { cor, largura: 6 } }),
        t("QUALIDADE GARANTIDA · QUALIDADE GARANTIDA ·", 62, 62, 476, 476, { fonte: "montserrat", peso: 800, tamanho: 38, espaco: 0.14, cor, curva: 100 }),
        f("retangulo", 60, 240, 480, 120, cor, { raio: 10 }),
        t("ORIGINAL", 60, 248, 480, 104, { fonte: "anton", peso: 400, tamanho: 92, espaco: 0.08, cor: "#FFFFFF" }),
        t("100%", 180, 154, 240, 80, { fonte: "anton", peso: 400, tamanho: 66, cor }),
        ic("estrela-cheia", 274, 372, 52, cor, 1.5, { preenchido: true }),
      ], W / 2, W / 2, -12)).map((p) => ({ ...p, opacidade: p.opacidade * 0.92 }));
    },
  },
  {
    chave: "contagem",
    nome: "Contagem regressiva",
    busca: "contagem regressiva cronometro relogio oferta acaba tempo",
    criar: (m) => {
      const W = 1000;
      const H = 360;
      const caixas = [
        ["02", "DIAS"],
        ["14", "HORAS"],
        ["37", "MIN"],
        ["09", "SEG"],
      ].flatMap(([n, r], i) => {
        const x = 40 + i * 240;
        return [
          silhueta([cartaoRecortado(200, 200, { raio: 26 })], x, 110, linear("#1F2937", "#0B0F19", 180), { nome: `Caixa ${r}`, efeitos: [sombraMacia(12, 24, 0.3)] }),
          f("retangulo", x, 208, 200, 4, "#000000", { opacidade: 0.5, nome: "Dobra" }),
          t(n, x, 120, 200, 150, { fonte: "space-grotesk", peso: 700, tamanho: 120, cor: "#FFFFFF" }),
          t(r, x, 318, 200, 36, { fonte: "montserrat", peso: 800, tamanho: 24, espaco: 0.24, cor: "#1F2937" }),
          ...(i < 3 ? [t(":", x + 196, 140, 48, 120, { fonte: "space-grotesk", peso: 700, tamanho: 96, cor: "#EF4444" })] : []),
        ];
      });
      return montar(m, W, H, 0.84, [
        ic("cronometro", 238, 14, 64, "#EF4444", 2.2),
        t("A OFERTA ACABA EM", 310, 20, 460, 56, { fonte: "montserrat", peso: 800, tamanho: 34, espaco: 0.12, cor: "#EF4444", alinhamento: "esquerda" }),
        ...caixas,
      ]);
    },
  },
  {
    chave: "compra-segura",
    nome: "Compra segura",
    busca: "compra segura escudo garantia seguranca check site protegido",
    criar: (m) => {
      const W = 800;
      const H = 300;
      return montar(m, W, H, 0.74, [
        silhueta([cartaoRecortado(W, H, { raio: 150 })], 0, 0, solida("#FFFFFF"), { nome: "Fundo", cor: "#D1FAE5", espessura: 4, efeitos: [sombraMacia(14, 30, 0.18, "#064E3B")] }),
        silhueta([escudo(180, 210)], 46, 45, linear("#34D399", "#047857", 160), { nome: "Escudo", efeitos: [sombraMacia(8, 14, 0.25, "#064E3B")] }),
        ic("check", 88, 98, 96, "#FFFFFF", 3.2),
        t("COMPRA", 260, 64, 500, 90, { fonte: "anton", peso: 400, tamanho: 86, espaco: 0.04, cor: "#064E3B", alinhamento: "esquerda" }),
        t("100% SEGURA", 262, 148, 500, 60, { fonte: "montserrat", peso: 900, tamanho: 44, espaco: 0.06, cor: "#059669", alinhamento: "esquerda" }),
        t("seus dados protegidos", 264, 210, 500, 36, { fonte: "poppins", peso: 500, tamanho: 26, cor: "#6B7280", alinhamento: "esquerda" }),
      ]);
    },
  },
  {
    chave: "avaliacao",
    nome: "Avaliação 5 estrelas",
    busca: "avaliacao estrelas nota clientes depoimento 5 estrelas",
    criar: (m) => {
      const W = 900;
      const H = 300;
      const ouro = linear("#FDE68A", "#F59E0B", 160);
      const estrelas = Array.from({ length: 5 }, (_, i) => f("estrela", 140 + i * 128, 40, 110, 106, "#F59E0B", { pintura: ouro, pontas: 5, profundidade: 0.5, efeitos: [sombraMacia(6, 10, 0.2, "#78350F")] }));
      return montar(m, W, H, 0.76, [
        silhueta([cartaoRecortado(W, H, { raio: 36 })], 0, 0, solida("#FFFFFF"), { nome: "Cartão", efeitos: [sombraMacia(16, 34, 0.18)] }),
        ...estrelas,
        t("4,9", 60, 168, 200, 100, { fonte: "anton", peso: 400, tamanho: 96, cor: "#111827", alinhamento: "direita" }),
        t("de 5 · mais de\n2.300 avaliações", 290, 172, 560, 96, { fonte: "poppins", peso: 600, tamanho: 34, linha: 1.15, cor: "#4B5563", alinhamento: "esquerda" }),
      ]);
    },
  },
  {
    chave: "parcelamento",
    nome: "Parcelamento",
    busca: "parcelamento parcelas sem juros cartao credito 10x",
    criar: (m) => {
      const W = 800;
      const H = 260;
      return montar(m, W, H, 0.7, [
        silhueta([cartaoRecortado(W, H, { raio: 40 })], 0, 0, linear("#312E81", "#1E1B4B", 135), { nome: "Selo", efeitos: [sombraMacia(14, 30, 0.3, "#1E1B4B")] }),
        ...girarJuntas(
          [
            silhueta([cartaoRecortado(200, 136, { raio: 18 })], 44, 62, linear("#FBBF24", "#F59E0B", 135), { nome: "Cartão", efeitos: [sombraMacia(8, 14, 0.3)] }),
            f("retangulo", 44, 88, 200, 22, "#78350F", { opacidade: 0.55, nome: "Tarja" }),
            f("retangulo", 66, 132, 44, 32, "#FEF3C7", { raio: 6, nome: "Chip" }),
          ],
          144,
          130,
          -8,
        ),
        t("em até", 290, 40, 470, 46, { fonte: "poppins", peso: 600, tamanho: 34, cor: "#C7D2FE", alinhamento: "esquerda" }),
        t("10x", 286, 76, 250, 130, { fonte: "anton", peso: 400, tamanho: 124, cor: "#FBBF24", alinhamento: "esquerda" }),
        t("sem\njuros", 492, 98, 270, 100, { fonte: "montserrat", peso: 900, tamanho: 40, linha: 1.05, cor: "#FFFFFF", alinhamento: "esquerda" }),
        t("no cartão de crédito", 290, 200, 470, 36, { fonte: "poppins", peso: 500, tamanho: 24, cor: "#A5B4FC", alinhamento: "esquerda" }),
      ]);
    },
  },
  {
    chave: "botao-comprar",
    nome: "Botão Compre agora",
    busca: "botao compre agora comprar chamada seta clique",
    criar: (m) => {
      const W = 800;
      const H = 190;
      return montar(m, W, H, 0.7, [
        silhueta([cartaoRecortado(W - 12, H - 12, { raio: 95 })], 12, 12, solida("#1C1917"), { nome: "Sombra do botão" }),
        silhueta([cartaoRecortado(W - 12, H - 12, { raio: 95 })], 0, 0, linear("#A3E635", "#65A30D", 160), { nome: "Botão", cor: "#1C1917", espessura: 5 }),
        t("COMPRE AGORA", 56, 44, 540, 96, { fonte: "unbounded", peso: 800, tamanho: 44, espaco: 0.02, cor: "#1C1917", alinhamento: "esquerda" }),
        f("circulo", 610, 22, 134, 134, "#1C1917"),
        ic("seta-lucide", 640, 52, 74, "#A3E635", 2.6),
      ]);
    },
  },
  {
    chave: "desconto-no-pix",
    nome: "Desconto no Pix",
    busca: "pix desconto pagamento a vista qr code selo",
    criar: (m) => {
      const W = 800;
      const H = 240;
      return montar(m, W, H, 0.68, [
        silhueta([cartaoRecortado(W, H, { raio: 120 })], 0, 0, linear("#2DD4BF", "#0F766E", 135), { nome: "Selo", efeitos: [sombraMacia(14, 28, 0.25, "#134E4A")] }),
        f("circulo", 30, 30, 180, 180, "#FFFFFF"),
        ic("pix", 75, 75, 90, "#0F766E", 2.2),
        t("5% OFF", 240, 30, 520, 120, { fonte: "anton", peso: 400, tamanho: 112, cor: "#FFFFFF", alinhamento: "esquerda" }),
        t("pagando no Pix", 244, 148, 520, 56, { fonte: "poppins", peso: 700, tamanho: 40, cor: "#CCFBF1", alinhamento: "esquerda" }),
      ]);
    },
  },
];