// generator-templates-v3.jsx — new carousels + stories
// Uses Glyph, Logo, Placeholder, COLORS, QRCode already in scope (loaded earlier via templates v1/v2)

const STK_PAL3 = ["#eadcbe","#f4f1ec","#ffffff","#1b1b1a","#674689","#df4b5a"];

// ─────────────────────────────────────────────────────────────────────────
// CARROSSEIS — novos formatos
// ─────────────────────────────────────────────────────────────────────────

// 1) Dicas de styling — capa com numeração estilo magazine
function tplCarouselTipsCover(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple, hookC = d.hookColor || COLORS.coral;
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", top: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <Logo size="xs" color={accent} />
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .55 }}>guia · {d.eyebrow}</div>
      </div>
      <div style={{ position: "absolute", top: 280, left: 60, right: 60 }}>
        <div style={{ fontSize: 200, fontFamily: "'Caveat', cursive", lineHeight: 1, color: accent, fontWeight: 700, transform: "rotate(-2deg)" }}>{d.bigNumber}</div>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 140, lineHeight: .9, color: hookC, transform: "rotate(-1deg)", fontWeight: 700, whiteSpace: "pre-line", marginTop: -10 }}>{d.title}</div>
        <div style={{ fontSize: 30, marginTop: 40, maxWidth: 760, lineHeight: 1.4, color: fg }}>{d.subtitle}</div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ padding: "12px 28px", border: `1.5px solid ${accent}`, borderRadius: 999, fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>arrasta →</div>
        <div style={{ fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.handle}</div>
      </div>
    </div>
  );
}

// 2) Card de dica — formato com número grande + texto curto
function tplCarouselTipCard(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", top: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ fontSize: 20, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>dica</div>
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>{d.indicator}</div>
      </div>
      <div style={{ position: "absolute", top: 220, left: 60, right: 60, display: "flex", alignItems: "flex-start", gap: 30 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 360, lineHeight: .85, color: accent, fontWeight: 700, transform: "rotate(-3deg)" }}>{d.number}</div>
        <div style={{ flex: 1, paddingTop: 80 }}>
          <div style={{ fontSize: 50, fontWeight: 700, lineHeight: 1.05, color: fg, letterSpacing: "-.01em" }}>{d.headline}</div>
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 280, left: 60, right: 60 }}>
        <div style={{ width: 80, height: 4, background: accent, marginBottom: 30 }} />
        <div style={{ fontSize: 30, lineHeight: 1.45, color: fg, opacity: .85 }}>{d.body}</div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Logo size="xs" color={accent} glyphOnly />
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>arrasta →</div>
      </div>
    </div>
  );
}

// 3) Carrossel educacional — texto puro sem decoração
function tplCarouselEdu(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: 80 }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.tag}</div>
        <Logo size="xs" color={accent} glyphOnly />
      </div>
      <div style={{ marginTop: 80 }}>
        <div style={{ fontSize: 24, letterSpacing: ".05em", color: accent, opacity: .8, marginBottom: 16 }}>{d.kicker}</div>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 180, lineHeight: .9, color: fg, fontWeight: 700, whiteSpace: "pre-line", transform: "rotate(-1deg)" }}>{d.title}</div>
      </div>
      <div style={{ position: "absolute", bottom: 80, left: 80, right: 80 }}>
        <div style={{ fontSize: 32, lineHeight: 1.45, maxWidth: 880, color: fg }}>{d.body}</div>
        <div style={{ marginTop: 36, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.position}</div>
          <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>arrasta →</div>
        </div>
      </div>
    </div>
  );
}

