webs-sdk 0.18.28 → 0.18.30

package/dist/components/SpinningWheel/SpinningWheel.js

@@ -1,41 +1,9 @@
 "use strict";
 "use client";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SpinningWheel = SpinningWheel;
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const react_2 = require("motion/react");
 const config_1 = require("./config");
 function SpinningWheel({ config: configProp, onResult, onError, canSpin = true, alreadySpunToday = false, theme = 'womantoday', userId, websiteId, apiBaseUrl = '/api/spin2win' }) {
@@ -101,11 +69,7 @@ function SpinningWheel({ config: configProp, onResult, onError, canSpin = true,
     console.log('🎨 currentTheme:', currentTheme);
     if (!currentTheme) {
         console.error('❌ Tema no encontrado:', theme);
-        return react_1.default.createElement("div", { style: { padding: '20px', color: 'red' } },
-            "Error: Tema \"",
-            theme,
-            "\" no encontrado. Temas disponibles: ",
-            Object.keys(config_1.wheelThemes).join(', '));
+        return (0, jsx_runtime_1.jsxs)("div", { style: { padding: '20px', color: 'red' }, children: ["Error: Tema \"", theme, "\" no encontrado. Temas disponibles: ", Object.keys(config_1.wheelThemes).join(', ')] });
     }
     const imgIndicator = currentTheme.indicatorAsset;
     const imgFrame = currentTheme.borderAsset;
@@ -267,406 +231,322 @@ function SpinningWheel({ config: configProp, onResult, onError, canSpin = true,
         }
     };
     const backgroundAsset = currentTheme.backgroundAsset;
-    return (react_1.default.createElement("div", { style: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '32px', padding: '32px', minHeight: '100vh', overflow: 'hidden' } },
-        backgroundAsset && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("style", null, `
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '32px', padding: '32px', minHeight: '100vh', overflow: 'hidden' }, children: [backgroundAsset && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
             .sw-bg-desktop { display: block; }
             .sw-bg-mobile { display: none; }
             @media (max-width: 767px) {
               .sw-bg-desktop { display: none; }
               .sw-bg-mobile { display: block; }
             }
-          `),
-            react_1.default.createElement("img", { src: backgroundAsset.desktop, alt: "", className: "sw-bg-desktop", style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '50%',
-                    objectFit: 'cover',
-                    pointerEvents: 'none',
-                    userSelect: 'none',
-                    zIndex: 0,
-                } }),
-            react_1.default.createElement("img", { src: backgroundAsset.mobile, alt: "", className: "sw-bg-mobile", style: {
-                    position: 'absolute',
-                    top: 0,
-                    left: 0,
-                    width: '100%',
-                    height: '50%',
-                    objectFit: 'cover',
-                    pointerEvents: 'none',
-                    userSelect: 'none',
-                    zIndex: 0,
-                } }))),
-        react_1.default.createElement("div", { className: "relative flex flex-col items-center gap-8 w-full", style: { zIndex: 1 } },
-            result && (react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 flex items-center justify-center", onClick: () => setResult(null) },
-                react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 bg-black/40", style: { backdropFilter: 'blur(16px)' } }),
-                showConfetti && (react_1.default.createElement("div", { className: "absolute inset-0 pointer-events-none overflow-hidden" }, [...Array(30)].map((_, i) => (react_1.default.createElement(react_2.motion.div, { key: i, className: "absolute w-3 h-3 rounded-full", style: {
-                        background: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'][i % 5],
-                        left: '50%',
-                        top: '50%',
-                    }, initial: { scale: 0, x: 0, y: 0, opacity: 1 }, animate: {
-                        scale: [0, 1, 0.5],
-                        x: (Math.random() - 0.5) * 800,
-                        y: (Math.random() - 0.5) * 800,
-                        opacity: [1, 1, 0],
-                    }, transition: {
-                        duration: 2,
-                        delay: i * 0.03,
-                        ease: "easeOut"
-                    } }))))),
-                react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0, scale: 0.8, y: 50 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.4, ease: "easeOut", delay: 0.1 }, onClick: (e) => e.stopPropagation(), style: {
-                        position: 'relative',
-                        zIndex: 10,
-                        backgroundColor: '#FFFFFF',
-                        borderRadius: '24px',
-                        width: '392px',
-                        maxWidth: '90%',
-                        padding: '0 24px',
-                        boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)'
-                    } },
-                    react_1.default.createElement("button", { onClick: () => setResult(null), style: {
+          ` }), (0, jsx_runtime_1.jsx)("img", { src: backgroundAsset.desktop, alt: "", className: "sw-bg-desktop", style: {
                             position: 'absolute',
                             top: 0,
-                            right: 0,
-                            padding: '20px',
-                            background: 'transparent',
-                            border: 'none',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '10px'
-                        }, "aria-label": "Close" },
-                        react_1.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                            react_1.default.createElement("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#6D6665", strokeWidth: "2", strokeLinecap: "round" }))),
-                    react_1.default.createElement("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            gap: '16px',
-                            paddingTop: '60px',
-                            paddingBottom: '60px'
-                        } }, result.reward_type === 'real' ? (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(react_2.motion.div, { initial: { scale: 0, rotate: -180 }, animate: { scale: 1, rotate: 0 }, transition: { delay: 0.3, type: "spring", stiffness: 200, damping: 10 } },
-                            react_1.default.createElement("img", { src: "/spin2win/assets/Icon-Celebrate@2x.png", alt: "Celebrate", style: { width: '105px', height: '105px' } })),
-                        react_1.default.createElement(react_2.motion.h3, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, style: {
-                                fontFamily: uiFont,
-                                fontWeight: 700,
-                                fontSize: '26.25px',
-                                lineHeight: '1.2em',
-                                letterSpacing: '0.9%',
-                                textAlign: 'center',
-                                color: '#000000',
-                                margin: 0
-                            } },
-                            "You won ",
-                            result.reward_title,
-                            "!"),
-                        react_1.default.createElement(react_2.motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.7 }, style: {
-                                fontFamily: secondaryFont,
-                                fontWeight: 500,
-                                fontSize: '16px',
-                                lineHeight: '1.32em',
-                                textAlign: 'center',
-                                color: '#6D6665',
-                                margin: 0
-                            } }, "The money will be sent to your Vodacom account. Processing may take up to 24 hours."))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(react_2.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { delay: 0.3, type: "spring", stiffness: 200, damping: 10 } },
-                            react_1.default.createElement("img", { src: "/spin2win/assets/Icon-Sad@2x.png", alt: "Sad", style: { width: '105px', height: '105px' } })),
-                        react_1.default.createElement(react_2.motion.h3, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, style: {
-                                fontFamily: uiFont,
-                                fontWeight: 700,
-                                fontSize: '26.25px',
-                                lineHeight: '1.2em',
-                                letterSpacing: '0.9%',
-                                textAlign: 'center',
-                                color: '#000000',
-                                margin: 0
-                            } }, "Oops... so close!"),
-                        react_1.default.createElement(react_2.motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.7 }, style: {
-                                fontFamily: secondaryFont,
-                                fontWeight: 500,
-                                fontSize: '16px',
-                                lineHeight: '1.32em',
-                                textAlign: 'center',
-                                color: '#6D6665',
-                                margin: 0
-                            } }, "No cash reward this time, but you can try again tomorrow!"))))))),
-            error && (react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 flex items-center justify-center", onClick: () => setError(null) },
-                react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 bg-black/40", style: { backdropFilter: 'blur(16px)' } }),
-                react_1.default.createElement(react_2.motion.div, { initial: { opacity: 0, scale: 0.8, y: 50 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.4, ease: "easeOut", delay: 0.1 }, onClick: (e) => e.stopPropagation(), style: {
-                        position: 'relative',
-                        zIndex: 10,
-                        backgroundColor: '#FFFFFF',
-                        borderRadius: '24px',
-                        width: '392px',
-                        maxWidth: '90%',
-                        padding: '0 24px',
-                        boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)'
-                    } },
-                    react_1.default.createElement("button", { onClick: () => setError(null), style: {
+                            left: 0,
+                            width: '100%',
+                            height: '50%',
+                            objectFit: 'cover',
+                            pointerEvents: 'none',
+                            userSelect: 'none',
+                            zIndex: 0,
+                        } }), (0, jsx_runtime_1.jsx)("img", { src: backgroundAsset.mobile, alt: "", className: "sw-bg-mobile", style: {
                             position: 'absolute',
                             top: 0,
-                            right: 0,
-                            padding: '20px',
-                            background: 'transparent',
-                            border: 'none',
-                            cursor: 'pointer',
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '10px'
-                        }, "aria-label": "Close" },
-                        react_1.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
-                            react_1.default.createElement("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#6D6665", strokeWidth: "2", strokeLinecap: "round" }))),
-                    react_1.default.createElement("div", { style: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            gap: '16px',
-                            paddingTop: '60px',
-                            paddingBottom: '60px'
-                        } },
-                        react_1.default.createElement(react_2.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { delay: 0.3, type: "spring", stiffness: 200, damping: 10 } },
-                            react_1.default.createElement("img", { src: "/spin2win/assets/Icon-Warning@2x.png", alt: "Warning", style: { width: '105px', height: '105px' } })),
-                        react_1.default.createElement(react_2.motion.h3, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, style: {
-                                fontFamily: uiFont,
-                                fontWeight: 700,
-                                fontSize: '26.25px',
-                                lineHeight: '1.2em',
-                                letterSpacing: '0.9%',
-                                textAlign: 'center',
-                                color: '#000000',
-                                margin: 0
-                            } }, "Something went wrong"),
-                        react_1.default.createElement(react_2.motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.7 }, style: {
-                                fontFamily: secondaryFont,
-                                fontWeight: 500,
-                                fontSize: '16px',
-                                lineHeight: '1.37em',
-                                textAlign: 'center',
-                                color: '#595959',
-                                margin: 0
-                            } },
-                            "Your spin was registered, but we couldn't process the payment right now.",
-                            react_1.default.createElement("br", null),
-                            "Please contact support if the issue persists."))))),
-            react_1.default.createElement("div", { className: "flex flex-col items-center max-w-md", style: { gap: '24px' } }, !result && !isSpinning ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("h1", { style: {
-                        fontFamily: uiFont,
-                        fontSize: '32px',
-                        fontWeight: 700,
-                        lineHeight: '1.25em',
-                        color: currentTheme.colors.heading,
-                        margin: 0
-                    } }, config.copy.headline),
-                react_1.default.createElement("p", { style: {
-                        fontFamily: secondaryFont,
-                        fontSize: '16px',
-                        fontWeight: 400,
-                        lineHeight: '1.5em',
-                        textAlign: 'center',
-                        color: currentTheme.colors.text.primary,
-                        margin: 0
-                    } }, config.copy.subcopy))) : isSpinning ? (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement("h1", { style: {
-                        fontFamily: uiFont,
-                        fontSize: '32px',
-                        fontWeight: 700,
-                        lineHeight: '1.25em',
-                        color: currentTheme.colors.heading,
-                        margin: 0
-                    } }, config.copy.spinningHeadline),
-                react_1.default.createElement("p", { style: {
-                        fontFamily: secondaryFont,
-                        fontSize: '16px',
-                        fontWeight: 400,
-                        lineHeight: '1.5em',
-                        textAlign: 'center',
-                        color: currentTheme.colors.text.primary,
-                        margin: 0
-                    } }, config.copy.spinningSubcopy))) : null),
-            react_1.default.createElement("div", { className: "relative w-[400px] h-[400px]", style: {
-                    filter: 'drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.15))'
-                } },
-                react_1.default.createElement(react_2.motion.div, { ref: wheelRef, className: "absolute left-[1.39%] top-[1.44%] w-[97.17%] h-[97.17%] z-5", style: {
-                        filter: 'drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1))',
-                        willChange: 'transform',
-                        backfaceVisibility: 'hidden',
-                        WebkitFontSmoothing: 'antialiased'
-                    }, animate: { rotate: rotation }, transition: { duration: 3, ease: "easeOut" } },
-                    react_1.default.createElement("img", { src: imgPortions, alt: "", className: "w-full h-full object-contain", style: {
-                            imageRendering: 'auto',
-                            backfaceVisibility: 'hidden',
-                            transform: 'translateZ(0)'
-                        } })),
-                react_1.default.createElement(react_2.motion.div, { className: "absolute left-[1.39%] top-[1.44%] w-[97.17%] h-[97.17%] z-10", style: {
-                        willChange: 'transform',
-                        backfaceVisibility: 'hidden',
-                        WebkitFontSmoothing: 'antialiased'
-                    }, animate: { rotate: rotation }, transition: { duration: 3, ease: "easeOut" } },
-                    react_1.default.createElement("div", { className: "absolute inset-0" },
-                        react_1.default.createElement("div", { className: "absolute flex left-1/2 -translate-x-1/2 items-center justify-center", style: { top: '8%' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(0deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "Oops"))),
-                        react_1.default.createElement("div", { className: "absolute flex items-center justify-center", style: { top: '18%', right: '18%' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(45deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "R10"),
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: uiFont,
-                                        fontWeight: 600,
-                                        fontSize: '28px',
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.secondary
-                                    } }, "\uD83D\uDCB0"))),
-                        react_1.default.createElement("div", { className: "absolute flex items-center justify-center", style: { top: '50%', right: '2%', transform: 'translateY(-50%)' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(90deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "Oops"))),
-                        react_1.default.createElement("div", { className: "absolute flex items-center justify-center", style: { bottom: '18%', right: '18%' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(135deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "R10"),
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: uiFont,
-                                        fontWeight: 600,
-                                        fontSize: '28px',
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.secondary
-                                    } }, "\uD83D\uDCB0"))),
-                        react_1.default.createElement("div", { className: "absolute flex left-1/2 -translate-x-1/2 items-center justify-center", style: { bottom: '8%' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(180deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "Oops"))),
-                        react_1.default.createElement("div", { className: "absolute flex items-center justify-center", style: { bottom: '18%', left: '18%' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(-135deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "R20"),
-                                react_1.default.createElement("div", { className: "text-center", style: {
+                            left: 0,
+                            width: '100%',
+                            height: '50%',
+                            objectFit: 'cover',
+                            pointerEvents: 'none',
+                            userSelect: 'none',
+                            zIndex: 0,
+                        } })] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex flex-col items-center gap-8 w-full", style: { zIndex: 1 }, children: [result && ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 flex items-center justify-center", onClick: () => setResult(null), children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 bg-black/40", style: { backdropFilter: 'blur(16px)' } }), showConfetti && ((0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 pointer-events-none overflow-hidden", children: [...Array(30)].map((_, i) => ((0, jsx_runtime_1.jsx)(react_2.motion.div, { className: "absolute w-3 h-3 rounded-full", style: {
+                                        background: ['#FFD700', '#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4'][i % 5],
+                                        left: '50%',
+                                        top: '50%',
+                                    }, initial: { scale: 0, x: 0, y: 0, opacity: 1 }, animate: {
+                                        scale: [0, 1, 0.5],
+                                        x: (Math.random() - 0.5) * 800,
+                                        y: (Math.random() - 0.5) * 800,
+                                        opacity: [1, 1, 0],
+                                    }, transition: {
+                                        duration: 2,
+                                        delay: i * 0.03,
+                                        ease: "easeOut"
+                                    } }, i))) })), (0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, scale: 0.8, y: 50 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.4, ease: "easeOut", delay: 0.1 }, onClick: (e) => e.stopPropagation(), style: {
+                                    position: 'relative',
+                                    zIndex: 10,
+                                    backgroundColor: '#FFFFFF',
+                                    borderRadius: '24px',
+                                    width: '392px',
+                                    maxWidth: '90%',
+                                    padding: '0 24px',
+                                    boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)'
+                                }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setResult(null), style: {
+                                            position: 'absolute',
+                                            top: 0,
+                                            right: 0,
+                                            padding: '20px',
+                                            background: 'transparent',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '10px'
+                                        }, "aria-label": "Close", children: (0, jsx_runtime_1.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#6D6665", strokeWidth: "2", strokeLinecap: "round" }) }) }), (0, jsx_runtime_1.jsx)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'center',
+                                            gap: '16px',
+                                            paddingTop: '60px',
+                                            paddingBottom: '60px'
+                                        }, children: result.reward_type === 'real' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { scale: 0, rotate: -180 }, animate: { scale: 1, rotate: 0 }, transition: { delay: 0.3, type: "spring", stiffness: 200, damping: 10 }, children: (0, jsx_runtime_1.jsx)("img", { src: "/spin2win/assets/Icon-Celebrate@2x.png", alt: "Celebrate", style: { width: '105px', height: '105px' } }) }), (0, jsx_runtime_1.jsxs)(react_2.motion.h3, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, style: {
+                                                        fontFamily: uiFont,
+                                                        fontWeight: 700,
+                                                        fontSize: '26.25px',
+                                                        lineHeight: '1.2em',
+                                                        letterSpacing: '0.9%',
+                                                        textAlign: 'center',
+                                                        color: '#000000',
+                                                        margin: 0
+                                                    }, children: ["You won ", result.reward_title, "!"] }), (0, jsx_runtime_1.jsx)(react_2.motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.7 }, style: {
+                                                        fontFamily: secondaryFont,
+                                                        fontWeight: 500,
+                                                        fontSize: '16px',
+                                                        lineHeight: '1.32em',
+                                                        textAlign: 'center',
+                                                        color: '#6D6665',
+                                                        margin: 0
+                                                    }, children: "The money will be sent to your Vodacom account. Processing may take up to 24 hours." })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { delay: 0.3, type: "spring", stiffness: 200, damping: 10 }, children: (0, jsx_runtime_1.jsx)("img", { src: "/spin2win/assets/Icon-Sad@2x.png", alt: "Sad", style: { width: '105px', height: '105px' } }) }), (0, jsx_runtime_1.jsx)(react_2.motion.h3, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, style: {
+                                                        fontFamily: uiFont,
+                                                        fontWeight: 700,
+                                                        fontSize: '26.25px',
+                                                        lineHeight: '1.2em',
+                                                        letterSpacing: '0.9%',
+                                                        textAlign: 'center',
+                                                        color: '#000000',
+                                                        margin: 0
+                                                    }, children: "Oops... so close!" }), (0, jsx_runtime_1.jsx)(react_2.motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.7 }, style: {
+                                                        fontFamily: secondaryFont,
+                                                        fontWeight: 500,
+                                                        fontSize: '16px',
+                                                        lineHeight: '1.32em',
+                                                        textAlign: 'center',
+                                                        color: '#6D6665',
+                                                        margin: 0
+                                                    }, children: "No cash reward this time, but you can try again tomorrow!" })] })) })] })] })), error && ((0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 flex items-center justify-center", onClick: () => setError(null), children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, className: "absolute inset-0 bg-black/40", style: { backdropFilter: 'blur(16px)' } }), (0, jsx_runtime_1.jsxs)(react_2.motion.div, { initial: { opacity: 0, scale: 0.8, y: 50 }, animate: { opacity: 1, scale: 1, y: 0 }, transition: { duration: 0.4, ease: "easeOut", delay: 0.1 }, onClick: (e) => e.stopPropagation(), style: {
+                                    position: 'relative',
+                                    zIndex: 10,
+                                    backgroundColor: '#FFFFFF',
+                                    borderRadius: '24px',
+                                    width: '392px',
+                                    maxWidth: '90%',
+                                    padding: '0 24px',
+                                    boxShadow: '0px 25px 50px -12px rgba(0, 0, 0, 0.25)'
+                                }, children: [(0, jsx_runtime_1.jsx)("button", { onClick: () => setError(null), style: {
+                                            position: 'absolute',
+                                            top: 0,
+                                            right: 0,
+                                            padding: '20px',
+                                            background: 'transparent',
+                                            border: 'none',
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: '10px'
+                                        }, "aria-label": "Close", children: (0, jsx_runtime_1.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: (0, jsx_runtime_1.jsx)("path", { d: "M1 1L9 9M9 1L1 9", stroke: "#6D6665", strokeWidth: "2", strokeLinecap: "round" }) }) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'center',
+                                            gap: '16px',
+                                            paddingTop: '60px',
+                                            paddingBottom: '60px'
+                                        }, children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { initial: { scale: 0 }, animate: { scale: 1 }, transition: { delay: 0.3, type: "spring", stiffness: 200, damping: 10 }, children: (0, jsx_runtime_1.jsx)("img", { src: "/spin2win/assets/Icon-Warning@2x.png", alt: "Warning", style: { width: '105px', height: '105px' } }) }), (0, jsx_runtime_1.jsx)(react_2.motion.h3, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.5 }, style: {
+                                                    fontFamily: uiFont,
+                                                    fontWeight: 700,
+                                                    fontSize: '26.25px',
+                                                    lineHeight: '1.2em',
+                                                    letterSpacing: '0.9%',
+                                                    textAlign: 'center',
+                                                    color: '#000000',
+                                                    margin: 0
+                                                }, children: "Something went wrong" }), (0, jsx_runtime_1.jsxs)(react_2.motion.p, { initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.7 }, style: {
+                                                    fontFamily: secondaryFont,
+                                                    fontWeight: 500,
+                                                    fontSize: '16px',
+                                                    lineHeight: '1.37em',
+                                                    textAlign: 'center',
+                                                    color: '#595959',
+                                                    margin: 0
+                                                }, children: ["Your spin was registered, but we couldn't process the payment right now.", (0, jsx_runtime_1.jsx)("br", {}), "Please contact support if the issue persists."] })] })] })] })), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center max-w-md", style: { gap: '24px' }, children: !result && !isSpinning ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                                         fontFamily: uiFont,
-                                        fontWeight: 600,
-                                        fontSize: '28px',
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.secondary
-                                    } }, "\uD83D\uDCB0"))),
-                        react_1.default.createElement("div", { className: "absolute flex items-center justify-center", style: { top: '50%', left: '2%', transform: 'translateY(-50%)' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(-90deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "Oops"))),
-                        react_1.default.createElement("div", { className: "absolute flex items-center justify-center", style: { top: '18%', left: '18%' } },
-                            react_1.default.createElement("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(-45deg)' } },
-                                react_1.default.createElement("div", { className: "text-center", style: {
-                                        fontFamily: textFont,
-                                        fontWeight: 600,
-                                        fontSize: segmentFontSize,
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.segment
-                                    } }, "R20"),
-                                react_1.default.createElement("div", { className: "text-center", style: {
+                                        fontSize: '32px',
+                                        fontWeight: 700,
+                                        lineHeight: '1.25em',
+                                        color: currentTheme.colors.heading,
+                                        margin: 0
+                                    }, children: config.copy.headline }), (0, jsx_runtime_1.jsx)("p", { style: {
+                                        fontFamily: secondaryFont,
+                                        fontSize: '16px',
+                                        fontWeight: 400,
+                                        lineHeight: '1.5em',
+                                        textAlign: 'center',
+                                        color: currentTheme.colors.text.primary,
+                                        margin: 0
+                                    }, children: config.copy.subcopy })] })) : isSpinning ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h1", { style: {
                                         fontFamily: uiFont,
-                                        fontWeight: 600,
-                                        fontSize: '28px',
-                                        lineHeight: '1.2em',
-                                        color: currentTheme.colors.text.secondary
-                                    } }, "\uD83D\uDCB0"))))),
-                react_1.default.createElement("div", { className: "absolute inset-0 z-15 pointer-events-none" },
-                    react_1.default.createElement("img", { src: imgFrame, alt: "", className: "w-full h-full object-contain", style: {
-                            filter: 'drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1))',
-                            imageRendering: 'auto',
-                            backfaceVisibility: 'hidden',
-                            transform: 'translateZ(0)'
-                        } })),
-                react_1.default.createElement("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-20", style: { marginTop: '-15px' } },
-                    react_1.default.createElement(react_2.motion.div, { className: "w-[120px] h-[120px] relative", style: {
-                            filter: 'drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15))'
-                        }, animate: isSpinning ? { scale: [1, 1.15, 1] } : {}, transition: {
-                            duration: 0.5,
-                            repeat: isSpinning ? Infinity : 0,
-                            ease: "easeInOut"
-                        } },
-                        react_1.default.createElement("img", { src: imgIndicator, alt: "", className: "w-full h-full object-contain", style: {
-                                imageRendering: 'auto',
-                                backfaceVisibility: 'hidden',
-                                transform: 'translateZ(0)'
-                            } }),
-                        react_1.default.createElement("img", { src: "/spin2win/assets/circle-inner-56586a.png", alt: "", className: "absolute object-contain", style: {
-                                width: '60px',
-                                height: '60px',
-                                left: '48%',
-                                top: '60%',
-                                transform: 'translate(-50%, -50%) translateZ(0)',
-                                imageRendering: 'auto',
-                                backfaceVisibility: 'hidden'
-                            } })))),
-            react_1.default.createElement("div", { className: "flex flex-col items-center gap-4", style: { width: '70%', maxWidth: '1200px' } }, !isCheckingStatus && (react_1.default.createElement("button", { onClick: spin, disabled: isSpinning || !canSpin || hasSpunToday, style: {
-                    fontFamily: secondaryFont,
-                    fontWeight: 700,
-                    fontSize: '14px',
-                    lineHeight: '1.32em',
-                    letterSpacing: '0.5%',
-                    color: '#FFFFFF',
-                    backgroundColor: currentTheme.colors.button,
-                    borderRadius: '40px',
-                    padding: '10px 15px',
-                    border: 'none',
-                    cursor: isSpinning || !canSpin || hasSpunToday ? 'not-allowed' : 'pointer',
-                    opacity: isSpinning || !canSpin || hasSpunToday ? 0.5 : 1,
-                    transition: 'all 0.2s ease'
-                }, onMouseEnter: (e) => {
-                    if (!isSpinning && canSpin && !hasSpunToday) {
-                        e.currentTarget.style.transform = 'scale(1.05)';
-                    }
-                }, onMouseLeave: (e) => {
-                    e.currentTarget.style.transform = 'scale(1)';
-                } }, isSpinning ? 'SPINNING...' : 'SPIN THE WHEEL!'))),
-            react_1.default.createElement("p", { style: {
-                    fontFamily: secondaryFont,
-                    fontWeight: 400,
-                    fontSize: '16px',
-                    lineHeight: '1.5em',
-                    textAlign: 'center',
-                    color: currentTheme.colors.text.disclaimer,
-                    margin: 0,
-                    padding: '0 20px',
-                    marginTop: '60px'
-                } }, "Cash prizes are transferred to the Vodacom account linked to your profile. Please make sure your account details are up to date to receive cash prizes."))));
+                                        fontSize: '32px',
+                                        fontWeight: 700,
+                                        lineHeight: '1.25em',
+                                        color: currentTheme.colors.heading,
+                                        margin: 0
+                                    }, children: config.copy.spinningHeadline }), (0, jsx_runtime_1.jsx)("p", { style: {
+                                        fontFamily: secondaryFont,
+                                        fontSize: '16px',
+                                        fontWeight: 400,
+                                        lineHeight: '1.5em',
+                                        textAlign: 'center',
+                                        color: currentTheme.colors.text.primary,
+                                        margin: 0
+                                    }, children: config.copy.spinningSubcopy })] })) : null }), (0, jsx_runtime_1.jsxs)("div", { className: "relative w-[400px] h-[400px]", style: {
+                            filter: 'drop-shadow(0px 8px 16px rgba(0, 0, 0, 0.15))'
+                        }, children: [(0, jsx_runtime_1.jsx)(react_2.motion.div, { ref: wheelRef, className: "absolute left-[1.39%] top-[1.44%] w-[97.17%] h-[97.17%] z-5", style: {
+                                    filter: 'drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.1))',
+                                    willChange: 'transform',
+                                    backfaceVisibility: 'hidden',
+                                    WebkitFontSmoothing: 'antialiased'
+                                }, animate: { rotate: rotation }, transition: { duration: 3, ease: "easeOut" }, children: (0, jsx_runtime_1.jsx)("img", { src: imgPortions, alt: "", className: "w-full h-full object-contain", style: {
+                                        imageRendering: 'auto',
+                                        backfaceVisibility: 'hidden',
+                                        transform: 'translateZ(0)'
+                                    } }) }), (0, jsx_runtime_1.jsx)(react_2.motion.div, { className: "absolute left-[1.39%] top-[1.44%] w-[97.17%] h-[97.17%] z-10", style: {
+                                    willChange: 'transform',
+                                    backfaceVisibility: 'hidden',
+                                    WebkitFontSmoothing: 'antialiased'
+                                }, animate: { rotate: rotation }, transition: { duration: 3, ease: "easeOut" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute flex left-1/2 -translate-x-1/2 items-center justify-center", style: { top: '8%' }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(0deg)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                        fontFamily: textFont,
+                                                        fontWeight: 600,
+                                                        fontSize: segmentFontSize,
+                                                        lineHeight: '1.2em',
+                                                        color: currentTheme.colors.text.segment
+                                                    }, children: "Oops" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute flex items-center justify-center", style: { top: '18%', right: '18%' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(45deg)' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: textFont,
+                                                            fontWeight: 600,
+                                                            fontSize: segmentFontSize,
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.segment
+                                                        }, children: "R10" }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: uiFont,
+                                                            fontWeight: 600,
+                                                            fontSize: '28px',
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.secondary
+                                                        }, children: "\uD83D\uDCB0" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute flex items-center justify-center", style: { top: '50%', right: '2%', transform: 'translateY(-50%)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                        fontFamily: textFont,
+                                                        fontWeight: 600,
+                                                        fontSize: segmentFontSize,
+                                                        lineHeight: '1.2em',
+                                                        color: currentTheme.colors.text.segment
+                                                    }, children: "Oops" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute flex items-center justify-center", style: { bottom: '18%', right: '18%' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(135deg)' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: textFont,
+                                                            fontWeight: 600,
+                                                            fontSize: segmentFontSize,
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.segment
+                                                        }, children: "R10" }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: uiFont,
+                                                            fontWeight: 600,
+                                                            fontSize: '28px',
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.secondary
+                                                        }, children: "\uD83D\uDCB0" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute flex left-1/2 -translate-x-1/2 items-center justify-center", style: { bottom: '8%' }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(180deg)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                        fontFamily: textFont,
+                                                        fontWeight: 600,
+                                                        fontSize: segmentFontSize,
+                                                        lineHeight: '1.2em',
+                                                        color: currentTheme.colors.text.segment
+                                                    }, children: "Oops" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute flex items-center justify-center", style: { bottom: '18%', left: '18%' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(-135deg)' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: textFont,
+                                                            fontWeight: 600,
+                                                            fontSize: segmentFontSize,
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.segment
+                                                        }, children: "R20" }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: uiFont,
+                                                            fontWeight: 600,
+                                                            fontSize: '28px',
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.secondary
+                                                        }, children: "\uD83D\uDCB0" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute flex items-center justify-center", style: { top: '50%', left: '2%', transform: 'translateY(-50%)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-0.5 items-center", style: { transform: 'rotate(-90deg)' }, children: (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                        fontFamily: textFont,
+                                                        fontWeight: 600,
+                                                        fontSize: segmentFontSize,
+                                                        lineHeight: '1.2em',
+                                                        color: currentTheme.colors.text.segment
+                                                    }, children: "Oops" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute flex items-center justify-center", style: { top: '18%', left: '18%' }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-[7px] items-center", style: { transform: 'rotate(-45deg)' }, children: [(0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: textFont,
+                                                            fontWeight: 600,
+                                                            fontSize: segmentFontSize,
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.segment
+                                                        }, children: "R20" }), (0, jsx_runtime_1.jsx)("div", { className: "text-center", style: {
+                                                            fontFamily: uiFont,
+                                                            fontWeight: 600,
+                                                            fontSize: '28px',
+                                                            lineHeight: '1.2em',
+                                                            color: currentTheme.colors.text.secondary
+                                                        }, children: "\uD83D\uDCB0" })] }) })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 z-15 pointer-events-none", children: (0, jsx_runtime_1.jsx)("img", { src: imgFrame, alt: "", className: "w-full h-full object-contain", style: {
+                                        filter: 'drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.1))',
+                                        imageRendering: 'auto',
+                                        backfaceVisibility: 'hidden',
+                                        transform: 'translateZ(0)'
+                                    } }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none z-20", style: { marginTop: '-15px' }, children: (0, jsx_runtime_1.jsxs)(react_2.motion.div, { className: "w-[120px] h-[120px] relative", style: {
+                                        filter: 'drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.15))'
+                                    }, animate: isSpinning ? { scale: [1, 1.15, 1] } : {}, transition: {
+                                        duration: 0.5,
+                                        repeat: isSpinning ? Infinity : 0,
+                                        ease: "easeInOut"
+                                    }, children: [(0, jsx_runtime_1.jsx)("img", { src: imgIndicator, alt: "", className: "w-full h-full object-contain", style: {
+                                                imageRendering: 'auto',
+                                                backfaceVisibility: 'hidden',
+                                                transform: 'translateZ(0)'
+                                            } }), (0, jsx_runtime_1.jsx)("img", { src: "/spin2win/assets/circle-inner-56586a.png", alt: "", className: "absolute object-contain", style: {
+                                                width: '60px',
+                                                height: '60px',
+                                                left: '48%',
+                                                top: '60%',
+                                                transform: 'translate(-50%, -50%) translateZ(0)',
+                                                imageRendering: 'auto',
+                                                backfaceVisibility: 'hidden'
+                                            } })] }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col items-center gap-4", style: { width: '70%', maxWidth: '1200px' }, children: !isCheckingStatus && ((0, jsx_runtime_1.jsx)("button", { onClick: spin, disabled: isSpinning || !canSpin || hasSpunToday, style: {
+                                fontFamily: secondaryFont,
+                                fontWeight: 700,
+                                fontSize: '14px',
+                                lineHeight: '1.32em',
+                                letterSpacing: '0.5%',
+                                color: '#FFFFFF',
+                                backgroundColor: currentTheme.colors.button,
+                                borderRadius: '40px',
+                                padding: '10px 15px',
+                                border: 'none',
+                                cursor: isSpinning || !canSpin || hasSpunToday ? 'not-allowed' : 'pointer',
+                                opacity: isSpinning || !canSpin || hasSpunToday ? 0.5 : 1,
+                                transition: 'all 0.2s ease'
+                            }, onMouseEnter: (e) => {
+                                if (!isSpinning && canSpin && !hasSpunToday) {
+                                    e.currentTarget.style.transform = 'scale(1.05)';
+                                }
+                            }, onMouseLeave: (e) => {
+                                e.currentTarget.style.transform = 'scale(1)';
+                            }, children: isSpinning ? 'SPINNING...' : 'SPIN THE WHEEL!' })) }), (0, jsx_runtime_1.jsx)("p", { style: {
+                            fontFamily: secondaryFont,
+                            fontWeight: 400,
+                            fontSize: '16px',
+                            lineHeight: '1.5em',
+                            textAlign: 'center',
+                            color: currentTheme.colors.text.disclaimer,
+                            margin: 0,
+                            padding: '0 20px',
+                            marginTop: '60px'
+                        }, children: "Cash prizes are transferred to the Vodacom account linked to your profile. Please make sure your account details are up to date to receive cash prizes." })] })] }));
 }
 exports.default = SpinningWheel;
 //# sourceMappingURL=SpinningWheel.js.map