// generator-templates-v2.jsx — extra templates: 1080×1080 squares, QR codes, business cards, before/after, etc.
// Uses Glyph, Logo, Placeholder, COLORS already defined in generator-templates.jsx (script order guarantees this)

function QRCode({ value, size = 400, color = "1b1b1a", bg = "ffffff" }) {
  const enc = encodeURIComponent(value || "https://instagram.com/lirou.closet.65");
  const c = color.replace("#", ""), b = bg.replace("#", "");
  const url = `https://api.qrserver.com/v1/create-qr-code/?size=${size}x${size}&data=${enc}&color=${c}&bgcolor=${b}&margin=0&qzone=1`;
  return <img src={url} crossOrigin="anonymous" style={{ width: size, height: size, display: "block" }} />;
}

// ─── 1080×1080 templates ───

function tplOpener(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 40 }}>
      <Glyph size={460} color={accent} />
      <div style={{ fontSize: 32, letterSpacing: ".5em", textTransform: "uppercase", color: fg }}>L I R O U &middot; C L O S E T 65</div>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 90, color: accent, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.tagline}</div>
    </div>
  );
}

function tplPortraitFrame(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, padding: 50, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: 50, border: `3px solid ${accent}`, borderRadius: 24 }} />
      <div style={{ position: "absolute", inset: 80, borderRadius: 16, overflow: "hidden", background: "#fff" }}>
        {d.image ? <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label={d.imgLabel} />}
      </div>
      <div style={{ position: "absolute", top: 30, left: "50%", transform: "translateX(-50%)", padding: "8px 28px", background: d.bg, color: accent, fontSize: 20, letterSpacing: ".4em", textTransform: "uppercase" }}>{d.eyebrow}</div>
      <div style={{ position: "absolute", bottom: 30, left: "50%", transform: "translateX(-50%) rotate(-2deg)", padding: "0 36px", background: d.bg }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 72, color: accent, fontWeight: 700, lineHeight: 1 }}>{d.title}</div>
      </div>
    </div>
  );
}

function tplQuoteMini(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 80, textAlign: "center" }}>
      <div style={{ fontSize: 100, color: accent, lineHeight: 1, fontFamily: "'Caveat', cursive", fontWeight: 700 }}>&ldquo;</div>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 130, lineHeight: .95, color: fg, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line", marginTop: -20 }}>{d.quote}</div>
      <div style={{ marginTop: 50, fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>&mdash; {d.author}</div>
    </div>
  );
}

function tplBeforeAfter(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", top: 40, left: 40, right: 40, display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 2 }}>
        <Logo size="xs" color={accent} glyphOnly />
        <div style={{ fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.eyebrow}</div>
      </div>
      <div style={{ position: "absolute", inset: "120px 40px 200px", display: "flex", gap: 16 }}>
        <div style={{ flex: 1, borderRadius: 20, overflow: "hidden", background: "#fff", position: "relative" }}>
          {d.imageBefore ? <img src={d.imageBefore} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label="antes" />}
          <div style={{ position: "absolute", bottom: 16, left: 16, padding: "8px 22px", background: fg, color: d.bg, fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", borderRadius: 999, fontWeight: 600 }}>{d.labelBefore || "antes"}</div>
        </div>
        <div style={{ flex: 1, borderRadius: 20, overflow: "hidden", background: "#fff", position: "relative" }}>
          {d.imageAfter ? <img src={d.imageAfter} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label="depois" />}
          <div style={{ position: "absolute", bottom: 16, left: 16, padding: "8px 22px", background: accent, color: "#fff", fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", borderRadius: 999, fontWeight: 600 }}>{d.labelAfter || "depois"}</div>
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 50, left: 50, right: 50, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 90, lineHeight: 1, color: accent, transform: "rotate(-1deg)", fontWeight: 700 }}>{d.title}</div>
        <div style={{ fontSize: 20, marginTop: 8, opacity: .7 }}>{d.subtitle}</div>
      </div>
    </div>
  );
}

function tplPhotoSig(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: "60px 60px 280px", borderRadius: 24, overflow: "hidden", background: "#fff" }}>
        {d.image ? <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label={d.imgLabel} />}
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 110, lineHeight: .95, color: accent, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.signature}</div>
        <div style={{ fontSize: 22, marginTop: 12, opacity: .75, lineHeight: 1.4 }}>{d.subtitle}</div>
      </div>
    </div>
  );
}