// 4) Lookbook — foto full-bleed + texto sobreposto
function tplCarouselLookbook(d) {
  const fg = d.fg || "#fff", accent = d.accent || COLORS.coral;
  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} crossOrigin="anonymous" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label={d.imgLabel} tone="dark" />}
      </div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.7) 100%)" }} />
      <div style={{ position: "absolute", top: 50, left: 50, right: 50, display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
        <div style={{ padding: "10px 24px", background: "rgba(255,255,255,.18)", border: "1.5px solid rgba(255,255,255,.4)", borderRadius: 999, fontSize: 18, letterSpacing: ".35em", textTransform: "uppercase", backdropFilter: "blur(10px)" }}>{d.eyebrow}</div>
        <div style={{ padding: "10px 24px", background: accent, color: "#fff", borderRadius: 999, fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", fontWeight: 600 }}>{d.tag}</div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 150, lineHeight: .9, color: fg, fontWeight: 700, transform: "rotate(-2deg)" }}>{d.title}</div>
        <div style={{ fontSize: 24, marginTop: 16, opacity: .9, color: fg }}>{d.body}</div>
        <div style={{ marginTop: 24, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: "rgba(255,255,255,.85)" }}>{d.position}</div>
          <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: "rgba(255,255,255,.85)" }}>arrasta →</div>
        </div>
      </div>
    </div>
  );
}

// 5) Storytelling — citação com aspas estilo magazine literário
function tplCarouselQuote(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: 80 }}>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <Logo size="xs" color={accent} />
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.chapter}</div>
      </div>
      <div style={{ position: "absolute", left: 80, top: 250, fontSize: 260, lineHeight: .8, color: accent, fontFamily: "Georgia, serif", opacity: .35 }}>"</div>
      <div style={{ position: "absolute", top: 380, left: 140, right: 80 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 110, lineHeight: 1, color: fg, fontWeight: 700, whiteSpace: "pre-line" }}>{d.quote}</div>
      </div>
      <div style={{ position: "absolute", bottom: 200, left: 140, right: 80 }}>
        <div style={{ width: 60, height: 2, background: accent, marginBottom: 18 }} />
        <div style={{ fontSize: 22, letterSpacing: ".35em", textTransform: "uppercase", color: accent, fontWeight: 600 }}>{d.author}</div>
        <div style={{ fontSize: 16, color: fg, opacity: .55, marginTop: 6 }}>{d.context}</div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 80, right: 80, display: "flex", justifyContent: "space-between" }}>
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>{d.position}</div>
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>arrasta →</div>
      </div>
    </div>
  );
}

