import { jsx as t, jsxs as w, Fragment as Q } from "react/jsx-runtime";
import { g as Ie, h as se, c as We, l as De } from "./chunks/helpers-uh28Hksw.js";
import K, { useMemo as me, useCallback as ze, useEffect as de, useState as G } from "react";
import { f as ne, i as Z, h as Le, b as ee, a as X, d as ge, B as h, x as ae, c as re, o as Be, u as ue, e as te, k as ke, W as fe, y as Ue, n as Ae, z as $e, A as _e, D as He, E as Ee, F as Oe } from "./chunks/PrizeCard-C2El3VOB.js";
import { S as je } from "./chunks/Spinner-DWJCKaY5.js";
import { createPortal as Me } from "react-dom";
import { u as Ne } from "./chunks/useInfoPage-BHdgKdme.js";
import { N as Ve, S as Ye, O as qe } from "./chunks/NotFoundSkeleton-BJ7rW_uC.js";
import { C as Xe } from "./chunks/CollectLeadForm-DGbeJX5k.js";
import { b as he, d as Ge, a as Qe } from "./chunks/useImageVariant-f37LbO43.js";
import { T as p, B as pe } from "./chunks/Button-DPGn5NZd.js";
import { T as Je } from "./chunks/TimerOutlined-Cq6_x3k0.js";
const xe = ({
  sdk: e,
  contentId: n,
  contentType: r,
  contentName: c,
  brandingColors: i,
  brandingUrls: s,
  campaignId: l,
  campaignName: d,
  startGame: a,
  fields: o = ["fullName", "email"],
  leadTitle: y,
  leadDescription: g,
  leadCta: u,
  leadSuccessTitle: x,
  leadSuccessDescription: b,
  syncWithProfile: P = !1,
  isSubmittingParticipation: S = !1,
  onSuccessLabel: W
}) => {
  const { t: R } = ne(), T = y ?? R("leads.header.title"), N = g ?? R("leads.header.description"), L = u ?? R("leads.buttons.submit"), z = x ?? R("leads.success.title"), I = b ?? R("leads.success.description"), U = a ? {
    defaultLabel: W,
    onClick: a
  } : void 0, F = {
    id: n,
    type: r,
    name: c
  }, $ = {
    colors: {
      primaryColor: i == null ? void 0 : i.primary_color,
      secondaryColor: i == null ? void 0 : i.secondary_color
    },
    urls: {
      privacyPolicyUrl: s == null ? void 0 : s.privacy_policy_url,
      termsAndConditionsUrl: s == null ? void 0 : s.terms_and_conditions_url
    }
  };
  return /* @__PURE__ */ t(
    Xe,
    {
      sdk: e,
      content: F,
      onSuccessCta: U,
      branding: $,
      campaign: {
        id: l,
        name: d
      },
      fields: o,
      labels: {
        title: T,
        description: N,
        submitButtonLabel: L,
        successTitle: z,
        successDescription: I
      },
      syncWithProfile: P,
      isSubmittingParticipation: S
    }
  );
}, we = ({
  children: e,
  brandingBorderColor: n,
  state: r
}) => {
  const c = Z(), i = Le(), s = r === "play" ? i : c, l = ee().md, d = n || X().secondaryContainer, o = ge().size + " solid " + d;
  return /* @__PURE__ */ t(
    h,
    {
      sx: {
        display: "flex",
        flexDirection: s ? "column" : "row",
        width: "100%",
        borderRadius: l,
        boxShadow: "md",
        border: o,
        overflow: "hidden",
        background: X().surface,
        minHeight: "250px"
      },
      children: e
    }
  );
}, Ke = ({ template: e }) => {
  const { t: n } = ne(), r = /* @__PURE__ */ t(
    Ve,
    {
      notFoundTitle: n("pickThePair.pickThePairNotFound"),
      notFoundMessage: n("pickThePair.pickThePairNotFoundDescription")
    }
  );
  return e === ae.LANDING_PAGE ? r : /* @__PURE__ */ t(we, { brandingBorderColor: null, children: r });
}, Re = (e) => {
  const n = re().secondary, r = Be(), c = e.isSplitVariant && r, i = Z(), s = Ie(e.primaryUrl, e.secondaryUrl, "logo");
  if (!e.brandingLogo)
    return null;
  const l = () => {
    s && window.open(s, "_blank", "noopener,noreferrer");
  }, d = /* @__PURE__ */ t(
    "img",
    {
      src: e.brandingLogo,
      alt: "branding-logo",
      style: {
        maxHeight: "50px",
        maxWidth: "100px"
      }
    }
  ), a = s ? typeof window > "u" ? /* @__PURE__ */ t(
    h,
    {
      component: "a",
      href: s,
      target: "_blank",
      rel: "noopener noreferrer",
      sx: {
        cursor: "pointer",
        textDecoration: "none",
        display: "inline-flex"
      },
      children: d
    }
  ) : /* @__PURE__ */ t(
    h,
    {
      onClick: l,
      sx: {
        cursor: "pointer",
        display: "inline-flex"
      },
      children: d
    }
  ) : d;
  return e.isCentered || c || i ? /* @__PURE__ */ w(
    h,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        gap: "8px",
        alignItems: "center",
        minWidth: "180px",
        fontSize: "1em",
        zIndex: 1
      },
      children: [
        e.label && /* @__PURE__ */ t(
          p,
          {
            level: "body-sm",
            sx: {
              fontWeight: 400,
              lineHeight: "166%",
              letterSpacing: "0.4px",
              fontSize: "1em",
              color: e.textColor,
              textAlign: "right",
              fontFamily: n
            },
            children: e.label
          }
        ),
        a
      ]
    }
  ) : /* @__PURE__ */ w(
    h,
    {
      sx: {
        minWidth: "180px",
        display: "flex",
        gap: "8px",
        alignItems: "center",
        zIndex: 10,
        fontSize: "1em"
      },
      children: [
        e.label && /* @__PURE__ */ t(
          p,
          {
            level: "body-sm",
            sx: {
              fontWeight: 400,
              lineHeight: "166%",
              letterSpacing: "0.4px",
              textAlign: "right",
              fontSize: "1em",
              color: e.textColor,
              fontFamily: n
            },
            children: e.label
          }
        ),
        a
      ]
    }
  );
}, Ze = (e) => {
  const {
    spacingScale: n,
    fontFamilyPrimary: r,
    textColor: c,
    bgcolor: i,
    mdBorderRadius: s,
    isExtraSmall: l
  } = e;
  return {
    leadCollectionContainer: {
      display: "flex",
      flexDirection: "column",
      p: n.md
    },
    leadQuestionContainer: {
      display: "flex",
      flexDirection: "column",
      gap: n.md
    },
    leadContentContainer: {
      borderRadius: s,
      px: n.md,
      pt: n.md,
      pb: n.lg,
      gap: n.md,
      bgcolor: `rgba(${i ? i.replace(/[^\d,]/g, "") : ""}, 0.5)`,
      display: "flex",
      flexDirection: "column",
      backdropFilter: "blur(4px)"
    },
    questionArea: {
      display: "flex",
      flexDirection: "column",
      px: n.md
    },
    questionContainer: {
      display: "flex",
      flexDirection: "column",
      gap: n.md
    },
    questionContentContainer: {
      borderRadius: s,
      px: n.md,
      pt: n.md,
      pb: n.lg,
      bgcolor: `rgba(${i ? i.replace(/[^\d,]/g, "") : ""}, 0.5)`,
      display: "flex",
      flexDirection: "column",
      backdropFilter: "blur(4px)"
    },
    questionText: {
      fontFamily: r,
      color: c,
      textAlign: "center",
      fontSize: l ? "16px" : "18px",
      fontWeight: 500
    },
    instructions: {
      fontFamily: r,
      color: c,
      lineHeight: "150%",
      letterSpacing: "0.15px",
      fontWeight: 500,
      fontSize: "1.25em",
      textAlign: "center"
    },
    footerContainer: {
      display: "flex",
      flexDirection: l ? "column" : "row",
      justifyContent: "space-between",
      alignItems: l ? "stretch" : "center",
      gap: n.md,
      px: n.md
      // mb: spacingScale.md,
    },
    footerContainerNoLogo: {
      display: "flex",
      justifyContent: l ? "center" : "flex-end",
      gap: n.md,
      px: n.md
      // mb: spacingScale.md,
    },
    getTimeUpOverlayStyle: (d, a) => {
      const o = (g, u) => {
        const x = parseInt(g.slice(1, 3), 16), b = parseInt(g.slice(3, 5), 16), P = parseInt(g.slice(5, 7), 16);
        return `rgba(${x}, ${b}, ${P}, ${u})`;
      }, y = d.startsWith("#") ? o(d, 0.5) : d.startsWith("rgb") ? d.replace(")", ", 0.50)").replace("rgb", "rgba") : "rgba(0, 0, 0, 0.50)";
      return {
        position: a ? "relative" : "absolute",
        top: a ? "auto" : 0,
        left: a ? "auto" : 0,
        right: a ? "auto" : 0,
        bottom: a ? "auto" : 0,
        minHeight: a ? "300px" : "auto",
        // Match questionContentContainer width and margins on mobile
        maxWidth: a ? "1200px" : "auto",
        margin: a ? `0 ${n.md}` : "auto",
        width: "auto",
        backgroundColor: y,
        backdropFilter: "blur(4px)",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 100,
        borderRadius: s,
        animation: "fadeIn 0.4s ease-out",
        "@keyframes fadeIn": {
          from: {
            opacity: 0
          },
          to: {
            opacity: 1
          }
        }
      };
    },
    timeUpText: {
      color: "#FFFFFF",
      fontWeight: 700,
      fontSize: l ? "32px" : "48px",
      lineHeight: 1.2,
      textAlign: "center",
      textShadow: "0 2px 20px rgba(0, 0, 0, 0.3)",
      animation: "slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
      padding: l ? 2 : 3,
      maxWidth: l ? "280px" : "500px",
      "@keyframes slideUp": {
        from: {
          transform: "translateY(20px)",
          opacity: 0
        },
        to: {
          transform: "translateY(0)",
          opacity: 1
        }
      }
    },
    welcome: {
      fontFamily: r,
      color: c,
      fontSize: l ? "0.875em" : "1em",
      fontWeight: 400,
      lineHeight: 1.5,
      maxWidth: "800px",
      margin: "0 auto",
      opacity: 0.9
    }
  };
}, et = (e) => {
  const {
    primaryColor: n,
    textColor: r,
    whiteTextColor: c,
    successColor: i,
    dangerColor: s,
    optionBackground: l,
    spacingScale: d,
    xlBorderRadius: a,
    borderSize: o
  } = e;
  return {
    container: {
      display: "flex",
      flexDirection: "row",
      gap: d["2xl"],
      width: "100%",
      maxWidth: "100%",
      boxSizing: "border-box",
      overflow: "hidden",
      pt: d.md
    },
    column: {
      display: "flex",
      flexDirection: "column",
      gap: d.sm,
      flex: 1,
      minWidth: 0,
      maxWidth: "100%"
    },
    getColumnItemStyle: (y, g, u) => ({
      display: "flex",
      alignItems: "center",
      gap: d["2xs"],
      justifyContent: "space-between",
      padding: `${d.xs} ${d.sm}`,
      backgroundColor: u ? s : g ? i : y ? n : l,
      borderRadius: a,
      cursor: "pointer",
      transition: "all 0.3s ease",
      position: "relative",
      minHeight: "56px",
      width: "100%",
      maxWidth: "100%",
      boxSizing: "border-box",
      overflow: "visible",
      border: `${o} solid ${y && !g && !u ? n : "transparent"}`,
      WebkitTapHighlightColor: "transparent",
      "&:hover": y || g || u ? {} : {
        border: `${o} solid ${n}`,
        backgroundColor: l,
        transform: "translateY(-2px)"
      }
    }),
    disabledItem: {
      opacity: 0.5,
      cursor: "not-allowed",
      "&:hover": {
        transform: "none"
      }
    },
    errorItem: {
      animation: "shake 0.3s",
      cursor: "not-allowed",
      pointerEvents: "none",
      "@keyframes shake": {
        "0%, 100%": { transform: "translateX(0)" },
        "25%": { transform: "translateX(-5px)" },
        "75%": { transform: "translateX(5px)" }
      }
    },
    getImageContainerStyle: (y, g, u) => ({
      width: "56px",
      height: "56px",
      borderRadius: "50%",
      overflow: "hidden",
      backgroundColor: "#FFFFFF",
      flexShrink: 0,
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)",
      zIndex: 10,
      ...u === "left" ? { right: "-14px" } : { left: "-14px" },
      border: g ? `${o} solid ${s}` : y ? `${o} solid ${i}` : `${o} solid ${n}`
    }),
    textContainer: {
      display: "flex",
      flexDirection: "column",
      gap: d["2xs"],
      flex: 1,
      minWidth: 0,
      justifyContent: "center"
    },
    getOptionTitleStyle: (y, g, u, x) => ({
      color: g || u || x ? c : r,
      fontWeight: 600,
      fontSize: "0.9375em",
      lineHeight: 1.3,
      wordBreak: "break-word",
      overflowWrap: "break-word",
      textWrap: "balance",
      textAlign: y === "right" ? "right" : "left"
    }),
    getOptionSubtitleStyle: (y, g, u, x) => ({
      color: g || u || x ? c : r,
      opacity: 0.7,
      fontSize: "0.8125em",
      lineHeight: 1.3,
      wordBreak: "break-word",
      overflowWrap: "break-word",
      textWrap: "balance",
      textAlign: y === "right" ? "right" : "left"
    }),
    matchIndicator: {
      position: "absolute",
      right: d.sm,
      top: "50%",
      transform: "translateY(-50%)"
    }
  };
};
function ce(e) {
  const n = [...e];
  for (let r = n.length - 1; r > 0; r--) {
    const c = Math.floor(Math.random() * (r + 1));
    [n[r], n[c]] = [n[c], n[r]];
  }
  return n;
}
function Fe(e, n) {
  const r = e.map((d) => d.id);
  if (n.columnA.length === 0 && n.columnB.length === 0)
    return {
      columnA: ce(r),
      columnB: ce(r)
    };
  const c = [...n.columnA], i = [...n.columnB], s = r.filter((d) => !c.includes(d));
  if (s.length > 0) {
    const d = ce(s);
    c.push(...d);
  }
  const l = r.filter((d) => !i.includes(d));
  if (l.length > 0) {
    const d = ce(l);
    i.push(...d);
  }
  return {
    columnA: c,
    columnB: i
  };
}
const ve = ({
  pairs: e,
  order: n,
  matchedPairs: r,
  selectedLeft: c,
  selectedRight: i,
  showError: s,
  onSelectLeft: l,
  onSelectRight: d,
  brandingColors: a,
  disabled: o = !1,
  isTimeUp: y = !1
}) => {
  const g = Z(), u = X(), x = ue(), b = te(), P = ee().xl, S = ge().size, W = (a == null ? void 0 : a.primary_color) || u.palette.primary.plainColor, R = (a == null ? void 0 : a.content_color) || x.colorSchemes.light.textColor, T = x.colorSchemes.dark.textColor, N = u.palette.success.plainColor, L = u.palette.danger.plainColor, I = et({
    primaryColor: W,
    textColor: R,
    whiteTextColor: T,
    successColor: N,
    dangerColor: L,
    optionBackground: "#FFFFFF",
    spacingScale: b,
    xlBorderRadius: P,
    borderSize: S
  }), U = me(
    () => Fe(e, n),
    [e, n]
  ), F = (k) => e.find((f) => f.id === k), $ = (k) => r.some((f) => f.leftId === k), E = (k) => r.some((f) => f.rightId === k), _ = (k, f) => {
    var B, j, M;
    const C = F(k);
    if (!C) return null;
    const m = f === "left" ? $(k) : E(k), v = f === "left" && c === k || f === "right" && i === k, H = (v || m) && C.images, A = g ? ((B = C.images) == null ? void 0 : B.mobile) || ((j = C.images) == null ? void 0 : j.main) : (M = C.images) == null ? void 0 : M.main, O = f === "left" ? C.optionA : C.optionB, V = () => {
      o || s || y || (f === "left" ? l(k) : d(k));
    }, D = s && v, Y = s && !v;
    return /* @__PURE__ */ w(
      h,
      {
        onClick: V,
        sx: [
          I.getColumnItemStyle(v, m, D),
          (o || Y) && I.disabledItem,
          D && I.errorItem
        ],
        children: [
          f === "right" && H && A && /* @__PURE__ */ t(h, { sx: I.getImageContainerStyle(m, D, f), children: /* @__PURE__ */ t(
            "img",
            {
              loading: "lazy",
              src: A,
              alt: O.title,
              style: { width: "100%", height: "100%", objectFit: "cover" }
            }
          ) }),
          /* @__PURE__ */ w(h, { sx: I.textContainer, children: [
            /* @__PURE__ */ t(p, { level: "body-md", sx: I.getOptionTitleStyle(f, v, m, D), children: O.title }),
            O.subtitle && /* @__PURE__ */ t(
              p,
              {
                level: "body-sm",
                sx: I.getOptionSubtitleStyle(f, v, m, D),
                children: O.subtitle
              }
            )
          ] }),
          f === "left" && H && A && /* @__PURE__ */ t(h, { sx: I.getImageContainerStyle(m, D, f), children: /* @__PURE__ */ t(
            "img",
            {
              loading: "lazy",
              src: A,
              alt: O.title,
              style: { width: "100%", height: "100%", objectFit: "cover" }
            }
          ) })
        ]
      },
      k
    );
  };
  return /* @__PURE__ */ w(h, { sx: I.container, children: [
    /* @__PURE__ */ t(h, { sx: I.column, children: U.columnA.map((k) => _(k, "left")) }),
    /* @__PURE__ */ t(h, { sx: I.column, children: U.columnB.map((k) => _(k, "right")) })
  ] });
}, ye = (e) => {
  let n;
  const r = X(), c = te(), i = r.palette.danger.softBg, s = r.palette.danger.plainColor, l = r.palette.warning.softBg, d = r.palette.warning.plainColor, a = e.brandingPrimaryColor || r.palette.primary.plainColor, o = ee().xl, y = re().secondary, g = r.palette.primary.onPrimary, u = {
    "@keyframes pulse": {
      "0%": {
        transform: "scale(1)"
      },
      "50%": {
        transform: "scale(1.05)"
      },
      "100%": {
        transform: "scale(1)"
      }
    }
  }, x = ze(() => {
    const S = e.timer - 1;
    e.onTimeUpdate(S);
  }, [e.onTimeUpdate, e.timer]);
  de(() => (e.isRunning && (n = setInterval(x, 1e3)), () => {
    n && clearInterval(n);
  }), [e.isRunning, x, e.timer]);
  const b = (S) => {
    const W = Math.floor(S / 60), R = S % 60;
    return `${W < 10 ? "0" : ""}${W}:${R < 10 ? "0" : ""}${R}${W > 0 ? "m" : "s"}`;
  }, P = () => {
    const S = e.timer / e.initialTime * 100;
    return S <= 30 ? {
      background: i,
      color: s,
      iconColor: s,
      animation: "pulse 1s infinite"
    } : S <= 50 ? {
      background: l,
      color: d,
      iconColor: d
    } : {
      background: a,
      color: g,
      iconColor: g
    };
  };
  return /* @__PURE__ */ w(
    h,
    {
      sx: {
        py: c.xs,
        pl: c.sm,
        pr: c.md,
        display: "flex",
        gap: c["2xs"],
        alignItems: "center",
        bgcolor: P().background,
        borderRadius: o,
        maxWidth: "105px",
        maxHeight: "40px",
        transition: "all 0.3s ease",
        animation: P().animation,
        ...u,
        zIndex: 10
      },
      children: [
        /* @__PURE__ */ t(
          Je,
          {
            sx: {
              width: "24px",
              height: "24px",
              color: P().iconColor,
              transition: "color 0.3s ease"
            }
          }
        ),
        /* @__PURE__ */ t(
          p,
          {
            sx: {
              fontFamily: y,
              fontWeight: 400,
              fontSize: "1em",
              lineHeight: "150%",
              letterSpacing: "0.15px",
              color: P().color,
              transition: "color 0.3s ease"
            },
            children: b(e.timer)
          }
        )
      ]
    }
  );
}, be = ({
  totalAttempts: e,
  accuracy: n,
  successThresholdPercent: r,
  meetsThreshold: c,
  totalPairs: i,
  matchedPairs: s,
  brandingColors: l,
  bgcolor: d
}) => {
  const { t: a } = ne(), o = Z(), y = X(), g = te(), u = ee().md, x = (l == null ? void 0 : l.content_color) || y.textColor, b = (l == null ? void 0 : l.primary_color) || y.palette.primary.plainColor, P = y.palette.danger.plainColor, S = y.palette.success.plainColor, W = y.surface, R = i - s, T = c ? S : P;
  return /* @__PURE__ */ t(
    h,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        gap: g.md,
        backgroundColor: W,
        borderRadius: u,
        px: o ? 0 : g.lg,
        py: o ? g.md : g.lg,
        maxWidth: "1200px",
        margin: o ? `0 ${g.md}` : "0 auto",
        width: o ? "auto" : "100%",
        bgcolor: d
      },
      children: /* @__PURE__ */ w(
        h,
        {
          sx: {
            display: "flex",
            flexDirection: "row",
            gap: o ? g.sm : g.lg,
            flex: 1,
            justifyContent: "center",
            flexWrap: "wrap"
          },
          children: [
            /* @__PURE__ */ w(h, { sx: { textAlign: "center", minWidth: o ? "80px" : "100px" }, children: [
              /* @__PURE__ */ t(
                p,
                {
                  level: "h3",
                  sx: {
                    color: x,
                    fontWeight: "bold",
                    fontSize: o ? "1.5em" : "2em"
                  },
                  children: e
                }
              ),
              /* @__PURE__ */ t(
                p,
                {
                  level: "body-sm",
                  sx: {
                    color: x,
                    opacity: 0.7,
                    fontSize: o ? "0.75em" : "0.875em"
                  },
                  children: a("pickThePair.challengeStats.attempts")
                }
              )
            ] }),
            /* @__PURE__ */ w(h, { sx: { textAlign: "center", minWidth: o ? "80px" : "100px" }, children: [
              /* @__PURE__ */ w(
                p,
                {
                  level: "h3",
                  sx: {
                    color: T,
                    fontWeight: "bold",
                    fontSize: o ? "1.5em" : "2em"
                  },
                  children: [
                    n.toFixed(0),
                    "%"
                  ]
                }
              ),
              /* @__PURE__ */ t(
                p,
                {
                  level: "body-sm",
                  sx: {
                    color: x,
                    opacity: 0.7,
                    fontSize: o ? "0.75em" : "0.875em"
                  },
                  children: a("pickThePair.challengeStats.accuracy")
                }
              )
            ] }),
            /* @__PURE__ */ w(h, { sx: { textAlign: "center", minWidth: o ? "80px" : "100px" }, children: [
              /* @__PURE__ */ w(
                p,
                {
                  level: "h3",
                  sx: {
                    color: b,
                    fontWeight: "bold",
                    fontSize: o ? "1.5em" : "2em"
                  },
                  children: [
                    r,
                    "%"
                  ]
                }
              ),
              /* @__PURE__ */ t(
                p,
                {
                  level: "body-sm",
                  sx: {
                    color: x,
                    opacity: 0.7,
                    fontSize: o ? "0.75em" : "0.875em"
                  },
                  children: a("pickThePair.challengeStats.target")
                }
              )
            ] }),
            /* @__PURE__ */ w(h, { sx: { textAlign: "center", minWidth: o ? "80px" : "100px" }, children: [
              /* @__PURE__ */ t(
                p,
                {
                  level: "h3",
                  sx: {
                    color: x,
                    fontWeight: "bold",
                    fontSize: o ? "1.5em" : "2em"
                  },
                  children: R
                }
              ),
              /* @__PURE__ */ t(
                p,
                {
                  level: "body-sm",
                  sx: {
                    color: x,
                    opacity: 0.7,
                    fontSize: o ? "0.75em" : "0.875em"
                  },
                  children: a("pickThePair.challengeStats.remaining")
                }
              )
            ] })
          ]
        }
      )
    }
  );
}, tt = (e) => {
  const n = re().primary, r = ee().xl, c = X().palette.primary.onPrimary, i = e.selectedOptions.length === 0 || e.isVoting;
  return /* @__PURE__ */ t(Q, { children: /* @__PURE__ */ t(
    pe,
    {
      variant: "soft",
      disabled: i,
      loading: e.isVoting,
      sx: {
        borderRadius: r,
        py: "10px",
        px: "16px",
        bgcolor: e.buttonColor,
        color: c,
        transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
        transform: "scale(1)",
        alignSelf: "center",
        "&:hover": {
          bgcolor: e.buttonColor,
          transform: "scale(1.02)"
        },
        "&:active": {
          color: c,
          transform: "scale(0.98)"
        },
        "&:disabled": {
          bgcolor: e.buttonColor,
          color: c,
          opacity: "12%"
        },
        "--Icon-color": c,
        fontSize: "0.9375em"
      },
      onClick: e.onClick,
      slotProps: {
        loadingIndicatorCenter: {
          sx: {
            "& .MuiCircularProgress-track": {
              stroke: "#FFFFFF"
            }
          }
        }
      },
      children: /* @__PURE__ */ t(
        p,
        {
          sx: {
            fontFamily: n,
            fontWeight: 500,
            fontSize: "0.9375em",
            lineHeight: "24px",
            letterSpacing: "0.46px",
            textTransform: "uppercase",
            color: c,
            gap: "8px",
            display: "flex",
            alignItems: "center",
            visibility: e.isVoting ? "hidden" : "visible"
          },
          children: e.label
        }
      )
    }
  ) });
}, nt = (e) => {
  var T, N, L, z, I, U, F, $, E, _, k, f, C, m, v, H, A, O, V, D, Y, B, j;
  const { t: n } = ne(), r = Z(), c = ke(), i = ((T = e.infoPage.branding) == null ? void 0 : T.colors) || null, s = r ? ((L = (N = e.infoPage.branding) == null ? void 0 : N.images) == null ? void 0 : L.mobile_logo) || ((I = (z = e.infoPage.branding) == null ? void 0 : z.images) == null ? void 0 : I.main_logo) || "" : ((F = (U = e.infoPage.branding) == null ? void 0 : U.images) == null ? void 0 : F.main_logo) || "", l = e.imagePosition || "left", [d, a] = G(!1), o = he(
    {
      images: e.infoPage.images,
      imagePlaceholder: e.defaultImagePlaceholderUrl || ""
    },
    fe.STANDARD
  ), y = c || r && !!o, g = (i == null ? void 0 : i.content_color) || X().textColor, u = re().primary, x = (i == null ? void 0 : i.background_color) || X().surfaceVariant, b = ee().md, P = te(), S = Ze({
    spacingScale: P,
    fontFamilyPrimary: u,
    textColor: g,
    bgcolor: se(x || ""),
    mdBorderRadius: b,
    isExtraSmall: y
  }), W = e.matchedPairs.length === e.pairData.pairs.length, R = (M) => {
    var q, J, ie, oe, le;
    return /* @__PURE__ */ t(
      Re,
      {
        brandingLogo: s,
        textColor: M,
        label: ((q = e.infoPage.labels) == null ? void 0 : q.sponsor) || null,
        primaryUrl: (ie = (J = e.infoPage.branding) == null ? void 0 : J.urls) == null ? void 0 : ie.primary_url,
        secondaryUrl: (le = (oe = e.infoPage.branding) == null ? void 0 : oe.urls) == null ? void 0 : le.secondary_url
      }
    );
  };
  return /* @__PURE__ */ t(we, { brandingBorderColor: (i == null ? void 0 : i.border_color) || null, children: /* @__PURE__ */ t(
    Ye,
    {
      entity: {
        ...e.infoPage,
        type: "pick-the-pair",
        description: e.infoPage.subtitle || "",
        rules: null
      },
      headline: n("pickThePair.headline"),
      finalImage: o,
      imagePosition: l,
      embedCodeContainerRef: void 0,
      hasEmbedCode: !1,
      children: /* @__PURE__ */ w(Q, { children: [
        (($ = e.infoPage.labels) == null ? void 0 : $.welcome) && /* @__PURE__ */ t(
          p,
          {
            level: "body-md",
            sx: {
              ...S.welcome,
              mb: e.pairData.config.timeLimit > 0 ? P.md : 0
            },
            children: e.infoPage.labels.welcome
          }
        ),
        e.pairData.config.timeLimit > 0 && /* @__PURE__ */ t(
          h,
          {
            sx: {
              display: "flex",
              justifyContent: "center",
              mb: P.md
            },
            children: /* @__PURE__ */ t(
              ye,
              {
                isRunning: e.isTimerRunning,
                timer: e.timer,
                initialTime: e.pairData.config.timeLimit,
                brandingPrimaryColor: (i == null ? void 0 : i.primary_color) || null,
                onTimeUpdate: e.onTimeUpdate
              }
            )
          }
        ),
        e.isChallengeMode && /* @__PURE__ */ t(
          h,
          {
            sx: {
              px: P.md,
              "& > div": {
                maxWidth: "100%",
                margin: 0,
                px: P.md,
                py: P.md,
                boxSizing: "border-box"
              }
            },
            children: /* @__PURE__ */ t(
              be,
              {
                totalAttempts: e.totalAttempts,
                accuracy: e.accuracy,
                successThresholdPercent: e.pairData.config.successThresholdPercent,
                meetsThreshold: e.meetsThreshold,
                totalPairs: e.pairData.pairs.length,
                matchedPairs: e.matchedPairs.length,
                brandingColors: i,
                bgcolor: `rgba(${x ? se(x || "").replace(/[^\d,]/g, "") : ""}, 0.5)`
              }
            )
          }
        ),
        d ? (
          // Lead Form
          /* @__PURE__ */ t(h, { sx: S.leadCollectionContainer, children: /* @__PURE__ */ w(h, { sx: S.leadQuestionContainer, children: [
            /* @__PURE__ */ t(h, { sx: S.leadContentContainer, children: /* @__PURE__ */ t(
              xe,
              {
                sdk: e.sdk,
                contentId: e.infoPage.id,
                contentType: e.infoPage.type,
                onSuccessLabel: ((E = e.infoPage.labels) == null ? void 0 : E.buttonLabel) || n("pickThePair.buttons.submit"),
                contentName: e.infoPage.title,
                brandingColors: (_ = e.infoPage.branding) == null ? void 0 : _.colors,
                brandingUrls: (k = e.infoPage.branding) == null ? void 0 : k.urls,
                campaignId: (f = e.leads) == null ? void 0 : f.campaignId,
                campaignName: (C = e.leads) == null ? void 0 : C.campaignName,
                fields: (m = e.leads) == null ? void 0 : m.fields,
                leadTitle: (v = e.infoPage.labels) == null ? void 0 : v.leadTitle,
                leadDescription: (H = e.infoPage.labels) == null ? void 0 : H.leadDescription,
                leadCta: (A = e.infoPage.labels) == null ? void 0 : A.leadCta,
                leadSuccessTitle: (O = e.infoPage.labels) == null ? void 0 : O.successTitle,
                leadSuccessDescription: (V = e.infoPage.labels) == null ? void 0 : V.successDescription,
                syncWithProfile: (D = e.leads) == null ? void 0 : D.syncWithProfile,
                isSubmittingParticipation: !W || e.isChallengeMode && !e.meetsThreshold
              }
            ) }),
            R(g)
          ] }) })
        ) : /* @__PURE__ */ w(Q, { children: [
          r && e.isTimeUp ? (
            // Mobile: Time's Up - Show only overlay with fixed height
            ((Y = e.infoPage.labels) == null ? void 0 : Y.timeUp) && /* @__PURE__ */ t(
              h,
              {
                sx: S.getTimeUpOverlayStyle(
                  (i == null ? void 0 : i.primary_color) || "#000000",
                  r
                ),
                children: /* @__PURE__ */ t(p, { level: "h1", sx: S.timeUpText, children: e.infoPage.labels.timeUp })
              }
            )
          ) : (
            // Desktop or mobile with time remaining - Show full section
            /* @__PURE__ */ t(h, { sx: S.questionArea, children: /* @__PURE__ */ t(h, { sx: S.questionContainer, children: /* @__PURE__ */ w(
              h,
              {
                sx: {
                  ...S.questionContentContainer,
                  position: "relative"
                },
                children: [
                  ((B = e.infoPage.labels) == null ? void 0 : B.instructions) && /* @__PURE__ */ t(p, { level: "body-lg", sx: S.instructions, children: e.infoPage.labels.instructions }),
                  /* @__PURE__ */ t(
                    ve,
                    {
                      pairs: e.pairData.pairs,
                      order: e.pairData.config.order,
                      matchedPairs: e.matchedPairs,
                      selectedLeft: e.selectedLeft,
                      selectedRight: e.selectedRight,
                      showError: e.showError,
                      onSelectLeft: e.onSelectLeft,
                      onSelectRight: e.onSelectRight,
                      brandingColors: i,
                      disabled: !1,
                      isTimeUp: e.isTimeUp
                    }
                  ),
                  e.isTimeUp && ((j = e.infoPage.labels) == null ? void 0 : j.timeUp) && /* @__PURE__ */ t(
                    h,
                    {
                      sx: S.getTimeUpOverlayStyle(
                        (i == null ? void 0 : i.primary_color) || "#000000",
                        r
                      ),
                      children: /* @__PURE__ */ t(p, { level: "h1", sx: S.timeUpText, children: e.infoPage.labels.timeUp })
                    }
                  )
                ]
              }
            ) }) })
          ),
          /* @__PURE__ */ w(
            h,
            {
              sx: s ? S.footerContainer : S.footerContainerNoLogo,
              children: [
                s && !y ? R(g) : /* @__PURE__ */ t(Q, {}),
                /* @__PURE__ */ t(
                  tt,
                  {
                    selectedOptions: W && (!e.isChallengeMode || e.meetsThreshold) ? ["matched"] : [],
                    label: n("pickThePair.buttons.continue"),
                    buttonColor: (i == null ? void 0 : i.primary_color) || X().palette.primary.plainColor,
                    isVoting: !1,
                    onClick: () => a(!0)
                  }
                )
              ]
            }
          ),
          s && y ? R(g) : /* @__PURE__ */ t(Q, {})
        ] })
      ] })
    }
  ) });
}, it = (e) => {
  const {
    spacingScale: n,
    fontFamilyPrimary: r,
    textColor: c,
    bgcolor: i,
    mdBorderRadius: s,
    mobile: l,
    surface: d
  } = e;
  return {
    container: {
      display: "flex",
      flexDirection: "column",
      width: "100%",
      minHeight: "100vh",
      bgcolor: `rgba(${i ? i.replace(/[^\d,]/g, "") : ""}, 0.5)`,
      gap: n["3xl"],
      overflowX: "hidden"
    },
    heroSection: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      width: "100%",
      overflow: "hidden"
    },
    header: {
      display: "flex",
      flexDirection: "column",
      gap: n.md,
      textAlign: "center",
      padding: l ? `0 ${n.md}` : `0 ${n.lg}`
    },
    title: {
      fontFamily: r,
      color: c,
      fontSize: l ? "1.75em" : "2.25em",
      fontWeight: 700,
      lineHeight: 1.2
    },
    subtitle: {
      fontFamily: r,
      color: c,
      fontSize: l ? "1em" : "1.125em",
      fontWeight: 400,
      lineHeight: 1.5,
      maxWidth: "800px",
      margin: "0 auto"
    },
    welcome: {
      fontFamily: r,
      color: c,
      fontSize: l ? "0.875em" : "1em",
      fontWeight: 400,
      lineHeight: 1.5,
      maxWidth: "800px",
      margin: "0 auto",
      opacity: 0.9
    },
    instructions: {
      fontFamily: r,
      color: c,
      fontSize: l ? "1em" : "1.3em",
      fontWeight: 500,
      lineHeight: 1.5,
      textAlign: "center"
    },
    disclaimer: {
      fontFamily: r,
      color: c,
      fontSize: l ? "0.75em" : "0.875em",
      fontWeight: 400,
      lineHeight: 1.5,
      textAlign: "center",
      opacity: 0.7
    },
    leadSection: {
      display: "flex",
      flexDirection: "column",
      gap: n.md,
      backgroundColor: d,
      borderRadius: s,
      padding: l ? n.lg : n.xl,
      maxWidth: "600px",
      margin: "0 auto",
      width: l ? `calc(100% - ${n.md} * 2)` : `calc(100% - ${n.lg} * 2)`,
      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
      backdropFilter: "blur(4px)",
      boxSizing: "border-box"
    },
    pairSection: {
      display: "flex",
      flexDirection: "column",
      gap: n.md,
      backgroundColor: d,
      borderRadius: s,
      px: l ? n.md : n.lg,
      py: l ? n.md : n.lg,
      maxWidth: "1200px",
      margin: "0 auto",
      width: l ? `calc(100% - ${n.md} * 2)` : `calc(100% - ${n.lg} * 2)`,
      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
      overflow: "hidden",
      boxSizing: "border-box"
    },
    footer: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
      alignItems: "center",
      gap: n.sm
    },
    getTimeUpOverlayStyle: (a, o) => {
      const y = (u, x) => {
        const b = parseInt(u.slice(1, 3), 16), P = parseInt(u.slice(3, 5), 16), S = parseInt(u.slice(5, 7), 16);
        return `rgba(${b}, ${P}, ${S}, ${x})`;
      }, g = a.startsWith("#") ? y(a, 0.5) : a.startsWith("rgb") ? a.replace(")", ", 0.50)").replace("rgb", "rgba") : "rgba(0, 0, 0, 0.50)";
      return {
        position: o ? "relative" : "absolute",
        top: o ? "auto" : 0,
        left: o ? "auto" : 0,
        right: o ? "auto" : 0,
        bottom: o ? "auto" : 0,
        minHeight: o ? "300px" : "auto",
        // Match pairSection width and margins
        maxWidth: "1200px",
        margin: "0 auto",
        width: o ? `calc(100% - ${n.md} * 2)` : "auto",
        backgroundColor: g,
        backdropFilter: "blur(4px)",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        zIndex: 100,
        borderRadius: s,
        boxSizing: "border-box",
        animation: "fadeIn 0.4s ease-out",
        "@keyframes fadeIn": {
          from: {
            opacity: 0
          },
          to: {
            opacity: 1
          }
        }
      };
    },
    timeUpText: {
      color: "#FFFFFF",
      fontWeight: 700,
      fontSize: l ? "2em" : "3em",
      lineHeight: 1.2,
      textAlign: "center",
      textShadow: "0 2px 20px rgba(0, 0, 0, 0.3)",
      animation: "slideUp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)",
      padding: l ? 2 : 3,
      maxWidth: l ? "280px" : "500px",
      "@keyframes slideUp": {
        from: {
          transform: "translateY(20px)",
          opacity: 0
        },
        to: {
          transform: "translateY(0)",
          opacity: 1
        }
      }
    }
  };
}, ot = (e) => {
  const {
    primaryColor: n,
    textColor: r,
    whiteTextColor: c,
    successColor: i,
    dangerColor: s,
    optionBackground: l,
    surface: d,
    mobile: a,
    spacingScale: o,
    xlBorderRadius: y,
    borderSize: g
  } = e;
  return {
    container: {
      display: "flex",
      flexDirection: a ? "column" : "row",
      gap: a ? o.xs : o["2xl"],
      width: "100%",
      maxWidth: "100%",
      boxSizing: "border-box",
      overflow: "hidden",
      bgcolor: d,
      pt: a ? 0 : o["2xs"]
    },
    column: {
      display: "flex",
      flexDirection: "column",
      gap: a ? o.xs : o.sm,
      flex: 1,
      minWidth: 0,
      maxWidth: "100%"
    },
    getColumnItemStyle: (u, x, b, P) => ({
      display: "flex",
      alignItems: "center",
      gap: o["2xs"],
      justifyContent: "space-between",
      padding: `${o.xs} ${o.sm}`,
      backgroundColor: P ? s : b ? i : x ? n : l,
      borderTopLeftRadius: u === "left" && a ? "0px" : y,
      borderBottomLeftRadius: u === "left" && a ? "0px" : y,
      borderTopRightRadius: u === "right" && a ? "0px" : y,
      borderBottomRightRadius: u === "right" && a ? "0px" : y,
      cursor: "pointer",
      transition: "all 0.3s ease",
      position: "relative",
      minHeight: a ? "48px" : "56px",
      width: a ? "90%" : "100%",
      maxWidth: "100%",
      boxSizing: "border-box",
      overflow: "visible",
      border: `${g} solid ${x && !b && !P ? n : "transparent"}`,
      WebkitTapHighlightColor: "transparent",
      marginLeft: a && u === "right" ? "auto" : 0,
      marginRight: a && u === "left" ? "auto" : 0,
      "&:hover": x || b || P ? {} : {
        border: `${g} solid ${n}`,
        backgroundColor: l,
        transform: "translateY(-2px)"
      }
    }),
    disabledItem: {
      opacity: 0.5,
      cursor: "not-allowed",
      "&:hover": {
        transform: "none"
      }
    },
    errorItem: {
      animation: "shake 0.3s",
      cursor: "not-allowed",
      pointerEvents: "none",
      "@keyframes shake": {
        "0%, 100%": { transform: "translateX(0)" },
        "25%": { transform: "translateX(-5px)" },
        "75%": { transform: "translateX(5px)" }
      }
    },
    getImageContainerStyle: (u, x, b) => ({
      width: a ? "48px" : "56px",
      height: a ? "48px" : "56px",
      borderRadius: "50%",
      overflow: "hidden",
      backgroundColor: "#FFFFFF",
      flexShrink: 0,
      position: "absolute",
      top: "50%",
      transform: "translateY(-50%)",
      zIndex: 10,
      ...b === "left" ? { right: a ? "-12px" : "-14px" } : { left: a ? "-12px" : "-14px" },
      border: x ? `${g} solid ${s}` : u ? `${g} solid ${i}` : `${g} solid ${n}`,
      boxShadow: "0 2px 12px rgba(0, 0, 0, 0.15)"
    }),
    textContainer: {
      display: "flex",
      flexDirection: "column",
      gap: o["2xs"],
      flex: 1,
      minWidth: 0,
      justifyContent: "center"
    },
    getOptionTitleStyle: (u, x, b, P) => ({
      color: x || b || P ? c : r,
      fontWeight: 600,
      fontSize: a ? "0.8125em" : "0.9375em",
      lineHeight: 1.3,
      wordBreak: "break-word",
      overflowWrap: "break-word",
      textWrap: "balance",
      textAlign: u === "right" ? "right" : "left"
    }),
    getOptionSubtitleStyle: (u, x, b, P) => ({
      color: x || b || P ? c : r,
      opacity: 0.7,
      fontSize: a ? "0.6875em" : "0.8125em",
      lineHeight: 1.3,
      wordBreak: "break-word",
      overflowWrap: "break-word",
      textWrap: "balance",
      textAlign: u === "right" ? "right" : "left"
    }),
    matchIndicator: {
      position: "absolute",
      right: a ? o.xs : o.sm,
      top: "50%",
      transform: "translateY(-50%)"
    }
  };
}, lt = ({
  pairs: e,
  order: n,
  matchedPairs: r,
  selectedLeft: c,
  selectedRight: i,
  showError: s,
  onSelectLeft: l,
  onSelectRight: d,
  brandingColors: a,
  disabled: o = !1,
  isTimeUp: y = !1
}) => {
  const g = Z(), u = ue(), x = X(), b = Ue(), P = te(), S = ee().xl, W = ge().size, R = (a == null ? void 0 : a.primary_color) || x.palette.primary.plainColor, T = (a == null ? void 0 : a.content_color) || u.colorSchemes.light.textColor, N = u.colorSchemes.dark.textColor, L = x.palette.success.plainColor, z = x.palette.danger.plainColor, I = b === "dark" ? "#FFFFFF" : x.onSurface, U = x.surface, F = ot({
    primaryColor: R,
    textColor: T,
    whiteTextColor: N,
    successColor: L,
    dangerColor: z,
    optionBackground: I,
    surface: U,
    mobile: g,
    spacingScale: P,
    xlBorderRadius: S,
    borderSize: W
  }), $ = me(
    () => Fe(e, n),
    [e, n]
  ), E = (C) => e.find((m) => m.id === C), _ = (C) => r.some((m) => m.leftId === C), k = (C) => r.some((m) => m.rightId === C), f = (C, m) => {
    var M, q, J;
    const v = E(C);
    if (!v) return null;
    const H = m === "left" ? _(C) : k(C), A = m === "left" && c === C || m === "right" && i === C, O = (A || H) && v.images, V = g ? ((M = v.images) == null ? void 0 : M.mobile) || ((q = v.images) == null ? void 0 : q.main) : (J = v.images) == null ? void 0 : J.main, D = m === "left" ? v.optionA : v.optionB, Y = () => {
      o || s || y || (m === "left" ? l(C) : d(C));
    }, B = s && A, j = s && !A;
    return /* @__PURE__ */ w(
      h,
      {
        onClick: Y,
        sx: [
          F.getColumnItemStyle(m, A, H, B),
          (o || j) && F.disabledItem,
          B && F.errorItem
        ],
        children: [
          m === "right" && O && V && /* @__PURE__ */ t(h, { sx: F.getImageContainerStyle(H, B, m), children: /* @__PURE__ */ t(
            "img",
            {
              loading: "lazy",
              src: V,
              alt: D.title,
              style: { width: "100%", height: "100%", objectFit: "cover" }
            }
          ) }),
          /* @__PURE__ */ w(h, { sx: F.textContainer, children: [
            /* @__PURE__ */ t(
              p,
              {
                level: "body-md",
                sx: F.getOptionTitleStyle(
                  m,
                  A,
                  H,
                  B
                ),
                children: D.title
              }
            ),
            D.subtitle && /* @__PURE__ */ t(
              p,
              {
                level: "body-sm",
                sx: F.getOptionSubtitleStyle(
                  m,
                  A,
                  H,
                  B
                ),
                children: D.subtitle
              }
            )
          ] }),
          m === "left" && O && V && /* @__PURE__ */ t(h, { sx: F.getImageContainerStyle(H, B, m), children: /* @__PURE__ */ t(
            "img",
            {
              loading: "lazy",
              src: V,
              alt: D.title,
              style: { width: "100%", height: "100%", objectFit: "cover" }
            }
          ) })
        ]
      },
      C
    );
  };
  return /* @__PURE__ */ w(h, { sx: F.container, children: [
    /* @__PURE__ */ t(h, { sx: F.column, children: $.columnA.map((C) => f(C, "left")) }),
    /* @__PURE__ */ t(h, { sx: F.column, children: $.columnB.map((C) => f(C, "right")) })
  ] });
}, at = (e) => {
  var P, S, W, R, T, N, L, z, I, U, F, $, E, _, k, f, C, m, v, H, A, O, V, D, Y, B, j, M, q;
  const { t: n } = ne(), r = Z(), c = ((P = e.infoPage.branding) == null ? void 0 : P.colors) || null, i = he(
    {
      images: e.infoPage.images,
      imagePlaceholder: e.defaultImagePlaceholderUrl || ""
    },
    fe.STANDARD
  ), s = e.matchedPairs.length === e.pairData.pairs.length, l = X(), d = (c == null ? void 0 : c.content_color) || l.textColor, a = re().primary, o = (c == null ? void 0 : c.background_color) || l.surfaceVariant, y = ee().md, g = (c == null ? void 0 : c.primary_color) || l.palette.primary.plainColor, u = te(), x = l.surface, b = it({
    spacingScale: u,
    fontFamilyPrimary: a,
    textColor: d,
    bgcolor: se(o || ""),
    mdBorderRadius: y,
    primaryColor: g,
    mobile: r,
    surface: x
  });
  return /* @__PURE__ */ w(h, { sx: b.container, children: [
    i && /* @__PURE__ */ t(h, { sx: b.heroSection, children: /* @__PURE__ */ t(
      "img",
      {
        src: i,
        alt: e.infoPage.title,
        style: {
          width: "100%",
          height: "auto",
          display: "block"
        }
      }
    ) }),
    /* @__PURE__ */ w(h, { sx: b.header, children: [
      /* @__PURE__ */ t(p, { level: "h1", sx: b.title, children: e.infoPage.title }),
      e.infoPage.subtitle && /* @__PURE__ */ t(p, { level: "body-lg", sx: b.subtitle, children: e.infoPage.subtitle }),
      ((S = e.infoPage.labels) == null ? void 0 : S.welcome) && /* @__PURE__ */ t(p, { level: "body-md", sx: b.welcome, children: e.infoPage.labels.welcome })
    ] }),
    e.pairData.config.timeLimit > 0 && /* @__PURE__ */ t(
      h,
      {
        sx: {
          display: "flex",
          justifyContent: "center"
        },
        children: /* @__PURE__ */ t(
          ye,
          {
            isRunning: e.isTimerRunning,
            timer: e.timer,
            initialTime: e.pairData.config.timeLimit,
            brandingPrimaryColor: g,
            onTimeUpdate: e.onTimeUpdate
          }
        )
      }
    ),
    e.isChallengeMode && /* @__PURE__ */ t(
      be,
      {
        totalAttempts: e.totalAttempts,
        accuracy: e.accuracy,
        successThresholdPercent: e.pairData.config.successThresholdPercent,
        meetsThreshold: e.meetsThreshold,
        totalPairs: e.pairData.pairs.length,
        matchedPairs: e.matchedPairs.length,
        brandingColors: c,
        bgcolor: x
      }
    ),
    r && e.isTimeUp ? (
      // Mobile: Time's Up - Show only overlay with fixed height
      ((W = e.infoPage.labels) == null ? void 0 : W.timeUp) && /* @__PURE__ */ t(h, { sx: b.getTimeUpOverlayStyle(g, r), children: /* @__PURE__ */ t(p, { level: "h1", sx: b.timeUpText, children: e.infoPage.labels.timeUp }) })
    ) : (
      // Desktop or mobile with time remaining - Show full section
      /* @__PURE__ */ w(h, { sx: { ...b.pairSection, position: "relative" }, children: [
        ((R = e.infoPage.labels) == null ? void 0 : R.instructions) && /* @__PURE__ */ t(p, { level: "title-md", sx: b.instructions, children: e.infoPage.labels.instructions }),
        /* @__PURE__ */ t(
          lt,
          {
            pairs: e.pairData.pairs,
            order: e.pairData.config.order,
            matchedPairs: e.matchedPairs,
            selectedLeft: e.selectedLeft,
            selectedRight: e.selectedRight,
            showError: e.showError,
            onSelectLeft: e.onSelectLeft,
            onSelectRight: e.onSelectRight,
            brandingColors: c,
            disabled: !1,
            isTimeUp: e.isTimeUp
          }
        ),
        e.isTimeUp && ((T = e.infoPage.labels) == null ? void 0 : T.timeUp) && /* @__PURE__ */ t(h, { sx: b.getTimeUpOverlayStyle(g, r), children: /* @__PURE__ */ t(p, { level: "h1", sx: b.timeUpText, children: e.infoPage.labels.timeUp }) })
      ] })
    ),
    /* @__PURE__ */ t(h, { sx: b.leadSection, children: /* @__PURE__ */ t(
      xe,
      {
        sdk: e.sdk,
        contentType: e.infoPage.type,
        contentId: e.infoPage.id,
        onSuccessLabel: ((N = e.infoPage.labels) == null ? void 0 : N.buttonLabel) || n("pickThePair.buttons.submit"),
        contentName: e.infoPage.title,
        brandingColors: (L = e.infoPage.branding) == null ? void 0 : L.colors,
        brandingUrls: (z = e.infoPage.branding) == null ? void 0 : z.urls,
        campaignId: (I = e.leads) == null ? void 0 : I.campaignId,
        campaignName: (U = e.leads) == null ? void 0 : U.campaignName,
        fields: (F = e.leads) == null ? void 0 : F.fields,
        leadTitle: ($ = e.infoPage.labels) == null ? void 0 : $.leadTitle,
        leadDescription: (E = e.infoPage.labels) == null ? void 0 : E.leadDescription,
        leadCta: (_ = e.infoPage.labels) == null ? void 0 : _.buttonLabel,
        leadSuccessTitle: (k = e.infoPage.labels) == null ? void 0 : k.successTitle,
        leadSuccessDescription: (f = e.infoPage.labels) == null ? void 0 : f.successDescription,
        syncWithProfile: (C = e.leads) == null ? void 0 : C.syncWithProfile,
        isSubmittingParticipation: !s || e.isChallengeMode && !e.meetsThreshold
      }
    ) }),
    (((v = (m = e.infoPage.branding) == null ? void 0 : m.images) == null ? void 0 : v.main_logo) || ((H = e.infoPage.labels) == null ? void 0 : H.disclaimer)) && /* @__PURE__ */ w(h, { sx: b.footer, children: [
      ((A = e.infoPage.labels) == null ? void 0 : A.disclaimer) && /* @__PURE__ */ t(p, { level: "body-sm", sx: b.disclaimer, children: e.infoPage.labels.disclaimer }),
      ((V = (O = e.infoPage.branding) == null ? void 0 : O.images) == null ? void 0 : V.main_logo) && /* @__PURE__ */ t(
        "img",
        {
          src: r ? ((Y = (D = e.infoPage.branding) == null ? void 0 : D.images) == null ? void 0 : Y.mobile_logo) || ((j = (B = e.infoPage.branding) == null ? void 0 : B.images) == null ? void 0 : j.main_logo) : (q = (M = e.infoPage.branding) == null ? void 0 : M.images) == null ? void 0 : q.main_logo,
          alt: "Brand Logo",
          style: { height: "auto", maxHeight: "120px", maxWidth: "360px" }
        }
      )
    ] })
  ] });
}, rt = (e) => ({
  // 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
    },
    zIndex: 2
  },
  // Main content section
  mainContentSection: {
    display: "flex",
    flexDirection: "column",
    gap: e.spacingScale.md
  },
  // Stopwatch container
  stopwatchContainer: {
    display: "flex",
    justifyContent: "center"
  },
  // Instructions text
  instructions: {
    fontFamily: e.fontFamilyPrimary,
    fontWeight: 400,
    fontSize: "1em",
    lineHeight: "24px",
    color: e.darkTextColor,
    textAlign: "center"
  },
  // Continue button
  continueButton: {
    borderRadius: e.buttonRadius,
    backgroundColor: e.primaryColor,
    color: e.onPrimaryColor,
    fontFamily: e.fontFamilyPrimary,
    fontWeight: 500,
    fontSize: "0.9375em",
    lineHeight: "24px",
    letterSpacing: "0.46px",
    textTransform: "uppercase",
    padding: "12px 24px",
    "&:hover": {
      backgroundColor: e.primaryColor,
      opacity: 0.9
    },
    "&:disabled": {
      backgroundColor: e.primaryColor,
      opacity: 0.5,
      cursor: "not-allowed"
    }
  },
  // Presented by container
  presentedByContainer: {
    display: "flex",
    justifyContent: "center"
  },
  // Challenge stats container
  challengeStatsContainer: {
    display: "flex",
    justifyContent: "center"
  },
  // Bottom footer container
  bottomFooterContainer: {
    display: "flex",
    alignItems: "center",
    justifyContent: e.isMobile ? "center" : "space-between",
    flexDirection: e.isMobile ? "column-reverse" : "row",
    gap: e.spacingScale.md
  },
  welcome: {
    fontFamily: e.fontFamilyPrimary,
    color: e.textColor,
    fontSize: e.isExtraSmall ? "0.875em" : "1em",
    fontWeight: 400,
    lineHeight: 1.5,
    maxWidth: "800px",
    margin: "0 auto",
    opacity: 0.9
  }
}), ct = (e) => {
  var $, E, _, k, f, C, m, v, H, A, O, V;
  const [n, r] = K.useState(!1), c = te(), i = ue(), { t: s } = ne(), l = Z(), d = ke(), { brandingImage: a, brandingColors: o, brandingLogo: y } = We(e.infoPage.branding || null), g = e.defaultImagePlaceholderUrl ? e.defaultImagePlaceholderUrl : l ? Ge : Qe, u = a || he(
    {
      images: e.infoPage.images,
      imagePlaceholder: g
    },
    fe.OVERLAY
  ), x = i.customRadius.dark.md, b = (o == null ? void 0 : o.background_color) || ((E = ($ = i.colorSchemes) == null ? void 0 : $.dark) == null ? void 0 : E.surfaceVariant), P = (k = (_ = i.customRadius) == null ? void 0 : _.light) == null ? void 0 : k.xl, S = (o == null ? void 0 : o.primary_color) || ((v = (m = (C = (f = i.colorSchemes) == null ? void 0 : f.light) == null ? void 0 : C.palette) == null ? void 0 : m.primary) == null ? void 0 : v.plainColor), W = (V = (O = (A = (H = i.colorSchemes) == null ? void 0 : H.light) == null ? void 0 : A.palette) == null ? void 0 : O.primary) == null ? void 0 : V.onPrimary, R = i.customFontFamily.dark.primary, T = i.colorSchemes.dark.textColor, N = (o == null ? void 0 : o.content_color) || i.colorSchemes.dark.textColor, z = rt({
    spacingScale: c,
    mdBorderRadius: x,
    contentBgColor: b,
    buttonRadius: P,
    primaryColor: S,
    onPrimaryColor: W,
    fontFamilyPrimary: R,
    darkTextColor: T,
    isMobile: l,
    isExtraSmall: d,
    textColor: N,
    opacity: "60%"
  }), I = e.matchedPairs.length === e.pairData.pairs.length, U = () => {
    var D, Y, B, j, M;
    return /* @__PURE__ */ t(
      Re,
      {
        brandingLogo: y,
        textColor: T,
        label: ((D = e.infoPage.labels) == null ? void 0 : D.sponsor) || null,
        primaryUrl: (B = (Y = e.infoPage.branding) == null ? void 0 : Y.urls) == null ? void 0 : B.primary_url,
        secondaryUrl: (M = (j = e.infoPage.branding) == null ? void 0 : j.urls) == null ? void 0 : M.secondary_url
      }
    );
  }, F = () => {
    var D, Y, B, j, M, q, J, ie, oe, le, Pe, Se, Ce, Te;
    return /* @__PURE__ */ t(Q, { children: n ? /* @__PURE__ */ w(Q, { children: [
      /* @__PURE__ */ t(h, { sx: z.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
        xe,
        {
          sdk: e.sdk,
          contentId: e.infoPage.id,
          contentType: e.infoPage.type,
          onSuccessLabel: ((D = e.infoPage.labels) == null ? void 0 : D.buttonLabel) || s("pickThePair.buttons.submit"),
          contentName: e.infoPage.title,
          brandingColors: (Y = e.infoPage.branding) == null ? void 0 : Y.colors,
          brandingUrls: (B = e.infoPage.branding) == null ? void 0 : B.urls,
          campaignId: (j = e.leads) == null ? void 0 : j.campaignId,
          campaignName: (M = e.leads) == null ? void 0 : M.campaignName,
          fields: (q = e.leads) == null ? void 0 : q.fields,
          leadTitle: (J = e.infoPage.labels) == null ? void 0 : J.leadTitle,
          leadDescription: (ie = e.infoPage.labels) == null ? void 0 : ie.leadDescription,
          leadCta: (oe = e.infoPage.labels) == null ? void 0 : oe.leadCta,
          leadSuccessTitle: (le = e.infoPage.labels) == null ? void 0 : le.leadSuccessTitle,
          leadSuccessDescription: (Pe = e.infoPage.labels) == null ? void 0 : Pe.leadSuccessDescription,
          syncWithProfile: (Se = e.leads) == null ? void 0 : Se.syncWithProfile
        }
      ) }),
      y ? U() : /* @__PURE__ */ t(Q, {})
    ] }) : /* @__PURE__ */ w(Q, { children: [
      ((Ce = e.infoPage.labels) == null ? void 0 : Ce.welcome) && /* @__PURE__ */ t(
        p,
        {
          level: "body-md",
          sx: {
            ...z.welcome
          },
          children: e.infoPage.labels.welcome
        }
      ),
      e.pairData.config.timeLimit > 0 && /* @__PURE__ */ t(h, { sx: z.stopwatchContainer, children: /* @__PURE__ */ t(
        ye,
        {
          isRunning: e.isTimerRunning,
          timer: e.timer,
          initialTime: e.pairData.config.timeLimit,
          brandingPrimaryColor: (o == null ? void 0 : o.primary_color) || null,
          onTimeUpdate: e.onTimeUpdate
        }
      ) }),
      e.isChallengeMode && /* @__PURE__ */ t(h, { sx: z.challengeStatsContainer, children: /* @__PURE__ */ t(
        be,
        {
          totalAttempts: e.totalAttempts,
          accuracy: e.accuracy,
          successThresholdPercent: e.pairData.config.successThresholdPercent,
          meetsThreshold: e.meetsThreshold,
          totalPairs: e.pairData.pairs.length,
          matchedPairs: e.matchedPairs.length,
          brandingColors: o,
          bgcolor: b
        }
      ) }),
      /* @__PURE__ */ w(h, { sx: z.contentContainerWithBackdrop, children: [
        ((Te = e.infoPage.labels) == null ? void 0 : Te.instructions) && /* @__PURE__ */ t(p, { level: "body-lg", sx: z.instructions, children: e.infoPage.labels.instructions }),
        /* @__PURE__ */ t(
          ve,
          {
            pairs: e.pairData.pairs,
            order: e.pairData.config.order,
            matchedPairs: e.matchedPairs,
            selectedLeft: e.selectedLeft,
            selectedRight: e.selectedRight,
            showError: e.showError,
            onSelectLeft: e.onSelectLeft,
            onSelectRight: e.onSelectRight,
            brandingColors: o,
            disabled: !1,
            isTimeUp: e.isTimeUp
          }
        )
      ] }),
      /* @__PURE__ */ w(h, { sx: z.bottomFooterContainer, children: [
        U(),
        e.leads && /* @__PURE__ */ t(
          pe,
          {
            variant: "soft",
            disabled: !I || e.isChallengeMode && !e.meetsThreshold || e.isTimeUp,
            sx: z.continueButton,
            onClick: () => r(!0),
            children: /* @__PURE__ */ t(
              p,
              {
                sx: {
                  fontFamily: R,
                  fontWeight: 500,
                  fontSize: "0.9375em",
                  lineHeight: "24px",
                  letterSpacing: "0.46px",
                  textTransform: "uppercase",
                  color: W
                },
                children: s("pickThePair.buttons.continue")
              }
            )
          }
        )
      ] })
    ] }) });
  };
  return /* @__PURE__ */ t(
    qe,
    {
      entity: {
        ...e.infoPage,
        type: "pick-the-pair",
        description: e.infoPage.subtitle || "",
        rules: null
      },
      headline: s("pickThePair.headline"),
      finalImage: u,
      children: F()
    }
  );
}, st = (e) => {
  const [n, r] = G([]), [c, i] = G(null), [s, l] = G(null), [d, a] = G(!1), [o, y] = G(0), [g, u] = G(!1), [x, b] = G(!1), [P, S] = G(0), [W, R] = G(0), { infoPage: T } = Ne(e.entityId, "pick-the-pair", e.sdk), N = () => {
    if (T && T.id !== "not-found") {
      const f = Object.keys(De);
      if (T.language && f.includes(T.language))
        return T.language;
      if (T.language)
        return "en";
    }
    return e.language || "en";
  };
  de(() => {
    const f = N();
    Ae(f);
  }, [e.language, T]);
  const L = me(() => {
    if (!T || T.id === "not-found")
      return {
        pairs: [],
        config: {
          timeLimit: 0,
          order: { columnA: [], columnB: [] },
          mode: "casual",
          successThresholdPercent: 0
        }
      };
    try {
      return JSON.parse(T.body);
    } catch (f) {
      return console.error("Failed to parse pick-the-pair body:", f), {
        pairs: [],
        config: {
          timeLimit: 0,
          order: { columnA: [], columnB: [] },
          mode: "casual",
          successThresholdPercent: 0
        }
      };
    }
  }, [T]);
  de(() => {
    L.config.timeLimit && L.config.timeLimit > 0 && (y(L.config.timeLimit), u(!0));
  }, [L.config.timeLimit]);
  const z = L.config.mode.toLowerCase() === "challenge", I = n.length, U = P > 0 ? I / P * 100 : 0, F = U >= L.config.successThresholdPercent;
  if (!T)
    return /* @__PURE__ */ t(je, { my: 20 });
  if (T.id === "not-found")
    return /* @__PURE__ */ t(Ke, { template: e.template });
  const $ = (f) => {
    if (c === f) {
      i(null);
      return;
    }
    if (n.some((m) => m.leftId === f)) {
      r((m) => m.filter((v) => v.leftId !== f));
      return;
    }
    s ? f === s ? (S((m) => m + 1), r((m) => [
      ...m,
      { leftId: f, rightId: s }
    ]), i(null), l(null)) : (S((m) => m + 1), R((m) => m + 1), i(f), a(!0), setTimeout(() => {
      a(!1), i(null), l(null);
    }, 800)) : i(f);
  }, E = (f) => {
    if (s === f) {
      l(null);
      return;
    }
    if (n.some((m) => m.rightId === f)) {
      r((m) => m.filter((v) => v.rightId !== f));
      return;
    }
    c ? f === c ? (S((m) => m + 1), r((m) => [
      ...m,
      { leftId: c, rightId: f }
    ]), i(null), l(null)) : (S((m) => m + 1), R((m) => m + 1), l(f), a(!0), setTimeout(() => {
      a(!1), i(null), l(null);
    }, 800)) : l(f);
  }, _ = (f) => {
    y(f), f === 0 && (u(!1), b(!0));
  }, k = async () => {
    u(!1);
  };
  return e.template === ae.LANDING_PAGE ? /* @__PURE__ */ t(
    at,
    {
      infoPage: T,
      pairData: L,
      matchedPairs: n,
      selectedLeft: c,
      selectedRight: s,
      showError: d,
      sdk: e.sdk,
      leads: e.leads,
      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
      timer: o,
      isTimerRunning: g,
      isTimeUp: x,
      totalAttempts: P,
      incorrectAttempts: W,
      accuracy: U,
      meetsThreshold: F,
      isChallengeMode: z,
      onSelectLeft: $,
      onSelectRight: E,
      onSubmit: k,
      onTimeUpdate: _
    }
  ) : e.template === ae.OVERLAY ? /* @__PURE__ */ t(
    ct,
    {
      infoPage: T,
      pairData: L,
      matchedPairs: n,
      selectedLeft: c,
      selectedRight: s,
      showError: d,
      sdk: e.sdk,
      leads: e.leads,
      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
      timer: o,
      isTimerRunning: g,
      isTimeUp: x,
      totalAttempts: P,
      incorrectAttempts: W,
      accuracy: U,
      meetsThreshold: F,
      isChallengeMode: z,
      onSelectLeft: $,
      onSelectRight: E,
      onSubmit: k,
      onTimeUpdate: _
    }
  ) : /* @__PURE__ */ t(
    nt,
    {
      infoPage: T,
      pairData: L,
      matchedPairs: n,
      selectedLeft: c,
      selectedRight: s,
      showError: d,
      sdk: e.sdk,
      leads: e.leads,
      defaultImagePlaceholderUrl: e.defaultImagePlaceholderUrl,
      imagePosition: e.template === ae.STANDARD ? e.imagePosition : void 0,
      timer: o,
      isTimerRunning: g,
      isTimeUp: x,
      totalAttempts: P,
      incorrectAttempts: W,
      accuracy: U,
      meetsThreshold: F,
      isChallengeMode: z,
      onSelectLeft: $,
      onSelectRight: E,
      onSubmit: k,
      onTimeUpdate: _
    }
  );
}, dt = (e) => {
  var u;
  const [n, r] = K.useState(!1), c = K.useRef(
    `pick-the-pair-shadow-root-${Math.random().toString(36).substring(2, 11)}`
  ), i = K.useRef(null), s = K.useRef(null), l = K.useRef(null), d = K.useRef(null);
  K.useEffect(() => {
    if (i.current)
      return i.current.shadowRoot ? (s.current = i.current.shadowRoot, l.current = s.current.getElementById(
        c.current
      ), l.current || (l.current = document.createElement("div"), l.current.id = c.current, s.current.appendChild(l.current))) : (s.current = i.current.attachShadow({ mode: "open" }), l.current = document.createElement("div"), l.current.id = c.current, s.current.appendChild(l.current)), d.current || (d.current = $e({
        key: "pick-the-pair-css",
        prepend: !0,
        container: s.current
      })), r(!0), () => {
        r(!1);
      };
  }, []);
  const a = e.themeOptions, o = {
    ...a,
    mode: e.template === ae.OVERLAY ? "dark" : a == null ? void 0 : a.mode
  }, y = /* @__PURE__ */ t(h, { ref: i }), g = n && i.current && l.current && d.current ? Me(
    /* @__PURE__ */ t(_e, { value: d.current, children: /* @__PURE__ */ t(He, { containerRef: i, children: /* @__PURE__ */ t(
      Ee,
      {
        customTheme: o,
        mode: o == null ? void 0 : o.mode,
        shadowRootElement: l.current,
        children: /* @__PURE__ */ t(
          Oe,
          {
            shadowRootElement: l.current,
            leadPhoneCountryCode: ((u = e.leads) == null ? void 0 : u.phoneCountryCode) || null,
            language: null,
            optionsLayout: null,
            children: e.children
          }
        )
      }
    ) }) }),
    l.current
  ) : null;
  return /* @__PURE__ */ w(Q, { children: [
    y,
    g
  ] });
}, mt = (e) => /* @__PURE__ */ t(dt, { ...e, children: /* @__PURE__ */ t(st, { ...e }) }), pt = mt;
export {
  pt as PickThePair
};
