// generator-templates.jsx — render functions per template

const COLORS = { cream: "#eadcbe", purple: "#674689", coral: "#df4b5a", ink: "#1b1b1a", white: "#fff" };

const GLYPH = "../" + "assets/glyph-outline.svg";

function colorFilter(c) {
  if (c === "#fff" || c === "#ffffff") return "brightness(0) invert(1)";
  if (c.toLowerCase() === "#1b1b1a") return "brightness(0)";
  if (c.toLowerCase() === "#674689") return "brightness(0) saturate(100%) invert(28%) sepia(40%) saturate(900%) hue-rotate(248deg) brightness(85%) contrast(95%)";
  if (c.toLowerCase() === "#df4b5a") return "brightness(0) saturate(100%) invert(45%) sepia(80%) saturate(2200%) hue-rotate(330deg) brightness(95%) contrast(95%)";
  return "";
}

function Glyph({ size = 60, color = "#674689" }) {
  return <img src="assets/glyph-outline.svg" style={{ width: size * 0.69, height: size, filter: colorFilter(color) }} />;
}

function Logo({ size = "md", color = "#674689", textColor, glyphOnly = false }) {
  const S = { xs: { g: 50, gap: 10, t1: 12, t2: 11, ls1: ".4em", ls2: ".35em" },
              sm: { g: 90, gap: 16, t1: 18, t2: 16, ls1: ".5em", ls2: ".4em" },
              md: { g: 140, gap: 22, t1: 24, t2: 22, ls1: ".55em", ls2: ".45em" },
              lg: { g: 220, gap: 32, t1: 32, t2: 28, ls1: ".6em", ls2: ".5em" },
              xl: { g: 380, gap: 56, t1: 48, t2: 42, ls1: ".65em", ls2: ".55em" } };
  const s = S[size]; const tc = textColor || color;
  return (
    <div style={{ display: "inline-flex", flexDirection: "column", alignItems: "center" }}>
      <Glyph size={s.g} color={color} />
      {!glyphOnly && (
        <div style={{ marginTop: s.gap, fontFamily: "'Inter', sans-serif", color: tc, lineHeight: 1.6, textAlign: "center" }}>
          <div style={{ fontSize: s.t1, letterSpacing: s.ls1, fontWeight: 400 }}>L I R O U</div>
          <div style={{ fontSize: s.t2, letterSpacing: s.ls2, fontWeight: 400 }}>C L O S E T 65</div>
        </div>
      )}
    </div>
  );
}

function Placeholder({ label = "produto", tone = "cream" }) {
  const tones = { dark: ["#2a2a2a","#323232","rgba(255,255,255,.5)"], cream: ["#dfd2b4","#e8dcc0","#7a6f55"] };
  const [a, b, fg] = tones[tone] || tones.cream;
  return <div style={{ width: "100%", height: "100%", background: `repeating-linear-gradient(135deg, ${a} 0 24px, ${b} 24px 48px)`, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "ui-monospace, monospace", fontSize: 22, color: fg, letterSpacing: ".1em", textTransform: "uppercase" }}>{label}</div>;
}

// ─── Templates ──────────────────────────────────────────────────────────