// 6) Mini comparação — antes/depois lado a lado
function tplCarouselCompare(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", top: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Logo size="xs" color={accent} glyphOnly />
        <div style={{ fontSize: 20, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.eyebrow}</div>
      </div>
      <div style={{ position: "absolute", top: 180, left: 60, right: 60, fontFamily: "'Caveat', cursive", fontSize: 110, lineHeight: 1, color: fg, fontWeight: 700, transform: "rotate(-1deg)" }}>{d.title}</div>
      <div style={{ position: "absolute", top: 350, left: 60, right: 60, bottom: 230, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        <div style={{ background: "#fff", borderRadius: 20, overflow: "hidden", position: "relative" }}>
          {d.imageLeft ? <img src={d.imageLeft} crossOrigin="anonymous" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label={d.labelLeft} />}
          <div style={{ position: "absolute", top: 14, left: 14, padding: "6px 18px", background: fg, color: d.bg, fontSize: 16, letterSpacing: ".3em", textTransform: "uppercase", borderRadius: 999, fontWeight: 600 }}>{d.labelLeft}</div>
        </div>
        <div style={{ background: "#fff", borderRadius: 20, overflow: "hidden", position: "relative" }}>
          {d.imageRight ? <img src={d.imageRight} crossOrigin="anonymous" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label={d.labelRight} />}
          <div style={{ position: "absolute", top: 14, left: 14, padding: "6px 18px", background: accent, color: "#fff", fontSize: 16, letterSpacing: ".3em", textTransform: "uppercase", borderRadius: 999, fontWeight: 600 }}>{d.labelRight}</div>
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60 }}>
        <div style={{ fontSize: 24, lineHeight: 1.4, color: fg, opacity: .85, maxWidth: 880 }}>{d.body}</div>
        <div style={{ marginTop: 20, display: "flex", justifyContent: "space-between" }}>
          <div style={{ fontSize: 16, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.position}</div>
          <div style={{ fontSize: 16, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>arrasta →</div>
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────
// STORIES — novos formatos
// ─────────────────────────────────────────────────────────────────────────

// 7) Achadinho — story compacto com foto + handwritten "achei pra você"
function tplStoryAchadinho(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple, hookC = d.hookColor || COLORS.coral;
  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: 120, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Logo size="xs" color={accent} glyphOnly />
        <div style={{ fontSize: 22, letterSpacing: ".5em", textTransform: "uppercase", color: accent }}>achadinho</div>
      </div>
      <div style={{ position: "absolute", top: 280, left: 0, right: 0, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: hookC, fontWeight: 700, transform: "rotate(-2deg)" }}>{d.title}</div>
      </div>
      <div style={{ position: "absolute", inset: "560px 80px 600px", borderRadius: 32, overflow: "hidden", background: "#fff", boxShadow: "0 20px 60px rgba(0,0,0,.15)" }}>
        {d.image ? <img src={d.image} crossOrigin="anonymous" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label={d.imgLabel} tone="cream" />}
        {d.badge && (
          <div style={{ position: "absolute", top: 28, right: 28, width: 120, height: 120, borderRadius: "50%", background: hookC, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Caveat', cursive", fontSize: 42, fontWeight: 700, transform: "rotate(8deg)", boxShadow: "0 8px 24px rgba(0,0,0,.25)" }}>{d.badge}</div>
        )}
      </div>
      <div style={{ position: "absolute", bottom: 360, left: 80, right: 80, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 110, lineHeight: .95, color: accent, fontWeight: 700, transform: "rotate(-1deg)" }}>{d.itemName}</div>
        <div style={{ fontSize: 26, marginTop: 14, opacity: .75, color: fg }}>{d.detail}</div>
      </div>
      <div style={{ position: "absolute", bottom: 230, left: 80, right: 80, padding: "20px 0", background: hookC, color: "#fff", borderRadius: 999, textAlign: "center", fontSize: 36, fontWeight: 700 }}>{d.price}</div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, padding: 22, background: accent, color: "#fff", borderRadius: 999, textAlign: "center", fontSize: 24, fontWeight: 600, letterSpacing: ".3em", textTransform: "uppercase" }}>{d.cta}</div>
    </div>
  );
}

// 8) Bastidores — story com foto + handwritten overlay
function tplStoryBts(d) {
  return (
    <div style={{ width: 1080, height: 1920, background: d.bg || "#1b1b1a", position: "relative", overflow: "hidden", color: "#fff", fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: 0 }}>
        {d.image ? <img src={d.image} crossOrigin="anonymous" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label={d.imgLabel} tone="dark" />}
      </div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,.8) 100%)" }} />
      <div style={{ position: "absolute", top: 120, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ padding: "10px 26px", background: "rgba(255,255,255,.18)", border: "1.5px solid rgba(255,255,255,.4)", borderRadius: 999, fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", backdropFilter: "blur(10px)" }}>{d.eyebrow}</div>
        <Logo size="xs" color="#fff" glyphOnly />
      </div>
      <div style={{ position: "absolute", bottom: 250, left: 60, right: 60 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .85, color: "#fff", fontWeight: 700, transform: "rotate(-3deg)", whiteSpace: "pre-line" }}>{d.headline}</div>
        <div style={{ fontSize: 28, marginTop: 24, lineHeight: 1.4, color: "rgba(255,255,255,.9)" }}>{d.body}</div>
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, textAlign: "center", fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: "rgba(255,255,255,.85)" }}>{d.cta}</div>
    </div>
  );
}

// 9) Look do dia — story em duas camadas, foto + cards de peças
function tplStoryLookDay(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: 120, left: 0, right: 0, textAlign: "center" }}>
        <div style={{ fontSize: 22, letterSpacing: ".5em", textTransform: "uppercase", color: accent }}>{d.eyebrow}</div>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 180, lineHeight: .9, color: COLORS.coral, fontWeight: 700, transform: "rotate(-2deg)", marginTop: 18 }}>{d.title}</div>
      </div>
      <div style={{ position: "absolute", inset: "500px 80px 600px", borderRadius: 32, overflow: "hidden", background: "#fff" }}>
        {d.image ? <img src={d.image} crossOrigin="anonymous" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label="look completo" tone="cream" />}
      </div>
      <div style={{ position: "absolute", bottom: 260, left: 60, right: 60 }}>
        <div style={{ fontSize: 22, letterSpacing: ".35em", textTransform: "uppercase", color: accent, marginBottom: 20 }}>peças do look</div>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {(d.pieces || "").split("\n").filter(Boolean).slice(0, 3).map((p, i) => (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 16, padding: "14px 22px", background: "rgba(255,255,255,.7)", borderRadius: 18, border: `1.5px solid ${accent}` }}>
              <div style={{ width: 28, height: 28, borderRadius: "50%", background: accent, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16, fontWeight: 700 }}>{i + 1}</div>
              <div style={{ fontSize: 22, color: fg, lineHeight: 1.3, flex: 1 }}>{p}</div>
            </div>
          ))}
        </div>
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, padding: 22, background: accent, color: "#fff", borderRadius: 999, textAlign: "center", fontSize: 24, fontWeight: 600, letterSpacing: ".3em", textTransform: "uppercase" }}>{d.cta}</div>
    </div>
  );
}

