import { jsx as n, jsxs as g, Fragment as r } from "react/jsx-runtime";
import { createContext as ce } from "react";
import { c as Y, i as Q, B as o, f as de, g as J, u as K, e as X, m as Z, W as w, b as U, a as h, d as me } from "./chunks/PrizeCard-C2El3VOB.js";
import { P as se } from "./chunks/Portal-Bjgk7NwD.js";
import "react-dom";
import { g as ge, a as xe, h as oe } from "./chunks/helpers-uh28Hksw.js";
import { d as le, a as ae, b as ee } from "./chunks/useImageVariant-f37LbO43.js";
import { T as u } from "./chunks/Button-DPGn5NZd.js";
import { C as fe } from "./chunks/CollectLeadForm-DGbeJX5k.js";
const te = (e) => {
  const i = Y().secondary, m = Q(), a = ge(e.primaryUrl, e.secondaryUrl, "logo");
  if (!e.brandingLogo)
    return null;
  const d = () => {
    a && window.open(a, "_blank", "noopener,noreferrer");
  }, t = /* @__PURE__ */ n(
    "img",
    {
      src: e.brandingLogo,
      alt: "branding-logo",
      style: {
        maxHeight: "50px",
        maxWidth: "100px"
      }
    }
  ), f = a ? typeof window > "u" ? /* @__PURE__ */ n(
    o,
    {
      component: "a",
      href: a,
      target: "_blank",
      rel: "noopener noreferrer",
      sx: {
        cursor: "pointer",
        textDecoration: "none",
        display: "inline-flex"
      },
      children: t
    }
  ) : /* @__PURE__ */ n(
    o,
    {
      onClick: d,
      sx: {
        cursor: "pointer",
        display: "inline-flex"
      },
      children: t
    }
  ) : t;
  return m ? /* @__PURE__ */ g(
    o,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        gap: "8px",
        alignItems: "center",
        minWidth: "180px",
        fontSize: "1em",
        zIndex: 1
      },
      children: [
        e.label && /* @__PURE__ */ n(
          u,
          {
            level: "body-sm",
            sx: {
              fontWeight: 400,
              lineHeight: "166%",
              letterSpacing: "0.4px",
              fontSize: "1em",
              color: e.textColor,
              textAlign: "right",
              fontFamily: i
            },
            children: e.label
          }
        ),
        f
      ]
    }
  ) : /* @__PURE__ */ g(
    o,
    {
      sx: {
        minWidth: "180px",
        display: "flex",
        gap: "8px",
        alignItems: "center",
        zIndex: 10,
        fontSize: "1em"
      },
      children: [
        e.label && /* @__PURE__ */ n(
          u,
          {
            level: "body-sm",
            sx: {
              fontWeight: 400,
              lineHeight: "166%",
              letterSpacing: "0.4px",
              textAlign: "right",
              fontSize: "1em",
              color: e.textColor,
              fontFamily: i
            },
            children: e.label
          }
        ),
        f
      ]
    }
  );
}, _ = ce({
  shadowRootElement: null,
  language: null,
  sdk: null
}), ye = ({
  shadowRootElement: e,
  phoneCountryCode: i,
  images: m,
  content: a,
  campaign: d,
  branding: t,
  labels: f,
  defaultImagePlaceholderUrl: b,
  language: C = "en",
  children: S,
  sdk: p,
  fields: T,
  onSuccessCta: j,
  customFields: N,
  consents: k,
  syncWithProfile: F = !1
}) => /* @__PURE__ */ n(
  _.Provider,
  {
    value: {
      shadowRootElement: e,
      phoneCountryCode: i,
      images: m,
      content: a,
      campaign: d,
      branding: t,
      labels: f,
      defaultImagePlaceholderUrl: b,
      language: C,
      sdk: p,
      fields: T,
      onSuccessCta: j,
      customFields: N,
      consents: k,
      syncWithProfile: F
    },
    children: S
  }
), ne = () => {
  const { t: e } = de(), {
    sdk: i,
    content: m,
    branding: a,
    campaign: d,
    labels: t,
    onSuccessCta: f,
    fields: b = ["fullName", "email"],
    consents: C,
    customFields: S,
    syncWithProfile: p = !1
  } = J(_), T = {
    title: t == null ? void 0 : t.formTitle,
    description: t == null ? void 0 : t.formDescription,
    fullNameLabel: t == null ? void 0 : t.formFullNameLabel,
    fullNamePlaceholder: t == null ? void 0 : t.formFullNamePlaceholder,
    firstNameLabel: t == null ? void 0 : t.formFirstNameLabel,
    firstNamePlaceholder: t == null ? void 0 : t.formFirstNamePlaceholder,
    lastNameLabel: t == null ? void 0 : t.formLastNameLabel,
    lastNamePlaceholder: t == null ? void 0 : t.formLastNamePlaholder,
    emailLabel: t == null ? void 0 : t.formEmailLabel,
    genderLabel: t == null ? void 0 : t.formGenderLabel,
    genderPlaceholder: t == null ? void 0 : t.formGenderPlaceholder,
    countryLabel: t == null ? void 0 : t.formCountryLabel,
    countryPlaceholder: t == null ? void 0 : t.formCountryPlaceholder,
    phoneNumberLabel: t == null ? void 0 : t.formPhoneNumberLabel,
    phoneNumberPlaceholder: t == null ? void 0 : t.formPhoneNumberPlaceholder,
    submitButtonLabel: (t == null ? void 0 : t.submitButtonLabel) || e("leads.buttons.submit"),
    successTitle: t == null ? void 0 : t.successTitle,
    successDescription: t == null ? void 0 : t.successDescription,
    privacyPolicyUrlLabel: t == null ? void 0 : t.privacyPolicyUrlLabel,
    termsAndConditionsUrlLabel: t == null ? void 0 : t.termsAndConditionsUrlLabel
  };
  return /* @__PURE__ */ n(
    fe,
    {
      sdk: i,
      content: m,
      onSuccessCta: f,
      branding: a,
      campaign: d,
      fields: b,
      labels: T,
      consents: C,
      customFields: S,
      syncWithProfile: p
    }
  );
}, ue = (e) => ({
  // Main container with background overlay
  mainContainer: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    gap: "40px",
    p: e.spacingScale.xl,
    boxShadow: "md",
    border: "none",
    overflow: "hidden",
    backgroundImage: e.backgroundImage,
    backgroundPosition: "center",
    backgroundSize: "cover",
    position: "relative",
    borderRadius: e.mdBorderRadius,
    minHeight: "250px",
    "&::before": {
      content: '""',
      position: "absolute",
      background: e.imageBackgroundGradient,
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      borderRadius: "inherit",
      zIndex: 0
    }
  },
  // Headline section wrapper
  headlineSection: {
    display: "flex",
    justifyContent: "space-between",
    flex: "1 0 0",
    alignSelf: "stretch"
  },
  // Headline content container
  headlineContent: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-start",
    flex: "1 0 0",
    gap: "16px"
  },
  // Headline content with z-index
  headlineContentInner: {
    zIndex: 10
  },
  // headline typography
  headlineText: {
    fontWeight: 500,
    lineHeight: "166%",
    letterSpacing: "1px",
    textAlign: { xs: "center", md: "left" },
    color: e.secondaryColor,
    opacity: "70%",
    textTransform: "uppercase",
    fontFamily: e.fontFamilySecondary,
    fontSize: "0.75em"
  },
  // Content container
  contentContainer: {
    display: "flex",
    flexDirection: "column",
    gap: e.spacingScale["3xs"]
  },
  // Title typography
  titleText: {
    fontWeight: 700,
    lineHeight: "133%",
    letterSpacing: "0px",
    fontSize: "1.5em",
    color: e.darkTextColor,
    fontFamily: e.fontFamilyPrimary,
    textAlign: { xs: "center", md: "left" }
  },
  // Poll description typography
  pollDescriptionText: {
    fontWeight: 400,
    lineHeight: "140%",
    letterSpacing: "0.15px",
    fontSize: "1.25em",
    textAlign: { xs: "center", md: "left" },
    color: e.secondaryColor,
    opacity: "70%",
    fontFamily: e.fontFamilyPrimary
  },
  // Main content section (non-filter screen)
  mainContentSection: {
    display: "flex",
    flexDirection: "column",
    gap: "24px"
  },
  // Content container with backdrop
  contentContainerWithBackdrop: {
    borderRadius: e.mdBorderRadius,
    p: e.spacingScale.md,
    display: "flex",
    flexDirection: "column",
    gap: e.spacingScale.md,
    backdropFilter: "blur(4px)",
    position: "relative",
    "&::before": {
      content: '""',
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: e.contentBgColor,
      opacity: 0.5,
      borderRadius: "inherit",
      zIndex: 0
    },
    "& > *": {
      position: "relative",
      zIndex: 1
    }
  },
  // Alternative title section
  alternativeTitleSection: {
    display: "flex",
    gap: "8px",
    alignItems: "flex-start",
    justifyContent: "center"
  },
  // Alternative title text
  alternativeTitleText: {
    fontFamily: e.fontFamilyPrimary,
    lineHeight: "150%",
    letterSpacing: "0.15px",
    fontWeight: 500,
    fontSize: "1.25em",
    textAlign: "center",
    color: e.darkTextColor
  },
  // Bottom footer container
  bottomFooterContainer: {
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    flexDirection: { xs: "column-reverse", md: "row" },
    gap: e.spacingScale.md
  },
  // Next button
  nextButton: {
    borderRadius: e.buttonRadius,
    py: "10px",
    px: "16px",
    bgcolor: e.primaryColor,
    color: e.onPrimaryColor,
    transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
    transform: "scale(1)",
    ml: { md: "auto" },
    "&:hover": {
      bgcolor: e.primaryColor,
      transform: "scale(1.02)"
    },
    "&:active": {
      color: e.onPrimaryColor,
      transform: "scale(0.98)"
    },
    "&:disabled": {
      bgcolor: e.primaryColor,
      color: e.onPrimaryColor,
      opacity: "34%"
    },
    "--Icon-color": e.onPrimaryColor,
    fontSize: "0.9375em"
  },
  // Next button text
  nextButtonText: {
    fontFamily: e.fontFamilyPrimary,
    fontWeight: 500,
    fontSize: "0.9375em",
    lineHeight: "24px",
    letterSpacing: "0.46px",
    textTransform: "uppercase",
    color: e.onPrimaryColor,
    gap: "8px",
    display: "flex",
    alignItems: "center"
  }
}), he = (e) => {
  let i = (e == null ? void 0 : e.mainLogo) || null;
  return Q() && (i = (e == null ? void 0 : e.mobileLogo) || (e == null ? void 0 : e.mainLogo) || null), i;
}, be = () => {
  var l, $, q, P, R, I, L, D, z, H, v, B, y, s, W, A, G, E;
  const e = J(_), i = K(), m = X(), a = Z(
    w.OVERLAY
  ), d = Q(), t = he(
    ((l = e.branding) == null ? void 0 : l.images) || null
  ), f = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : d ? le : ae, b = ee(
    {
      images: e.images || null,
      imagePlaceholder: f
    },
    w.OVERLAY
  ), C = xe(b), S = i.colorSchemes.dark.textColor, p = i.customFontFamily.dark.primary, T = i.customFontFamily.dark.secondary, j = i.customRadius.dark.md, N = ($ = i.border) == null ? void 0 : $.dark.size, k = (P = (q = i.colorSchemes) == null ? void 0 : q.dark) == null ? void 0 : P.surfaceVariant, F = (I = (R = i.customRadius) == null ? void 0 : R.light) == null ? void 0 : I.xl, M = (H = (z = (D = (L = i.colorSchemes) == null ? void 0 : L.light) == null ? void 0 : D.palette) == null ? void 0 : z.primary) == null ? void 0 : H.plainColor, V = (s = (y = (B = (v = i.colorSchemes) == null ? void 0 : v.light) == null ? void 0 : B.palette) == null ? void 0 : y.primary) == null ? void 0 : s.onPrimary, c = ue({
    spacingScale: m,
    secondaryColor: S,
    fontFamilyPrimary: p,
    fontFamilySecondary: T,
    mdBorderRadius: j,
    borderSize: N,
    contentBgColor: k,
    buttonRadius: F,
    primaryColor: M,
    onPrimaryColor: V,
    backgroundImage: C,
    darkTextColor: i.colorSchemes.dark.textColor,
    imageBackgroundGradient: a
  }), x = () => {
    var O;
    return /* @__PURE__ */ n(
      te,
      {
        brandingLogo: t,
        textColor: i.colorSchemes.dark.textColor,
        label: (O = e.labels) == null ? void 0 : O.presentedByLabel
      }
    );
  };
  return /* @__PURE__ */ g(o, { sx: c.mainContainer, children: [
    (W = e.labels) != null && W.title || (A = e.labels) != null && A.description ? /* @__PURE__ */ n(o, { children: /* @__PURE__ */ n(o, { sx: c.headlineSection, children: /* @__PURE__ */ n(o, { sx: c.headlineContent, children: /* @__PURE__ */ n(o, { sx: c.headlineContentInner, children: /* @__PURE__ */ g(o, { sx: c.contentContainer, children: [
      (G = e.labels) != null && G.title ? /* @__PURE__ */ n(u, { level: "h4", sx: c.titleText, children: e.labels.title }) : /* @__PURE__ */ n(r, {}),
      (E = e.labels) != null && E.description ? /* @__PURE__ */ n(u, { level: "body-lg", sx: c.pollDescriptionText, children: e.labels.description }) : /* @__PURE__ */ n(r, {})
    ] }) }) }) }) }) : /* @__PURE__ */ n(r, {}),
    /* @__PURE__ */ g(o, { sx: c.mainContentSection, children: [
      /* @__PURE__ */ n(o, { sx: c.contentContainerWithBackdrop, children: /* @__PURE__ */ n(ne, {}) }),
      /* @__PURE__ */ n(o, { sx: c.bottomFooterContainer, children: x() })
    ] })
  ] });
}, re = ({ children: e }) => {
  const i = U().md, m = h().surface, a = h().secondaryContainer, t = me().size + " solid " + a;
  return /* @__PURE__ */ n(
    o,
    {
      sx: {
        display: "flex",
        flexDirection: { xs: "column", md: "row" },
        width: "100%",
        boxShadow: "md",
        overflow: "hidden",
        minHeight: "250px",
        borderRadius: i,
        background: m,
        border: t
      },
      children: e
    }
  );
}, Ce = (e) => ({
  // Mobile headline with image background
  mobileHeadlineWithImage: {
    display: { xs: "flex", md: "none" },
    flexDirection: "column",
    justifyContent: "space-between",
    gap: "10px",
    backgroundImage: `url("${e.finalImage}")`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    borderTopLeftRadius: "5px",
    borderTopRightRadius: "5px",
    position: "relative",
    minHeight: "210px",
    overflow: "hidden",
    height: "auto",
    "&::before": {
      content: '""',
      position: "absolute",
      width: "100%",
      height: "100%",
      background: e.imageBackgroundGradient,
      borderTopLeftRadius: "5px",
      borderTopRightRadius: "5px"
    }
  },
  // Mobile headline content
  mobileHeadlineContent: {
    zIndex: 1,
    height: "100%",
    p: e.spacingScale.xl,
    gap: e.spacingScale["2xl"],
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between"
  },
  // Mobile headline without image
  mobileHeadlineWithoutImage: {
    display: { xs: "flex", md: "none" },
    flex: "0.5",
    flexDirection: "column",
    justifyContent: "space-between",
    p: e.spacingScale.lg,
    gap: e.spacingScale["2xl"]
  },
  // Headline typography (mobile with image)
  headlineTypographyMobileImage: {
    fontWeight: 500,
    lineHeight: "166%",
    letterSpacing: "1px",
    fontSize: "0.75em",
    color: e.darkTextColor,
    opacity: "70%",
    textTransform: "uppercase",
    fontFamily: e.fontFamilySecondary,
    textAlign: "center"
  },
  // Headline typography (mobile without image & desktop)
  headlineTypography: {
    fontWeight: 500,
    lineHeight: "166%",
    letterSpacing: "1px",
    textTransform: "uppercase",
    fontSize: "0.75em",
    color: e.secondaryColor,
    opacity: e.opacity,
    fontFamily: e.fontFamilySecondary,
    textAlign: { xs: "center", md: "left" }
  },
  // Headline typography (desktop centered)
  headlineTypographyDesktop: {
    fontWeight: 500,
    lineHeight: "166%",
    letterSpacing: "1px",
    textTransform: "uppercase",
    fontSize: "0.75em",
    color: e.secondaryColor,
    opacity: e.opacity,
    fontFamily: e.fontFamilySecondary
  },
  // Content container
  contentContainer: {
    display: "flex",
    flexDirection: "column",
    gap: e.spacingScale["3xs"]
  },
  // Title typography (mobile with image)
  titleTypographyMobileImage: {
    fontWeight: 700,
    lineHeight: "133%",
    fontSize: "1.5em",
    letterSpacing: "0.15px",
    color: e.darkTextColor,
    fontFamily: e.fontFamilyPrimary,
    textAlign: "center"
  },
  // Title typography (mobile without image & desktop responsive)
  titleTypography: {
    fontWeight: 700,
    lineHeight: "133%",
    letterSpacing: "0px",
    fontSize: "1.5em",
    color: e.textColor,
    fontFamily: e.fontFamilyPrimary,
    textAlign: { xs: "center", md: "left" }
  },
  // Title typography (desktop centered)
  titleTypographyDesktop: {
    fontWeight: 700,
    lineHeight: "133%",
    letterSpacing: "0px",
    fontSize: "1.5em",
    color: e.textColor,
    fontFamily: e.fontFamilyPrimary
  },
  // Description typography (mobile with image)
  descriptionTypographyMobileImage: {
    fontWeight: 400,
    lineHeight: "140%",
    fontSize: "1.25em",
    letterSpacing: "0.15px",
    color: e.darkTextColor,
    opacity: "70%",
    fontFamily: e.fontFamilyPrimary,
    textAlign: "center"
  },
  // Description typography (mobile without image & desktop responsive)
  descriptionTypography: {
    fontWeight: 400,
    lineHeight: "140%",
    letterSpacing: "0.15px",
    fontSize: "1.25em",
    color: e.secondaryColor,
    opacity: e.opacity,
    fontFamily: e.fontFamilyPrimary,
    textAlign: { xs: "center", md: "left" }
  },
  // Description typography (desktop centered)
  descriptionTypographyDesktop: {
    fontWeight: 400,
    lineHeight: "140%",
    letterSpacing: "0.15px",
    fontSize: "1.25em",
    color: e.secondaryColor,
    opacity: e.opacity,
    fontFamily: e.fontFamilyPrimary
  },
  // Image container (left position)
  imageContainerLeft: {
    display: { xs: "none", md: "block" },
    flex: "0.3",
    overflow: "hidden",
    height: "auto",
    position: "relative",
    minHeight: "auto",
    backgroundImage: `url("${e.finalImage}")`,
    backgroundSize: "cover",
    backgroundPosition: "center center",
    backgroundRepeat: "no-repeat",
    alignItems: "center",
    justifyContent: "center"
  },
  // Image container (right position)
  imageContainerRight: {
    display: { xs: "none", md: "block" },
    flex: "0.3",
    overflow: "hidden",
    height: "auto",
    position: "relative",
    minHeight: "auto",
    backgroundImage: `url("${e.finalImage}")`,
    backgroundSize: "cover",
    backgroundPosition: "center center",
    backgroundRepeat: "no-repeat",
    alignItems: "center",
    justifyContent: "center"
  },
  // Poll image
  pollImage: {
    width: "100%",
    height: "100%",
    objectFit: "cover"
  },
  // Main content area
  mainContentArea: {
    flex: { xs: "1", md: e.finalImage ? "0.7" : "1" },
    display: "flex",
    flexDirection: "column",
    p: e.spacingScale.md,
    gap: { xs: e.spacingScale.sm, md: e.spacingScale.md }
  },
  // Desktop headline container
  desktopHeadlineContainer: {
    display: { xs: "none", md: "flex" },
    flexDirection: "column",
    justifyContent: "space-between",
    gap: e.spacingScale["2xl"],
    textAlign: "center"
  },
  // Lead collection container
  leadCollectionContainer: {
    display: "flex",
    flexDirection: "column",
    p: e.spacingScale.md
  },
  // Lead question container
  leadQuestionContainer: {
    display: "flex",
    flexDirection: "column",
    gap: { xs: e.spacingScale.lg, md: e.spacingScale.md }
  },
  // Lead content container
  leadContentContainer: {
    borderRadius: e.mdBorderRadius,
    px: e.spacingScale.md,
    pt: e.spacingScale.md,
    pb: e.spacingScale.lg,
    gap: e.spacingScale.md,
    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
    display: "flex",
    flexDirection: "column",
    backdropFilter: "blur(4px)"
  },
  // Question area
  questionArea: {
    display: "flex",
    flexDirection: "column",
    p: e.spacingScale.md
  },
  // Question container
  questionContainer: {
    display: "flex",
    flexDirection: "column",
    gap: { xs: e.spacingScale.lg, md: e.spacingScale.md }
  },
  // Question content container
  questionContentContainer: {
    borderRadius: e.mdBorderRadius,
    px: e.spacingScale.md,
    pt: e.spacingScale.md,
    pb: e.spacingScale.lg,
    gap: e.spacingScale.md,
    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
    display: "flex",
    flexDirection: "column",
    backdropFilter: "blur(4px)"
  },
  // Aspect ratio container for embed/image
  aspectRatioContainer: {
    borderRadius: e.smBorderRadius,
    height: "100%",
    flex: 1,
    // Take all available space
    "& > div": {
      height: "100% !important",
      flex: "1 !important"
      // Force flex growth
    }
  },
  // Question text container
  questionTextContainer: {
    gap: "8px",
    display: "flex",
    justifyContent: "center"
  },
  // Question text
  questionText: {
    fontFamily: e.fontFamilyPrimary,
    lineHeight: "150%",
    letterSpacing: "0.15px",
    fontWeight: 500,
    fontSize: "1.25em",
    textAlign: "center",
    color: e.textColor
  },
  // Footer container
  footerContainer: {
    display: "flex",
    flexDirection: { xs: "column", md: "row" },
    justifyContent: "space-between",
    alignItems: "center",
    gap: e.spacingScale.lg
  },
  // Footer container (no logo)
  footerContainerNoLogo: {
    display: "flex",
    flexDirection: { xs: "column", md: "row" },
    justifyContent: "flex-end",
    alignItems: "center",
    gap: e.spacingScale.lg
  },
  // Presented by desktop
  presentedByDesktop: {
    display: { xs: "none", md: "block" }
  },
  // Presented by mobile
  presentedByMobile: {
    display: { xs: "block", md: "none" }
  },
  // Safe area indicator for Standard variant (30% width containers)
  imageSafeArea: {
    position: "relative",
    zIndex: 2,
    width: "165px",
    // Safe area: 165px on desktop
    height: "100%"
    // Visual indicator for development (remove in production)
    // border: "1px dashed rgba(255,255,255,0.7)",
  }
}), Se = (e) => {
  var P, R, I, L, D, z, H, v, B;
  const i = J(_), m = K(), a = e.imagePosition || "left", d = ee(
    {
      images: i.images || null,
      imagePlaceholder: i.defaultImagePlaceholderUrl ? i.defaultImagePlaceholderUrl : ""
    },
    w.STANDARD
  ), t = Q(), f = t ? ((R = (P = i.branding) == null ? void 0 : P.images) == null ? void 0 : R.mobileLogo) || ((L = (I = i.branding) == null ? void 0 : I.images) == null ? void 0 : L.mainLogo) || "" : ((z = (D = i.branding) == null ? void 0 : D.images) == null ? void 0 : z.mainLogo) || "", b = h().textColor, C = h().textSecondary, S = Y().secondary, p = "60%", T = Y().primary, j = h().surfaceVariant, N = U().md, k = U().sm, F = h().palette.primary.plainColor, M = h().palette.primary.onPrimary, V = U().xl, c = X(), x = Z(
    w.STANDARD
  ), l = Ce({
    finalImage: d,
    spacingScale: c,
    borderRadius: U(),
    fontFamilyPrimary: T,
    fontFamilySecondary: S,
    textColor: b,
    secondaryColor: C,
    bgcolor: oe(j || ""),
    mdBorderRadius: N,
    smBorderRadius: k,
    primaryColor: F,
    onPrimaryColor: M,
    buttonRadius: V,
    opacity: p,
    imagePosition: a,
    darkTextColor: m.colorSchemes.dark.textColor,
    imageBackgroundGradient: x
  }), $ = (y) => {
    var s;
    return /* @__PURE__ */ n(
      te,
      {
        brandingLogo: f,
        textColor: y,
        label: (s = i.labels) == null ? void 0 : s.presentedByLabel
      }
    );
  };
  return /* @__PURE__ */ g(re, { children: [
    (() => {
      var y, s, W, A, G, E, O, ie;
      return t ? d ? /* @__PURE__ */ n(o, { sx: l.mobileHeadlineWithImage, children: (y = i.labels) != null && y.title || (s = i.labels) != null && s.description ? /* @__PURE__ */ n(o, { sx: l.mobileHeadlineContent, children: /* @__PURE__ */ g(o, { sx: l.contentContainer, children: [
        (W = i.labels) != null && W.title ? /* @__PURE__ */ n(u, { sx: l.titleTypographyMobileImage, children: i.labels.title }) : /* @__PURE__ */ n(r, {}),
        (A = i.labels) != null && A.description ? /* @__PURE__ */ n(u, { sx: l.descriptionTypographyMobileImage, children: i.labels.description }) : /* @__PURE__ */ n(r, {})
      ] }) }) : /* @__PURE__ */ n(r, {}) }) : (G = i.labels) != null && G.title || (E = i.labels) != null && E.description ? /* @__PURE__ */ n(o, { sx: l.mobileHeadlineWithoutImage, children: /* @__PURE__ */ g(o, { sx: l.contentContainer, children: [
        (O = i.labels) != null && O.title ? /* @__PURE__ */ n(u, { level: "h4", sx: l.titleTypography, children: i.labels.title }) : /* @__PURE__ */ n(r, {}),
        (ie = i.labels) != null && ie.description ? /* @__PURE__ */ n(u, { sx: l.descriptionTypography, children: i.labels.description }) : /* @__PURE__ */ n(r, {})
      ] }) }) : /* @__PURE__ */ n(r, {}) : /* @__PURE__ */ n(r, {});
    })(),
    a === "left" && d ? /* @__PURE__ */ n(o, { sx: l.imageContainerLeft, children: /* @__PURE__ */ n(o, { sx: l.imageSafeArea }) }) : null,
    /* @__PURE__ */ g(o, { sx: l.mainContentArea, children: [
      !t && ((H = i.labels) != null && H.title || (v = i.labels) != null && v.description) ? /* @__PURE__ */ n(o, { sx: { px: c.md }, children: /* @__PURE__ */ n(o, { sx: l.desktopHeadlineContainer, children: /* @__PURE__ */ n(o, { children: /* @__PURE__ */ g(o, { sx: l.contentContainer, children: [
        i.labels.title ? /* @__PURE__ */ n(u, { level: "h4", sx: l.titleTypographyDesktop, children: i.labels.title }) : /* @__PURE__ */ n(r, {}),
        (B = i.labels) != null && B.description ? /* @__PURE__ */ n(u, { sx: l.descriptionTypographyDesktop, children: i.labels.description }) : /* @__PURE__ */ n(r, {})
      ] }) }) }) }) : /* @__PURE__ */ n(r, {}),
      /* @__PURE__ */ n(o, { sx: l.leadCollectionContainer, children: /* @__PURE__ */ n(o, { sx: l.leadQuestionContainer, children: /* @__PURE__ */ n(o, { sx: l.leadContentContainer, children: /* @__PURE__ */ n(ne, {}) }) }) }),
      /* @__PURE__ */ n(o, { sx: { px: c.md }, children: $(b) })
    ] }),
    a === "right" && d ? /* @__PURE__ */ n(o, { sx: l.imageContainerRight, children: /* @__PURE__ */ n(o, { sx: l.imageSafeArea }) }) : null
  ] });
}, pe = (e) => ({
  // Main headline section with background image
  headlineSection: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    gap: "10px",
    // flex: "0.5",
    flex: { xs: "1", md: "0 0 50%" },
    width: { xs: "100%", md: "50%" },
    minWidth: { xs: "100%", md: "50%" },
    maxWidth: { xs: "100%", md: "50%" },
    backgroundImage: `url("${e.finalImage}")`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    borderTopLeftRadius: e.borderRadius.md,
    borderTopRightRadius: { xs: e.borderRadius.md, md: "0" },
    borderBottomLeftRadius: { xs: 0, md: e.borderRadius.md },
    overflow: "hidden",
    height: "auto",
    position: "relative",
    minHeight: { xs: "210px", md: "430px" },
    "&::before": {
      content: '""',
      position: "absolute",
      width: "100%",
      height: "100%",
      background: e.imageBackgroundGradient,
      borderTopLeftRadius: "5px",
      borderTopRightRadius: "5px"
    }
  },
  embedCodeHeadlineSection: {
    flex: "0.5",
    borderTopLeftRadius: e.borderRadius.md,
    borderTopRightRadius: { xs: e.borderRadius.md, md: "0" },
    borderBottomLeftRadius: { xs: 0, md: e.borderRadius.md },
    overflow: "hidden",
    height: "auto",
    position: "relative",
    minHeight: { xs: "210px", md: "430px" }
  },
  // Headline content wrapper
  embedCodeHeadlineContent: {
    gap: e.spacingScale.xl,
    display: "flex",
    flexDirection: "column",
    alignItems: "center"
  },
  // Filter screen area
  filterScreenArea: {
    flex: "0.5",
    display: "flex",
    flexDirection: "column",
    p: e.spacingScale.lg
  },
  // Filter screen headline section
  filterScreenHeadlineContent: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    gap: e.spacingScale["2xl"],
    textAlign: "center"
  },
  // Filter screen headline text
  filterScreenHeadlineText: {
    fontWeight: 500,
    lineHeight: "166%",
    letterSpacing: "1px",
    textTransform: "uppercase",
    fontSize: "0.75em",
    color: e.secondaryColor,
    opacity: e.opacity,
    fontFamily: e.fontFamilySecondary
  },
  // Filter screen title text
  filterScreenTitleText: {
    fontWeight: 700,
    lineHeight: "133%",
    letterSpacing: "0px",
    fontSize: "1.5em",
    color: e.textColor,
    fontFamily: e.fontFamilyPrimary
  },
  // Filter screen description text
  filterScreenDescriptionText: {
    fontWeight: 400,
    lineHeight: "140%",
    letterSpacing: "0.15px",
    fontSize: "1.25em",
    color: e.secondaryColor,
    opacity: e.opacity,
    fontFamily: e.fontFamilyPrimary
  },
  // Filter screen CTA wrapper
  filterScreenCtaWrapper: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between",
    alignItems: "center",
    gap: e.spacingScale["2xl"]
  },
  // Headline content wrapper
  headlineContent: {
    zIndex: 1,
    height: "100%",
    p: e.spacingScale.xl,
    gap: e.spacingScale.xl,
    display: "flex",
    flexDirection: "column",
    justifyContent: "space-between"
  },
  // Poll headline typography
  pollHeadlineText: {
    fontWeight: 500,
    lineHeight: "166%",
    letterSpacing: "1px",
    fontSize: "0.75em",
    color: e.darkTextColor,
    opacity: "70%",
    textTransform: "uppercase",
    fontFamily: e.fontFamilySecondary,
    textAlign: { xs: "center", md: "left" }
  },
  // Poll headline typography on filter screen
  pollHeadlineTextFilterScreen: {
    fontWeight: 500,
    lineHeight: "166%",
    letterSpacing: "1px",
    fontSize: "0.75em",
    color: e.textColor,
    opacity: "70%",
    textTransform: "uppercase",
    fontFamily: e.fontFamilySecondary,
    textAlign: { xs: "center", md: "left" }
  },
  // Content container
  contentContainer: {
    display: "flex",
    flexDirection: "column",
    gap: e.spacingScale["3xs"]
  },
  // Poll title typography
  pollTitleText: {
    fontWeight: 700,
    lineHeight: "133%",
    fontSize: "1.5em",
    letterSpacing: "0.15px",
    color: e.darkTextColor,
    fontFamily: e.fontFamilyPrimary,
    textAlign: { xs: "center", md: "left" }
  },
  // Poll title typography on filter screen
  pollTitleTextFilterScreen: {
    fontWeight: 700,
    lineHeight: "133%",
    fontSize: "1.5em",
    letterSpacing: "0.15px",
    color: e.textColor,
    fontFamily: e.fontFamilyPrimary,
    textAlign: { xs: "center", md: "left" }
  },
  // Poll description typography
  pollDescriptionText: {
    fontWeight: 400,
    lineHeight: "140%",
    fontSize: "1.25em",
    letterSpacing: "0.15px",
    color: e.darkTextColor,
    opacity: "70%",
    fontFamily: e.fontFamilyPrimary,
    textAlign: { xs: "center", md: "left" }
  },
  // Poll description typography on filter screen
  pollDescriptionTextFilterScreen: {
    fontWeight: 400,
    lineHeight: "140%",
    fontSize: "1.25em",
    letterSpacing: "0.15px",
    color: e.textColor,
    opacity: "70%",
    fontFamily: e.fontFamilyPrimary,
    textAlign: { xs: "center", md: "left" }
  },
  // Filter screen bottom container
  filterScreenBottomContainer: {
    display: "flex",
    flexDirection: { md: "row", xs: "column-reverse" },
    justifyContent: "space-between",
    alignItems: "center",
    gap: e.spacingScale.lg
  },
  // Start button (filter screen)
  startButton: {
    borderRadius: e.buttonRadius,
    bgcolor: e.primaryColor,
    color: e.onPrimaryColor,
    "&:hover": {
      bgcolor: e.primaryColor
    },
    "&:active": {
      color: e.onPrimaryColor
    },
    animation: "pulse 1s infinite",
    fontSize: "0.9375em",
    py: "10px",
    pr: "12px",
    pl: "16px",
    "--Icon-color": e.onPrimaryColor
  },
  // Start button text
  startButtonText: {
    fontFamily: e.fontFamilyPrimary,
    fontWeight: 500,
    fontSize: "0.9375em",
    lineHeight: "24px",
    letterSpacing: "0.46px",
    textTransform: "uppercase",
    color: e.onPrimaryColor,
    gap: "8px",
    display: "flex",
    alignItems: "center"
  },
  // Presented by desktop container
  presentedByDesktop: {
    display: { xs: "none", md: "block" }
  },
  // Question area
  questionArea: {
    flex: { xs: "1", md: "0 0 50%" },
    width: { md: "50%" },
    minWidth: { md: "50%" },
    maxWidth: { md: "50%" },
    p: { xs: e.spacingScale.md, md: 0 },
    display: "flex",
    flexDirection: "column",
    justifyContent: "center"
  },
  questionAreaInner: {
    p: { xs: e.spacingScale.md, md: e.spacingScale.lg },
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    gap: "16px"
  },
  // Stopwatch container
  stopwatchContainer: {
    display: "flex",
    justifyContent: "center"
  },
  // Lead content container (filter screen)
  leadContentContainer: {
    p: e.spacingScale.md,
    pb: e.spacingScale.lg,
    gap: e.spacingScale.md,
    display: "flex",
    flexDirection: "column",
    backdropFilter: "blur(4px)",
    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
    borderRadius: e.borderRadius.sm
  },
  // Question area content wrapper
  questionAreaContent: {
    p: e.spacingScale.lg,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    gap: "16px"
  },
  // Main content container
  mainContentContainer: {
    p: e.spacingScale.lg,
    gap: e.spacingScale.md,
    display: "flex",
    flexDirection: "column",
    backdropFilter: "blur(4px)",
    bgcolor: `rgba(${e.bgcolor ? e.bgcolor.replace(/[^\d,]/g, "") : ""}, 0.5)`,
    borderRadius: e.borderRadius.sm
  },
  // Aspect ratio container for embed/image
  aspectRatioContainer: {
    borderRadius: e.borderRadius.sm,
    height: "100%",
    flex: 1,
    // Take all available space
    "& > div": {
      height: "100% !important",
      flex: "1 !important"
      // Force flex growth
    }
  },
  // Question image container
  questionImageContainer: {
    overflow: "hidden",
    borderRadius: e.borderRadius.sm
  },
  // Question image box
  questionImageBox: {
    borderRadius: e.borderRadius.sm,
    overflow: "hidden",
    height: "auto"
  },
  // Question image
  questionImage: {
    width: "100%",
    height: "100%",
    objectFit: "cover"
  },
  // Alternative title section
  alternativeTitleSection: {
    gap: "8px",
    display: "flex",
    justifyContent: "center"
  },
  // Alternative title text
  alternativeTitleText: {
    fontFamily: e.fontFamilyPrimary,
    lineHeight: "150%",
    letterSpacing: "0.15px",
    fontWeight: 500,
    fontSize: "1.25em",
    textAlign: "center",
    color: e.textColor
  },
  // Button and footer container
  buttonFooterContainer: {
    display: "flex",
    flexDirection: "column",
    gap: e.spacingScale.lg
  },
  // Presented by mobile container
  presentedByMobile: {
    display: { xs: "block", md: "none" }
  }
}), Te = () => {
  var q, P, R, I, L, D, z, H, v, B;
  const e = J(_), i = K(), m = Q(), a = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : m ? le : ae, d = ee(
    {
      images: e.images || null,
      imagePlaceholder: a
    },
    w.SPLIT
  ), t = m ? ((P = (q = e.branding) == null ? void 0 : q.images) == null ? void 0 : P.mobileLogo) || ((I = (R = e.branding) == null ? void 0 : R.images) == null ? void 0 : I.mainLogo) || "" : ((D = (L = e.branding) == null ? void 0 : L.images) == null ? void 0 : D.mainLogo) || "", f = h().textColor, b = Y().secondary, C = "60%", S = Y().primary, p = U().xl, T = h().surfaceVariant, j = (H = (z = h().palette) == null ? void 0 : z.primary) == null ? void 0 : H.plainColor, N = (B = (v = h().palette) == null ? void 0 : v.primary) == null ? void 0 : B.onPrimary, k = h().textColor, F = X(), M = U(), V = Z(
    w.SPLIT
  ), c = oe(T || ""), x = pe({
    finalImage: d,
    spacingScale: F,
    borderRadius: M,
    fontFamilyPrimary: S,
    fontFamilySecondary: b,
    secondaryColor: f,
    opacity: C,
    buttonRadius: p,
    bgcolor: c,
    primaryColor: j,
    onPrimaryColor: N,
    textColor: k,
    darkTextColor: i.colorSchemes.dark.textColor,
    imageBackgroundGradient: V
  }), l = (y) => {
    var s;
    return /* @__PURE__ */ n(
      te,
      {
        brandingLogo: t,
        textColor: y,
        label: (s = e.labels) == null ? void 0 : s.presentedByLabel
      }
    );
  };
  return /* @__PURE__ */ g(re, { children: [
    (() => {
      var y, s, W, A;
      return /* @__PURE__ */ n(o, { sx: x.headlineSection, children: /* @__PURE__ */ g(o, { sx: x.headlineContent, children: [
        (y = e.labels) != null && y.title || (s = e.labels) != null && s.description ? /* @__PURE__ */ n(o, { children: /* @__PURE__ */ g(o, { sx: x.contentContainer, children: [
          (W = e.labels) != null && W.title ? /* @__PURE__ */ n(u, { sx: x.pollTitleText, children: e.labels.title }) : /* @__PURE__ */ n(r, {}),
          (A = e.labels) != null && A.description ? /* @__PURE__ */ n(u, { sx: x.pollDescriptionText, children: e.labels.description }) : /* @__PURE__ */ n(r, {})
        ] }) }) : /* @__PURE__ */ n(r, {}),
        t ? /* @__PURE__ */ n(o, { sx: x.presentedByDesktop, children: l(i.colorSchemes.dark.textColor) }) : /* @__PURE__ */ n(r, {})
      ] }) });
    })(),
    /* @__PURE__ */ n(o, { sx: x.questionArea, children: /* @__PURE__ */ g(o, { sx: x.questionAreaInner, children: [
      /* @__PURE__ */ n(o, { sx: x.leadContentContainer, children: /* @__PURE__ */ n(ne, {}) }),
      /* @__PURE__ */ n(
        o,
        {
          sx: { display: { xs: "block", md: "none" }, px: F.md },
          children: l(k)
        }
      )
    ] }) })
  ] });
};
function ke(e) {
  return e.template === w.STANDARD;
}
const Fe = (e) => e.template === w.OVERLAY ? /* @__PURE__ */ n(be, {}) : ke(e) ? /* @__PURE__ */ n(Se, { imagePosition: e.imagePosition || "left" }) : /* @__PURE__ */ n(Te, {}), Pe = (e) => {
  var i;
  return /* @__PURE__ */ n(
    se,
    {
      packageName: "collect-lead",
      entityId: ((i = e.content) == null ? void 0 : i.id) || "",
      ...e,
      children: /* @__PURE__ */ n(
        ye,
        {
          phoneCountryCode: e.phoneCountryCode,
          language: e.language,
          images: e.images,
          content: e.content,
          campaign: e.campaign,
          branding: e.branding,
          labels: e.labels,
          defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
          sdk: e.sdk,
          fields: e.fields,
          shadowRootElement: null,
          onSuccessCta: e.onSuccessCTA,
          customFields: e.customFields,
          consents: e.consents,
          syncWithProfile: e.syncWithProfile,
          children: /* @__PURE__ */ n(Fe, { ...e })
        }
      )
    }
  );
}, Ae = Pe;
export {
  Ae as CollectLead
};