function tplPostDrop(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, color: fg, position: "relative", fontFamily: "'Inter', sans-serif", overflow: "hidden" }}>
      <div style={{ position: "absolute", top: 60, left: 60, fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>✦ drop · {d.edition}</div>
      <div style={{ position: "absolute", top: 60, right: 60, fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: fg, opacity: .5 }}>{d.date}</div>
      <div style={{ position: "absolute", top: 180, left: 0, right: 0, display: "flex", justifyContent: "center" }}><Logo size="xl" color={accent} textColor={fg} /></div>
      <div style={{ position: "absolute", top: 880, left: 0, right: 0, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: hookC, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.hook}</div>
        <div style={{ fontSize: 28, marginTop: 30, maxWidth: 760, marginLeft: "auto", marginRight: "auto", lineHeight: 1.4, color: fg }}>{d.body}</div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <div style={{ padding: "16px 32px", background: accent, color: "#fff", borderRadius: 999, fontSize: 22, letterSpacing: ".2em", textTransform: "uppercase", fontWeight: 600 }}>{d.cta}</div>
        <div style={{ fontSize: 18, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.handle}</div>
      </div>
    </div>
  );
}

function tplPostProduct(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: "60px 60px 480px", borderRadius: 24, overflow: "hidden", background: "#fff" }}>
        {d.image ? (
          <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} crossOrigin="anonymous" />
        ) : (
          <Placeholder label={d.imgLabel} tone="cream" />
        )}
        <div style={{ position: "absolute", top: 24, right: 24, width: 84, height: 84, borderRadius: "50%", background: COLORS.coral, color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Caveat', cursive", fontSize: 34, fontWeight: 700, transform: "rotate(8deg)" }}>{d.badge}</div>
        <div style={{ position: "absolute", top: 24, left: 24 }}><Logo size="xs" color={COLORS.purple} glyphOnly /></div>
      </div>
      <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, padding: "30px 60px 60px" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 96, lineHeight: 1, transform: "rotate(-1deg)", color: accent, fontWeight: 700 }}>{d.title}</div>
        <div style={{ fontSize: 24, marginTop: 8, opacity: .7, color: fg }}>{d.subtitle}</div>
        <div style={{ marginTop: 28, display: "flex", alignItems: "center", gap: 20 }}>
          <div style={{ padding: "16px 30px", background: COLORS.coral, color: "#fff", borderRadius: 999, fontSize: 28, fontWeight: 700 }}>{d.price}</div>
          <div style={{ fontSize: 20, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.cta}</div>
        </div>
      </div>
    </div>
  );
}

function tplPostQuote(d) {
  const fg = d.fg || "#fff", subC = fg === "#fff" ? "rgba(255,255,255,.85)" : "rgba(27,27,26,.7)";
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", width: 900, height: 900, borderRadius: "50%", background: COLORS.coral, right: -200, bottom: -300 }} />
      <div style={{ position: "absolute", top: 60, left: 0, right: 0, display: "flex", justifyContent: "center" }}><Logo size="sm" color={fg} textColor={subC} /></div>
      <div style={{ position: "absolute", top: "40%", left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 240, lineHeight: .9, color: fg, transform: "rotate(-3deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.hero}</div>
        <div style={{ fontSize: 26, marginTop: 60, maxWidth: 760, lineHeight: 1.4, marginLeft: "auto", marginRight: "auto", whiteSpace: "pre-line", color: fg }}>{d.body}</div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60, textAlign: "center", fontSize: 22, letterSpacing: ".3em", textTransform: "uppercase", color: subC }}>{d.handle}</div>
    </div>
  );
}

