@brunoalz/smartgesti-site-editor 1.0.0 → 1.2.0

package/dist/engine/export/exporters/sections/HeroExporter.js

@@ -1,128 +1,134 @@
-import { PLACEHOLDER_IMAGE_URL as mt } from "../../../presets/heroVariations.js";
-import { escapeHtml as e, resolveHref as Vt, linkTargetAttr as Dt, blockIdAttr as W, dataBlockIdAttr as L } from "../../shared/htmlHelpers.js";
-import { generateScopedId as P } from "../../shared/idGenerator.js";
-import { imageShadowMap as Q } from "../../../shared/shadowConstants.js";
-import { blockGapConfig as Wt, contentPositionMap as Ge } from "../../../shared/layoutConstants.js";
-import { generateButtonHoverStyles as Lt, generateButtonOverlayCSS as Pt, getButtonHoverKeyframes as Me } from "../../../shared/hoverEffects/buttonHover.js";
-import { mergeTypographyWithDefaults as pt, heroTitleDefaults as Re, heroSubtitleDefaults as Ve, heroDescriptionDefaults as De } from "../../../shared/typography/defaults.js";
-import { generateTypographyStyles as $t } from "../../../shared/typography/cssGenerator.js";
-import { gridPresetMap as We } from "../../../shared/imageGrid/presets.js";
-function Ke(o, X, _, w) {
+import { PLACEHOLDER_IMAGE_URL as yt, CAROUSEL_PLACEHOLDER_IMAGES as Ee } from "../../../presets/heroVariations.js";
+import { escapeHtml as e, resolveHref as Pt, linkTargetAttr as At, blockIdAttr as R, dataBlockIdAttr as L } from "../../shared/htmlHelpers.js";
+import { generateScopedId as D } from "../../shared/idGenerator.js";
+import { generateCarouselCSS as Oe } from "../../../shared/carouselAnimation.js";
+import { imageShadowMap as Vt } from "../../../shared/shadowConstants.js";
+import { blockGapConfig as Wt, contentPositionMap as Pe } from "../../../shared/layoutConstants.js";
+import { generateButtonHoverStyles as Nt, generateButtonOverlayCSS as Ft, getButtonHoverKeyframes as Ae } from "../../../shared/hoverEffects/buttonHover.js";
+import { mergeTypographyWithDefaults as ht, heroTitleDefaults as Ve, heroSubtitleDefaults as We, heroDescriptionDefaults as Ne } from "../../../shared/typography/defaults.js";
+import { generateTypographyStyles as ft } from "../../../shared/typography/cssGenerator.js";
+import { gridPresetMap as Fe } from "../../../shared/imageGrid/presets.js";
+function ro(o, ot, C, S) {
   const {
     variation: t,
-    variant: a = "centered",
-    title: T,
-    subtitle: C,
-    description: g,
-    primaryButton: l,
-    secondaryButton: u,
-    badge: S,
+    variant: l = "centered",
+    title: E,
+    subtitle: B,
+    description: p,
+    primaryButton: g,
+    secondaryButton: x,
+    badge: H,
     align: d = "center",
-    contentPosition: B = "center",
-    contentSpacing: A = "default",
-    blockGap: E = "default",
-    minHeight: p = "80vh",
-    image: O,
-    overlay: H,
-    overlayColor: f,
-    background: i,
+    contentPosition: k = "center",
+    contentSpacing: N = "default",
+    blockGap: F = "default",
+    minHeight: $ = "80vh",
+    image: U,
+    overlay: b,
+    overlayColor: u,
+    background: n,
     // Typography colors (legacy)
-    titleColor: m,
-    subtitleColor: I,
-    descriptionColor: j,
+    titleColor: y,
+    subtitleColor: O,
+    descriptionColor: P,
     // Typography config (novo sistema)
-    titleTypography: At,
-    subtitleTypography: Et,
-    descriptionTypography: Ot,
+    titleTypography: Ut,
+    subtitleTypography: Zt,
+    descriptionTypography: qt,
     // Badge styling
-    badgeColor: Nt,
-    badgeTextColor: Ft,
+    badgeColor: Jt,
+    badgeTextColor: Kt,
     // Layout
-    contentMaxWidth: ht = "800px",
-    paddingY: N,
+    contentMaxWidth: it = "800px",
+    paddingY: Z,
     // Image styling
-    imageRadius: tt = 16,
-    imageShadow: et = "lg",
-    imagePosition: yt = "right",
+    imageRadius: rt = 16,
+    imageShadow: st = "lg",
+    imagePosition: vt = "right",
     // Button size
-    buttonSize: Zt = "md",
+    buttonSize: Yt = "md",
     // Primary button styling
-    primaryButtonVariant: qt = "solid",
-    primaryButtonColor: Jt,
-    primaryButtonTextColor: Kt,
-    primaryButtonRadius: Ut = 8,
+    primaryButtonVariant: Qt = "solid",
+    primaryButtonColor: Xt,
+    primaryButtonTextColor: te,
+    primaryButtonRadius: ee = 8,
     // Secondary button styling
-    secondaryButtonVariant: Yt = "outline",
-    secondaryButtonColor: Qt,
-    secondaryButtonTextColor: Xt,
-    secondaryButtonRadius: te = 8,
+    secondaryButtonVariant: oe = "outline",
+    secondaryButtonColor: ie,
+    secondaryButtonTextColor: re,
+    secondaryButtonRadius: se = 8,
     // Button hover effects
-    buttonHoverEffect: ee = "scale",
-    buttonHoverIntensity: oe = 50,
-    buttonHoverOverlay: re = "none",
-    buttonHoverIconName: ie = "arrow-right",
+    buttonHoverEffect: ne = "scale",
+    buttonHoverIntensity: ae = 50,
+    buttonHoverOverlay: le = "none",
+    buttonHoverIconName: de = "arrow-right",
     // Decorative
-    showWave: ne,
-    waveColor: ut = "rgba(255,255,255,0.1)",
+    showWave: ce,
+    waveColor: xt = "rgba(255,255,255,0.1)",
     // Image Grid
-    imageGridEnabled: se,
-    imageGridPreset: ft = "four-equal",
-    imageGridImages: G = [],
-    imageGridGap: xt = 8
-  } = o.props, x = O || mt, ot = t === "hero-split" || a === "split", rt = t === "hero-parallax", it = t === "hero-overlay", vt = t === "hero-gradient", ae = t === "hero-minimal", nt = t === "hero-card", bt = (a === "image-bg" || it || rt || nt) && x, _t = bt && H, st = _t || vt || it, at = w?.colors?.primary || "#3b82f6", le = w?.colors?.primaryText || "#ffffff", de = st ? "#ffffff" : "var(--sg-text, #1f2937)", wt = st ? "rgba(255,255,255,0.85)" : "var(--sg-muted-text, #6b7280)", Ct = pt(
-    At,
-    { ...Re, color: m }
-  ), St = pt(
-    Et,
-    { ...Ve, color: I }
-  ), ce = pt(
-    Ot,
-    { ...De, color: j }
-  ), ge = $t(Ct, de), me = $t(St, wt), pe = $t(ce, wt), $e = Nt || at, he = Ft || "#ffffff", ye = Jt || at, ue = Kt || le, Bt = Qt || (st ? "#ffffff" : at), fe = Xt || Bt, M = [
+    imageGridEnabled: ge,
+    imageGridPreset: bt = "four-equal",
+    imageGridImages: A = [],
+    imageGridGap: _t = 8,
+    // Carousel
+    carouselImages: nt,
+    carouselInterval: me = 5,
+    carouselTransition: Ze = "crossfade"
+  } = o.props, _ = U || yt, at = t === "hero-split" || l === "split", lt = t === "hero-parallax", dt = t === "hero-overlay", wt = t === "hero-gradient", pe = t === "hero-minimal", ct = t === "hero-card", q = t === "hero-carousel", Ct = (l === "image-bg" || dt || lt || ct || q) && _, St = Ct && b, gt = St || wt || dt || q, mt = S?.colors?.primary || "#3b82f6", $e = S?.colors?.primaryText || "#ffffff", ue = gt ? "#ffffff" : "var(--sg-text, #1f2937)", Bt = gt ? "rgba(255,255,255,0.85)" : "var(--sg-muted-text, #6b7280)", Ht = ht(
+    Ut,
+    { ...Ve, color: y }
+  ), kt = ht(
+    Zt,
+    { ...We, color: O }
+  ), ye = ht(
+    qt,
+    { ...Ne, color: P }
+  ), he = ft(Ht, ue), fe = ft(kt, Bt), ve = ft(ye, Bt), xe = Jt || mt, be = Kt || "#ffffff", _e = Xt || mt, we = te || $e, zt = ie || (gt ? "#ffffff" : mt), Ce = re || zt, z = [
     "sg-hero",
     t ? `sg-hero--${String(t).replace("hero-", "")}` : "",
-    ot ? "sg-hero--split" : "",
-    rt ? "sg-hero--parallax" : "",
-    it ? "sg-hero--overlay" : "",
-    vt ? "sg-hero--gradient" : "",
-    ae ? "sg-hero--minimal" : "",
-    nt ? "sg-hero--card" : ""
+    at ? "sg-hero--split" : "",
+    lt ? "sg-hero--parallax" : "",
+    dt ? "sg-hero--overlay" : "",
+    wt ? "sg-hero--gradient" : "",
+    pe ? "sg-hero--minimal" : "",
+    ct ? "sg-hero--card" : "",
+    q ? "sg-hero--carousel" : ""
   ].filter(Boolean).join(" ");
-  let k = "";
-  i ? k = `background: ${i};` : bt && !ot ? (k = `background-image: url(${e(x)}); background-size: cover; background-position: center;`, rt && (k += " background-attachment: fixed;")) : k = "background-color: var(--sg-bg, #fff);";
-  const lt = N ? `padding: ${N} 2rem;` : "padding: 6rem 2rem;", dt = Ge[B] || "center", Ht = {
+  let I = "";
+  n ? I = `background: ${n};` : Ct && !at ? (I = `background-image: url(${e(_)}); background-size: cover; background-position: center;`, lt && (I += " background-attachment: fixed;")) : I = "background-color: var(--sg-bg, #fff);";
+  const J = Z ? `padding: ${Z} 2rem;` : "padding: 6rem 2rem;", K = Pe[k] || "center", It = {
     compact: { title: "0.75rem", subtitle: "0.5rem", description: "1.25rem", badge: "1rem", actions: "0.25rem" },
     default: { title: "1.25rem", subtitle: "1rem", description: "2.5rem", badge: "1.5rem", actions: "0.5rem" },
     spacious: { title: "2.25rem", subtitle: "2rem", description: "3.5rem", badge: "2.5rem", actions: "1.5rem" }
-  }, z = Ht[A] || Ht.default, F = Wt[E] || Wt.default, Z = F.justify, R = F.blockMaxWidth, q = F.containerMaxWidth, J = F.gap, xe = f ? `position: absolute; inset: 0; background: ${f}; z-index: 0;` : "position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%); z-index: 0;", K = _t ? `<div class="sg-hero__overlay" style="${xe}"></div>` : "", kt = ne ? `<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 150px; overflow: hidden; z-index: 1;">
+  }, T = It[N] || It.default, Y = Wt[F] || Wt.default, Q = Y.justify, V = Y.blockMaxWidth, X = Y.containerMaxWidth, tt = Y.gap, Se = u ? `position: absolute; inset: 0; background: ${u}; z-index: 0;` : "position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 100%); z-index: 0;", et = St ? `<div class="sg-hero__overlay" style="${Se}"></div>` : "", Tt = ce ? `<div style="position: absolute; bottom: 0; left: 0; right: 0; height: 150px; overflow: hidden; z-index: 1;">
         <svg viewBox="0 0 1200 120" preserveAspectRatio="none" style="position: absolute; bottom: 0; width: 100%; height: 100%;">
-          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="${ut}" opacity="0.5"/>
-          <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="${ut}" opacity="0.3"/>
+          <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="${xt}" opacity="0.5"/>
+          <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="${xt}" opacity="0.3"/>
         </svg>
-      </div>` : "", ve = S ? `<span class="sg-hero__badge" style="display: inline-block; padding: 0.5rem 1.25rem; background: ${$e}; color: ${he}; border-radius: 999px; font-size: 0.875rem; font-weight: 600; margin-bottom: ${z.badge};">${e(S)}</span>` : "", be = Ct.fontSize || 48, _e = T ? `<h1 class="sg-hero__title" style="${ge.cssString} font-size: clamp(2rem, 5vw, ${be}px); line-height: 1.1; margin-bottom: ${z.title}; letter-spacing: -0.02em;">${e(T)}</h1>` : "", we = St.fontSize || 24, Ce = C ? `<h2 class="sg-hero__subtitle" style="${me.cssString} font-size: clamp(1.125rem, 2.5vw, ${we}px); line-height: 1.3; margin-bottom: ${z.subtitle};">${e(C)}</h2>` : "", Se = g ? `<p class="sg-hero__description" style="max-width: 650px; margin: ${d === "center" ? `0 auto ${z.description}` : `0 0 ${z.description}`}; ${pe.cssString} line-height: 1.7;">${e(g)}</p>` : "", U = Le({
+      </div>` : "", Be = H ? `<span class="sg-hero__badge" data-block-group="Badge" style="display: inline-block; padding: 0.5rem 1.25rem; background: ${xe}; color: ${be}; border-radius: 999px; font-size: 0.875rem; font-weight: 600; margin-bottom: ${T.badge};">${e(H)}</span>` : "", He = Ht.fontSize || 48, jt = E ? `<h1 class="sg-hero__title" style="${he.cssString} font-size: clamp(2rem, 5vw, ${He}px); line-height: 1.1; margin-bottom: ${T.title}; letter-spacing: -0.02em;">${e(E)}</h1>` : "", ke = kt.fontSize || 24, Mt = B ? `<h2 class="sg-hero__subtitle" style="${fe.cssString} font-size: clamp(1.125rem, 2.5vw, ${ke}px); line-height: 1.3; margin-bottom: ${T.subtitle};">${e(B)}</h2>` : "", Gt = p ? `<p class="sg-hero__description" style="max-width: 650px; margin: ${d === "center" ? `0 auto ${T.description}` : `0 0 ${T.description}`}; ${ve.cssString} line-height: 1.7;">${e(p)}</p>` : "", j = Ue({
     blockId: o.id,
-    buttonSize: Zt,
-    primaryButtonVariant: qt,
-    primaryButtonColor: ye,
-    primaryButtonTextColor: ue,
-    primaryButtonRadius: Ut,
-    secondaryButtonVariant: Yt,
-    secondaryButtonColor: Bt,
-    secondaryButtonTextColor: fe,
-    secondaryButtonRadius: te,
-    hoverEffect: ee,
-    hoverIntensity: oe,
-    hoverOverlay: re,
-    hoverIconName: ie
-  }), zt = l ? Vt(l.href || "#", _) : "#", Tt = u ? Vt(u.href || "#", _) : "#", Be = l ? `<a href="${e(zt)}"${Dt(zt, _)} class="sg-hero__btn sg-hero__btn--primary" style="${U.primary}">${e(l.text)}</a>` : "", He = u ? `<a href="${e(Tt)}"${Dt(Tt, _)} class="sg-hero__btn sg-hero__btn--secondary" style="${U.secondary}">${e(u.text)}</a>` : "", ke = l || u ? `<div class="sg-hero__actions" style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: ${d === "center" ? "center" : "flex-start"}; margin-top: ${z.actions};">${Be}${He}</div>` : "", V = `${ve}${_e}${Ce}${Se}${ke}`, D = U.css ? `<style>${U.css}</style>` : "", It = `this.onerror=null;this.src='${e(mt)}';`, jt = (r, $, v, n, h, s) => {
-    const c = We[$], y = Q[h] || Q.lg, b = c.positions.map((Gt, Mt) => {
-      const Rt = r[Mt], Ie = Rt?.src || mt, je = Rt?.alt || `Imagem ${Mt + 1}`;
-      return `<div class="sg-hero__grid-item" style="grid-column: ${Gt.col}; grid-row: ${Gt.row}; overflow: hidden; border-radius: ${n}px;">
-          <img src="${e(Ie)}" alt="${e(je)}" style="width: 100%; height: 100%; object-fit: cover; box-shadow: ${y};" onerror="${It}" />
+    buttonSize: Yt,
+    primaryButtonVariant: Qt,
+    primaryButtonColor: _e,
+    primaryButtonTextColor: we,
+    primaryButtonRadius: ee,
+    secondaryButtonVariant: oe,
+    secondaryButtonColor: zt,
+    secondaryButtonTextColor: Ce,
+    secondaryButtonRadius: se,
+    hoverEffect: ne,
+    hoverIntensity: ae,
+    hoverOverlay: le,
+    hoverIconName: de
+  }), Rt = g ? Pt(g.href || "#", C) : "#", Lt = x ? Pt(x.href || "#", C) : "#", ze = g ? `<a href="${e(Rt)}"${At(Rt, C)} class="sg-hero__btn sg-hero__btn--primary" data-block-group="Botão Primário" style="${j.primary}">${e(g.text)}</a>` : "", Ie = x ? `<a href="${e(Lt)}"${At(Lt, C)} class="sg-hero__btn sg-hero__btn--secondary" data-block-group="Botão Secundário" style="${j.secondary}">${e(x.text)}</a>` : "", Te = g || x ? `<div class="sg-hero__actions" style="display: flex; gap: 1rem; flex-wrap: wrap; justify-content: ${d === "center" ? "center" : "flex-start"}; margin-top: ${T.actions};">${ze}${Ie}</div>` : "", je = jt || Mt || Gt ? `<div data-block-group="Conteúdo">${jt}${Mt}${Gt}</div>` : "", M = `${Be}${je}${Te}`, W = j.css ? `<style>${j.css}</style>` : "", pt = `this.onerror=null;this.src='${e(yt)}';`, Dt = (i, c, h, r, f, s) => {
+    const a = Fe[c], m = a.positions.map((w, Et) => {
+      const ut = i[Et], Re = ut?.src || yt, Le = ut?.alt || `Imagem ${Et + 1}`, Ot = ut?.scale ?? 1, De = Ot !== 1 ? ` transform: scale(${Ot}); z-index: 1;` : "";
+      return `<div class="sg-hero__grid-item" style="grid-column: ${w.col}; grid-row: ${w.row}; overflow: hidden; border-radius: ${r}px;${De}">
+          <img src="${e(Re)}" alt="${e(Le)}" style="width: 100%; height: 100%; object-fit: contain; display: block;" onerror="${pt}" />
         </div>`;
-    }).join(""), Y = `<div id="${s}" class="sg-hero__image-grid" style="display: grid; grid-template: ${c.gridTemplate}; gap: ${v}px; width: 100%; max-width: 500px; aspect-ratio: 1 / 1;">
-      ${b}
-    </div>`, gt = `
+    }).join(""), v = `<div id="${s}" class="sg-hero__image-grid" style="display: grid; grid-template: ${a.gridTemplate}; gap: ${h}px; width: 100%; max-width: 500px; aspect-ratio: 1 / 1;">
+      ${m}
+    </div>`, G = `
       @media (max-width: 767px) {
         #${s} {
           grid-template: auto / 1fr !important;
@@ -135,111 +141,122 @@ function Ke(o, X, _, w) {
         }
       }
     `;
-    return { html: Y, css: gt };
-  }, ze = G && G.length > 0 && G.some((r) => r?.src), ct = se && ze;
-  if (ot && x && !ct) {
-    const r = P(o.id || "", "hero-split"), $ = yt === "left", v = Q[et] || Q.lg, n = `
+    return { html: v, css: G };
+  }, Me = A && A.length > 0 && A.some((i) => i?.src), $t = ge && Me;
+  if (q) {
+    const i = nt && nt.length >= 2 ? nt : Ee, c = D(o.id || "", "hero-carousel"), h = Oe(
+      `#${c}`,
+      i.length,
+      me
+    ), r = i.map(
+      (G, w) => `<img src="${e(G)}" alt="Slide ${w + 1}" class="sg-carousel__img" ${w === 0 ? 'style="opacity: 1;"' : ""} onerror="${pt}" />`
+    ).join(""), f = `<div class="sg-carousel__dots">${i.map(() => '<span class="sg-carousel__dot"></span>').join("")}</div>`, s = u ? `position: absolute; inset: 0; background: ${u}; z-index: 1;` : "position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.7) 100%); z-index: 1;", a = b ? `<div class="sg-hero__overlay" style="${s}"></div>` : "", m = `<div style="max-width: ${it}; width: 100%; padding: 0 2rem; text-align: ${d}; position: relative; z-index: 2;">${M}</div>`, v = `<style>${h}${j.css ? `
+` + j.css : ""}</style>`;
+    return `<section ${R(o.id)} ${L(o.id)} class="${z}" style="min-height: ${$}; ${J} display: flex; align-items: center; justify-content: ${K}; position: relative; overflow: hidden; background: #000;" data-variation="${e(t || l || "")}">${v}<div id="${c}" style="position: absolute; inset: 0; z-index: 0;">${r}${f}</div>${a}${m}</section>`;
+  }
+  if (at && _ && !$t) {
+    const i = D(o.id || "", "hero-split"), c = vt === "left", h = Vt[st] || Vt.lg, r = `
       @media (max-width: 1023px) {
-        #${r} {
+        #${i} {
           grid-template-columns: 1fr !important;
           gap: 2rem !important;
           padding: 0 1rem !important;
         }
-        #${r} .sg-hero__split-image {
+        #${i} .sg-hero__split-image {
           order: -1;
         }
       }
-    `, h = i ? `background: ${i};` : "background-color: var(--sg-bg, #fff);", s = `width: 100%; max-width: 500px; height: auto; border-radius: ${tt}px; box-shadow: ${v}; object-fit: cover;`, c = `<div class="sg-hero__split-image" style="display: flex; justify-content: center; flex: 0 1 auto; max-width: ${R};"><img src="${e(x)}" alt="${e(T || "")}" class="sg-hero__img" style="${s}" onerror="${It}" /></div>`, y = `<div class="sg-hero__split-content" style="text-align: ${d}; position: relative; z-index: 1; max-width: ${R}; flex: 0 1 auto;">${V}</div>`, b = $ ? `<style>${n}</style><div id="${r}" class="sg-hero__split-inner" style="display: flex; justify-content: ${Z}; gap: ${J}; align-items: center; max-width: ${q}; width: 100%; padding: 0 2rem;">${c}${y}</div>` : `<style>${n}</style><div id="${r}" class="sg-hero__split-inner" style="display: flex; justify-content: ${Z}; gap: ${J}; align-items: center; max-width: ${q}; width: 100%; padding: 0 2rem;">${y}${c}</div>`;
-    return `<section ${W(o.id)} ${L(o.id)} class="${M}" style="min-height: ${p}; ${lt} display: flex; align-items: center; justify-content: ${dt}; position: relative; overflow: hidden; ${h}" data-variation="${e(t || a || "")}">${D}${b}</section>`;
+    `, f = n ? `background: ${n};` : "background-color: var(--sg-bg, #fff);", s = `width: 100%; max-width: 500px; height: auto; border-radius: ${rt}px; box-shadow: ${h}; object-fit: cover;`, a = `<div class="sg-hero__split-image" data-block-group="Mídia" style="display: flex; justify-content: center; flex: 0 1 auto; max-width: ${V};"><img src="${e(_)}" alt="${e(E || "")}" class="sg-hero__img" style="${s}" onerror="${pt}" /></div>`, m = `<div class="sg-hero__split-content" style="text-align: ${d}; position: relative; z-index: 1; max-width: ${V}; flex: 0 1 auto;">${M}</div>`, v = c ? `<style>${r}</style><div id="${i}" class="sg-hero__split-inner" style="display: flex; justify-content: ${Q}; gap: ${tt}; align-items: center; max-width: ${X}; width: 100%; padding: 0 2rem;">${a}${m}</div>` : `<style>${r}</style><div id="${i}" class="sg-hero__split-inner" style="display: flex; justify-content: ${Q}; gap: ${tt}; align-items: center; max-width: ${X}; width: 100%; padding: 0 2rem;">${m}${a}</div>`;
+    return `<section ${R(o.id)} ${L(o.id)} class="${z}" style="min-height: ${$}; ${J} display: flex; align-items: center; justify-content: ${K}; position: relative; overflow: hidden; ${f}" data-variation="${e(t || l || "")}">${W}${v}</section>`;
   }
-  if (nt && x) {
-    const r = i || "#ffffff", $ = N ? `${N} 3rem` : "6rem 3rem";
-    if (ct) {
-      const n = P(o.id || "", "hero-card-grid"), h = P(o.id || "", "hero-grid"), s = jt(
-        G,
-        ft,
-        xt,
-        tt,
-        et,
-        h
-      ), c = `<div class="sg-hero__card" style="max-width: 500px; background: ${r}; padding: 2rem; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); position: relative; z-index: 2; text-align: ${d}; flex: 0 1 auto;">${V}</div>`, y = `<div class="sg-hero__grid-wrapper" style="position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; flex: 0 1 auto; max-width: ${R};">${s.html}</div>`, b = `${c}${y}`;
-      let Y = `
+  if (ct && _) {
+    const i = n || "#ffffff", c = Z ? `${Z} 3rem` : "6rem 3rem";
+    if ($t) {
+      const r = D(o.id || "", "hero-card-grid"), f = D(o.id || "", "hero-grid"), s = Dt(
+        A,
+        bt,
+        _t,
+        rt,
+        st,
+        f
+      ), a = `<div class="sg-hero__card" style="max-width: 500px; background: ${i}; padding: 2rem; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); position: relative; z-index: 2; text-align: ${d}; flex: 0 1 auto;">${M}</div>`, m = `<div class="sg-hero__grid-wrapper" data-block-group="Mídia" style="position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; flex: 0 1 auto; max-width: ${V};">${s.html}</div>`, v = `${a}${m}`;
+      let G = `
         @media (max-width: 1023px) {
-          #${n} {
+          #${r} {
             flex-direction: column !important;
             gap: 2rem !important;
           }
-          #${n} .sg-hero__grid-wrapper {
+          #${r} .sg-hero__grid-wrapper {
             order: -1;
           }
         }
       `;
-      Y += s.css;
-      const gt = `<style>${Y}</style><div id="${n}" class="sg-hero__card-grid-layout" style="display: flex; width: 100%; max-width: ${q}; align-items: center; justify-content: ${Z}; position: relative; z-index: 2; padding: 0 2rem; gap: ${J};">${b}</div>`;
-      return `<section ${W(o.id)} ${L(o.id)} class="${M} sg-hero--with-grid" style="min-height: ${p}; padding: ${$}; display: flex; align-items: center; justify-content: center; background-image: url(${e(x)}); background-size: cover; background-position: center; position: relative; overflow: hidden;" data-variation="${e(t || a || "")}">${D}${K}${gt}</section>`;
+      G += s.css;
+      const w = `<style>${G}</style><div id="${r}" class="sg-hero__card-grid-layout" style="display: flex; width: 100%; max-width: ${X}; align-items: center; justify-content: ${Q}; position: relative; z-index: 2; padding: 0 2rem; gap: ${tt};">${v}</div>`;
+      return `<section ${R(o.id)} ${L(o.id)} class="${z} sg-hero--with-grid" style="min-height: ${$}; padding: ${c}; display: flex; align-items: center; justify-content: center; background-image: url(${e(_)}); background-size: cover; background-position: center; position: relative; overflow: hidden;" data-variation="${e(t || l || "")}">${W}${et}${w}</section>`;
     }
-    const v = `
-      <div class="sg-hero__card" style="max-width: ${ht}; width: 100%; background: ${r}; padding: 2rem; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); position: relative; z-index: 2; text-align: ${d};">
-        ${V}
+    const h = `
+      <div class="sg-hero__card" style="max-width: ${it}; width: 100%; background: ${i}; padding: 2rem; border-radius: 16px; box-shadow: 0 25px 50px rgba(0,0,0,0.25); position: relative; z-index: 2; text-align: ${d};">
+        ${M}
       </div>
     `;
-    return `<section ${W(o.id)} ${L(o.id)} class="${M}" style="min-height: ${p}; padding: ${$}; display: flex; align-items: center; justify-content: center; background-image: url(${e(x)}); background-size: cover; background-position: center; position: relative; overflow: hidden;" data-variation="${e(t || a || "")}">${D}${K}${v}</section>`;
+    return `<section ${R(o.id)} ${L(o.id)} class="${z}" style="min-height: ${$}; padding: ${c}; display: flex; align-items: center; justify-content: center; background-image: url(${e(_)}); background-size: cover; background-position: center; position: relative; overflow: hidden;" data-variation="${e(t || l || "")}">${W}${et}${h}</section>`;
   }
-  if (ct) {
-    const r = P(o.id || "", "hero-grid-layout"), $ = P(o.id || "", "hero-grid"), v = yt === "left", n = jt(
-      G,
-      ft,
-      xt,
-      tt,
-      et,
-      $
-    ), h = `<div class="sg-hero__grid-wrapper" style="position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; flex: 0 1 auto; max-width: ${R};">${n.html}</div>`, s = `<div class="sg-hero__content-side" style="max-width: ${R}; flex: 0 1 auto; text-align: ${d}; position: relative; z-index: 2;">${V}</div>`;
-    let c = `
+  if ($t) {
+    const i = D(o.id || "", "hero-grid-layout"), c = D(o.id || "", "hero-grid"), h = vt === "left", r = Dt(
+      A,
+      bt,
+      _t,
+      rt,
+      st,
+      c
+    ), f = `<div class="sg-hero__grid-wrapper" data-block-group="Mídia" style="position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; flex: 1 1 0%; max-width: ${V};">${r.html}</div>`, s = `<div class="sg-hero__content-side" style="max-width: ${V}; flex: 1 1 0%; text-align: ${d}; position: relative; z-index: 2;">${M}</div>`;
+    let a = `
       @media (max-width: 1023px) {
-        #${r} {
+        #${i} {
           flex-direction: column !important;
           gap: 2rem !important;
         }
-        #${r} .sg-hero__grid-wrapper,
-        #${r} .sg-hero__content-side {
+        #${i} .sg-hero__grid-wrapper,
+        #${i} .sg-hero__content-side {
           max-width: 100% !important;
         }
-        #${r} .sg-hero__grid-wrapper {
+        #${i} .sg-hero__grid-wrapper {
           order: -1;
         }
       }
     `;
-    c += n.css;
-    const y = v ? `${h}${s}` : `${s}${h}`, b = `<style>${c}</style><div id="${r}" class="sg-hero__grid-layout" style="display: flex; justify-content: ${Z}; gap: ${J}; max-width: ${q}; width: 100%; align-items: center; position: relative; z-index: 2; padding: 0 2rem;">${y}</div>`;
-    return `<section ${W(o.id)} ${L(o.id)} class="${M} sg-hero--with-grid" style="min-height: ${p}; ${lt} display: flex; align-items: center; justify-content: ${dt}; ${k} position: relative; overflow: hidden;" data-variation="${e(t || a || "")}">${D}${K}${kt}${b}</section>`;
+    a += r.css;
+    const m = h ? `${f}${s}` : `${s}${f}`, v = `<style>${a}</style><div id="${i}" class="sg-hero__grid-layout" style="display: flex; justify-content: ${Q}; gap: ${tt}; max-width: ${X}; width: 100%; align-items: center; position: relative; z-index: 2; padding: 0 2rem;">${m}</div>`;
+    return `<section ${R(o.id)} ${L(o.id)} class="${z} sg-hero--with-grid" style="min-height: ${$}; ${J} display: flex; align-items: center; justify-content: ${K}; ${I} position: relative; overflow: hidden;" data-variation="${e(t || l || "")}">${W}${et}${Tt}${v}</section>`;
   }
-  const Te = `<div style="max-width: ${ht}; width: 100%; padding: 0 2rem; text-align: ${d}; position: relative; z-index: 2;">${V}</div>`;
-  return `<section ${W(o.id)} ${L(o.id)} class="${M}" style="min-height: ${p}; ${lt} display: flex; align-items: center; justify-content: ${dt}; ${k} position: relative; overflow: hidden;" data-variation="${e(t || a || "")}">${D}${K}${kt}${Te}</section>`;
+  const Ge = `<div style="max-width: ${it}; width: 100%; padding: 0 2rem; text-align: ${d}; position: relative; z-index: 2;">${M}</div>`;
+  return `<section ${R(o.id)} ${L(o.id)} class="${z}" style="min-height: ${$}; ${J} display: flex; align-items: center; justify-content: ${K}; ${I} position: relative; overflow: hidden;" data-variation="${e(t || l || "")}">${W}${et}${Tt}${Ge}</section>`;
 }
-function Le(o) {
+function Ue(o) {
   const {
-    blockId: X,
-    buttonSize: _,
-    primaryButtonVariant: w,
+    blockId: ot,
+    buttonSize: C,
+    primaryButtonVariant: S,
     primaryButtonColor: t,
-    primaryButtonTextColor: a,
-    primaryButtonRadius: T,
-    secondaryButtonVariant: C,
-    secondaryButtonColor: g,
-    secondaryButtonTextColor: l,
-    secondaryButtonRadius: u,
-    hoverEffect: S,
+    primaryButtonTextColor: l,
+    primaryButtonRadius: E,
+    secondaryButtonVariant: B,
+    secondaryButtonColor: p,
+    secondaryButtonTextColor: g,
+    secondaryButtonRadius: x,
+    hoverEffect: H,
     hoverIntensity: d,
-    hoverOverlay: B,
-    hoverIconName: A
-  } = o, E = {
+    hoverOverlay: k,
+    hoverIconName: N
+  } = o, F = {
     sm: { padding: "0.625rem 1.25rem", fontSize: "0.875rem" },
     md: { padding: "0.875rem 2rem", fontSize: "1rem" },
     lg: { padding: "1rem 2.5rem", fontSize: "1.125rem" }
-  }, p = E[_] || E.md, O = [
-    `padding: ${p.padding}`,
+  }, $ = F[C] || F.md, U = [
+    `padding: ${$.padding}`,
     "font-weight: 600",
-    `font-size: ${p.fontSize}`,
+    `font-size: ${$.fontSize}`,
     "text-decoration: none",
     "display: inline-flex",
     "align-items: center",
@@ -249,66 +266,66 @@ function Le(o) {
     "position: relative",
     "overflow: hidden",
     "cursor: pointer"
-  ], H = [...O, `border-radius: ${T}px`];
-  switch (w) {
+  ], b = [...U, `border-radius: ${E}px`];
+  switch (S) {
     case "outline":
-      H.push("background-color: transparent", `border: 2px solid ${t}`, `color: ${t}`);
+      b.push("background-color: transparent", `border: 2px solid ${t}`, `color: ${t}`);
       break;
     case "ghost":
-      H.push("background-color: transparent", "border: none", `color: ${t}`);
+      b.push("background-color: transparent", "border: none", `color: ${t}`);
       break;
     default:
-      H.push(`background-color: ${t}`, `border: 2px solid ${t}`, `color: ${a}`);
+      b.push(`background-color: ${t}`, `border: 2px solid ${t}`, `color: ${l}`);
   }
-  const f = [...O, `border-radius: ${u}px`];
-  switch (C) {
+  const u = [...U, `border-radius: ${x}px`];
+  switch (B) {
     case "solid":
-      f.push(`background-color: ${g}`, `border: 2px solid ${g}`, `color: ${l}`);
+      u.push(`background-color: ${p}`, `border: 2px solid ${p}`, `color: ${g}`);
       break;
     case "ghost":
-      f.push("background-color: transparent", "border: none", `color: ${l}`);
+      u.push("background-color: transparent", "border: none", `color: ${g}`);
       break;
     default:
-      f.push("background-color: transparent", `border: 2px solid ${g}`, `color: ${l}`);
+      u.push("background-color: transparent", `border: 2px solid ${p}`, `color: ${g}`);
   }
-  const i = X ? `[data-block-id="${X}"]` : "";
-  let m = "";
-  if (S !== "none") {
-    const I = Lt({
-      effect: S,
+  const n = ot ? `[data-block-id="${ot}"]` : "";
+  let y = "";
+  if (H !== "none") {
+    const O = Nt({
+      effect: H,
       intensity: d,
       buttonColor: t,
-      variant: w
-    }), j = Lt({
-      effect: S,
+      variant: S
+    }), P = Nt({
+      effect: H,
       intensity: d,
-      buttonColor: g,
-      variant: C
+      buttonColor: p,
+      variant: B
     });
-    I.base && (m += `${i} .sg-hero__btn--primary { ${I.base} }
-`), j.base && (m += `${i} .sg-hero__btn--secondary { ${j.base} }
-`), m += `
-      ${i} .sg-hero__btn--primary:hover { ${I.hover} }
-      ${i} .sg-hero__btn--secondary:hover { ${j.hover} }
-    `, m += Me();
+    O.base && (y += `${n} .sg-hero__btn--primary { ${O.base} }
+`), P.base && (y += `${n} .sg-hero__btn--secondary { ${P.base} }
+`), y += `
+      ${n} .sg-hero__btn--primary:hover { ${O.hover} }
+      ${n} .sg-hero__btn--secondary:hover { ${P.hover} }
+    `, y += Ae();
   }
-  return B && B !== "none" && (m += Pt(`${i} .sg-hero__btn--primary`, {
-    overlay: B,
+  return k && k !== "none" && (y += Ft(`${n} .sg-hero__btn--primary`, {
+    overlay: k,
     primaryColor: t,
-    iconName: A,
-    textColor: w === "solid" ? a : t
-  }), m += Pt(`${i} .sg-hero__btn--secondary`, {
-    overlay: B,
-    primaryColor: g,
-    iconName: A,
-    textColor: C === "solid" ? l : g
+    iconName: N,
+    textColor: S === "solid" ? l : t
+  }), y += Ft(`${n} .sg-hero__btn--secondary`, {
+    overlay: k,
+    primaryColor: p,
+    iconName: N,
+    textColor: B === "solid" ? g : p
   })), {
-    primary: H.join("; "),
-    secondary: f.join("; "),
-    css: m
+    primary: b.join("; "),
+    secondary: u.join("; "),
+    css: y
   };
 }
 export {
-  Ke as exportHero
+  ro as exportHero
 };
 //# sourceMappingURL=HeroExporter.js.map