function tplCtaAgenda(d) {
  const fg = d.fg || "#fff", accent = d.accent || "#fff";
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", padding: 80 }}>
      <div style={{ fontSize: 24, letterSpacing: ".5em", textTransform: "uppercase", opacity: .7 }}>{d.eyebrow}</div>
      <div style={{ marginTop: 24, fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: fg, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.title}</div>
      <div style={{ marginTop: 40, fontSize: 32, lineHeight: 1.4, opacity: .9, maxWidth: 800 }}>{d.body}</div>
      <div style={{ position: "absolute", bottom: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ padding: "20px 36px", background: "#fff", color: COLORS.purple, borderRadius: 999, fontSize: 24, fontWeight: 700, letterSpacing: ".25em", textTransform: "uppercase" }}>{d.cta}</div>
        <Logo size="xs" color={accent} glyphOnly />
      </div>
    </div>
  );
}

function tplProductSquare(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: "50px 50px 50px 50%", borderRadius: 20, overflow: "hidden", background: "#fff" }}>
        {d.image ? <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label={d.imgLabel} />}
      </div>
      <div style={{ position: "absolute", left: 50, top: 50, bottom: 50, width: "calc(50% - 80px)", display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <Logo size="xs" color={accent} glyphOnly />
          <div style={{ marginTop: 30, fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.eyebrow}</div>
          <div style={{ marginTop: 16, fontFamily: "'Caveat', cursive", fontSize: 110, lineHeight: .95, color: accent, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.title}</div>
          <div style={{ fontSize: 22, marginTop: 12, opacity: .75 }}>{d.subtitle}</div>
        </div>
        <div>
          <div style={{ padding: "16px 28px", background: COLORS.coral, color: "#fff", borderRadius: 999, fontSize: 28, fontWeight: 700, display: "inline-block" }}>{d.price}</div>
          <div style={{ marginTop: 16, fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.cta}</div>
        </div>
      </div>
    </div>
  );
}

function tplTestimonial(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", padding: 80 }}>
      <div style={{ display: "flex", gap: 8, color: COLORS.coral, fontSize: 50 }}>{"★★★★★"}</div>
      <div style={{ marginTop: 30, fontFamily: "'Caveat', cursive", fontSize: 100, lineHeight: 1, color: fg, fontWeight: 700, whiteSpace: "pre-line" }}>{d.quote}</div>
      <div style={{ position: "absolute", bottom: 80, left: 80, right: 80, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div>
          <div style={{ fontSize: 26, fontWeight: 700 }}>&mdash; {d.author}</div>
          <div style={{ fontSize: 18, opacity: .7, marginTop: 4 }}>{d.purchase}</div>
        </div>
        <Logo size="xs" color={accent} glyphOnly />
      </div>
    </div>
  );
}

function tplNewIn(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1920, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", top: 100, left: 0, right: 0, textAlign: "center", fontSize: 26, letterSpacing: ".5em", textTransform: "uppercase", color: accent }}>{d.eyebrow}</div>
      <div style={{ position: "absolute", top: 220, left: 0, right: 0, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: COLORS.coral, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.title}</div>
      </div>
      <div style={{ position: "absolute", inset: "560px 80px 460px", borderRadius: 32, overflow: "hidden", background: "#fff" }}>
        {d.image ? <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label={d.imgLabel} />}
      </div>
      <div style={{ position: "absolute", bottom: 250, left: 60, right: 60, textAlign: "center", fontSize: 32, lineHeight: 1.4, color: fg }}>{d.body}</div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, padding: 24, background: accent, color: "#fff", borderRadius: 999, textAlign: "center", fontSize: 26, fontWeight: 600, letterSpacing: ".3em", textTransform: "uppercase" }}>{d.cta}</div>
    </div>
  );
}

function tplStoryPoll(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1920, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", top: 200, left: 0, right: 0, display: "flex", justifyContent: "center" }}><Logo size="sm" color={accent} textColor={fg} /></div>
      <div style={{ position: "absolute", top: 600, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: accent, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.question}</div>
      </div>
      <div style={{ position: "absolute", top: 1100, left: 80, right: 80, display: "flex", flexDirection: "column", gap: 24 }}>
        <div style={{ padding: "40px 0", background: COLORS.coral, color: "#fff", borderRadius: 32, textAlign: "center", fontSize: 36, fontWeight: 700, letterSpacing: ".15em", textTransform: "uppercase" }}>{d.optionA}</div>
        <div style={{ textAlign: "center", fontSize: 22, color: fg, opacity: .5, letterSpacing: ".4em", textTransform: "uppercase" }}>ou</div>
        <div style={{ padding: "40px 0", background: accent, color: "#fff", borderRadius: 32, textAlign: "center", fontSize: 36, fontWeight: 700, letterSpacing: ".15em", textTransform: "uppercase" }}>{d.optionB}</div>
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, textAlign: "center", fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.cta}</div>
    </div>
  );
}

function tplStoryLink(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1920, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", top: 220, left: 0, right: 0, display: "flex", justifyContent: "center" }}><Glyph size={300} color={accent} /></div>
      <div style={{ position: "absolute", top: 720, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 220, lineHeight: .9, color: accent, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.title}</div>
        <div style={{ fontSize: 30, marginTop: 36, lineHeight: 1.4, color: fg, opacity: .85 }}>{d.body}</div>
      </div>
      <div style={{ position: "absolute", bottom: 380, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 16, padding: "26px 40px", background: "#fff", color: accent, borderRadius: 999, fontSize: 30, fontWeight: 700 }}>
          <span style={{ fontSize: 36 }}>↑</span> arrasta pra cima
        </div>
        <div style={{ marginTop: 30, fontSize: 22, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .7 }}>{d.linkLabel}</div>
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, textAlign: "center", fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.handle}</div>
    </div>
  );
}