function tplPostFaqSizes(d) {
  const fg = d.fg || COLORS.ink, accent = d.accent || COLORS.purple;
  const rows = d.rows.split("\n").map(r => r.split("|").map(c => c.trim())).filter(r => r.length === 4);
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, padding: 60, color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 30 }}>
        <Logo size="sm" color={accent} />
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: accent }}>{d.tag}</div>
      </div>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: 130, lineHeight: .9, color: COLORS.coral, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.title}</div>
      <div style={{ marginTop: 60, background: "#fff", borderRadius: 24, padding: "30px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 12, paddingBottom: 18, borderBottom: "1.5px solid " + accent, fontSize: 18, letterSpacing: ".25em", textTransform: "uppercase", color: accent, fontWeight: 600 }}>
          <div>tam</div><div>busto</div><div>cintura</div><div>quadril</div>
        </div>
        {rows.map((r, i) => (
          <div key={i} style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr 1fr", gap: 12, padding: "20px 0", borderBottom: i < rows.length - 1 ? "1px solid " + COLORS.cream : "none", fontSize: 26, color: COLORS.ink }}>
            <div style={{ fontWeight: 700, color: accent }}>{r[0]}</div><div>{r[1]} cm</div><div>{r[2]} cm</div><div>{r[3]} cm</div>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 36, fontSize: 22, lineHeight: 1.4, opacity: .75, color: fg }}>{d.footer}</div>
    </div>
  );
}

function tplPostBazar(d) {
  const fg = d.fg || "#fff";
  return (
    <div style={{ width: 1080, height: 1350, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", width: 1200, height: 1200, borderRadius: "50%", background: COLORS.purple, left: -300, top: -500 }} />
      <div style={{ position: "absolute", top: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Logo size="xs" color="#fff" glyphOnly />
        <div style={{ fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase" }}>{d.tag}</div>
      </div>
      <div style={{ position: "absolute", top: 240, left: 60, right: 60, fontFamily: "'Caveat', cursive", fontSize: 280, lineHeight: .9, color: fg, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.hero}</div>
      <div style={{ position: "absolute", top: 850, left: 60, right: 60, fontSize: 32, lineHeight: 1.4, color: fg }}>{d.body}</div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60 }}>
        <div style={{ padding: "20px 0", background: "#fff", color: COLORS.coral, borderRadius: 999, textAlign: "center", fontSize: 26, fontWeight: 700, letterSpacing: ".2em", textTransform: "uppercase" }}>{d.cta}</div>
        <div style={{ textAlign: "center", marginTop: 16, fontSize: 18, letterSpacing: ".5em", textTransform: "uppercase", color: "rgba(255,255,255,.75)" }}>{d.range}</div>
      </div>
    </div>
  );
}

function tplStoryTeaser(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", fontFamily: "'Inter', sans-serif", overflow: "hidden", color: fg }}>
      <div style={{ position: "absolute", top: 140, left: 0, right: 0, textAlign: "center", fontSize: 22, letterSpacing: ".5em", textTransform: "uppercase", color: accent }}>{d.tag}</div>
      <div style={{ position: "absolute", top: 380, left: 0, right: 0, display: "flex", justifyContent: "center" }}><Logo size="xl" color={accent} textColor={fg} /></div>
      <div style={{ position: "absolute", top: 1180, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 220, lineHeight: .9, color: hookC, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.title}</div>
        <div style={{ fontSize: 28, letterSpacing: ".4em", textTransform: "uppercase", marginTop: 30, color: accent }}>{d.date}</div>
      </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 tplStoryProduct(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: 60, right: 60, display: "flex", justifyContent: "space-between" }}>
        <Logo size="xs" color={accent} glyphOnly />
        <div style={{ fontSize: 20, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.number}</div>
      </div>
      <div style={{ position: "absolute", inset: "260px 80px 720px", borderRadius: 32, overflow: "hidden", background: "#fff" }}>
        {d.image ? (
          <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} crossOrigin="anonymous" />
        ) : (
          <Placeholder label={d.imgLabel} tone="cream" />
        )}
      </div>
      <div style={{ position: "absolute", bottom: 280, left: 80, right: 80 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 130, lineHeight: .95, color: accent, transform: "rotate(-1deg)", fontWeight: 700 }}>{d.title}</div>
        <div style={{ fontSize: 28, marginTop: 12, opacity: .7, color: fg }}>{d.subtitle}</div>
      </div>
      <div style={{ position: "absolute", bottom: 100, left: 80, right: 80, display: "flex", gap: 16 }}>
        <div style={{ padding: "22px 0", flex: 1, background: COLORS.coral, color: "#fff", borderRadius: 999, textAlign: "center", fontSize: 30, fontWeight: 700 }}>{d.price}</div>
        <div style={{ padding: "22px 0", flex: 1, background: accent, color: "#fff", borderRadius: 999, textAlign: "center", fontSize: 22, fontWeight: 600, letterSpacing: ".2em", textTransform: "uppercase" }}>{d.cta}</div>
      </div>
    </div>
  );
}

function tplStoryCountdown(d) {
  const fg = d.fg || "#fff", subC = fg === "#fff" ? COLORS.cream : "rgba(27,27,26,.7)";
  const blocks = [["days","dias",d.days],["hours","hrs",d.hours],["mins","min",d.mins]];
  return (
    <div style={{ width: 1080, height: 1920, background: d.bg, position: "relative", overflow: "hidden", color: fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", width: 1200, height: 1200, borderRadius: "50%", background: COLORS.coral, left: -350, bottom: -400 }} />
      <div style={{ position: "absolute", top: 120, left: 0, right: 0, display: "flex", justifyContent: "center" }}><Logo size="sm" color={fg} textColor={fg} /></div>
      <div style={{ position: "absolute", top: 460, left: 60, right: 60, textAlign: "center", fontSize: 26, letterSpacing: ".5em", textTransform: "uppercase", color: subC }}>{d.eyebrow}</div>
      <div style={{ position: "absolute", top: 580, left: 60, right: 60, display: "flex", justifyContent: "center", gap: 24 }}>
        {blocks.map(([k, l, n]) => (
          <div key={k} style={{ flex: 1, padding: "30px 0", background: fg === "#fff" ? "rgba(255,255,255,.12)" : "rgba(27,27,26,.06)", border: `2px solid ${fg === "#fff" ? "rgba(255,255,255,.4)" : "rgba(27,27,26,.25)"}`, borderRadius: 28, textAlign: "center" }}>
            <div style={{ fontFamily: "'Caveat', cursive", fontSize: 140, lineHeight: 1, fontWeight: 700, color: fg }}>{n}</div>
            <div style={{ fontSize: 22, letterSpacing: ".3em", textTransform: "uppercase", color: subC }}>{l}</div>
          </div>
        ))}
      </div>
      <div style={{ position: "absolute", top: 1080, left: 60, right: 60, textAlign: "center" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: fg, transform: "rotate(-2deg)", fontWeight: 700 }}>{d.title}</div>
        <div style={{ fontSize: 28, letterSpacing: ".4em", textTransform: "uppercase", marginTop: 24, color: subC }}>{d.subline}</div>
      </div>
      <div style={{ position: "absolute", bottom: 110, left: 60, right: 60, padding: "26px 0", background: "#fff", color: COLORS.purple, borderRadius: 999, textAlign: "center", fontSize: 26, fontWeight: 700, letterSpacing: ".25em", textTransform: "uppercase" }}>{d.cta}</div>
    </div>
  );
}

// Carrossel: 1 capa + 5 cards de marca
function tplCarouselCover(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, fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>✦ {d.eyebrow}</div>
      <div style={{ position: "absolute", top: 60, right: 60, fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>arrasta →</div>
      <div style={{ position: "absolute", top: 320, left: 60, right: 60 }}>
        <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: 40, lineHeight: 1.4, maxWidth: 760, color: fg }}>{d.subtitle}</div>
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
        <Logo size="xs" color={accent} />
        <div style={{ fontSize: 22, letterSpacing: ".4em", textTransform: "uppercase", color: accent }}>{d.handle}</div>
      </div>
    </div>
  );
}

function tplCarouselBrand(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" }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 96, color: accent, fontWeight: 700, transform: "rotate(-2deg)" }}>{d.number}</div>
        <div style={{ fontSize: 18, letterSpacing: ".3em", textTransform: "uppercase", color: fg, opacity: .5 }}>arrasta →</div>
      </div>
      <div style={{ position: "absolute", inset: "240px 60px 540px", borderRadius: 24, overflow: "hidden", background: "#fff" }}>
        {d.image ? (
          <img src={d.image} style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} crossOrigin="anonymous" />
        ) : (
          <Placeholder label={d.imgLabel || d.brand} tone="cream" />
        )}
      </div>
      <div style={{ position: "absolute", bottom: 60, left: 60, right: 60 }}>
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 130, lineHeight: 1, color: accent, transform: "rotate(-1deg)", fontWeight: 700 }}>{d.brand}</div>
        <div style={{ fontSize: 26, marginTop: 16, lineHeight: 1.4, color: fg, opacity: .85 }}>{d.body}</div>
        <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
          {(d.tags || "").split(",").map(t => t.trim()).filter(Boolean).map((t, i) => (
            <div key={i} style={{ padding: "10px 22px", border: `1.5px solid ${accent}`, borderRadius: 999, fontSize: 18, letterSpacing: ".15em", textTransform: "uppercase", color: accent }}>{t}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function tplCarouselClosing(d) {
  const fg = d.fg || "#fff";
  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, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: 60, textAlign: "center", gap: 40 }}>
        <Logo size="lg" color={fg} textColor={fg} />
        <div style={{ fontFamily: "'Caveat', cursive", fontSize: 200, lineHeight: .9, color: fg, transform: "rotate(-2deg)", fontWeight: 700, whiteSpace: "pre-line" }}>{d.hero}</div>
        <div style={{ fontSize: 28, lineHeight: 1.4, maxWidth: 760, color: fg, opacity: .9 }}>{d.body}</div>
        <div style={{ marginTop: 30, padding: "20px 40px", background: "#fff", color: COLORS.purple, borderRadius: 999, fontSize: 24, fontWeight: 700, letterSpacing: ".25em", textTransform: "uppercase" }}>{d.cta}</div>
      </div>
    </div>
  );
}

function tplHighlight(d) {
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: d.fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 60 }}>
        <div style={{ fontSize: 220, lineHeight: 1, color: d.fg, fontFamily: "'Caveat', cursive", fontWeight: 700 }}>{d.icon}</div>
        <div style={{ fontSize: 90, letterSpacing: ".35em", textTransform: "uppercase", fontWeight: 500 }}>{d.label}</div>
      </div>
    </div>
  );
}

function tplHighlightGlyph(d) {
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Glyph size={d.size || 540} color={d.fg} />
    </div>
  );
}

