import { jsx as t, jsxs as w, Fragment as re } from "react/jsx-runtime";
import { h as Ce, g as Je, l as Ke } from "./chunks/helpers-uh28Hksw.js";
import Z, { useState as qe, useEffect as Qe } from "react";
import { i as K, h as Ze, b as ve, a as ie, d as Se, B as m, f as se, G as ue, c as we, e as xe, y as Te, W as fe, u as $e, o as et, n as tt, w as ne, z as ot, A as nt, D as rt, E as lt, F as it } from "./chunks/PrizeCard-C2El3VOB.js";
import { S as at } from "./chunks/Spinner-DWJCKaY5.js";
import { createPortal as st } from "react-dom";
import { u as ct } from "./chunks/useInfoPage-BHdgKdme.js";
import { N as dt, S as Ae, O as Ie } from "./chunks/NotFoundSkeleton-BJ7rW_uC.js";
import { u as mt, S as le, c as Ee, D as Ge, C as ut, W as ht, d as xt, e as ft, f as pt, O as gt, F as bt, b as ye, a as yt, P as vt } from "./chunks/PickOneOfX-gVM5GmqF.js";
import { b as pe, d as He, a as Ne } from "./chunks/useImageVariant-f37LbO43.js";
import { T as D, B as he } from "./chunks/Button-DPGn5NZd.js";
const ke = ({
  children: e,
  brandingBorderColor: s,
  state: a
}) => {
  const r = K(), x = Ze(), o = a === "play" ? x : r, c = ve().md, d = s || ie().secondaryContainer, l = Se().size + " solid " + d;
  return /* @__PURE__ */ t(
    m,
    {
      sx: {
        display: "flex",
        flexDirection: o ? "column" : "row",
        width: "100%",
        borderRadius: c,
        boxShadow: "md",
        border: l,
        overflow: "hidden",
        background: ie().surface,
        minHeight: "250px"
      },
      children: e
    }
  );
}, St = ({
  template: e
}) => {
  const { t: s } = se(), a = /* @__PURE__ */ t(
    dt,
    {
      notFoundTitle: s("chanceGame.chanceGameNotFound"),
      notFoundMessage: s("chanceGame.chanceGameNotFoundDescription")
    }
  );
  return e === ue.EMBED ? a : /* @__PURE__ */ t(ke, { brandingBorderColor: null, children: a });
}, Ve = ({
  infoPage: e,
  enableReset: s = !1,
  contentColor: a,
  primaryColor: r,
  secondaryColor: x,
  onPrimaryColor: o,
  backgroundColor: c,
  dangerColor: d,
  brandingLogo: n,
  isDark: l = !1,
  showTitleBlock: F = !1,
  variant: O
}) => {
  var G, q, V;
  const p = K(), S = ie(), g = ve(), i = we(), u = xe(), _ = Se(), y = O === "standard", h = O === "overlay", C = y || h, E = JSON.parse(e.body), M = E.segments || [], f = e.labels || {}, L = E.mode || ((G = E.config) == null ? void 0 : G.mode) || "fair", H = ((q = E.config) == null ? void 0 : q.pace) || "normal", W = ((V = E.config) == null ? void 0 : V.decorations) ?? !1, B = Ee(r, l), {
    isSpinning: T,
    finalRotation: N,
    selectedSegment: b,
    showShakeAnimation: X,
    showResultScreen: R,
    showInlineResult: k,
    hasEntered: $,
    confettiActive: z,
    spinDuration: P,
    shakeAnimationDuration: U,
    confettiVelocityMultiplier: j,
    confettiGravity: A,
    handleSpin: I,
    handleReset: v,
    onConfettiComplete: ee
  } = mt({ segments: M, mode: L, pace: H }), te = C ? p ? "260px" : "340px" : p ? "320px" : "450px", Y = () => /* @__PURE__ */ w(re, { children: [
    W && /* @__PURE__ */ t(
      Ge,
      {
        primaryColor: r,
        isDark: l,
        animationPrefix: "wheel"
      }
    ),
    /* @__PURE__ */ t(
      ut,
      {
        active: z,
        primaryColor: r,
        velocityMultiplier: j,
        gravity: A,
        onComplete: ee
      }
    ),
    R && (b == null ? void 0 : b.results) && /* @__PURE__ */ t(
      le,
      {
        result: b.results,
        variant: O || "embed",
        mode: "screen",
        contentColor: a,
        primaryColor: r,
        onPrimaryColor: o,
        disclaimer: y ? void 0 : f.disclaimer,
        enableReset: s,
        onReset: v
      }
    ),
    !R && /* @__PURE__ */ w(re, { children: [
      F && (e.title || e.subtitle) && /* @__PURE__ */ w(
        m,
        {
          sx: {
            display: "flex",
            flexDirection: "column",
            gap: u.xs,
            alignItems: "center",
            textAlign: "center",
            width: "100%",
            zIndex: 1
          },
          children: [
            e.title && /* @__PURE__ */ w(re, { children: [
              /* @__PURE__ */ t(
                D,
                {
                  level: "h2",
                  sx: {
                    fontFamily: i.primary,
                    fontWeight: 700,
                    fontSize: p ? "1.5rem" : "2rem",
                    color: a,
                    lineHeight: 1.2,
                    ...W && {
                      textShadow: `0 0 20px ${B("20")}, 0 0 40px ${B("10")}`
                    }
                  },
                  children: e.title
                }
              ),
              W && /* @__PURE__ */ w(
                m,
                {
                  sx: {
                    display: "flex",
                    alignItems: "center",
                    gap: u.xs,
                    mt: u["2xs"]
                  },
                  children: [
                    /* @__PURE__ */ t(
                      m,
                      {
                        sx: {
                          width: p ? "40px" : "60px",
                          height: "1px",
                          background: `linear-gradient(90deg, transparent, ${B("40")})`
                        }
                      }
                    ),
                    /* @__PURE__ */ t(
                      m,
                      {
                        sx: {
                          width: "6px",
                          height: "6px",
                          transform: "rotate(45deg)",
                          background: B("50")
                        }
                      }
                    ),
                    /* @__PURE__ */ t(
                      m,
                      {
                        sx: {
                          width: p ? "40px" : "60px",
                          height: "1px",
                          background: `linear-gradient(90deg, ${B("40")}, transparent)`
                        }
                      }
                    )
                  ]
                }
              )
            ] }),
            e.subtitle && /* @__PURE__ */ t(
              D,
              {
                level: "body-md",
                sx: {
                  fontFamily: i.secondary,
                  fontWeight: 400,
                  fontSize: p ? "0.875rem" : "1rem",
                  color: a,
                  opacity: 0.8
                },
                children: e.subtitle
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ w(m, { children: [
        !y && f.welcome && /* @__PURE__ */ t(
          D,
          {
            level: "body-md",
            sx: {
              fontFamily: i.primary,
              fontWeight: 400,
              fontSize: p ? "0.875rem" : "1rem",
              color: a,
              textAlign: "center",
              mb: h ? 0 : u.md,
              zIndex: 1
            },
            children: f.welcome
          }
        ),
        (y || h) && !k && f.instructions && /* @__PURE__ */ t(
          D,
          {
            level: y ? "body-sm" : "body-md",
            sx: {
              fontFamily: i.secondary,
              fontWeight: 400,
              fontSize: p ? "0.875rem" : "1rem",
              color: a,
              opacity: 0.7,
              textAlign: "center",
              maxWidth: y ? "400px" : "600px",
              zIndex: 1
            },
            children: f.instructions
          }
        )
      ] }),
      /* @__PURE__ */ w(
        m,
        {
          onClick: I,
          sx: {
            position: "relative",
            width: "100%",
            maxWidth: te,
            aspectRatio: "1",
            mt: C ? u.md : 0,
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            cursor: T || z || k || !R && !k && b !== null ? "default" : "pointer",
            userSelect: "none",
            zIndex: 1,
            // Entrance animation
            opacity: $ ? 1 : 0,
            transform: $ ? "scale(1)" : "scale(0.85)",
            transition: "opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
            // Shake animation
            animation: X ? `wheelShake ${U / 2}ms ease-in-out 2` : "none",
            "@keyframes wheelShake": {
              "0%, 100%": { transform: "translateX(0)" },
              "10%, 30%, 50%, 70%, 90%": { transform: "translateX(-8px)" },
              "20%, 40%, 60%, 80%": { transform: "translateX(8px)" }
            },
            // Wheel glow effect (decorations only)
            ...W && {
              filter: `drop-shadow(0 0 ${p ? "15px" : "25px"} ${B("20")}) drop-shadow(0 0 ${p ? "40px" : "60px"} ${B("10")})`
            }
          },
          children: [
            /* @__PURE__ */ t(
              ht,
              {
                segmentCount: M.length,
                decorations: W,
                primaryColor: r
              }
            ),
            /* @__PURE__ */ t(
              xt,
              {
                segments: M,
                secondaryColor: x,
                primaryColor: r,
                onPrimaryColor: o,
                decorations: W,
                isStandard: y,
                rotation: N,
                isSpinning: T,
                spinDuration: P
              }
            ),
            !y && !h && n && /* @__PURE__ */ t(
              m,
              {
                component: "img",
                src: n,
                alt: "Logo",
                sx: {
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  transform: "translate(-50%, -50%)",
                  width: "15%",
                  height: "15%",
                  objectFit: "contain",
                  borderRadius: "50%",
                  zIndex: 3,
                  pointerEvents: "none",
                  filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
                }
              }
            ),
            /* @__PURE__ */ t(
              ft,
              {
                primaryColor: r,
                dangerColor: d,
                decorations: W
              }
            )
          ]
        }
      ),
      !y && !h && !k && f.instructions && /* @__PURE__ */ t(
        D,
        {
          level: "body-sm",
          sx: {
            fontFamily: i.secondary,
            fontWeight: 400,
            fontSize: p ? "0.875rem" : "1rem",
            color: a,
            opacity: 0.7,
            textAlign: "center",
            maxWidth: "400px",
            zIndex: 1
          },
          children: f.instructions
        }
      ),
      !y && k && (b == null ? void 0 : b.results) && /* @__PURE__ */ t(
        le,
        {
          result: b.results,
          variant: "embed",
          mode: "inline",
          contentColor: a,
          primaryColor: r,
          onPrimaryColor: o,
          enableReset: s,
          onReset: v,
          showResetButton: !0,
          sx: { zIndex: 1 }
        }
      ),
      f.buttonLabel && !(k && b && !b.isWinning) && /* @__PURE__ */ t(
        he,
        {
          variant: "soft",
          disabled: T || z || !R && !k && b !== null,
          onClick: I,
          sx: {
            borderRadius: g.xl,
            py: C ? u.sm : u.md,
            px: C ? u.lg : u.xl,
            "--variant-softBg": r,
            "--variant-softColor": o,
            "--variant-softHoverBg": r,
            bgcolor: r,
            color: o,
            fontSize: C ? p ? "0.75rem" : "0.875rem" : p ? "1rem" : "1.125rem",
            fontWeight: 700,
            fontFamily: i.primary,
            textTransform: "uppercase",
            letterSpacing: "0.5px",
            minWidth: C ? void 0 : p ? "200px" : "250px",
            zIndex: 1,
            transition: "all 300ms cubic-bezier(0.2, 0, 0, 1)",
            transform: "scale(1)",
            ...W && {
              boxShadow: `0 4px 14px 0 ${r}40, 0 0 20px ${r}15`,
              animation: !T && !b ? "wheelBtnPulse 2.5s ease-in-out infinite" : "none",
              "@keyframes wheelBtnPulse": {
                "0%, 100%": {
                  boxShadow: `0 4px 14px 0 ${r}40, 0 0 20px ${r}15`
                },
                "50%": {
                  boxShadow: `0 6px 24px 0 ${r}60, 0 0 35px ${r}25`
                }
              }
            },
            ...!W && {
              boxShadow: "0 4px 14px 0 rgba(0,0,0,0.15)"
            },
            "&:hover": {
              bgcolor: r,
              transform: "scale(1.05)",
              boxShadow: W ? `0 6px 20px 0 ${r}50, 0 0 30px ${r}20` : "0 6px 20px 0 rgba(0,0,0,0.2)"
            },
            "&:active": {
              transform: "scale(0.95)",
              color: o
            },
            "&:disabled": {
              "--variant-softDisabledBg": r,
              "--variant-softDisabledColor": o,
              bgcolor: r,
              color: o,
              opacity: 0.5,
              animation: "none"
            }
          },
          slotProps: {
            loadingIndicatorCenter: {
              sx: {
                "& .MuiCircularProgress-track": {
                  stroke: o
                }
              }
            }
          },
          children: f.buttonLabel
        }
      ),
      y && k && b && !b.isWinning && /* @__PURE__ */ t(
        he,
        {
          variant: "outlined",
          onClick: v,
          sx: {
            borderRadius: g.xl,
            py: u.sm,
            px: u.lg,
            borderColor: S.outlineEnabledBorder,
            color: a,
            fontSize: p ? "0.75rem" : "0.875rem",
            fontWeight: 700,
            fontFamily: i.primary,
            textTransform: "uppercase",
            zIndex: 1,
            "&:hover": {
              borderColor: r,
              bgcolor: "transparent",
              color: r
            }
          },
          children: "Reset Game"
        }
      )
    ] })
  ] });
  if (y) {
    const Q = Ce(c), oe = Q ? Q.replace(/[^\d,]/g, "") : "";
    return /* @__PURE__ */ w(
      m,
      {
        sx: {
          display: "flex",
          flexDirection: "column",
          width: "100%",
          height: "100%",
          gap: u.lg,
          alignItems: "center",
          position: "relative",
          overflow: "auto",
          boxSizing: "border-box"
        },
        children: [
          !R && f.welcome && /* @__PURE__ */ t(
            D,
            {
              level: "body-md",
              sx: {
                fontFamily: i.primary,
                fontWeight: 400,
                fontSize: p ? "0.875rem" : "1rem",
                color: a,
                textAlign: "center",
                px: u.md
              },
              children: f.welcome
            }
          ),
          /* @__PURE__ */ t(
            m,
            {
              sx: {
                display: "flex",
                flexDirection: "column",
                px: u.md,
                width: "100%",
                boxSizing: "border-box"
              },
              children: /* @__PURE__ */ w(
                m,
                {
                  sx: {
                    display: "flex",
                    flexDirection: "column",
                    gap: p ? u.lg : u.md
                  },
                  children: [
                    /* @__PURE__ */ t(
                      m,
                      {
                        sx: {
                          borderRadius: g.md,
                          px: u.sm,
                          pt: u.sm,
                          pb: u.md,
                          gap: u.md,
                          bgcolor: `rgba(${oe}, 0.5)`,
                          display: "flex",
                          flexDirection: "column",
                          alignItems: "center",
                          backdropFilter: "blur(4px)",
                          position: "relative",
                          overflow: "hidden",
                          ...W && {
                            border: `${_.size} solid ${B("15")}`
                          }
                        },
                        children: Y()
                      }
                    ),
                    k && (b == null ? void 0 : b.results) && /* @__PURE__ */ t(
                      le,
                      {
                        result: b.results,
                        variant: "standard",
                        mode: "inline",
                        contentColor: a,
                        primaryColor: r,
                        onPrimaryColor: o,
                        showResetButton: !1,
                        sx: { mb: u.md }
                      }
                    ),
                    (n || f.disclaimer) && /* @__PURE__ */ w(
                      m,
                      {
                        sx: {
                          display: "flex",
                          flexDirection: "column",
                          alignItems: "center",
                          gap: u.md
                        },
                        children: [
                          f.disclaimer && /* @__PURE__ */ t(
                            D,
                            {
                              level: "body-sm",
                              sx: {
                                fontFamily: i.secondary,
                                fontWeight: 400,
                                fontSize: p ? "0.625rem" : "0.75rem",
                                color: a,
                                opacity: 0.7,
                                textAlign: "center",
                                maxWidth: "900px",
                                lineHeight: 1.4
                              },
                              children: f.disclaimer
                            }
                          ),
                          n && /* @__PURE__ */ t(
                            "img",
                            {
                              src: n,
                              alt: "Brand Logo",
                              style: {
                                height: "auto",
                                maxHeight: "60px",
                                maxWidth: "180px"
                              }
                            }
                          )
                        ]
                      }
                    )
                  ]
                }
              )
            }
          )
        ]
      }
    );
  }
  return /* @__PURE__ */ w(
    m,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        width: "100%",
        p: p ? u.lg : u.xl,
        gap: u.lg,
        alignItems: "center",
        position: "relative",
        overflow: "hidden",
        boxSizing: "border-box"
      },
      children: [
        Y(),
        !R && f.disclaimer && /* @__PURE__ */ t(
          m,
          {
            sx: {
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
              gap: u.md
            },
            children: /* @__PURE__ */ t(
              D,
              {
                level: "body-sm",
                sx: {
                  fontFamily: i.secondary,
                  fontWeight: 400,
                  fontSize: p ? "0.625rem" : "0.75rem",
                  color: a,
                  opacity: 0.7,
                  textAlign: "center",
                  maxWidth: "900px",
                  lineHeight: 1.4
                },
                children: f.disclaimer
              }
            )
          }
        )
      ]
    }
  );
}, wt = ({
  infoPage: e,
  enableReset: s = !1,
  imagePosition: a = "left",
  defaultImagePlaceholderUrl: r
}) => {
  var u, _;
  const { t: x } = se(), o = K(), c = ie(), d = Te() === "dark", n = pe(
    {
      images: e.images,
      imagePlaceholder: r || ""
    },
    fe.STANDARD
  ), l = (u = e.branding) == null ? void 0 : u.colors, F = (l == null ? void 0 : l.primary_color) || c.palette.primary.plainColor, O = (l == null ? void 0 : l.secondary_color) || c.palette.danger.plainColor, p = (l == null ? void 0 : l.border_color) || null, S = (l == null ? void 0 : l.background_color) || c.surfaceVariant || "", g = (_ = e.branding) == null ? void 0 : _.images, i = o ? (g == null ? void 0 : g.mobile_logo) || (g == null ? void 0 : g.main_logo) || "" : (g == null ? void 0 : g.main_logo) || "";
  return /* @__PURE__ */ t(ke, { brandingBorderColor: p, children: /* @__PURE__ */ t(
    Ae,
    {
      entity: {
        ...e,
        type: "chance-game",
        description: e.subtitle || "",
        rules: null
      },
      headline: x("chanceGame.headlinePrizeWheel"),
      finalImage: n,
      imagePosition: a,
      children: /* @__PURE__ */ t(
        Ve,
        {
          infoPage: e,
          enableReset: s,
          contentColor: (l == null ? void 0 : l.content_color) || c.textColor,
          primaryColor: F,
          secondaryColor: O,
          onPrimaryColor: c.palette.primary.onPrimary,
          borderColor: p || void 0,
          backgroundColor: S,
          dangerColor: c.palette.danger.plainColor,
          shimmerColor: F,
          brandingLogo: i,
          isDark: d,
          showTitleBlock: !1,
          variant: "standard"
        }
      )
    }
  ) });
}, Me = ({
  infoPage: e,
  enableReset: s = !1,
  contentColor: a,
  primaryColor: r,
  onPrimaryColor: x,
  borderColor: o,
  backgroundColor: c,
  dangerColor: d,
  cardBaseColor: n,
  shimmerColor: l,
  brandingLogo: F = "",
  isDark: O = !1,
  showTitleBlock: p = !1,
  variant: S,
  compactCards: g = !1
}) => {
  var Fe, We, _e, Oe;
  const i = K(), u = ie(), _ = ve(), y = we(), h = xe(), C = Se(), E = n || c, M = l || r, f = S === "standard", L = S === "overlay", H = f ? Ce(c) : "", W = H ? H.replace(/[^\d,]/g, "") : "", B = g ? i ? 80 : 110 : i ? 100 : 140, T = g ? i ? 104 : 143 : i ? 130 : 180, N = g ? i ? 90 : 130 : i ? 120 : 180, b = g ? i ? "16px" : "32px" : i ? "24px" : "48px", X = g ? i ? "12px" : "32px" : i ? "16px" : "48px", R = Ee(r, O), k = JSON.parse(e.body), $ = k.segments || [], z = e.labels || {}, P = k.mode || ((Fe = k.config) == null ? void 0 : Fe.mode) || "fair", U = ((We = k.config) == null ? void 0 : We.pace) || "normal", j = ((_e = k.config) == null ? void 0 : _e.revealAll) ?? !1, A = ((Oe = k.config) == null ? void 0 : Oe.decorations) ?? !1, I = $.some((ae) => {
    var J;
    return (J = ae.images) == null ? void 0 : J.idle;
  }), {
    selectedSegment: v,
    displaySegments: ee,
    revealResult: te,
    showResultScreen: Y,
    showInlineResult: G,
    showLoseAnimation: q,
    hasEntered: V,
    flippedCards: Q,
    crossfadedCards: oe,
    revealedOtherCards: ce,
    flipDuration: Xe,
    crossfadeDuration: Pe,
    loseAnimationDuration: Ue,
    handlePick: Re,
    handleReset: ge
  } = pt({ segments: $, mode: P, pace: U, revealAll: j }), ze = () => /* @__PURE__ */ w(re, { children: [
    A && /* @__PURE__ */ t(
      Ge,
      {
        primaryColor: r,
        isDark: O,
        animationPrefix: "casino"
      }
    ),
    Y && (v == null ? void 0 : v.results) && /* @__PURE__ */ t(
      le,
      {
        result: v.results,
        variant: S || "embed",
        mode: "screen",
        contentColor: a,
        primaryColor: r,
        onPrimaryColor: x,
        borderColor: o,
        disclaimer: f ? void 0 : z.disclaimer,
        enableReset: s,
        onReset: ge
      }
    ),
    !Y && /* @__PURE__ */ w(re, { children: [
      !f && p && (e.title || e.subtitle) && /* @__PURE__ */ w(
        m,
        {
          sx: {
            display: "flex",
            flexDirection: "column",
            gap: h.xs,
            alignItems: "center",
            textAlign: "center",
            width: "100%"
          },
          children: [
            e.title && /* @__PURE__ */ t(
              D,
              {
                level: "h2",
                sx: {
                  fontFamily: y.primary,
                  fontWeight: 700,
                  fontSize: i ? "1.5rem" : "2rem",
                  color: a,
                  lineHeight: 1.2,
                  textShadow: A ? `0 0 20px ${r}20` : "none"
                },
                children: e.title
              }
            ),
            A && e.title && /* @__PURE__ */ w(
              m,
              {
                sx: {
                  display: "flex",
                  alignItems: "center",
                  gap: h.sm,
                  mt: h.xs,
                  width: i ? "60%" : "40%"
                },
                children: [
                  /* @__PURE__ */ t(
                    m,
                    {
                      sx: {
                        flex: 1,
                        height: "1px",
                        background: `linear-gradient(to right, transparent, ${R("40")})`
                      }
                    }
                  ),
                  /* @__PURE__ */ t(
                    m,
                    {
                      sx: {
                        width: "8px",
                        height: "8px",
                        transform: "rotate(45deg)",
                        border: `${C.size} solid ${R("50")}`,
                        background: `${R("15")}`
                      }
                    }
                  ),
                  /* @__PURE__ */ t(
                    m,
                    {
                      sx: {
                        flex: 1,
                        height: "1px",
                        background: `linear-gradient(to left, transparent, ${R("40")})`
                      }
                    }
                  )
                ]
              }
            ),
            e.subtitle && /* @__PURE__ */ t(
              D,
              {
                level: "body-md",
                sx: {
                  fontFamily: y.secondary,
                  fontWeight: 400,
                  fontSize: i ? "0.875rem" : "1rem",
                  color: a,
                  opacity: 0.8
                },
                children: e.subtitle
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ w(m, { children: [
        !f && z.welcome && /* @__PURE__ */ t(
          D,
          {
            level: "body-md",
            sx: {
              fontFamily: y.primary,
              fontWeight: 400,
              fontSize: i ? "0.875rem" : "1rem",
              color: a,
              textAlign: "center",
              mb: L ? 0 : h.md
            },
            children: z.welcome
          }
        ),
        z.instructions && !G && /* @__PURE__ */ t(
          D,
          {
            level: f ? "body-sm" : "body-md",
            sx: {
              fontFamily: y.secondary,
              fontWeight: 400,
              fontSize: i ? "0.875rem" : "1rem",
              color: a,
              textAlign: "center",
              opacity: 0.7,
              maxWidth: f ? "400px" : "600px"
            },
            children: z.instructions
          }
        )
      ] }),
      A && /* @__PURE__ */ w(
        m,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            gap: h.sm,
            width: i ? "40%" : "25%",
            my: h.xs
          },
          children: [
            /* @__PURE__ */ t(
              m,
              {
                sx: {
                  flex: 1,
                  height: "1px",
                  background: `linear-gradient(to right, transparent, ${R("25")})`
                }
              }
            ),
            /* @__PURE__ */ t(
              m,
              {
                sx: {
                  width: "4px",
                  height: "4px",
                  borderRadius: "50%",
                  background: `${R("35")}`
                }
              }
            ),
            /* @__PURE__ */ t(
              m,
              {
                sx: {
                  flex: 1,
                  height: "1px",
                  background: `linear-gradient(to left, transparent, ${R("25")})`
                }
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ t(
        m,
        {
          sx: {
            mt: h.lg,
            mx: "auto",
            display: "grid",
            gridTemplateColumns: I ? `repeat(3, ${N}px)` : `repeat(3, ${B}px)`,
            rowGap: b,
            columnGap: X,
            justifyContent: "center",
            mb: h.lg,
            position: "relative",
            perspective: "1200px"
          },
          children: (ee ?? $).map((ae, J) => {
            const be = `card-${J}`, de = v !== null, Be = Q.has(be), me = ce.has(be), je = de && !Be && !me, De = oe.has(be), Ye = de && !De && !me;
            return /* @__PURE__ */ t(
              m,
              {
                sx: {
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  // Staggered deal-in entrance
                  opacity: V ? 1 : 0,
                  transform: V ? "translateY(0) scale(1) rotateX(0deg)" : "translateY(30px) scale(0.9) rotateX(10deg)",
                  transition: `all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) ${J * 100}ms`
                },
                children: I ? /* @__PURE__ */ t(
                  gt,
                  {
                    segment: ae,
                    index: J,
                    selectedSegment: v,
                    revealResult: te,
                    isCrossfaded: De,
                    isOtherRevealed: me,
                    shouldDim: Ye,
                    isRevealed: de,
                    hasEntered: V,
                    objectSize: N,
                    crossfadeDuration: Pe,
                    isStandard: f,
                    primaryColor: r,
                    dangerColor: d,
                    onPick: () => Re(J, !0)
                  }
                ) : /* @__PURE__ */ t(
                  bt,
                  {
                    segment: ae,
                    index: J,
                    selectedSegment: v,
                    isFlipped: Be,
                    isOtherRevealed: me,
                    shouldDim: je,
                    isRevealed: de,
                    showLoseAnimation: q,
                    hasEntered: V,
                    cardWidth: B,
                    cardHeight: T,
                    flipDuration: Xe,
                    loseAnimationDuration: Ue,
                    cardBaseColor: E,
                    shimmerColor: M,
                    primaryColor: r,
                    contentColor: a,
                    dangerColor: d,
                    borderColor: o,
                    brandingLogo: F,
                    compactCards: g,
                    onPick: () => Re(J, !1)
                  }
                )
              },
              ae.id
            );
          })
        }
      ),
      !f && G && (v == null ? void 0 : v.results) && /* @__PURE__ */ t(
        le,
        {
          result: v.results,
          variant: "embed",
          mode: "inline",
          contentColor: a,
          primaryColor: r,
          onPrimaryColor: x,
          borderColor: o,
          showResetButton: !1
        }
      ),
      !f && s && G && /* @__PURE__ */ t(
        he,
        {
          onClick: ge,
          variant: "outlined",
          sx: {
            mt: h.md,
            px: h.lg,
            py: h.sm,
            fontFamily: y.secondary,
            fontWeight: 600,
            fontSize: i ? "0.875rem" : "1rem",
            textTransform: "uppercase",
            borderRadius: _.md,
            borderColor: o || u.outlineEnabledBorder,
            color: a,
            minWidth: i ? "150px" : "180px",
            "&:hover": {
              borderColor: r,
              bgcolor: "transparent",
              color: r
            }
          },
          children: "Reset Game"
        }
      ),
      f && s && G && /* @__PURE__ */ t(
        he,
        {
          onClick: ge,
          variant: "outlined",
          sx: {
            borderRadius: _.xl,
            py: h.sm,
            px: h.lg,
            borderColor: u.outlineEnabledBorder,
            color: a,
            fontSize: i ? "0.75rem" : "0.875rem",
            fontWeight: 700,
            fontFamily: y.primary,
            textTransform: "uppercase",
            "&:hover": {
              borderColor: r,
              bgcolor: "transparent",
              color: r
            }
          },
          children: "Reset Game"
        }
      )
    ] })
  ] });
  return f ? /* @__PURE__ */ w(
    m,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        width: "100%",
        height: "100%",
        gap: h.lg,
        alignItems: "center",
        position: "relative",
        overflow: "auto",
        boxSizing: "border-box"
      },
      children: [
        !Y && z.welcome && /* @__PURE__ */ t(
          D,
          {
            level: "body-md",
            sx: {
              fontFamily: y.primary,
              fontWeight: 400,
              fontSize: i ? "0.875rem" : "1rem",
              color: a,
              textAlign: "center",
              px: h.md
            },
            children: z.welcome
          }
        ),
        /* @__PURE__ */ t(
          m,
          {
            sx: {
              display: "flex",
              flexDirection: "column",
              px: h.md,
              width: "100%",
              boxSizing: "border-box"
            },
            children: /* @__PURE__ */ w(
              m,
              {
                sx: {
                  display: "flex",
                  flexDirection: "column",
                  gap: i ? h.lg : h.md
                },
                children: [
                  /* @__PURE__ */ t(
                    m,
                    {
                      sx: {
                        borderRadius: _.md,
                        px: h.sm,
                        pt: h.sm,
                        pb: h.md,
                        gap: h.md,
                        bgcolor: `rgba(${W}, 0.5)`,
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        backdropFilter: "blur(4px)",
                        position: "relative",
                        overflow: "hidden"
                      },
                      children: ze()
                    }
                  ),
                  G && (v == null ? void 0 : v.results) && /* @__PURE__ */ t(
                    le,
                    {
                      result: v.results,
                      variant: "standard",
                      mode: "inline",
                      contentColor: a,
                      primaryColor: r,
                      onPrimaryColor: x,
                      showResetButton: !1,
                      sx: { mb: h.md }
                    }
                  ),
                  (F || z.disclaimer) && /* @__PURE__ */ w(
                    m,
                    {
                      sx: {
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        gap: h.md
                      },
                      children: [
                        z.disclaimer && /* @__PURE__ */ t(
                          D,
                          {
                            level: "body-sm",
                            sx: {
                              fontFamily: y.secondary,
                              fontWeight: 400,
                              fontSize: i ? "0.625rem" : "0.75rem",
                              color: a,
                              opacity: 0.7,
                              textAlign: "center",
                              maxWidth: "900px",
                              lineHeight: 1.4
                            },
                            children: z.disclaimer
                          }
                        ),
                        F && I && /* @__PURE__ */ t(
                          "img",
                          {
                            src: F,
                            alt: "Brand Logo",
                            style: {
                              height: "auto",
                              maxHeight: "60px",
                              maxWidth: "180px"
                            }
                          }
                        )
                      ]
                    }
                  )
                ]
              }
            )
          }
        )
      ]
    }
  ) : /* @__PURE__ */ t(
    m,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        width: "100%",
        height: "100%",
        p: h.lg,
        gap: h.lg,
        alignItems: "center",
        position: "relative",
        overflow: "auto",
        boxSizing: "border-box"
      },
      children: ze()
    }
  );
}, kt = ({
  infoPage: e,
  enableReset: s = !1,
  imagePosition: a = "left",
  defaultImagePlaceholderUrl: r
}) => {
  var i, u, _;
  const { t: x } = se(), o = K(), c = ie(), d = Te() === "dark", n = pe(
    {
      images: e.images,
      imagePlaceholder: r || ""
    },
    fe.STANDARD
  ), l = (i = e.branding) == null ? void 0 : i.colors, F = (l == null ? void 0 : l.primary_color) || c.palette.primary.plainColor, O = (l == null ? void 0 : l.border_color) || null, p = (l == null ? void 0 : l.background_color) || c.surfaceVariant || "", S = (u = e.branding) == null ? void 0 : u.images, g = o ? (S == null ? void 0 : S.mobile_logo) || (S == null ? void 0 : S.main_logo) || "" : (S == null ? void 0 : S.main_logo) || "";
  return /* @__PURE__ */ t(ke, { brandingBorderColor: O, children: /* @__PURE__ */ t(
    Ae,
    {
      entity: {
        ...e,
        type: "chance-game",
        description: e.subtitle || "",
        rules: null
      },
      headline: x("chanceGame.headlinePickOneOfX", {
        count: ((_ = JSON.parse(e.body).segments) == null ? void 0 : _.length) || 0
      }),
      finalImage: n,
      imagePosition: a,
      children: /* @__PURE__ */ t(
        Me,
        {
          infoPage: e,
          enableReset: s,
          contentColor: (l == null ? void 0 : l.content_color) || c.textPrimary,
          primaryColor: F,
          onPrimaryColor: (l == null ? void 0 : l.content_color) || c.palette.primary.onPrimary || c.surface,
          borderColor: O || void 0,
          backgroundColor: p,
          dangerColor: c.palette.danger.plainColor,
          cardBaseColor: p,
          shimmerColor: F,
          brandingLogo: g,
          isDark: d,
          showTitleBlock: !1,
          variant: "standard",
          compactCards: !0
        }
      )
    }
  ) });
}, Le = (e) => ({
  contentContainerWithBackdrop: {
    borderRadius: e.mdBorderRadius,
    display: "flex",
    flexDirection: "column",
    backdropFilter: "blur(4px)",
    position: "relative",
    overflow: "hidden",
    "&::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
  },
  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: "1em",
    fontWeight: 400,
    lineHeight: 1.5,
    maxWidth: "800px",
    margin: "0 auto",
    opacity: 0.9
  }
}), Rt = ({
  infoPage: e,
  enableReset: s = !1,
  defaultImagePlaceholderUrl: a
}) => {
  var f, L, H, W, B, T, N, b, X, R, k, $, z, P, U, j, A, I, v;
  const { t: r } = se(), x = K(), o = $e(), c = xe(), d = ((f = e.branding) == null ? void 0 : f.colors) || null, n = (L = e.branding) == null ? void 0 : L.images, l = x ? (n == null ? void 0 : n.mobile_background_image) || (n == null ? void 0 : n.background_image) || "" : (n == null ? void 0 : n.background_image) || "", F = x ? (n == null ? void 0 : n.mobile_logo) || (n == null ? void 0 : n.main_logo) || "" : (n == null ? void 0 : n.main_logo) || "", O = a || (x ? He : Ne), p = l || pe(
    {
      images: e.images,
      imagePlaceholder: O
    },
    fe.OVERLAY
  ), S = o.colorSchemes.dark.textColor, g = (d == null ? void 0 : d.content_color) || S, i = (d == null ? void 0 : d.primary_color) || ((T = (B = (W = (H = o.colorSchemes) == null ? void 0 : H.light) == null ? void 0 : W.palette) == null ? void 0 : B.primary) == null ? void 0 : T.plainColor), u = (R = (X = (b = (N = o.colorSchemes) == null ? void 0 : N.light) == null ? void 0 : b.palette) == null ? void 0 : X.primary) == null ? void 0 : R.onPrimary, _ = (d == null ? void 0 : d.background_color) || (($ = (k = o.colorSchemes) == null ? void 0 : k.dark) == null ? void 0 : $.surfaceVariant), y = (j = (U = (P = (z = o.colorSchemes) == null ? void 0 : z.light) == null ? void 0 : P.palette) == null ? void 0 : U.danger) == null ? void 0 : j.plainColor, h = o.customFontFamily.dark.primary, C = o.customRadius.dark.md, E = (I = (A = o.customRadius) == null ? void 0 : A.light) == null ? void 0 : I.xl, M = Le({
    spacingScale: c,
    mdBorderRadius: C,
    contentBgColor: _,
    buttonRadius: E,
    primaryColor: i,
    onPrimaryColor: u,
    fontFamilyPrimary: h,
    darkTextColor: S,
    isMobile: x,
    textColor: g
  });
  return /* @__PURE__ */ t(
    Ie,
    {
      entity: {
        ...e,
        type: "chance-game",
        description: e.subtitle || "",
        rules: null
      },
      headline: r("chanceGame.headlinePickOneOfX", {
        count: ((v = JSON.parse(e.body).segments) == null ? void 0 : v.length) || 0
      }),
      finalImage: p,
      children: /* @__PURE__ */ t(m, { sx: M.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
        Me,
        {
          infoPage: e,
          enableReset: s,
          contentColor: g,
          primaryColor: i,
          onPrimaryColor: u || "#FFFFFF",
          backgroundColor: _,
          dangerColor: y,
          cardBaseColor: _,
          shimmerColor: i,
          brandingLogo: F,
          isDark: !0,
          showTitleBlock: !1,
          variant: "overlay",
          compactCards: !0
        }
      ) })
    }
  );
}, zt = (e) => {
  const s = we().secondary, a = et(), r = e.isSplitVariant && a, x = K(), o = Je(e.primaryUrl, e.secondaryUrl, "logo");
  if (!e.brandingLogo)
    return null;
  const c = () => {
    o && window.open(o, "_blank", "noopener,noreferrer");
  }, d = /* @__PURE__ */ t(
    "img",
    {
      src: e.brandingLogo,
      alt: "branding-logo",
      style: {
        maxHeight: "50px",
        maxWidth: "100px"
      }
    }
  ), n = o ? typeof window > "u" ? /* @__PURE__ */ t(
    m,
    {
      component: "a",
      href: o,
      target: "_blank",
      rel: "noopener noreferrer",
      sx: {
        cursor: "pointer",
        textDecoration: "none",
        display: "inline-flex"
      },
      children: d
    }
  ) : /* @__PURE__ */ t(
    m,
    {
      onClick: c,
      sx: {
        cursor: "pointer",
        display: "inline-flex"
      },
      children: d
    }
  ) : d;
  return e.isCentered || r || x ? /* @__PURE__ */ w(
    m,
    {
      sx: {
        display: "flex",
        flexDirection: "column",
        gap: "8px",
        alignItems: "center",
        minWidth: "180px",
        fontSize: "1em",
        zIndex: 1
      },
      children: [
        e.label && /* @__PURE__ */ t(
          D,
          {
            level: "body-sm",
            sx: {
              fontWeight: 400,
              lineHeight: "166%",
              letterSpacing: "0.4px",
              fontSize: "1em",
              color: e.textColor,
              textAlign: "right",
              fontFamily: s
            },
            children: e.label
          }
        ),
        n
      ]
    }
  ) : /* @__PURE__ */ w(
    m,
    {
      sx: {
        minWidth: "180px",
        display: "flex",
        gap: "8px",
        alignItems: "center",
        zIndex: 10,
        fontSize: "1em"
      },
      children: [
        e.label && /* @__PURE__ */ t(
          D,
          {
            level: "body-sm",
            sx: {
              fontWeight: 400,
              lineHeight: "166%",
              letterSpacing: "0.4px",
              textAlign: "right",
              fontSize: "1em",
              color: e.textColor,
              fontFamily: s
            },
            children: e.label
          }
        ),
        n
      ]
    }
  );
}, Ft = ({
  infoPage: e,
  enableReset: s = !1,
  defaultImagePlaceholderUrl: a
}) => {
  var L, H, W, B, T, N, b, X, R, k, $, z, P, U, j, A, I, v, ee, te, Y, G, q, V, Q, oe, ce;
  const { t: r } = se(), x = K(), o = $e(), c = xe(), d = ((L = e.branding) == null ? void 0 : L.colors) || null, n = (H = e.branding) == null ? void 0 : H.images, l = x ? (n == null ? void 0 : n.mobile_background_image) || (n == null ? void 0 : n.background_image) || "" : (n == null ? void 0 : n.background_image) || "", F = x ? (n == null ? void 0 : n.mobile_logo) || (n == null ? void 0 : n.main_logo) || "" : (n == null ? void 0 : n.main_logo) || "", O = a || (x ? He : Ne), p = l || pe(
    {
      images: e.images,
      imagePlaceholder: O
    },
    fe.OVERLAY
  ), S = o.colorSchemes.dark.textColor, g = (d == null ? void 0 : d.content_color) || S, i = (d == null ? void 0 : d.primary_color) || ((N = (T = (B = (W = o.colorSchemes) == null ? void 0 : W.light) == null ? void 0 : B.palette) == null ? void 0 : T.primary) == null ? void 0 : N.plainColor), u = (d == null ? void 0 : d.secondary_color) || ((k = (R = (X = (b = o.colorSchemes) == null ? void 0 : b.light) == null ? void 0 : X.palette) == null ? void 0 : R.danger) == null ? void 0 : k.plainColor), _ = (U = (P = (z = ($ = o.colorSchemes) == null ? void 0 : $.light) == null ? void 0 : z.palette) == null ? void 0 : P.primary) == null ? void 0 : U.onPrimary, y = (d == null ? void 0 : d.background_color) || ((A = (j = o.colorSchemes) == null ? void 0 : j.dark) == null ? void 0 : A.surfaceVariant), h = (te = (ee = (v = (I = o.colorSchemes) == null ? void 0 : I.light) == null ? void 0 : v.palette) == null ? void 0 : ee.danger) == null ? void 0 : te.plainColor, C = o.customFontFamily.dark.primary, E = o.customRadius.dark.md, M = (G = (Y = o.customRadius) == null ? void 0 : Y.light) == null ? void 0 : G.xl, f = Le({
    spacingScale: c,
    mdBorderRadius: E,
    contentBgColor: y,
    buttonRadius: M,
    primaryColor: i,
    onPrimaryColor: _,
    fontFamilyPrimary: C,
    darkTextColor: S,
    isMobile: x,
    textColor: g
  });
  return /* @__PURE__ */ w(
    Ie,
    {
      entity: {
        ...e,
        type: "chance-game",
        description: e.subtitle || "",
        rules: null
      },
      headline: r("chanceGame.headlinePrizeWheel"),
      finalImage: p,
      children: [
        /* @__PURE__ */ t(m, { sx: f.contentContainerWithBackdrop, children: /* @__PURE__ */ t(
          Ve,
          {
            infoPage: e,
            enableReset: s,
            contentColor: g,
            primaryColor: i,
            secondaryColor: u,
            onPrimaryColor: _ || "#FFFFFF",
            backgroundColor: y,
            dangerColor: h,
            shimmerColor: i,
            brandingLogo: F,
            isDark: !0,
            showTitleBlock: !1,
            variant: "overlay"
          }
        ) }),
        /* @__PURE__ */ t(
          zt,
          {
            brandingLogo: F,
            textColor: S,
            label: ((q = e.labels) == null ? void 0 : q.sponsor) || null,
            primaryUrl: (Q = (V = e.branding) == null ? void 0 : V.urls) == null ? void 0 : Q.primary_url,
            secondaryUrl: (ce = (oe = e.branding) == null ? void 0 : oe.urls) == null ? void 0 : ce.secondary_url
          }
        )
      ]
    }
  );
}, Wt = (e) => {
  const { infoPage: s } = ct(e.entityId, "chance-game", e.sdk), a = () => {
    if (s && s.id !== "not-found") {
      const o = Object.keys(Ke);
      if (s.language && o.includes(s.language))
        return s.language;
      if (s.language)
        return "en";
    }
    return e.language || "en";
  }, [r, x] = qe(!1);
  if (Qe(() => {
    const o = a();
    tt(o).then(() => x(!0));
  }, [e.language, s]), !s || !r)
    return /* @__PURE__ */ t(at, { my: 20 });
  if (s.id === "not-found")
    return /* @__PURE__ */ t(St, { template: e.template });
  if (e.template === ue.STANDARD) {
    const o = e.imagePosition, c = e.defaultImagePlaceholderUrl;
    return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(ye, { infoPage: s }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(
      kt,
      {
        infoPage: s,
        imagePosition: o,
        defaultImagePlaceholderUrl: c
      }
    ) : /* @__PURE__ */ t(
      wt,
      {
        infoPage: s,
        imagePosition: o,
        defaultImagePlaceholderUrl: c
      }
    );
  }
  if (e.template === ue.OVERLAY) {
    const o = e.defaultImagePlaceholderUrl;
    return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(ye, { infoPage: s }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(
      Rt,
      {
        infoPage: s,
        defaultImagePlaceholderUrl: o
      }
    ) : /* @__PURE__ */ t(
      Ft,
      {
        infoPage: s,
        defaultImagePlaceholderUrl: o
      }
    );
  }
  return e.variant === ne.PENALTY_SHOOTOUT ? /* @__PURE__ */ t(ye, { infoPage: s }) : e.variant === ne.PICK_ONE_OF_X ? /* @__PURE__ */ t(yt, { infoPage: s }) : /* @__PURE__ */ t(vt, { infoPage: s });
}, _t = (e) => {
  const [s, a] = Z.useState(!1), r = Z.useRef(
    `chance-game-shadow-root-${Math.random().toString(36).substring(2, 11)}`
  ), x = Z.useRef(null), o = Z.useRef(null), c = Z.useRef(null), d = Z.useRef(null);
  Z.useEffect(() => {
    if (x.current)
      return x.current.shadowRoot ? (o.current = x.current.shadowRoot, c.current = o.current.getElementById(
        r.current
      ), c.current || (c.current = document.createElement("div"), c.current.id = r.current, o.current.appendChild(c.current))) : (o.current = x.current.attachShadow({ mode: "open" }), c.current = document.createElement("div"), c.current.id = r.current, o.current.appendChild(c.current)), d.current || (d.current = ot({
        key: "chance-game-css",
        prepend: !0,
        container: o.current
      })), a(!0), () => {
        a(!1);
      };
  }, []);
  const n = e.themeOptions, l = {
    ...n,
    mode: e.template === ue.OVERLAY ? "dark" : n == null ? void 0 : n.mode
  }, F = /* @__PURE__ */ t(m, { ref: x }), O = s && x.current && c.current && d.current ? st(
    /* @__PURE__ */ t(nt, { value: d.current, children: /* @__PURE__ */ t(rt, { containerRef: x, children: /* @__PURE__ */ t(
      lt,
      {
        customTheme: l,
        mode: l == null ? void 0 : l.mode,
        shadowRootElement: c.current,
        children: /* @__PURE__ */ t(
          it,
          {
            shadowRootElement: c.current,
            leadPhoneCountryCode: null,
            language: null,
            optionsLayout: null,
            children: e.children
          }
        )
      }
    ) }) }),
    c.current
  ) : null;
  return /* @__PURE__ */ w(re, { children: [
    F,
    O
  ] });
}, Ot = (e) => /* @__PURE__ */ t(_t, { ...e, children: /* @__PURE__ */ t(Wt, { ...e }) }), Vt = Ot;
export {
  Vt as ChanceGame
};