// ─── QR Code + Cartão ───

function tplQrPost(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", padding: 60 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <Logo size="sm" color={accent} textColor={fg} />
        <div style={{ fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", color: accent, marginTop: 20 }}>{d.eyebrow}</div>
      </div>
      <div style={{ marginTop: 60, fontFamily: "'Caveat', cursive", fontSize: 160, lineHeight: .9, color: accent, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.title}</div>
      <div style={{ marginTop: 30, fontSize: 28, lineHeight: 1.4, color: fg, opacity: .85, maxWidth: 760 }}>{d.body}</div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60, display: "flex", alignItems: "center", gap: 40 }}>
        <div style={{ background: "#fff", padding: 20, borderRadius: 20, flex: "none" }}>
          <QRCode value={d.url} size={300} color={fg.replace("#","")} bg="ffffff" />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 22, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.qrLabel}</div>
          <div style={{ marginTop: 10, fontSize: 26, color: fg, opacity: .8, wordBreak: "break-all", lineHeight: 1.3 }}>{d.url}</div>
        </div>
      </div>
    </div>
  );
}

function tplQrStory(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1920, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", top: 200, left: 0, right: 0, display: "flex", justifyContent: "center" }}><Logo size="md" color={accent} textColor={fg} /></div>
      <div style={{ position: "absolute", top: 600, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 180, lineHeight: .9, color: accent, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.title}</div>
        <div style={{ fontSize: 26, marginTop: 30, lineHeight: 1.4, color: fg, opacity: .85 }}>{d.body}</div>
      </div>
      <div style={{ position: "absolute", top: 1100, left: 0, right: 0, display: "flex", justifyContent: "center" }}>
        <div style={{ background: "#fff", padding: 32, borderRadius: 28 }}>
          <QRCode value={d.url} size={420} color={fg.replace("#","")} bg="ffffff" />
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 200, left: 60, right: 60, textAlign: "center", fontSize: 24, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.qrLabel}</div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, textAlign: "center", fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: fg, opacity: .7 }}>{d.handle}</div>
    </div>
  );
}

function tplBusinessCardFront(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  // 1050x600 ~ 3.5"x2" @ 300dpi
  return (
    <div style={{ width: 1050, height: 600, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", display: "flex", alignItems: "center", justifyContent: "center", padding: 40 }}>
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }}>
        <Glyph size={140} color={accent} />
        <div style={{ fontSize: 22, letterSpacing: ".55em", textTransform: "uppercase", color: fg }}>L I R O U &middot; C L O S E T 65</div>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 56, color: accent, transform: "rotate(-2deg)", fontWeight: 700, marginTop: 4 }}>{d.tagline}</div>
      </div>
    </div>
  );
}