function tplHighlightGlyphLabel(d) {
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: d.fg, fontFamily: "'Inter', sans-serif", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 50 }}>
      <Glyph size={420} color={d.fg} />
      <div style={{ fontSize: 80, letterSpacing: ".4em", textTransform: "uppercase", fontWeight: 500 }}>{d.label}</div>
    </div>
  );
}

function tplHighlightCircle(d) {
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", color: d.fg, fontFamily: "'Inter', sans-serif" }}>
      <div style={{ width: 760, height: 760, borderRadius: "50%", border: `${d.border || 8}px solid ${d.fg}`, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 40 }}>
        <Glyph size={300} color={d.fg} />
        <div style={{ fontSize: 70, letterSpacing: ".4em", textTransform: "uppercase", fontWeight: 500 }}>{d.label}</div>
      </div>
    </div>
  );
}

function tplHighlightCaveat(d) {
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", color: d.fg, fontFamily: "'Inter', sans-serif", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <div style={{ fontFamily: "'Caveat', cursive", fontSize: d.size || 380, lineHeight: .9, transform: "rotate(-4deg)", fontWeight: 700, color: d.fg, textAlign: "center", whiteSpace: "pre-line" }}>{d.label}</div>
    </div>
  );
}

function tplProfilePic(d) {
  return (
    <div style={{ width: 1080, height: 1080, background: d.bg, position: "relative", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <Glyph size={d.size || 720} color={d.fg} />
    </div>
  );
}

// ─── Template registry ──────────────────────────────────────────────────

window.LIROU_TEMPLATES = [
  { id: "post-drop", group: "Posts (1080×1350)", name: "Drop · lançamento", w: 1080, h: 1350, render: tplPostDrop,
    fields: [
      { k: "edition", label: "Número do drop", type: "text" },
      { k: "date", label: "Data / horário", type: "text" },
      { k: "hook", label: "Hook (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "body", label: "Subtítulo", type: "textarea" },
      { k: "cta", label: "Texto do botão", type: "text" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card todo)", type: "color", options: ["#eadcbe","#674689","#df4b5a"] },
    ],
    defaults: { edition: "04", date: "sex · 19h", hook: "chegou!", body: "12 peças novas. streetwear nacional, garimpado e curado pra você.", cta: "ver no perfil ↗", handle: "@lirou.closet.65", bg: "#eadcbe" } },

  { id: "post-product", group: "Posts (1080×1350)", name: "Produto", w: 1080, h: 1350, render: tplPostProduct,
    fields: [
      { k: "image", label: "Foto da peça", type: "image", hint: "recomendado: foto quadrada ou retrato" },
      { k: "title", label: "Nome da peça (Caveat)", type: "text" },
      { k: "subtitle", label: "Detalhes", type: "text" },
      { k: "price", label: "Preço", type: "text" },
      { k: "badge", label: "Badge (canto)", type: "text" },
      { k: "imgLabel", label: "Label do placeholder", type: "text" },
      { k: "cta", label: "CTA secundário", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche atrás da foto e do texto)", type: "color", options: ["#eadcbe","#f4f1ec"] },
    ],
    defaults: { image: "", title: "calça class", subtitle: "cargo verde · tam M · única", price: "R$ 165", badge: "new!", imgLabel: "calça · class", cta: "chama no direct →", bg: "#eadcbe" } },

  { id: "post-quote", group: "Posts (1080×1350)", name: "Manifesto / quote", w: 1080, h: 1350, render: tplPostQuote,
    fields: [
      { k: "hero", label: "Hero (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "body", label: "Corpo", type: "textarea" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Cor de fundo principal (a bola colorida atrás é coral fixo)", type: "color", options: ["#674689","#df4b5a","#1b1b1a"] },
    ],
    defaults: { hero: "vem\ngarimpar", body: "peças únicas, marcas brasileiras\nque você ama. tudo a um direct.", handle: "@lirou.closet.65", bg: "#674689" } },

  { id: "post-faq", group: "Posts (1080×1350)", name: "FAQ medidas", w: 1080, h: 1350, render: tplPostFaqSizes,
    fields: [
      { k: "tag", label: "Tag (canto)", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "textarea" },
      { k: "rows", label: "Tabela (tam | busto | cintura | quadril)", type: "textarea", hint: "uma linha por tamanho" },
      { k: "footer", label: "Rodapé", type: "textarea" },
      { k: "bg", label: "Cor de fundo (a tabela em si é sempre branca)", type: "color", options: ["#eadcbe","#f4f1ec"] },
    ],
    defaults: { tag: "FAQ · medidas", title: "qual o meu\ntamanho?", rows: "PP | 84 | 70 | 90\nP | 88 | 74 | 94\nM | 94 | 78 | 100\nG | 100 | 84 | 106\nGG | 106 | 90 | 112", footer: "✦ medidas tiradas peça a peça. na dúvida, chama no direct.", bg: "#eadcbe" } },

  { id: "post-bazar", group: "Posts (1080×1350)", name: "Bazar / promo", w: 1080, h: 1350, render: tplPostBazar,
    fields: [
      { k: "tag", label: "Tag", type: "text" },
      { k: "hero", label: "Hero (Caveat)", type: "textarea" },
      { k: "body", label: "Subtítulo", type: "textarea" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "range", label: "Período", type: "text" },
      { k: "bg", label: "Cor de fundo principal (a bola colorida atrás é roxo fixo)", type: "color", options: ["#df4b5a","#674689"] },
    ],
    defaults: { tag: "bazar", hero: "até\n50% off", body: "peças selecionadas com preço bonzinho — só esse fim de semana.", cta: "confere no perfil ↗", range: "sex · sáb · dom", bg: "#df4b5a" } },

  { id: "story-teaser", group: "Stories (1080×1920)", name: "Teaser drop", w: 1080, h: 1920, render: tplStoryTeaser,
    fields: [
      { k: "tag", label: "Eyebrow", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "date", label: "Data", type: "text" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o story todo)", type: "color", options: ["#eadcbe","#674689"] },
    ],
    defaults: { tag: "✦ em breve ✦", title: "drop 04", date: "sex · 19h", cta: "⌃ ative o lembrete", bg: "#eadcbe" } },

  { id: "story-product", group: "Stories (1080×1920)", name: "Produto", w: 1080, h: 1920, render: tplStoryProduct,
    fields: [
      { k: "image", label: "Foto da peça", type: "image", hint: "recomendado: foto vertical 4:5" },
      { k: "number", label: "Número da peça", type: "text" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "subtitle", label: "Detalhes", type: "text" },
      { k: "price", label: "Preço", type: "text" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche atrás da foto)", type: "color", options: ["#eadcbe","#674689"] },
    ],
    defaults: { image: "", number: "n° 042", imgLabel: "calça class", title: "calça class", subtitle: "cargo verde · tam M · única", price: "R$ 165", cta: "quero!", bg: "#eadcbe" } },

  { id: "story-countdown", group: "Stories (1080×1920)", name: "Countdown", w: 1080, h: 1920, render: tplStoryCountdown,
    fields: [
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "days", label: "Dias", type: "text" },
      { k: "hours", label: "Horas", type: "text" },
      { k: "mins", label: "Minutos", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "text" },
      { k: "subline", label: "Subtítulo", type: "text" },
      { k: "cta", label: "CTA", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o story todo · a bola atrás é coral fixo)", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe"] },
      { k: "fg", label: "Cor de TODO o texto + números do contador", type: "color", options: ["#ffffff","#1b1b1a","#eadcbe","#674689"] },
    ],
    defaults: { eyebrow: "faltam só", days: "02", hours: "14", mins: "32", title: "drop 04", subline: "12 peças novas", cta: "⌃ ative o lembrete", bg: "#674689", fg: "#ffffff" } },

  // ─── Carrossel ────────────────────────────────────────
  { id: "carousel-cover", group: "Carrossel (1080×1350)", name: "Capa do carrossel", w: 1080, h: 1350, render: tplCarouselCover,
    fields: [
      { k: "eyebrow", label: "Eyebrow", type: "text" },
      { k: "title", label: "Título (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "subtitle", label: "Subtítulo", type: "textarea" },
      { k: "handle", label: "@handle", type: "text" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do subtítulo + 'arrasta →' (texto secundário)", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor do título grande + eyebrow + glifo + @handle", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { eyebrow: "lista", title: "5 marcas\nbrasileiras\nque amamos", subtitle: "uma curadoria pessoal — quem tá fazendo streetwear nacional do bom no momento.", handle: "@lirou.closet.65", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "carousel-brand", group: "Carrossel (1080×1350)", name: "Card de marca (1 de 5)", w: 1080, h: 1350, render: tplCarouselBrand,
    fields: [
      { k: "number", label: "Numeração", type: "text", hint: "ex: 01, 02, 03..." },
      { k: "image", label: "Foto / mood da marca", type: "image" },
      { k: "imgLabel", label: "Label placeholder", type: "text" },
      { k: "brand", label: "Nome da marca (Caveat)", type: "text" },
      { k: "body", label: "Por que amamos (1-2 linhas)", type: "textarea" },
      { k: "tags", label: "Tags (separa por vírgula)", type: "text", hint: "ex: streetwear, sp, indie" },
      { k: "bg", label: "Cor de fundo (preenche o card)", type: "color", options: ["#eadcbe","#f4f1ec","#674689","#df4b5a","#1b1b1a"] },
      { k: "fg", label: "Cor do parágrafo descritivo", type: "color", options: ["#1b1b1a","#ffffff","#674689","#eadcbe"] },
      { k: "accent", label: "Cor da numeração + nome da marca + borda das tags", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { number: "01", image: "", imgLabel: "marca", brand: "piet", body: "streetwear curado por pedro andrade. peças que conversam com skate, rua e cultura paulistana.", tags: "streetwear, sp, drops limitados", bg: "#eadcbe", fg: "#1b1b1a", accent: "#674689" } },

  { id: "carousel-closing", group: "Carrossel (1080×1350)", name: "Encerramento", w: 1080, h: 1350, render: tplCarouselClosing,
    fields: [
      { k: "hero", label: "Hero (Caveat)", type: "textarea" },
      { 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 logo + título + corpo (TUDO menos o botão branco)", type: "color", options: ["#ffffff","#1b1b1a","#eadcbe","#674689"] },
    ],
    defaults: { hero: "qual é\na sua?", body: "comenta aqui as marcas brasileiras que você ama — sempre rolam descobertas no Lirou.", cta: "salva pra depois ↗", bg: "#674689", fg: "#ffffff" } },

  { id: "highlight", group: "Highlights (1080×1080)", name: "Capa · ícone + label", w: 1080, h: 1080, render: tplHighlight,
    fields: [
      { k: "icon", label: "Ícone (1-2 chars)", type: "text" },
      { k: "label", label: "Label", type: "text" },
      { k: "bg", label: "Cor de fundo do círculo de highlight", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor do ícone + label de baixo", type: "color", options: ["#ffffff","#1b1b1a","#674689","#df4b5a","#eadcbe"] },
    ],
    defaults: { icon: "✦", label: "drops", bg: "#674689", fg: "#ffffff" } },

  { id: "highlight-glyph", group: "Highlights (1080×1080)", name: "Capa · só glifo", w: 1080, h: 1080, render: tplHighlightGlyph,
    fields: [
      { k: "bg", label: "Cor de fundo do círculo de highlight", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor do mascote/glifo central", type: "color", options: ["#ffffff","#1b1b1a","#674689","#df4b5a","#eadcbe"] },
    ],
    defaults: { bg: "#eadcbe", fg: "#674689" } },

  { id: "highlight-glyph-label", group: "Highlights (1080×1080)", name: "Capa · glifo + label", w: 1080, h: 1080, render: tplHighlightGlyphLabel,
    fields: [
      { k: "label", label: "Label", type: "text" },
      { k: "bg", label: "Cor de fundo do círculo de highlight", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor do glifo + texto label embaixo", type: "color", options: ["#ffffff","#1b1b1a","#674689","#df4b5a","#eadcbe"] },
    ],
    defaults: { label: "looks", bg: "#df4b5a", fg: "#ffffff" } },

  { id: "highlight-circle", group: "Highlights (1080×1080)", name: "Capa · círculo + glifo", w: 1080, h: 1080, render: tplHighlightCircle,
    fields: [
      { k: "label", label: "Label", type: "text" },
      { k: "bg", label: "Cor de fundo do círculo de highlight", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor do círculo interno + glifo + texto", type: "color", options: ["#ffffff","#1b1b1a","#674689","#df4b5a","#eadcbe"] },
    ],
    defaults: { label: "drops", bg: "#1b1b1a", fg: "#eadcbe" } },

  { id: "highlight-caveat", group: "Highlights (1080×1080)", name: "Capa · escrita Caveat", w: 1080, h: 1080, render: tplHighlightCaveat,
    fields: [
      { k: "label", label: "Texto (Caveat)", type: "textarea", hint: "use \\n p/ quebrar linha" },
      { k: "bg", label: "Cor de fundo do círculo de highlight", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#eadcbe","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor da escrita à mão central", type: "color", options: ["#ffffff","#1b1b1a","#674689","#df4b5a","#eadcbe"] },
    ],
    defaults: { label: "looks", bg: "#eadcbe", fg: "#674689" } },

  { id: "profile-pic", group: "Foto de perfil (1080×1080)", name: "Foto de perfil · glifo", w: 1080, h: 1080, render: tplProfilePic,
    fields: [
      { k: "bg", label: "Cor de fundo da foto de perfil", type: "color", options: ["#eadcbe","#674689","#df4b5a","#1b1b1a","#f4f1ec","#ffffff"] },
      { k: "fg", label: "Cor do mascote/glifo central", type: "color", options: ["#674689","#df4b5a","#1b1b1a","#ffffff","#eadcbe"] },
    ],
    defaults: { bg: "#eadcbe", fg: "#674689" } },
];