import { jsxs as l, Fragment as Z, jsx as n } from "react/jsx-runtime";
import { i as w, u as L, e as z, c as q, b as J, a as W, m as ee, W as U, B as t } from "./PrizeCard-C2El3VOB.js";
import { h as K, g as ne, s as H, e as te } from "./helpers-uh28Hksw.js";
import { R as A, S as ie, O as le } from "./NotFoundSkeleton-BJ7rW_uC.js";
import { T as h } from "./Button-DPGn5NZd.js";
import "react";
import "react-dom";
import { b as X, d as ae, a as oe } from "./useImageVariant-f37LbO43.js";
const re = (e) => {
  var s, c, d;
  return {
    // Mobile headline with image background
    mobileHeadlineWithImage: {
      display: e.isMobile ? "flex" : "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"
      }
    },
    // Content inside mobile headline with image
    mobileHeadlineContent: {
      zIndex: 1,
      p: e.spacingScale.xl,
      gap: e.spacingScale["2xl"],
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between"
    },
    // Mobile headline without image
    mobileHeadlineWithoutImage: {
      display: e.isMobile ? "flex" : "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: ((s = e.brandingColors) == null ? void 0 : s.secondaryColor) || 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: "center"
    },
    // Title typography (mobile with image)
    titleTypographyMobileImage: {
      fontWeight: 700,
      lineHeight: "133%",
      fontSize: "1.5em",
      letterSpacing: "0.15px",
      color: ((c = e.brandingColors) == null ? void 0 : c.contentColor) || e.darkTextColor,
      fontFamily: e.fontFamilyPrimary,
      textAlign: "center"
    },
    // Title typography (mobile without image)
    titleTypography: {
      fontWeight: 700,
      lineHeight: "133%",
      letterSpacing: "0px",
      fontSize: "1.5em",
      color: e.textColor,
      fontFamily: e.fontFamilyPrimary,
      textAlign: e.isMobile ? "center" : "left"
    },
    // Description typography (mobile with image)
    descriptionTypographyMobileImage: {
      fontWeight: 400,
      lineHeight: "140%",
      fontSize: "1.25em",
      letterSpacing: "0.15px",
      color: ((d = e.brandingColors) == null ? void 0 : d.secondaryColor) || e.darkTextColor,
      opacity: "70%",
      fontFamily: e.fontFamilyPrimary,
      textAlign: "center"
    },
    // Description typography (mobile without image)
    descriptionTypography: {
      fontWeight: 400,
      lineHeight: "140%",
      letterSpacing: "0.15px",
      fontSize: "1.25em",
      color: e.secondaryColor,
      opacity: e.opacity,
      fontFamily: e.fontFamilyPrimary,
      textAlign: e.isMobile ? "center" : "left"
    },
    // Desktop title typography
    titleTypographyDesktop: {
      fontWeight: 700,
      lineHeight: "133%",
      letterSpacing: "0px",
      fontSize: "1.5em",
      color: e.textColor,
      fontFamily: e.fontFamilyPrimary
    },
    // Desktop description typography
    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: e.isMobile ? "none" : "block",
      flex: "0.3",
      borderTopLeftRadius: e.borderRadius.md,
      borderBottomLeftRadius: e.borderRadius.md,
      overflow: "hidden",
      height: "auto",
      position: "relative"
    },
    // Image container (right position)
    imageContainerRight: {
      display: e.isMobile ? "none" : "block",
      flex: "0.3",
      borderTopRightRadius: "5px",
      borderBottomRightRadius: "5px",
      overflow: "hidden",
      height: "auto",
      position: "relative"
    },
    // Main content area
    mainContentArea: {
      flex: e.isMobile ? "1" : e.finalImage ? "0.7" : "1",
      display: e.isMobile ? "none" : "flex",
      flexDirection: "column",
      p: e.spacingScale.md,
      gap: e.spacingScale["2xl"]
    },
    // Desktop headline container
    desktopHeadlineContainer: {
      display: e.isMobile ? "none" : "flex",
      flexDirection: "column",
      gap: e.spacingScale.xl,
      textAlign: "center"
    },
    // Content container
    contentContainer: {
      display: "flex",
      flexDirection: "column",
      gap: e.spacingScale["3xs"]
    },
    // Sign in button container
    signInButtonContainer: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      alignItems: "center",
      gap: e.spacingScale["2xl"]
    },
    // Branding container
    brandingContainer: {
      px: e.spacingScale.md
    },
    image: {
      width: "100%",
      height: "100%",
      objectFit: "cover"
    }
  };
}, he = ({
  entity: e,
  headline: s,
  finalImage: c,
  imagePosition: d = "left",
  signInContent: T,
  brandingContent: b,
  rulesDisplay: C
}) => {
  var M, B;
  const p = w(), m = L(), x = z(), y = q().primary, S = q().secondary, I = J(), a = ((M = e.branding) == null ? void 0 : M.colors) || null, g = ((B = e.branding) == null ? void 0 : B.urls) || null, f = (a == null ? void 0 : a.contentColor) || W().textColor, u = (a == null ? void 0 : a.secondaryColor) || W().textColor, o = (a == null ? void 0 : a.backgroundColor) || W().surfaceVariant, k = "60%", D = ee(
    U.STANDARD
  ), i = re({
    finalImage: c,
    spacingScale: x,
    borderRadius: I,
    fontFamilyPrimary: y,
    fontFamilySecondary: S,
    textColor: f,
    secondaryColor: u,
    bgcolor: K(o || ""),
    opacity: k,
    brandingColors: a,
    imagePosition: d,
    darkTextColor: m.colorSchemes.dark.textColor,
    imageBackgroundGradient: D,
    isMobile: p
  }), r = ne(
    g == null ? void 0 : g.primaryUrl,
    g == null ? void 0 : g.secondaryUrl,
    "image"
  ), F = (R, v) => typeof window > "u" ? r ? /* @__PURE__ */ n(
    t,
    {
      component: "a",
      href: r,
      target: "_blank",
      sx: v,
      children: R
    }
  ) : /* @__PURE__ */ n(t, { sx: v, children: R }) : r ? /* @__PURE__ */ n(
    t,
    {
      sx: { ...v, cursor: "pointer" },
      onClick: () => window.open(r, "_blank"),
      children: R
    }
  ) : /* @__PURE__ */ n(t, { sx: v, children: R });
  return /* @__PURE__ */ l(Z, { children: [
    c ? F(
      /* @__PURE__ */ l(t, { sx: i.mobileHeadlineContent, children: [
        /* @__PURE__ */ l(t, { children: [
          /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
            /* @__PURE__ */ n(
              h,
              {
                level: "body-sm",
                sx: i.headlineTypographyMobileImage,
                children: s
              }
            ),
            /* @__PURE__ */ n(
              A,
              {
                rulesDisplay: C,
                rules: e.rules || ""
              }
            )
          ] }),
          /* @__PURE__ */ l(t, { sx: i.contentContainer, children: [
            /* @__PURE__ */ n(
              h,
              {
                level: "body-lg",
                sx: i.titleTypographyMobileImage,
                children: e.title
              }
            ),
            /* @__PURE__ */ n(
              h,
              {
                level: "body-md",
                sx: i.descriptionTypographyMobileImage,
                children: H(e.description)
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ l(t, { sx: i.signInButtonContainer, children: [
          T,
          b
        ] })
      ] }),
      i.mobileHeadlineWithImage
    ) : /* @__PURE__ */ l(t, { sx: i.mobileHeadlineWithoutImage, children: [
      /* @__PURE__ */ l(t, { children: [
        /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
          /* @__PURE__ */ n(h, { level: "body-sm", sx: i.headlineTypography, children: s }),
          /* @__PURE__ */ n(
            A,
            {
              rulesDisplay: C,
              rules: e.rules || ""
            }
          )
        ] }),
        /* @__PURE__ */ l(t, { sx: i.contentContainer, children: [
          /* @__PURE__ */ n(h, { level: "h4", sx: i.titleTypography, children: e.title }),
          /* @__PURE__ */ n(h, { level: "body-md", sx: i.descriptionTypography, children: H(e.description) })
        ] })
      ] }),
      /* @__PURE__ */ l(t, { sx: i.signInButtonContainer, children: [
        T,
        b
      ] })
    ] }),
    c && d === "left" && /* @__PURE__ */ n(t, { sx: i.imageContainerLeft, children: /* @__PURE__ */ n("img", { src: c, alt: "Illustration", style: i.image }) }),
    /* @__PURE__ */ n(t, { sx: i.mainContentArea, children: /* @__PURE__ */ l(t, { sx: i.desktopHeadlineContainer, children: [
      /* @__PURE__ */ l(t, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: x["3xs"] }, children: [
        /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
          /* @__PURE__ */ n(h, { level: "body-sm", sx: i.headlineTypography, children: s }),
          /* @__PURE__ */ n(
            A,
            {
              rulesDisplay: C,
              rules: e.rules || ""
            }
          )
        ] }),
        /* @__PURE__ */ l(t, { sx: i.contentContainer, children: [
          /* @__PURE__ */ n(h, { level: "h4", sx: i.titleTypographyDesktop, children: e.title }),
          /* @__PURE__ */ n(
            h,
            {
              level: "body-md",
              sx: i.descriptionTypographyDesktop,
              children: H(e.description)
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ n(t, { sx: i.signInButtonContainer, children: T }),
      b
    ] }) }),
    c && d === "right" && /* @__PURE__ */ n(t, { sx: i.imageContainerRight, children: /* @__PURE__ */ n("img", { src: c, alt: "Illustration", style: i.image }) })
  ] });
}, ce = (e) => {
  var s;
  return {
    // Main container with background overlay
    mainContainer: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      gap: "40px",
      p: e.spacingScale.xl,
      boxShadow: "md",
      border: (s = e.brandingColors) != null && s.borderColor ? `${e.borderSize} solid ${e.brandingColors.borderColor}` : "none",
      overflow: "hidden",
      backgroundImage: e.backgroundImage,
      backgroundSize: "cover",
      backgroundPosition: "center",
      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
    },
    headlineText: {
      fontWeight: 500,
      lineHeight: "166%",
      letterSpacing: "1px",
      textAlign: e.isMobile ? "center" : "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"]
    },
    titleText: {
      fontWeight: 700,
      lineHeight: "133%",
      letterSpacing: "0px",
      textAlign: e.isMobile ? "center" : "left",
      fontSize: "1.5em",
      color: e.darkTextColor,
      fontFamily: e.fontFamilyPrimary
    },
    descriptionText: {
      fontWeight: 400,
      lineHeight: "140%",
      letterSpacing: "0.15px",
      fontSize: "1.25em",
      textAlign: e.isMobile ? "center" : "left",
      color: e.secondaryColor,
      opacity: "70%",
      fontFamily: e.fontFamilyPrimary
    },
    // Bottom container
    bottomContainer: {
      display: "flex",
      alignItems: "center",
      justifyContent: "space-between",
      flexDirection: e.isMobile ? "column-reverse" : "row",
      gap: e.spacingScale.md
    },
    // Sign-in wrapper to always position at flex-end
    signInWrapper: {
      display: "flex",
      justifyContent: "flex-end",
      flex: 1
    }
  };
}, be = ({
  entity: e,
  headline: s,
  backgroundImage: c,
  imageBackgroundGradient: d,
  signInContent: T,
  brandingContent: b,
  rulesDisplay: C
}) => {
  var k;
  const p = w(), m = L(), x = z(), y = ((k = e.branding) == null ? void 0 : k.colors) || null, S = (y == null ? void 0 : y.contentColor) || m.colorSchemes.dark.textColor, I = m.customFontFamily.dark.primary, a = m.customFontFamily.dark.secondary, g = m.customRadius.dark.md, f = m.border.dark.size, u = m.colorSchemes.dark.textColor, o = ce({
    spacingScale: x,
    brandingColors: y,
    secondaryColor: S,
    fontFamilyPrimary: I,
    fontFamilySecondary: a,
    mdBorderRadius: g,
    borderSize: f,
    darkTextColor: u,
    backgroundImage: c,
    imageBackgroundGradient: d,
    isMobile: p
  });
  return /* @__PURE__ */ l(t, { sx: o.mainContainer, children: [
    /* @__PURE__ */ n(t, { children: /* @__PURE__ */ n(t, { sx: o.headlineSection, children: /* @__PURE__ */ n(t, { sx: o.headlineContent, children: /* @__PURE__ */ l(t, { sx: { ...o.headlineContentInner, display: "flex", flexDirection: "column", alignItems: p ? "center" : "flex-start", gap: x["3xs"] }, children: [
      /* @__PURE__ */ l(t, { sx: { display: "flex", alignItems: "center", gap: x["3xs"] }, children: [
        /* @__PURE__ */ n(h, { level: "body-sm", sx: o.headlineText, children: s }),
        /* @__PURE__ */ n(
          A,
          {
            rulesDisplay: C,
            isOverlayVariant: !0,
            rules: e.rules || ""
          }
        )
      ] }),
      /* @__PURE__ */ l(t, { sx: o.contentContainer, children: [
        /* @__PURE__ */ n(h, { level: "h4", sx: o.titleText, children: e.title }),
        /* @__PURE__ */ n(h, { level: "body-lg", sx: o.descriptionText, children: H(e.description) })
      ] })
    ] }) }) }) }),
    /* @__PURE__ */ l(t, { sx: o.bottomContainer, children: [
      b,
      /* @__PURE__ */ n(t, { sx: o.signInWrapper, children: T })
    ] })
  ] });
}, Ce = (e) => {
  var a, g, f, u, o, k, D;
  const s = X(
    {
      images: e.entity.images || null,
      imagePlaceholder: e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : ""
    },
    U.STANDARD
  ), c = w(), d = z(), T = J(), b = `rgba(${K(W().surfaceVariant || "")}, 0.5)`, C = ((a = e.entity.branding) == null ? void 0 : a.colors) || null, p = (C == null ? void 0 : C.borderColor) || null, m = c ? ((f = (g = e.entity.branding) == null ? void 0 : g.images) == null ? void 0 : f.mobileLogo) || ((o = (u = e.entity.branding) == null ? void 0 : u.images) == null ? void 0 : o.mainLogo) || "" : ((D = (k = e.entity.branding) == null ? void 0 : k.images) == null ? void 0 : D.mainLogo) || "", x = e.imagePosition || "left", y = W().textColor, S = {
    mainContentArea: {
      flex: c ? "1" : s ? "0.7" : "1",
      display: "flex",
      flexDirection: "column",
      p: d.md,
      gap: d.md
    },
    leadCollectionContainer: {
      display: "flex",
      flexDirection: "column"
    },
    leadQuestionContainer: {
      display: "flex",
      flexDirection: "column",
      gap: c ? d.lg : d.md
    },
    leadContentContainer: {
      borderRadius: T.md,
      px: d.md,
      pt: d.md,
      pb: d.lg,
      gap: d.md,
      bgcolor: b,
      display: "flex",
      flexDirection: "column",
      backdropFilter: "blur(4px)"
    }
  }, I = () => {
    var F, P, M, B, R, v, j, N, V, O, G, $, Q, _, E, Y;
    const { CollectLeadWrapper: i, entity: r } = e;
    return /* @__PURE__ */ l(t, { sx: S.mainContentArea, children: [
      /* @__PURE__ */ n(t, { sx: S.leadCollectionContainer, children: /* @__PURE__ */ n(t, { sx: S.leadQuestionContainer, children: /* @__PURE__ */ n(t, { sx: S.leadContentContainer, children: /* @__PURE__ */ n(
        i,
        {
          sdk: e.sdk,
          contentId: r.id,
          contentName: r.title,
          brandingColors: (F = r.branding) == null ? void 0 : F.colors,
          brandingUrls: (P = r.branding) == null ? void 0 : P.urls,
          campaignId: (M = e.leads) == null ? void 0 : M.campaignId,
          campaignName: (B = e.leads) == null ? void 0 : B.campaignName,
          fields: (R = e.leads) == null ? void 0 : R.fields,
          leadTitle: (v = r.labels) == null ? void 0 : v.leadTitle,
          leadDescription: (j = r.labels) == null ? void 0 : j.leadDescription,
          leadCta: (N = r.labels) == null ? void 0 : N.leadCta,
          leadSuccessTitle: (V = r.labels) == null ? void 0 : V.leadSuccessTitle,
          leadSuccessDescription: (O = r.labels) == null ? void 0 : O.leadSuccessDescription,
          syncWithProfile: (G = e.leads) == null ? void 0 : G.syncWithProfile,
          startGame: e.onLeadSubmitted,
          isAfterPosition: !0,
          isSubmittingParticipation: e.isSubmitting
        }
      ) }) }) }),
      m && /* @__PURE__ */ n(
        e.PresentedBy,
        {
          brandingLogo: m,
          textColor: y,
          label: (($ = r.labels) == null ? void 0 : $.sponsor) || null,
          primaryUrl: (_ = (Q = r.branding) == null ? void 0 : Q.urls) == null ? void 0 : _.primaryUrl,
          secondaryUrl: (Y = (E = r.branding) == null ? void 0 : E.urls) == null ? void 0 : Y.secondaryUrl
        }
      )
    ] });
  };
  return /* @__PURE__ */ n(e.MainCard, { brandingBorderColor: p, children: /* @__PURE__ */ n(
    ie,
    {
      entity: e.entity,
      headline: e.headline,
      finalImage: s,
      imagePosition: x,
      rulesDisplay: e.rulesDisplay,
      children: I()
    }
  ) });
}, Se = (e) => {
  const s = L(), c = w(), d = e.defaultImagePlaceholder ? e.defaultImagePlaceholder : c ? ae : oe, { brandingImage: T, brandingColors: b, brandingLogo: C } = te(e.entity.branding || null), p = T || X(
    {
      images: e.entity.images || null,
      imagePlaceholder: d
    },
    U.OVERLAY
  ), m = z(), x = (b == null ? void 0 : b.backgroundColor) || s.colorSchemes.dark.surfaceVariant, y = {
    mainContentSection: {
      display: "flex",
      flexDirection: "column",
      gap: "24px"
    },
    contentContainerWithBackdrop: {
      borderRadius: s.customRadius.dark.sm,
      p: m.md,
      display: "flex",
      flexDirection: "column",
      gap: m.md,
      backdropFilter: "blur(4px)",
      position: "relative",
      "&::before": {
        content: '""',
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: x,
        opacity: 0.5,
        borderRadius: "inherit",
        zIndex: 0
      },
      "& > *": {
        position: "relative",
        zIndex: 1
      }
    },
    presentedByContainer: {
      display: "flex",
      alignItems: "center",
      justifyContent: c ? "center" : "space-between",
      flexDirection: c ? "column-reverse" : "row",
      gap: m.md
    }
  }, S = () => {
    var a, g, f, u, o;
    return /* @__PURE__ */ n(
      e.PresentedBy,
      {
        brandingLogo: C || "",
        textColor: s.colorSchemes.dark.textColor,
        label: ((a = e.entity.labels) == null ? void 0 : a.sponsor) || null,
        primaryUrl: (f = (g = e.entity.branding) == null ? void 0 : g.urls) == null ? void 0 : f.primaryUrl,
        secondaryUrl: (o = (u = e.entity.branding) == null ? void 0 : u.urls) == null ? void 0 : o.secondaryUrl
      }
    );
  }, I = () => {
    var a, g, f, u, o, k, D, i, r, F, P;
    return /* @__PURE__ */ l(t, { sx: y.mainContentSection, children: [
      /* @__PURE__ */ n(t, { sx: y.contentContainerWithBackdrop, children: /* @__PURE__ */ n(
        e.CollectLeadWrapper,
        {
          sdk: e.sdk,
          contentId: e.entity.id,
          contentName: e.entity.title,
          brandingColors: (a = e.entity.branding) == null ? void 0 : a.colors,
          brandingUrls: (g = e.entity.branding) == null ? void 0 : g.urls,
          campaignId: (f = e.leads) == null ? void 0 : f.campaignId,
          campaignName: (u = e.leads) == null ? void 0 : u.campaignName,
          fields: (o = e.leads) == null ? void 0 : o.fields,
          leadTitle: (k = e.entity.labels) == null ? void 0 : k.leadTitle,
          leadDescription: (D = e.entity.labels) == null ? void 0 : D.leadDescription,
          leadCta: (i = e.entity.labels) == null ? void 0 : i.leadCta,
          leadSuccessTitle: (r = e.entity.labels) == null ? void 0 : r.leadSuccessTitle,
          leadSuccessDescription: (F = e.entity.labels) == null ? void 0 : F.leadSuccessDescription,
          syncWithProfile: (P = e.leads) == null ? void 0 : P.syncWithProfile,
          startGame: e.onLeadSubmitted,
          isAfterPosition: !0,
          isSubmittingParticipation: e.isSubmitting
        }
      ) }),
      /* @__PURE__ */ n(t, { sx: y.presentedByContainer, children: S() })
    ] });
  };
  return /* @__PURE__ */ n(
    le,
    {
      entity: e.entity,
      headline: e.headline,
      finalImage: p,
      rulesDisplay: e.rulesDisplay,
      children: I()
    }
  );
};
export {
  be as O,
  he as S,
  Ce as a,
  Se as b
};