function tplBusinessCardBack(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1050, height: 600, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", padding: 40, display: "flex", gap: 40 }}>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <Glyph size={70} color={accent} />
          <div style={{ marginTop: 20, fontFamily: "'Caveat', cursive", fontSize: 64, lineHeight: 1, color: accent, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.name}</div>
          <div style={{ fontSize: 14, letterSpacing: ".4em", textTransform: "uppercase", color: fg, opacity: .7, marginTop: 8 }}>{d.role}</div>
        </div>
        <div style={{ fontSize: 16, lineHeight: 1.6, color: fg }}>
          <div>📷 {d.handle}</div>
          <div style={{ marginTop: 4 }}>💬 {d.whatsapp}</div>
          <div style={{ marginTop: 4 }}>✉ {d.email}</div>
        </div>
      </div>
      <div style={{ width: 200, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 12 }}>
        <div style={{ background: "#fff", padding: 12, borderRadius: 12 }}>
          <QRCode value={d.url} size={180} color={fg.replace("#","")} bg="ffffff" />
        </div>
        <div style={{ fontSize: 11, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.qrLabel}</div>
      </div>
    </div>
  );
}

function tplWelcomeKit(d) {
  // 1080x1350 — a thank-you-for-buying card to slip in the package
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif", padding: 80 }}>
      <div style={{ display: "flex", justifyContent: "center" }}><Logo size="md" color={accent} textColor={fg} /></div>
      <div style={{ marginTop: 80, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: accent, transform: "rotate(-3deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.headline}</div>
        <div style={{ fontSize: 30, marginTop: 40, lineHeight: 1.5, color: fg, opacity: .9, maxWidth: 800, marginLeft: "auto", marginRight: "auto" }}>{d.body}</div>
      </div>
      <div style={{ position: "absolute", bottom: 100, left: 0, right: 0, textAlign: "center" }}>
        <div style={{ display: "inline-block", background: "#fff", padding: 24, borderRadius: 24 }}>
          <QRCode value={d.url} size={240} color={fg.replace("#","")} bg="ffffff" />
        </div>
        <div style={{ marginTop: 20, fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.qrLabel}</div>
        <div style={{ marginTop: 8, fontSize: 18, color: fg, opacity: .6 }}>{d.handle}</div>
      </div>
    </div>
  );
}

function tplLookOfDay(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: "0 0 380px 0", background: "#fff" }}>
        {d.image ? <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label={d.imgLabel} />}
      </div>
      <div style={{ position: "absolute", top: 50, left: 50, right: 50, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ padding: "10px 26px", background: d.bg, color: accent, borderRadius: 999, fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", fontWeight: 600 }}>{d.eyebrow}</div>
        <div style={{ padding: "10px 26px", background: COLORS.coral, color: "#fff", borderRadius: 999, fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", fontWeight: 600 }}>{d.date}</div>
      </div>
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 380, padding: 50, display: "flex", flexDirection: "column", justifyContent: "space-between" }}>
        <div>
          <div style={{ fontFamily: "'Caveat', cursive", fontSize: 130, lineHeight: .95, color: accent, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.title}</div>
          <div style={{ fontSize: 22, marginTop: 12, opacity: .75, lineHeight: 1.4 }}>{d.pieces}</div>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.handle}</div>
          <div style={{ padding: "12px 22px", background: accent, color: "#fff", borderRadius: 999, fontSize: 18, letterSpacing: ".25em", textTransform: "uppercase", fontWeight: 600 }}>{d.cta}</div>
        </div>
      </div>
    </div>
  );
}

function tplBts(d) {
  // bastidores - photo + handwritten overlay, 1080x1350
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: 0 }}>
        {d.image ? <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover" }} crossOrigin="anonymous" /> : <Placeholder label={d.imgLabel} tone="dark" />}
      </div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,0.55) 100%)" }} />
      <div style={{ position: "absolute", top: 50, left: 50, padding: "10px 26px", background: "rgba(255,255,255,.18)", color: "#fff", borderRadius: 999, fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", fontWeight: 600, backdropFilter: "blur(8px)" }}>{d.eyebrow}</div>
      <div style={{ position: "absolute", top: 50, right: 50 }}><Logo size="xs" color="#fff" glyphOnly /></div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 160, lineHeight: .9, color: "#fff", transform: "rotate(-3deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.headline}</div>
        <div style={{ fontSize: 24, marginTop: 16, color: "rgba(255,255,255,.85)", lineHeight: 1.4 }}>{d.body}</div>
      </div>
    </div>
  );
}