// 10) Cupom — story flash com cupom destacado
function tplStoryCoupon(d) {
  const fg = d.fg || "#fff", accent = d.accent || "#fff";
  return (
    <div style={{ width: 1080, height: 1920, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: 0, background: "repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 40px, transparent 40px 80px)" }} />
      <div style={{ position: "absolute", top: 200, left: 0, right: 0, textAlign: "center", fontSize: 26, letterSpacing: ".5em", textTransform: "uppercase", color: fg, opacity: .9 }}>{d.eyebrow}</div>
      <div style={{ position: "absolute", top: 320, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 380, lineHeight: .85, color: fg, fontWeight: 700, transform: "rotate(-3deg)" }}>{d.discount}</div>
      </div>
      <div style={{ position: "absolute", top: 1020, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontSize: 30, marginBottom: 30, color: fg, opacity: .9 }}>{d.body}</div>
        <div style={{ padding: "28px 20px", background: "#fff", color: COLORS.ink, border: `4px dashed ${accent}`, borderRadius: 16, fontSize: 44, fontWeight: 700, letterSpacing: ".35em", lineHeight: 1 }}>{d.coupon}</div>
      </div>
      <div style={{ position: "absolute", bottom: 240, left: 60, right: 60, textAlign: "center", fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: fg, opacity: .85 }}>{d.terms}</div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, padding: 22, background: "#fff", color: COLORS.ink, borderRadius: 999, textAlign: "center", fontSize: 24, fontWeight: 700, letterSpacing: ".3em", textTransform: "uppercase" }}>{d.cta}</div>
    </div>
  );
}

// 11) Pergunta aberta — story estilo IG question sticker
function tplStoryQuestion(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="xs" color={accent} glyphOnly />
      </div>
      <div style={{ position: "absolute", top: 380, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontSize: 26, letterSpacing: ".5em", textTransform: "uppercase", color: accent, marginBottom: 30 }}>caixinha de</div>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 240, lineHeight: .85, color: accent, fontWeight: 700, transform: "rotate(-2deg)", whiteSpace: "pre-line" }}>{d.title}</div>
      </div>
      <div style={{ position: "absolute", top: 1120, left: 80, right: 80, padding: "36px 40px", background: "#fff", borderRadius: 28, boxShadow: "0 20px 60px rgba(0,0,0,.12)" }}>
        <div style={{ fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent, marginBottom: 16, fontWeight: 600 }}>{d.label}</div>
        <div style={{ fontSize: 32, color: fg, lineHeight: 1.35, marginBottom: 24 }}>{d.question}</div>
        <div style={{ padding: "20px 24px", background: "#f4f1ec", borderRadius: 16, fontSize: 24, color: "#999", fontStyle: "italic" }}>digita aqui ✎</div>
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 0, right: 0, textAlign: "center", fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>responde aí 👇</div>
    </div>
  );
}

