@devrongx/games 0.1.0

package/src/games/prematch-bets/PreMatchIntro.tsx

@@ -0,0 +1,759 @@
+// @devrongx/games — games/prematch-bets/PreMatchIntro.tsx
+"use client";
+
+import { useState, useEffect, useCallback, useRef } from "react";
+import Image from "next/image";
+import { motion, AnimatePresence } from "framer-motion";
+import { Coins, Trophy, Play, Pause, Rewind, FastForward, RotateCcw } from "lucide-react";
+import { useGamePopupStore } from "../../core/gamePopupStore";
+import { IChallengeConfig } from "./config";
+
+const OUTFIT = { fontFamily: "Outfit, sans-serif" };
+const TOTAL_SLIDES = 6;
+const SLIDE_DURATIONS = [5500, 5000, 5500, 7000, 5500, 5500];
+
+// Countdown hook for match start
+const useCountdown = (targetIso: string) => {
+    const [text, setText] = useState("");
+    useEffect(() => {
+        const update = () => {
+            const diff = new Date(targetIso).getTime() - Date.now();
+            if (diff <= 0) { setText("LIVE NOW"); return; }
+            const d = Math.floor(diff / 86400000);
+            const h = Math.floor((diff % 86400000) / 3600000);
+            const m = Math.floor((diff % 3600000) / 60000);
+            const s = Math.floor((diff % 60000) / 1000);
+            if (d > 0) setText(`${d}d ${h}h ${m}m`);
+            else if (h > 0) setText(`${h}h ${m}m ${s}s`);
+            else setText(`${m}m ${s}s`);
+        };
+        update();
+        const id = setInterval(update, 1000);
+        return () => clearInterval(id);
+    }, [targetIso]);
+    return text;
+};
+
+// Slide props — all slides receive config
+interface SlideProps { config: IChallengeConfig }
+
+// ── Slide 0: Logo reveal + match info + countdown ──
+const LogoSlide = ({ config }: SlideProps) => {
+    const countdown = useCountdown(config.matchStartTime);
+    const matchDate = new Date(config.matchStartTime);
+    const dateStr = matchDate.toLocaleDateString("en-IN", { day: "numeric", month: "short" });
+    const timeStr = matchDate.toLocaleTimeString("en-IN", { hour: "numeric", minute: "2-digit", hour12: true });
+
+    return (
+    <motion.div
+        className="flex flex-col items-center gap-5"
+        initial="initial"
+        animate="animate"
+        exit="exit"
+    >
+        {/* Logo — appears immediately */}
+        <motion.div
+            initial={{ opacity: 0, y: 24 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, ease: "easeOut" }}
+            className="w-20 h-20 rounded-2xl flex items-center justify-center"
+            style={{ background: "linear-gradient(135deg, rgba(34,227,232,0.15), rgba(153,69,255,0.15))" }}
+        >
+            <svg width="44" height="44" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <g clipPath="url(#clip_intro_logo)">
+                    <path d="M14.0024 12.5249C19.1884 12.5249 22.4314 13.6319 23.4234 14.4939C20.9354 15.1919 17.6354 15.6219 14.0024 15.6219C10.3694 15.6219 7.06937 15.1919 4.58137 14.4939C5.57337 13.6319 8.81637 12.5249 14.0024 12.5249ZM20.0574 3.43286C20.1079 3.17257 20.2598 2.94303 20.4796 2.79469C20.6994 2.64636 20.9691 2.59139 21.2294 2.64186L25.1564 3.40586C25.4125 3.46068 25.6368 3.61378 25.7813 3.83225C25.9257 4.05073 25.9786 4.31714 25.9287 4.57424C25.8788 4.83134 25.7301 5.0586 25.5144 5.20719C25.2987 5.35577 25.0334 5.41382 24.7754 5.36886L24.0024 5.21886V6.75386C23.3684 6.56786 22.7024 6.40086 22.0024 6.25686V4.82986L20.8484 4.60586C20.588 4.55506 20.3584 4.40298 20.2101 4.18304C20.0618 3.9631 20.0069 3.69328 20.0574 3.43286ZM11.0024 3.00586C11.0024 2.74064 11.1077 2.48629 11.2953 2.29875C11.4828 2.11122 11.7371 2.00586 12.0024 2.00586H16.0024C16.2676 2.00586 16.5219 2.11122 16.7095 2.29875C16.897 2.48629 17.0024 2.74064 17.0024 3.00586C17.0024 3.27108 16.897 3.52543 16.7095 3.71297C16.5219 3.9005 16.2676 4.00586 16.0024 4.00586H15.0024V5.52186C14.3358 5.50186 13.6689 5.50186 13.0024 5.52186V4.00586H12.0024C11.7371 4.00586 11.4828 3.9005 11.2953 3.71297C11.1077 3.52543 11.0024 3.27108 11.0024 3.00586ZM2.05737 4.57886C2.00687 4.31843 2.06182 4.04862 2.21014 3.82868C2.35845 3.60874 2.588 3.45666 2.84837 3.40586L6.77537 2.64186C6.90432 2.61684 7.03695 2.61747 7.16566 2.64371C7.29438 2.66995 7.41666 2.72128 7.52554 2.79478C7.63442 2.86827 7.72775 2.9625 7.80021 3.07207C7.87268 3.18163 7.92285 3.3044 7.94787 3.43336C7.97288 3.56232 7.97225 3.69494 7.94602 3.82366C7.91978 3.95237 7.86845 4.07466 7.79495 4.18353C7.72145 4.29241 7.62723 4.38575 7.51766 4.45821C7.40809 4.53067 7.28532 4.58084 7.15637 4.60586L6.00237 4.82986V6.25686C5.30237 6.39986 4.63637 6.56786 4.00237 6.75386V5.21886L3.23037 5.36886C3.10147 5.39401 2.96889 5.39352 2.84018 5.36743C2.71148 5.34134 2.58917 5.29016 2.48025 5.2168C2.37133 5.14344 2.27792 5.04935 2.20536 4.93989C2.1328 4.83043 2.08251 4.70775 2.05737 4.57886Z" fill="url(#paint0_intro_logo)" />
+                    <path d="M28 11.3139C28 12.3309 26.849 13.2629 24.934 13.9999C23.684 12.0439 18.821 11.0249 14 11.0249C9.179 11.0249 4.316 12.0439 3.066 13.9999C1.151 13.2629 0 12.3309 0 11.3139C0 8.93486 6.268 7.00586 14 7.00586C21.732 7.00586 28 8.93486 28 11.3139Z" fill="url(#paint1_intro_logo)" />
+                    <path d="M14 17.122C8.484 17.122 2.667 16.126 0 13.998V21.699C0 23.761 4.712 25.482 11.001 25.905V21.006C11.001 20.7408 11.1064 20.4865 11.2939 20.2989C11.4814 20.1114 11.7358 20.006 12.001 20.006H16.002C16.2672 20.006 16.5216 20.1114 16.7091 20.2989C16.8966 20.4865 17.002 20.7408 17.002 21.006V25.904C23.29 25.481 28 23.76 28 21.699V13.998C25.333 16.126 19.516 17.122 14 17.122Z" fill="url(#paint2_intro_logo)" />
+                </g>
+                <defs>
+                    <linearGradient id="paint0_intro_logo" x1="25.9471" y1="9.88881" x2="2.03225" y2="9.7064" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#22E3E8" />
+                        <stop offset="1" stopColor="#9945FF" />
+                    </linearGradient>
+                    <linearGradient id="paint1_intro_logo" x1="28" y1="11.055" x2="0" y2="10.5681" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#22E3E8" />
+                        <stop offset="1" stopColor="#9945FF" />
+                    </linearGradient>
+                    <linearGradient id="paint2_intro_logo" x1="28" y1="20.8916" x2="0" y2="20.6055" gradientUnits="userSpaceOnUse">
+                        <stop stopColor="#22E3E8" />
+                        <stop offset="1" stopColor="#9945FF" />
+                    </linearGradient>
+                    <clipPath id="clip_intro_logo">
+                        <rect width="28" height="28" fill="white" />
+                    </clipPath>
+                </defs>
+            </svg>
+        </motion.div>
+        {/* Match info — appears after logo settles */}
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.8 }}
+            className="flex flex-col items-center gap-1"
+        >
+            <p className="text-[28px] font-bold text-white tracking-tight leading-none text-center" style={OUTFIT}>
+                {config.teamA.name} vs {config.teamB.name}
+            </p>
+            <p className="text-[14px] text-white font-medium tracking-wide" style={OUTFIT}>
+                {dateStr} &middot; {timeStr}
+            </p>
+        </motion.div>
+        {/* Countdown — appears after match info is read */}
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 1.8 }}
+            className="flex flex-col items-center gap-1"
+        >
+            <span className="text-[10px] text-white/25 uppercase tracking-widest font-semibold" style={OUTFIT}>Starts in</span>
+            <span
+                className="text-[20px] font-bold leading-none"
+                style={{
+                    ...OUTFIT,
+                    background: "linear-gradient(90deg, #22E3E8, #9945FF)",
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    backgroundClip: "text",
+                }}
+            >
+                {countdown}
+            </span>
+        </motion.div>
+        {/* Title — appears last, with cyan fill sweep */}
+        <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 2.8 }}
+            className="text-[18px] font-bold tracking-wider uppercase mt-4"
+            style={{
+                ...OUTFIT,
+                background: "linear-gradient(90deg, #22E3E8 0%, #22E3E8 50%, rgba(255,255,255,0.35) 50.1%, rgba(255,255,255,0.35) 100%)",
+                backgroundSize: "200% 100%",
+                backgroundPosition: "100% 0",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+                backgroundClip: "text",
+                animation: "textFillSweep 2s ease-out 3.3s forwards",
+            }}
+        >
+            {config.title}
+        </motion.p>
+    </motion.div>
+    );
+};
+
+// ── Slide 1: Buy in with a match pass ──
+const EntrySlide = ({ config }: SlideProps) => (
+    <motion.div
+        className="flex flex-col items-center gap-4"
+        initial="initial"
+        animate="animate"
+        exit="exit"
+    >
+        {/* Headline — appears first */}
+        <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="text-[15px] text-white font-medium"
+            style={OUTFIT}
+        >
+            Buy in with a match pass
+        </motion.p>
+        {/* Price + USDC — appears after reading the headline */}
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 1.2 }}
+            className="flex items-center gap-3"
+        >
+            <span className="text-[52px] font-bold text-white leading-none" style={OUTFIT}>${config.entryFee}</span>
+            <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={52} height={52} className="rounded-full" />
+        </motion.div>
+        {/* Subtitle — appears last */}
+        <motion.p
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 2.2 }}
+            className="text-[14px] text-white/50 font-medium"
+            style={OUTFIT}
+        >
+            to enter the arena
+        </motion.p>
+    </motion.div>
+);
+
+// ── Slide 2: Get 1,000 points ──
+const PointsSlide = ({ config }: SlideProps) => (
+    <motion.div
+        className="flex flex-col items-center"
+        initial="initial"
+        animate="animate"
+        exit="exit"
+    >
+        {/* "You get" — appears first */}
+        <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="text-[15px] text-white font-medium mb-2"
+            style={OUTFIT}
+        >
+            You get
+        </motion.p>
+        {/* Big number + logo — appears after "You get" is read */}
+        <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, delay: 1.0 }}
+            className="flex items-center gap-3"
+        >
+            <Image src="/iamgame_square_logo.jpg" alt="" width={52} height={52} className="rounded-[8px]" />
+            <span
+                className="text-[56px] font-bold leading-none"
+                style={{
+                    ...OUTFIT,
+                    background: "linear-gradient(135deg, #22E3E8, #9945FF)",
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    backgroundClip: "text",
+                }}
+            >
+                {config.startingBalance.toLocaleString()}
+            </span>
+        </motion.div>
+        {/* "prediction points" — appears after the number lands */}
+        <motion.p
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 2.0 }}
+            className="text-[15px] text-white font-medium mt-2"
+            style={OUTFIT}
+        >
+            prediction points to bet with
+        </motion.p>
+        {/* Delayed tip — appears last */}
+        <motion.p
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 3.2 }}
+            className="text-[13px] text-white/60 font-medium text-center mt-4"
+            style={OUTFIT}
+        >
+            Participate in bets to maximize your points
+        </motion.p>
+    </motion.div>
+);
+
+// ── Slide 3: Markets demo ──
+const MarketsSlide = ({ config }: SlideProps) => {
+    const [demoStep, setDemoStep] = useState(0);
+
+    useEffect(() => {
+        const timers = [
+            setTimeout(() => setDemoStep(1), 2800),  // option highlights — after card appears
+            setTimeout(() => setDemoStep(2), 4200),  // chip selected
+        ];
+        return () => timers.forEach(clearTimeout);
+    }, []);
+
+    return (
+        <motion.div
+            className="flex flex-col items-center gap-5 w-full max-w-[300px]"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+        >
+            {/* Headline — appears first */}
+            <motion.p
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+                className="text-[14px] text-white font-medium text-center"
+                style={OUTFIT}
+            >
+                {config.markets.length} markets to predict
+            </motion.p>
+
+            {/* Floating market card — appears after headline is read */}
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 1.2 }}
+                className="w-full rounded-lg px-3 py-3"
+                style={{
+                    background: "rgba(255,255,255,0.03)",
+                    border: "1px solid rgba(255,255,255,0.08)",
+                }}
+            >
+                {/* Market question */}
+                <div className="flex items-center gap-2 mb-2.5">
+                    <Coins size={14} className="text-[#22E3E8]/50 flex-shrink-0" />
+                    <span className="text-[13px] text-white font-semibold" style={OUTFIT}>
+                        Who wins the toss?
+                    </span>
+                </div>
+                {/* Options */}
+                <div className="grid grid-cols-2 gap-2">
+                    {/* CSK option — gets selected */}
+                    <div
+                        className="flex items-center justify-between px-2.5 py-2 rounded-sm transition-all duration-500"
+                        style={{
+                            background: demoStep >= 1
+                                ? "linear-gradient(135deg, #22E3E8, #9945FF)"
+                                : "transparent",
+                            borderLeft: demoStep >= 1
+                                ? "1px solid transparent"
+                                : "1px solid rgba(255,255,255,0.12)",
+                            borderBottom: demoStep >= 1
+                                ? "1px solid transparent"
+                                : "1px solid rgba(255,255,255,0.06)",
+                            borderTop: "1px solid transparent",
+                            borderRight: "1px solid transparent",
+                        }}
+                    >
+                        <div className="flex items-center gap-1.5">
+                            {demoStep >= 1 && (
+                                <motion.svg
+                                    initial={{ scale: 0 }}
+                                    animate={{ scale: 1 }}
+                                    transition={{ type: "spring", stiffness: 400, damping: 15 }}
+                                    width="10" height="10" viewBox="0 0 16 16" fill="none"
+                                >
+                                    <circle cx="8" cy="8" r="8" fill="white" />
+                                    <path d="M5 8l2 2 4-4" stroke="#9945FF" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                                </motion.svg>
+                            )}
+                            <span className="text-[11px] text-white font-semibold" style={OUTFIT}>{config.teamA.name}</span>
+                        </div>
+                        <span className={`text-[10px] font-bold ${demoStep >= 1 ? "text-white" : "text-[#22E3E8]"}`} style={OUTFIT}>
+                            1.4x
+                        </span>
+                    </div>
+                    {/* RCB option — stays default */}
+                    <div
+                        className="flex items-center justify-between px-2.5 py-2 rounded-sm"
+                        style={{
+                            borderLeft: "1px solid rgba(255,255,255,0.12)",
+                            borderBottom: "1px solid rgba(255,255,255,0.06)",
+                            borderTop: "1px solid transparent",
+                            borderRight: "1px solid transparent",
+                        }}
+                    >
+                        <span className="text-[11px] text-white font-semibold" style={OUTFIT}>{config.teamB.name}</span>
+                        <span className="text-[10px] font-bold text-[#22E3E8]" style={OUTFIT}>1.4x</span>
+                    </div>
+                </div>
+                {/* Amount picker — appears at step 2 */}
+                <AnimatePresence>
+                    {demoStep >= 2 && (
+                        <motion.div
+                            initial={{ opacity: 0, height: 0 }}
+                            animate={{ opacity: 1, height: "auto" }}
+                            exit={{ opacity: 0, height: 0 }}
+                            transition={{ duration: 0.3 }}
+                            className="mt-2 flex items-center gap-1.5 overflow-hidden"
+                        >
+                            <span className="text-[8px] text-white/60 font-semibold flex-shrink-0" style={OUTFIT}>Bet:</span>
+                            {[50, 100, 150, 200].map((amt, i) => (
+                                <motion.div
+                                    key={amt}
+                                    initial={{ opacity: 0, scale: 0.8 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    transition={{ delay: i * 0.08 }}
+                                    className="flex items-center gap-0.5 px-2 py-[3px] rounded relative overflow-hidden"
+                                    style={amt === 100 ? {
+                                        background: "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)",
+                                    } : {
+                                        background: "rgba(34,227,232,0.08)",
+                                        border: "1px solid rgba(34,227,232,0.2)",
+                                    }}
+                                >
+                                    {amt === 100 && (
+                                        <div
+                                            className="absolute inset-0 pointer-events-none animate-shine"
+                                            style={{
+                                                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%)",
+                                                backgroundSize: "200% 100%",
+                                            }}
+                                        />
+                                    )}
+                                    <Image src="/iamgame_square_logo.jpg" alt="" width={7} height={7} className="rounded-[1px] relative z-[1]" />
+                                    <span
+                                        className={`text-[9px] font-bold relative z-[1] ${amt === 100 ? "text-black" : "text-[#22E3E8]"}`}
+                                        style={OUTFIT}
+                                    >
+                                        {amt}
+                                    </span>
+                                </motion.div>
+                            ))}
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </motion.div>
+
+            {/* Subtitle — appears after demo plays */}
+            <motion.p
+                initial={{ opacity: 0, y: 16 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 5.0 }}
+                className="text-[12px] text-white/40 font-medium text-center"
+                style={OUTFIT}
+            >
+                Toss, winner, top scorers, boundaries, wickets & more
+            </motion.p>
+        </motion.div>
+    );
+};
+
+// ── Slide 4: Compound multiplier ──
+const MultiplierSlide = ({ config }: SlideProps) => (
+    <motion.div
+        className="flex flex-col items-center gap-4"
+        initial="initial"
+        animate="animate"
+        exit="exit"
+    >
+        {/* First line — appears immediately */}
+        <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="text-[15px] text-white font-semibold"
+            style={OUTFIT}
+        >
+            Stack predictions.
+        </motion.p>
+        {/* Second line — after first is read */}
+        <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 1.0 }}
+            className="text-[15px] text-white/70 font-medium"
+            style={OUTFIT}
+        >
+            Multiply your odds.
+        </motion.p>
+        {/* Big number — the reveal moment */}
+        <motion.div
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.7, delay: 2.0, ease: "easeOut" }}
+        >
+            <span
+                className="text-[72px] font-bold leading-none"
+                style={{
+                    ...OUTFIT,
+                    background: "linear-gradient(135deg, #22E3E8, #9945FF, #f83cc5)",
+                    WebkitBackgroundClip: "text",
+                    WebkitTextFillColor: "transparent",
+                    backgroundClip: "text",
+                }}
+            >
+                {config.compoundMultipliers[config.compoundMultipliers.length - 1]}x
+            </span>
+        </motion.div>
+        {/* Label — after number lands */}
+        <motion.p
+            initial={{ opacity: 0, y: 16 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 3.0 }}
+            className="text-[12px] text-white/40 font-medium"
+            style={OUTFIT}
+        >
+            max compound multiplier
+        </motion.p>
+    </motion.div>
+);
+
+// ── Slide 5: Win USDC ──
+const WinSlide = ({ config: _config }: SlideProps) => {
+    const goTo = useGamePopupStore(s => s.goTo);
+    return (
+        <motion.div
+            className="flex flex-col items-center gap-4"
+            initial="initial"
+            animate="animate"
+            exit="exit"
+        >
+            {/* Trophy — appears first */}
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.2 }}
+            >
+                <Trophy size={36} className="text-[#FFD700]" />
+            </motion.div>
+            {/* Headline — after trophy */}
+            <motion.p
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.8 }}
+                className="text-[18px] text-white font-bold"
+                style={OUTFIT}
+            >
+                Top the leaderboard.
+            </motion.p>
+            {/* Win real USDC — after headline is read */}
+            <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: 1.8 }}
+                className="flex items-center gap-2"
+            >
+                <span className="text-[18px] text-white/70 font-medium" style={OUTFIT}>Win real</span>
+                <Image src="/icons/ic_usdc_hd.png" alt="USDC" width={22} height={22} className="rounded-full" />
+                <span className="text-[18px] text-[#2775CA] font-bold" style={OUTFIT}>USDC</span>
+            </motion.div>
+            {/* Tagline — after USDC line */}
+            <motion.p
+                initial={{ opacity: 0, y: 16 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 2.8 }}
+                className="text-[13px] text-white/40 font-medium"
+                style={OUTFIT}
+            >
+                Take the money home.
+            </motion.p>
+            {/* CTA button — appears last */}
+            <motion.button
+                initial={{ opacity: 0, y: 16 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 3.5 }}
+                onClick={() => goTo("questions")}
+                className="mt-4 px-6 py-2.5 rounded-full cursor-pointer"
+                style={{ background: "linear-gradient(135deg, #22E3E8, #9945FF)" }}
+            >
+                <span className="text-[14px] font-bold text-black" style={OUTFIT}>Build Your Bets</span>
+            </motion.button>
+        </motion.div>
+    );
+};
+
+
+export const PreMatchIntro = ({ config }: { config: IChallengeConfig }) => {
+    const goTo = useGamePopupStore(s => s.goTo);
+    const [slideIdx, setSlideIdx] = useState(0);
+    const [direction, setDirection] = useState(1);
+    const [paused, setPaused] = useState(false);
+    const [slideFill, setSlideFill] = useState(0);
+    const [finished, setFinished] = useState(false);
+
+    // Refs for timing
+    const slideStartRef = useRef(Date.now());
+    const pausedElapsedRef = useRef(0); // how much time had elapsed when paused
+    const rafRef = useRef<number>(0);
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+    // Clear auto-advance timer
+    const clearAutoTimer = useCallback(() => {
+        if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; }
+    }, []);
+
+    // Start auto-advance timer for remaining duration
+    const startAutoTimer = useCallback((remainingMs: number) => {
+        clearAutoTimer();
+        timerRef.current = setTimeout(() => {
+            if (slideIdx < TOTAL_SLIDES - 1) {
+                setDirection(1);
+                setSlideIdx(prev => prev + 1);
+            } else {
+                setFinished(true);
+                setPaused(true);
+            }
+        }, remainingMs);
+    }, [slideIdx, clearAutoTimer]);
+
+    // Progress fill RAF — respects paused state on slide change
+    useEffect(() => {
+        setSlideFill(0);
+        pausedElapsedRef.current = 0;
+        slideStartRef.current = Date.now();
+
+        if (paused) return; // stay paused at 0 fill on new slide
+
+        const tick = () => {
+            const elapsed = Date.now() - slideStartRef.current;
+            setSlideFill(Math.min(elapsed / SLIDE_DURATIONS[slideIdx], 1));
+            rafRef.current = requestAnimationFrame(tick);
+        };
+        rafRef.current = requestAnimationFrame(tick);
+        startAutoTimer(SLIDE_DURATIONS[slideIdx]);
+
+        return () => {
+            cancelAnimationFrame(rafRef.current);
+            clearAutoTimer();
+        };
+    }, [slideIdx]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    // Handle pause/resume
+    const togglePause = useCallback(() => {
+        if (paused) {
+            // Resume: restart RAF and timer from where we left off
+            const remaining = SLIDE_DURATIONS[slideIdx] - pausedElapsedRef.current;
+            slideStartRef.current = Date.now() - pausedElapsedRef.current;
+            const tick = () => {
+                const elapsed = Date.now() - slideStartRef.current;
+                setSlideFill(Math.min(elapsed / SLIDE_DURATIONS[slideIdx], 1));
+                rafRef.current = requestAnimationFrame(tick);
+            };
+            rafRef.current = requestAnimationFrame(tick);
+            startAutoTimer(remaining);
+            setPaused(false);
+        } else {
+            // Pause: freeze everything
+            cancelAnimationFrame(rafRef.current);
+            clearAutoTimer();
+            pausedElapsedRef.current = Date.now() - slideStartRef.current;
+            setPaused(true);
+        }
+    }, [paused, slideIdx, startAutoTimer, clearAutoTimer]);
+
+    const replay = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        clearAutoTimer();
+        setFinished(false);
+        setPaused(false);
+        setDirection(-1);
+        setSlideIdx(0);
+    }, [clearAutoTimer]);
+
+    const seekNext = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        clearAutoTimer();
+        if (slideIdx < TOTAL_SLIDES - 1) {
+            setFinished(false);
+            setDirection(1);
+            setSlideIdx(prev => prev + 1);
+        } else {
+            goTo("questions");
+        }
+    }, [slideIdx, goTo, clearAutoTimer]);
+
+    const seekBack = useCallback(() => {
+        cancelAnimationFrame(rafRef.current);
+        clearAutoTimer();
+        setFinished(false);
+        if (slideIdx > 0) {
+            setDirection(-1);
+            setSlideIdx(prev => prev - 1);
+        }
+    }, [slideIdx, clearAutoTimer]);
+
+    const slideVariants = {
+        enter: (dir: number) => ({ opacity: 0, x: dir * 60 }),
+        center: { opacity: 1, x: 0 },
+        exit: (dir: number) => ({ opacity: 0, x: dir * -60 }),
+    };
+
+    const SLIDES = [LogoSlide, EntrySlide, PointsSlide, MarketsSlide, MultiplierSlide, WinSlide] as const;
+    const SlideComponent = SLIDES[slideIdx] as React.ComponentType<SlideProps>;
+
+    return (
+        <div className="relative w-full h-full flex flex-col bg-black">
+            {/* Skip button */}
+            <div className="flex justify-end px-4 pt-3">
+                <button
+                    onClick={() => goTo("questions")}
+                    className="text-[10px] text-white/25 uppercase tracking-wider font-semibold"
+                    style={OUTFIT}
+                >
+                    Skip
+                </button>
+            </div>
+
+            {/* Slide content — centered */}
+            <div className="flex-1 flex items-center justify-center px-6">
+                <AnimatePresence mode="wait" custom={direction}>
+                    <motion.div
+                        key={slideIdx}
+                        custom={direction}
+                        variants={slideVariants}
+                        initial="enter"
+                        animate="center"
+                        exit="exit"
+                        transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
+                        className="w-full flex justify-center"
+                    >
+                        <SlideComponent config={config} />
+                    </motion.div>
+                </AnimatePresence>
+            </div>
+
+            {/* Bottom controls */}
+            <div className="px-5 pb-24 flex flex-col gap-3">
+                {/* Playback controls */}
+                <div className="flex items-center justify-center gap-6">
+                    {finished ? (
+                        <button
+                            onClick={replay}
+                            className="flex items-center gap-1.5 p-1.5"
+                            style={{ opacity: 0.5 }}
+                        >
+                            <RotateCcw size={16} className="text-white" />
+                            <span className="text-[11px] font-semibold text-white" style={OUTFIT}>Replay</span>
+                        </button>
+                    ) : (
+                        <>
+                            <button
+                                onClick={seekBack}
+                                disabled={slideIdx === 0}
+                                className="p-1.5"
+                                style={{ opacity: slideIdx === 0 ? 0.15 : 0.5 }}
+                            >
+                                <Rewind size={18} className="text-white" />
+                            </button>
+                            <button
+                                onClick={togglePause}
+                                className="p-1.5"
+                            >
+                                {paused
+                                    ? <Play size={18} className="text-white" style={{ marginLeft: 2 }} />
+                                    : <Pause size={18} className="text-white" />
+                                }
+                            </button>
+                            <button
+                                onClick={seekNext}
+                                className="p-1.5"
+                                style={{ opacity: 0.5 }}
+                            >
+                                <FastForward size={18} className="text-white" />
+                            </button>
+                        </>
+                    )}
+                </div>
+
+                {/* Segmented progress bar with checkpoint circles */}
+                <div style={{ display: "flex", alignItems: "center", width: "100%", gap: 6 }}>
+                    {Array.from({ length: TOTAL_SLIDES }).map((_, i) => {
+                        const filled = i < slideIdx;
+                        const active = i === slideIdx;
+                        const passed = i <= slideIdx;
+                        return (
+                            <div key={i} style={{ display: "flex", alignItems: "center", flex: i < TOTAL_SLIDES - 1 ? 1 : "none", gap: 6 }}>
+                                <div
+                                    style={{
+                                        width: 7, height: 7, borderRadius: "50%", flexShrink: 0,
+                                        background: passed ? "linear-gradient(135deg, #22E3E8, #9945FF)" : "rgba(255,255,255,0.12)",
+                                        boxShadow: passed ? "0 0 6px rgba(34,227,232,0.4)" : "none",
+                                    }}
+                                />
+                                {i < TOTAL_SLIDES - 1 && (
+                                    <div style={{ flex: 1, height: 3, borderRadius: 2, background: "rgba(255,255,255,0.08)", overflow: "hidden" }}>
+                                        <div
+                                            style={{
+                                                height: "100%", borderRadius: 2,
+                                                width: filled ? "100%" : active ? `${slideFill * 100}%` : "0%",
+                                                background: "linear-gradient(90deg, #22E3E8, #9945FF)",
+                                            }}
+                                        />
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+};