// ─── Adicionar ao registry ──────────────────────────────────────────────

const NEW_TEMPLATES = [
  // 1080×1080 quadrados
  { id: "post-opener", group: "Posts quadrados (1080×1080)", name: "Logo de abertura", w: 1080, h: 1080, render: tplOpener,
    fields: [
      { k: "tagline", label: "Tagline (Caveat)", type: "text" },
      { k: "bg", label: "Cor de fundo do card", type: "color", options: ["#eadcbe","#674689","#df4b5a","#1b1b1a","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor do 'L I R O U · CLOSET 65' (lettering espaçado)", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do mascote + tagline em Caveat", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { tagline: "garimpado com amor", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "post-portrait-frame", group: "Posts quadrados (1080×1080)", name: "Retrato com moldura", w: 1080, h: 1080, render: tplPortraitFrame,
    fields: [
      { k: "image", label: "Foto", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche atrás da moldura)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor de texto secundária (não usada visualmente neste template)", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor da moldura + eyebrow + título Caveat", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { image: "", imgLabel: "peça", eyebrow: "destaque", title: "achadinho", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "post-quote-mini", group: "Posts quadrados (1080×1080)", name: "Quote curto", w: 1080, h: 1080, render: tplQuoteMini,
    fields: [
      { k: "quote", label: "Citação (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "author", label: "Autor", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor da citação grande (texto Caveat)", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor das aspas decorativas + linha do autor", type: "color", options: ["#df4b5a","#674689","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { quote: "moda é\ncoisa séria.\nbrechó é\nrevolução.", author: "Lirou", bg: "#eadcbe", fg: "#1b1b1a", accent: "#df4b5a" } },

  { id: "post-before-after", group: "Posts quadrados (1080×1080)", name: "Antes / depois", w: 1080, h: 1080, render: tplBeforeAfter,
    fields: [
      { k: "imageBefore", label: "Foto · antes", type: "image" },
      { k: "imageAfter", label: "Foto · depois", type: "image" },
      { k: "labelBefore", label: "Label do badge esquerdo (antes)", type: "text" },
      { k: "labelAfter", label: "Label do badge direito (depois)", type: "text" },
      { k: "eyebrow", label: "Eyebrow (texto pequeno topo)", type: "text" },
      { k: "title", label: "Título grande (Caveat)", type: "text" },
      { k: "subtitle", label: "Subtítulo", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card · também tinge o texto do badge esquerdo)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#1b1b1a"] },
      { k: "fg", label: "Cor do subtítulo + fundo do badge esquerdo (antes)", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do glifo + eyebrow + título Caveat + badge direito (depois)", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { imageBefore: "", imageAfter: "", labelBefore: "antes", labelAfter: "depois", eyebrow: "transformação", title: "antes & depois", subtitle: "uma peça, várias possibilidades", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "post-photo-sig", group: "Posts quadrados (1080×1080)", name: "Foto com assinatura", w: 1080, h: 1080, render: tplPhotoSig,
    fields: [
      { k: "image", label: "Foto", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "signature", label: "Assinatura (Caveat)", type: "text" },
      { k: "subtitle", label: "Subtítulo", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche atrás da foto e do texto)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do subtítulo abaixo da assinatura", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor da assinatura grande em Caveat", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { image: "", imgLabel: "peça", signature: "achei pra você", subtitle: "garimpo da semana — chama no direct", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "post-cta-agenda", group: "Posts quadrados (1080×1080)", name: "CTA / agenda", w: 1080, h: 1080, render: tplCtaAgenda,
    fields: [
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "body", label: "Corpo", type: "textarea" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe"] },
      { k: "fg", label: "Cor do eyebrow + título grande + corpo (texto principal)", type: "color", options: ["#ffffff","#1b1b1a","#eadcbe","#674689"] },
      { k: "accent", label: "Cor do mascote no canto inferior direito", type: "color", options: ["#ffffff","#1b1b1a","#674689","#eadcbe"] },
    ],
    defaults: { eyebrow: "save the date", title: "próximo\ndrop", body: "sex · 19h · só pra quem ativar o lembrete no perfil.", cta: "ative agora ↗", bg: "#674689", fg: "#ffffff", accent: "#ffffff" } },

  { id: "post-product-square", group: "Posts quadrados (1080×1080)", name: "Produto split", w: 1080, h: 1080, render: tplProductSquare,
    fields: [
      { k: "image", label: "Foto", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "title", label: "Nome (Caveat)", type: "text" },
      { k: "subtitle", label: "Detalhes", type: "text" },
      { k: "price", label: "Preço", type: "text" },
      { k: "cta", label: "CTA secundário", type: "text" },
      { k: "bg", label: "Cor de fundo (lado esquerdo · preenche atrás do texto)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do subtítulo (detalhes da peça)", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do glifo + eyebrow + nome da peça + CTA (preço continua coral)", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { image: "", imgLabel: "peça", eyebrow: "novidade", title: "blusa\ncroche", subtitle: "única · tam M", price: "R$ 89", cta: "no direct →", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "post-testimonial", group: "Posts quadrados (1080×1080)", name: "Depoimento de cliente", w: 1080, h: 1080, render: tplTestimonial,
    fields: [
      { k: "quote", label: "Depoimento (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "author", label: "Cliente", type: "text" },
      { k: "purchase", label: "O que comprou", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card · estrelas continuam coral)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do depoimento + nome + linha 'o que comprou'", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do mascote no canto inferior direito", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { quote: "veio melhor\ndo que na foto.\namei!", author: "@maria.s", purchase: "calça class · R$ 165", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  // 1080×1350 grandes
  { id: "post-look-day", group: "Posts (1080×1350)", name: "Look do dia", w: 1080, h: 1350, render: tplLookOfDay,
    fields: [
      { k: "image", label: "Foto do look", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "date", label: "Data", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "pieces", label: "Peças usadas", type: "textarea" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "bg", label: "Cor da faixa do rodapé (atrás do texto · não afeta a foto)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor das peças listadas no rodapé", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do título do look + eyebrow + @handle + botão CTA", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { image: "", imgLabel: "look", eyebrow: "look do dia", date: "ter · 06.05", title: "feel the vibe", pieces: "calça class · top off-white · tênis branco — tudo no closet", handle: "@lirou.closet.65", cta: "shopping ↗", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "post-bts", group: "Posts (1080×1350)", name: "Bastidores", w: 1080, h: 1350, render: tplBts,
    fields: [
      { k: "image", label: "Foto bastidor", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "headline", label: "Frase forte (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "body", label: "Texto curto", type: "textarea" },
    ],
    defaults: { image: "", imgLabel: "bastidor", eyebrow: "BTS", headline: "preparando\no drop 04", body: "selecionando peça por peça pra montar o próximo drop. tudo curado, nada de qualquer jeito.", fg: "#fff" } },

  // Stories
  { id: "story-newin", group: "Stories (1080×1920)", name: "New in / novidade", w: 1080, h: 1920, render: tplNewIn,
    fields: [
      { k: "image", label: "Foto", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "body", label: "Corpo", type: "textarea" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "bg", label: "Cor de fundo do story (atrás de tudo)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do parágrafo do corpo (título grande continua coral)", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do eyebrow + botão CTA do rodapé", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { image: "", imgLabel: "peça nova", eyebrow: "✦ acabou de chegar ✦", title: "new in", body: "peça única, garimpo fresquinho. quem vê primeiro leva.", cta: "no direct ↗", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "story-poll", group: "Stories (1080×1920)", name: "Enquete / esse ou aquele", w: 1080, h: 1920, render: tplStoryPoll,
    fields: [
      { k: "question", label: "Pergunta (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "optionA", label: "Opção A", type: "text" },
      { k: "optionB", label: "Opção B", type: "text" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "bg", label: "Cor de fundo do story", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do logo lettering + 'ou' divisor", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor da pergunta + glifo + CTA + botão da Opção B (Opção A continua coral)", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { question: "esse ou\naquele?", optionA: "esse", optionB: "aquele", cta: "vota aí ↑", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "story-link", group: "Stories (1080×1920)", name: "Link na bio", w: 1080, h: 1920, render: tplStoryLink,
    fields: [
      { k: "title", label: "Título (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "body", label: "Corpo", type: "textarea" },
      { k: "linkLabel", label: "Label do link", type: "text" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Cor de fundo do story", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do parágrafo do corpo + label do link", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do mascote + título grande + texto do botão + @handle", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { title: "tudo\nno link", body: "drop, FAQ, WhatsApp, formas de pagamento — tá tudo lá.", linkLabel: "lirou.bio/closet", handle: "@lirou.closet.65", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  // QR + Cartão de visita + Welcome kit
  { id: "post-qr", group: "QR Code & cartão", name: "Post com QR", w: 1080, h: 1350, render: tplQrPost,
    fields: [
      { k: "url", label: "URL / link", type: "text", hint: "https://..." },
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "textarea" },
      { k: "body", label: "Corpo", type: "textarea" },
      { k: "qrLabel", label: "Label do QR", type: "text" },
      { k: "bg", label: "Fundo", type: "color", options: ["#eadcbe","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor texto + QR", type: "color", options: ["#1b1b1a","#674689"] },
      { k: "accent", label: "Cor de destaque", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe"] },
    ],
    defaults: { url: "https://instagram.com/lirou.closet.65", eyebrow: "✦ direct rápido", title: "scan\npra falar\ncom a gente", body: "aponta a câmera no QR e cai direto no nosso direct.", qrLabel: "scan me", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "story-qr", group: "QR Code & cartão", name: "Story com QR", w: 1080, h: 1920, render: tplQrStory,
    fields: [
      { k: "url", label: "URL / link", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "textarea" },
      { k: "body", label: "Corpo", type: "textarea" },
      { k: "qrLabel", label: "Label do QR", type: "text" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Fundo", type: "color", options: ["#eadcbe","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor texto + QR", type: "color", options: ["#1b1b1a","#674689"] },
      { k: "accent", label: "Cor de destaque", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe"] },
    ],
    defaults: { url: "https://instagram.com/lirou.closet.65", title: "scan\nse liga", body: "aponta a câmera e abre direto.", qrLabel: "aponta a câmera", handle: "@lirou.closet.65", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "card-front", group: "QR Code & cartão", name: "Cartão de visita · frente", w: 1050, h: 600, render: tplBusinessCardFront,
    fields: [
      { k: "tagline", label: "Tagline (Caveat)", type: "text" },
      { k: "bg", label: "Fundo", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a","#ffffff"] },
      { k: "fg", label: "Cor texto", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor glifo + tagline", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { tagline: "garimpado com amor", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "card-back", group: "QR Code & cartão", name: "Cartão de visita · verso", w: 1050, h: 600, render: tplBusinessCardBack,
    fields: [
      { k: "name", label: "Nome", type: "text" },
      { k: "role", label: "Cargo / função", type: "text" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "whatsapp", label: "WhatsApp", type: "text" },
      { k: "email", label: "E-mail", type: "text" },
      { k: "url", label: "URL do QR", type: "text" },
      { k: "qrLabel", label: "Label QR", type: "text" },
      { k: "bg", label: "Fundo", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a","#ffffff"] },
      { k: "fg", label: "Cor texto + QR", type: "color", options: ["#1b1b1a","#ffffff","#674689"] },
      { k: "accent", label: "Cor de destaque", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { name: "lirou", role: "curadoria & atendimento", handle: "@lirou.closet.65", whatsapp: "(11) 9 0000-0000", email: "oi@lirou.closet", url: "https://instagram.com/lirou.closet.65", qrLabel: "scan", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "welcome-kit", group: "QR Code & cartão", name: "Cartão thank you (pacote)", w: 1080, h: 1350, render: tplWelcomeKit,
    fields: [
      { k: "headline", label: "Frase (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "body", label: "Corpo", type: "textarea" },
      { k: "url", label: "URL do QR", type: "text" },
      { k: "qrLabel", label: "Label QR", type: "text" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Fundo", type: "color", options: ["#eadcbe","#f4f1ec","#ffffff","#674689"] },
      { k: "fg", label: "Cor texto + QR", type: "color", options: ["#1b1b1a","#ffffff","#674689"] },
      { k: "accent", label: "Cor de destaque", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { headline: "obrigada\npor garimpar\ncom a gente!", body: "essa peça agora tem uma nova história — a sua. compartilha com a gente marcando @lirou.closet.65", url: "https://instagram.com/lirou.closet.65", qrLabel: "siga a gente", handle: "@lirou.closet.65", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },
];

// merge into the existing registry
if (window.LIROU_TEMPLATES) {
  window.LIROU_TEMPLATES = window.LIROU_TEMPLATES.concat(NEW_TEMPLATES);
}