// 12) Capa de Reels — formato story que vira capa
function tplStoryReelsCover(d) {
  const fg = d.fg || "#fff", accent = d.accent || COLORS.purple, hookC = d.hookColor || COLORS.coral;
  return (
    <div style={{ width: 1080, height: 1920, 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} crossOrigin="anonymous" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <Placeholder label={d.imgLabel} tone="dark" />}
      </div>
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(0,0,0,.85) 100%)" }} />
      <div style={{ position: "absolute", top: 120, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Logo size="xs" color="#fff" glyphOnly />
        <div style={{ padding: "8px 22px", background: hookC, color: "#fff", borderRadius: 999, fontSize: 16, letterSpacing: ".35em", textTransform: "uppercase", fontWeight: 700 }}>▶ {d.duration}</div>
      </div>
      <div style={{ position: "absolute", bottom: 440, left: 60, right: 60 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 240, lineHeight: .8, color: "#fff", fontWeight: 700, transform: "rotate(-3deg)", whiteSpace: "pre-line" }}>{d.title}</div>
      </div>
      <div style={{ position: "absolute", bottom: 240, left: 60, right: 60 }}>
        <div style={{ width: 80, height: 4, background: hookC, marginBottom: 24 }} />
        <div style={{ fontSize: 30, lineHeight: 1.3, color: "rgba(255,255,255,.95)", maxWidth: 860 }}>{d.subtitle}</div>
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", color: "rgba(255,255,255,.85)" }}>{d.handle}</div>
        <div style={{ fontSize: 16, letterSpacing: ".4em", textTransform: "uppercase", color: "rgba(255,255,255,.65)" }}>reels · @lirou</div>
      </div>
    </div>
  );
}

// 13) Agenda semanal — calendário de stories
function tplStorySchedule(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  const lines = (d.schedule || "").split("\n").filter(Boolean).slice(0, 7);
  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: 140, left: 0, right: 0, textAlign: "center" }}>
        <div style={{ fontSize: 24, letterSpacing: ".5em", textTransform: "uppercase", color: accent }}>{d.eyebrow}</div>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: accent, fontWeight: 700, transform: "rotate(-2deg)", marginTop: 16 }}>{d.title}</div>
      </div>
      <div style={{ position: "absolute", top: 580, left: 80, right: 80, display: "flex", flexDirection: "column", gap: 16 }}>
        {lines.map((line, i) => {
          const [day, ...rest] = line.split("|").map(s => s.trim());
          return (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 24, padding: "20px 28px", background: "rgba(255,255,255,.55)", borderRadius: 20, border: `1.5px solid ${accent}` }}>
              <div style={{ minWidth: 100, fontSize: 22, letterSpacing: ".3em", textTransform: "uppercase", color: accent, fontWeight: 700 }}>{day}</div>
              <div style={{ flex: 1, fontSize: 26, lineHeight: 1.3, color: fg }}>{rest.join(" · ")}</div>
            </div>
          );
        })}
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, padding: 22, background: accent, color: "#fff", borderRadius: 999, textAlign: "center", fontSize: 24, fontWeight: 600, letterSpacing: ".3em", textTransform: "uppercase" }}>{d.cta}</div>
    </div>
  );
}

// ─── Registry ───────────────────────────────────────────────────────────

const TEMPLATES_V3 = [
  // CARROSSEIS
  { id: "carousel-tips-cover", group: "Carrossel (1080×1350)", name: "Dicas · capa", w: 1080, h: 1350, render: tplCarouselTipsCover,
    fields: [
      { k: "eyebrow", label: "Eyebrow (tag pequena no canto)", type: "text" },
      { k: "bigNumber", label: "Número grande (em Caveat)", type: "text", hint: "ex: 5, 7, 10..." },
      { k: "title", label: "Título do carrossel (Caveat · use \\n p/ quebrar)", type: "textarea" },
      { k: "subtitle", label: "Subtítulo explicando", type: "textarea" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor do subtítulo + texto secundário", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do número grande + logo + 'arrasta' + @handle", type: "color", options: STK_PAL3 },
      { k: "hookColor", label: "Cor do título principal em Caveat", type: "color", options: STK_PAL3 },
    ],
    defaults: { eyebrow: "styling", bigNumber: "7", title: "dicas pra\nrenovar seu\nguarda-roupa", subtitle: "sem gastar muito · só com peças que você já tem (e algumas que vai querer)", handle: "@lirou.closet.65", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689", hookColor: "#df4b5a" } },

  { id: "carousel-tip-card", group: "Carrossel (1080×1350)", name: "Dica · card numerado", w: 1080, h: 1350, render: tplCarouselTipCard,
    fields: [
      { k: "indicator", label: "Indicador (canto superior direito)", type: "text", hint: "ex: 1/7" },
      { k: "number", label: "Número grande (Caveat enorme)", type: "text" },
      { k: "headline", label: "Manchete forte (Inter bold)", type: "text" },
      { k: "body", label: "Texto explicativo", type: "textarea" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor da manchete + corpo do texto", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do número grande + 'dica' + glifo + linha separadora", type: "color", options: STK_PAL3 },
    ],
    defaults: { indicator: "1/7", number: "01", headline: "mistura velho com novo.", body: "uma peça vintage com uma peça atual cria um look que ninguém mais tem. é a forma mais barata de ter estilo único.", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "carousel-edu", group: "Carrossel (1080×1350)", name: "Educacional · texto puro", w: 1080, h: 1350, render: tplCarouselEdu,
    fields: [
      { k: "tag", label: "Tag (canto superior esquerdo)", type: "text" },
      { k: "kicker", label: "Kicker (linha curta acima do título)", type: "text" },
      { k: "title", label: "Título (Caveat · use \\n p/ quebrar)", type: "textarea" },
      { k: "body", label: "Texto longo de baixo", type: "textarea" },
      { k: "position", label: "Posição no carrossel (ex: 2/5)", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor do título grande + corpo", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor da tag + kicker + glifo + número da posição", type: "color", options: STK_PAL3 },
    ],
    defaults: { tag: "explicação", kicker: "antes de comprar, lembre:", title: "moda rápida\ncusta caro.", body: "uma peça vinda do bazar de marca brasileira durou 5 anos no nosso guarda-roupa. peças de fast fashion duram, em média, 7 lavagens.", position: "2/5", bg: "#f4f1ec", fg: "#1b1b1a", accent: "#674689" } },

  { id: "carousel-lookbook", group: "Carrossel (1080×1350)", name: "Lookbook · foto full", w: 1080, h: 1350, render: tplCarouselLookbook,
    fields: [
      { k: "image", label: "Foto do look (vai cobrir o card inteiro)", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "eyebrow", label: "Eyebrow (pílula transparente no topo esquerdo)", type: "text" },
      { k: "tag", label: "Tag colorida (canto superior direito)", type: "text" },
      { k: "title", label: "Título (Caveat · embaixo)", type: "text" },
      { k: "body", label: "Descrição curta", type: "textarea" },
      { k: "position", label: "Posição (ex: 3/5)", type: "text" },
      { k: "bg", label: "Cor de fundo (atrás da foto, caso ela tenha transparência)", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor do título + corpo (texto sobre a foto · use claro)", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor da pílula colorida no canto direito", type: "color", options: STK_PAL3 },
    ],
    defaults: { image: "", imgLabel: "look completo", eyebrow: "look 03", tag: "novo", title: "feel the vibe", body: "calça class · tee oversized · tênis branco — tudo no closet.", position: "3/5", bg: "#1b1b1a", fg: "#ffffff", accent: "#df4b5a" } },

  { id: "carousel-quote", group: "Carrossel (1080×1350)", name: "Citação · estilo livro", w: 1080, h: 1350, render: tplCarouselQuote,
    fields: [
      { k: "chapter", label: "Capítulo / posição (canto superior direito)", type: "text" },
      { k: "quote", label: "Citação (Caveat · use \\n p/ quebrar)", type: "textarea" },
      { k: "author", label: "Autor / fonte (caps lock)", type: "text" },
      { k: "context", label: "Contexto pequeno (linha cinza embaixo)", type: "text" },
      { k: "position", label: "Posição rodapé esquerdo", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor da citação principal + contexto", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor das aspas decorativas + autor + capítulo + logo", type: "color", options: STK_PAL3 },
    ],
    defaults: { chapter: "cap. 01", quote: "moda não é\nsobre roupa.\né sobre\ncoragem.", author: "lirou closet 65", context: "manifesto · 2025", position: "1/5", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "carousel-compare", group: "Carrossel (1080×1350)", name: "Comparação 2x · antes/depois", w: 1080, h: 1350, render: tplCarouselCompare,
    fields: [
      { k: "imageLeft", label: "Foto esquerda", type: "image" },
      { k: "imageRight", label: "Foto direita", type: "image" },
      { k: "labelLeft", label: "Label da foto esquerda", type: "text" },
      { k: "labelRight", label: "Label da foto direita", type: "text" },
      { k: "eyebrow", label: "Eyebrow (canto direito superior)", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "body", label: "Descrição", type: "textarea" },
      { k: "position", label: "Posição (ex: 2/4)", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor do título + corpo + fundo do badge esquerdo", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do eyebrow + posição + fundo do badge direito + glifo", type: "color", options: STK_PAL3 },
    ],
    defaults: { imageLeft: "", imageRight: "", labelLeft: "casual", labelRight: "styled", eyebrow: "1 peça · 2 looks", title: "a mesma peça,\noutro vibe.", body: "trocando só os acessórios você muda a história completa da peça. arrasta pra ver mais combinações.", position: "2/4", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  // STORIES
  { id: "story-achadinho", group: "Stories (1080×1920)", name: "Achadinho · peça destaque", w: 1080, h: 1920, render: tplStoryAchadinho,
    fields: [
      { k: "image", label: "Foto da peça", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "title", label: "Frase grande no topo (Caveat)", type: "text" },
      { k: "badge", label: "Badge no canto da foto (Caveat curto · 1-2 palavras)", type: "text" },
      { k: "itemName", label: "Nome da peça (Caveat médio)", type: "text" },
      { k: "detail", label: "Detalhes (tamanho, cor)", type: "text" },
      { k: "price", label: "Preço (texto do botão coral)", type: "text" },
      { k: "cta", label: "CTA do botão inferior", type: "text" },
      { k: "bg", label: "Cor de fundo do story", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor dos detalhes da peça (linha pequena)", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do glifo + 'achadinho' + nome da peça + botão CTA", type: "color", options: STK_PAL3 },
      { k: "hookColor", label: "Cor do título grande + badge + botão de preço", type: "color", options: STK_PAL3 },
    ],
    defaults: { image: "", imgLabel: "peça nova", title: "achei pra você", badge: "novo!", itemName: "blusa cropped", detail: "preta · tam P · única", price: "R$ 89", cta: "chama no direct ↗", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689", hookColor: "#df4b5a" } },

  { id: "story-bts", group: "Stories (1080×1920)", name: "Bastidores · foto + frase", w: 1080, h: 1920, render: tplStoryBts,
    fields: [
      { k: "image", label: "Foto bastidor (cobre tudo)", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "eyebrow", label: "Eyebrow (pílula transparente topo esquerdo)", type: "text" },
      { k: "headline", label: "Frase forte (Caveat · use \\n p/ quebrar)", type: "textarea" },
      { k: "body", label: "Texto curto explicativo", type: "textarea" },
      { k: "cta", label: "CTA no rodapé (caps lock)", type: "text" },
      { k: "bg", label: "Cor de fundo (atrás da foto)", type: "color", options: STK_PAL3 },
    ],
    defaults: { image: "", imgLabel: "bastidor", eyebrow: "BTS · diário", headline: "preparando\no drop 05", body: "horas garimpando peças únicas, lavando, fotografando. cada drop tem amor por trás.", cta: "fica de olho · sex 19h", bg: "#1b1b1a" } },

  { id: "story-look-day", group: "Stories (1080×1920)", name: "Look do dia · com peças", w: 1080, h: 1920, render: tplStoryLookDay,
    fields: [
      { k: "image", label: "Foto do look completo", type: "image" },
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "title", label: "Título do look (Caveat)", type: "text" },
      { k: "pieces", label: "Peças do look (UMA por linha · até 3)", type: "textarea", hint: "ex:\\ncalça class · R$ 165\\ntop bege · R$ 79" },
      { k: "cta", label: "CTA rodapé", type: "text" },
      { k: "bg", label: "Cor de fundo do story", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor do texto das peças (dentro dos cards)", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do eyebrow + 'peças do look' + bolinhas numeradas + bordas + CTA", type: "color", options: STK_PAL3 },
    ],
    defaults: { image: "", eyebrow: "look do dia", title: "feel the vibe", pieces: "calça class · R$ 165\ntop bege · R$ 79\ntênis branco · R$ 95", cta: "tudo no perfil ↗", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "story-coupon", group: "Stories (1080×1920)", name: "Cupom · flash sale", w: 1080, h: 1920, render: tplStoryCoupon,
    fields: [
      { k: "eyebrow", label: "Eyebrow (topo)", type: "text" },
      { k: "discount", label: "Desconto grande (Caveat enorme · ex: -30%)", type: "text" },
      { k: "body", label: "Texto explicando", type: "textarea" },
      { k: "coupon", label: "Código do cupom (caps lock grande)", type: "text" },
      { k: "terms", label: "Termos (linha pequena)", type: "text" },
      { k: "cta", label: "CTA botão branco", type: "text" },
      { k: "bg", label: "Cor de fundo do story", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor do desconto grande + eyebrow + texto principal + termos", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor da borda tracejada do código de cupom", type: "color", options: STK_PAL3 },
    ],
    defaults: { eyebrow: "⚡ flash sale", discount: "-30%", body: "em todas as peças usando o cupom abaixo", coupon: "LIROU30", terms: "⏱ só nas próximas 6h", cta: "vou no perfil ↗", bg: "#df4b5a", fg: "#ffffff", accent: "#674689" } },

  { id: "story-question", group: "Stories (1080×1920)", name: "Pergunta aberta · caixinha", w: 1080, h: 1920, render: tplStoryQuestion,
    fields: [
      { k: "title", label: "Título grande (Caveat · use \\n p/ quebrar)", type: "textarea" },
      { k: "label", label: "Label dentro da caixa branca (caps lock)", type: "text" },
      { k: "question", label: "Pergunta dentro da caixa", type: "textarea" },
      { k: "bg", label: "Cor de fundo do story", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor da pergunta (dentro da caixa branca)", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do glifo + 'caixinha de' + título + label da caixa + 'responde aí'", type: "color", options: STK_PAL3 },
    ],
    defaults: { title: "dúvidas\n& curiosidades", label: "pergunta", question: "quero saber sobre...", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "story-reels-cover", group: "Stories (1080×1920)", name: "Reels · capa de vídeo", w: 1080, h: 1920, render: tplStoryReelsCover,
    fields: [
      { k: "image", label: "Foto/frame do vídeo (cobre tudo)", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "duration", label: "Duração (ex: 0:30)", type: "text" },
      { k: "title", label: "Título (Caveat enorme · use \\n p/ quebrar)", type: "textarea" },
      { k: "subtitle", label: "Subtítulo", type: "textarea" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Cor de fundo (atrás da foto)", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor do título + subtítulo + handle (texto sobre a foto)", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do glifo no topo", type: "color", options: STK_PAL3 },
      { k: "hookColor", label: "Cor da pílula de duração + linha separadora", type: "color", options: STK_PAL3 },
    ],
    defaults: { image: "", imgLabel: "frame do reels", duration: "0:30", title: "5 looks\ncom uma\ncalça só", subtitle: "garimpada por R$ 165 e usada de mil formas durante a semana", handle: "@lirou.closet.65", bg: "#1b1b1a", fg: "#ffffff", accent: "#ffffff", hookColor: "#df4b5a" } },

  { id: "story-schedule", group: "Stories (1080×1920)", name: "Agenda semanal · roteiro", w: 1080, h: 1920, render: tplStorySchedule,
    fields: [
      { k: "eyebrow", label: "Eyebrow (topo)", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "schedule", label: "Agenda (formato 'DIA | atividade' · uma por linha · até 7)", type: "textarea", hint: "ex:\\nseg | drop 05 às 19h\\nter | bazar online" },
      { k: "cta", label: "CTA rodapé", type: "text" },
      { k: "bg", label: "Cor de fundo do story", type: "color", options: STK_PAL3 },
      { k: "fg", label: "Cor da atividade (texto principal de cada linha)", type: "color", options: STK_PAL3 },
      { k: "accent", label: "Cor do eyebrow + título + dia da semana + bordas + CTA", type: "color", options: STK_PAL3 },
    ],
    defaults: { eyebrow: "semana de", title: "agenda lirou", schedule: "seg | quiz nos stories · 14h\nqua | bastidores do garimpo\nsex | drop 05 às 19h\nsáb | bazar online\ndom | look da semana", cta: "ative as notificações ✦", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },
];

if (window.LIROU_TEMPLATES) {
  window.LIROU_TEMPLATES = window.LIROU_TEMPLATES.concat(TEMPLATES_V3);
}