function MainComponent() { const [walletAddress, setWalletAddress] = useState(""); const [unboxEvents, setUnboxEvents] = useState([]); const [isSpinning, setIsSpinning] = useState(false); const [currentReward, setCurrentReward] = useState(null); const [isDemoSpin, setIsDemoSpin] = useState(false); const demoRewards = [ // Grey Tier (75%) { tier: "Grey", name: "Dust", image: "https://ucarecdn.com/5f3332f9-9bd0-4204-9646-fd2e4a5d6d25/-/format/auto/" }, // Blue Tier (15%) { tier: "Blue", name: "Copium", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Fortune Cookie", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Job Application", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Broken Keyboard", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Paper Hands", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Ramen", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Rug", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Rugged Chart", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Trench Helmet", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Blue", name: "Participation Trophy", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, // Pink Tier (7%) { tier: "Pink", name: "$5 Housecoin", image: "https://ucarecdn.com/4ab627c4-27e8-4bf7-8556-2aefc622da01/-/format/auto/" }, { tier: "Pink", name: "$5 Moonpig", image: "https://ucarecdn.com/4ab627c4-27e8-4bf7-8556-2aefc622da01/-/format/auto/" }, { tier: "Pink", name: "$5 Titcoin", image: "https://ucarecdn.com/4ab627c4-27e8-4bf7-8556-2aefc622da01/-/format/auto/" }, // Red Tier (2.5%) { tier: "Red", name: "$10 Housecoin", image: "https://ucarecdn.com/a15f8fa7-22cf-4eee-9d93-237a86ea52ab/-/format/auto/" }, { tier: "Red", name: "$10 Moonpig", image: "https://ucarecdn.com/a15f8fa7-22cf-4eee-9d93-237a86ea52ab/-/format/auto/" }, { tier: "Red", name: "$10 Titcoin", image: "https://ucarecdn.com/a15f8fa7-22cf-4eee-9d93-237a86ea52ab/-/format/auto/" }, // Gold Tier (0.5%) { tier: "Gold", name: "1 SOL", image: "https://ucarecdn.com/03a20234-f1d0-4ec2-bb03-6cd1fcceb555/-/format/auto/" }, { tier: "Gold", name: "0.5 SOL", image: "https://ucarecdn.com/03a20234-f1d0-4ec2-bb03-6cd1fcceb555/-/format/auto/" }, { tier: "Gold", name: "0.3 SOL", image: "https://ucarecdn.com/03a20234-f1d0-4ec2-bb03-6cd1fcceb555/-/format/auto/" }, { tier: "Gold", name: "$30 Airdrop", image: "https://ucarecdn.com/03a20234-f1d0-4ec2-bb03-6cd1fcceb555/-/format/auto/" } ]; // Create a simplified tier display array with one example per tier const tierExamples = [ { tier: "Grey", name: "Dust", image: "https://ucarecdn.com/5f3332f9-9bd0-4204-9646-fd2e4a5d6d25/-/format/auto/" }, { tier: "Blue", name: "Copium", image: "https://ucarecdn.com/7614f807-080d-4e68-94b2-05fb94e97d2b/-/format/auto/" }, { tier: "Pink", name: "$5 Housecoin", image: "https://ucarecdn.com/4ab627c4-27e8-4bf7-8556-2aefc622da01/-/format/auto/" }, { tier: "Red", name: "$10 Housecoin", image: "https://ucarecdn.com/a15f8fa7-22cf-4eee-9d93-237a86ea52ab/-/format/auto/" }, { tier: "Gold", name: "1 SOL", image: "https://ucarecdn.com/03a20234-f1d0-4ec2-bb03-6cd1fcceb555/-/format/auto/" }, { tier: "Mystery", name: "Mystery Item", image: "https://ucarecdn.com/239cfcd0-12c6-430f-b6d0-e8f7a813a580/-/format/auto/" } ]; // Add shuffle function function shuffle(array) { let currentIndex = array.length, randomIndex; while(currentIndex > 0){ randomIndex = Math.floor(Math.random() * currentIndex); currentIndex--; [array[currentIndex], array[randomIndex]] = [ array[randomIndex], array[currentIndex] ]; } return array; } // Update the spinner items generation to better randomize while preventing tier grouping const generateSpinnerItems = useCallback((selectedReward)=>{ // Helper to get a random reward avoiding same tier neighbors const getRandomReward = (prevTier, nextTier)=>{ const filtered = demoRewards.filter((reward)=>{ // Avoid same tier as neighbors return reward.tier !== prevTier && reward.tier !== nextTier; }); return filtered[Math.floor(Math.random() * filtered.length)]; }; // Create a sequence with controlled randomization const generateSequence = (length)=>{ const sequence = []; for(let i = 0; i < length; i++){ const prevTier = sequence[i - 1]?.tier; const nextTier = sequence[i + 1]?.tier; sequence.push(getRandomReward(prevTier, nextTier)); } return sequence; }; // Generate the full sequence const sequence = generateSequence(80); // Doubled for smoother looping if (selectedReward) { // Find the ideal center position const centerIndex = Math.floor(sequence.length / 2); // Insert the winning item at center, ensuring neighbors are different tiers sequence[centerIndex] = selectedReward; // Ensure items before and after winner are different tiers if (centerIndex > 0) { sequence[centerIndex - 1] = getRandomReward(sequence[centerIndex - 2]?.tier, selectedReward.tier); } if (centerIndex < sequence.length - 1) { sequence[centerIndex + 1] = getRandomReward(selectedReward.tier, sequence[centerIndex + 2]?.tier); } return sequence; } // Initial state - show a diverse set of items return [ demoRewards.find((r)=>r.tier === "Blue"), demoRewards.find((r)=>r.tier === "Gold"), demoRewards.find((r)=>r.tier === "Red"), demoRewards.find((r)=>r.tier === "Pink"), demoRewards.find((r)=>r.tier === "Grey"), demoRewards.find((r)=>r.tier === "Blue") ]; }, [ demoRewards ]); const [spinnerItems, setSpinnerItems] = useState(()=>generateSpinnerItems()); const fetchRecentUnboxes = useCallback(async ()=>{ try { const response = await fetch("/api/get-recent-unboxes", { method: "POST" }); if (!response.ok) { throw new Error("Failed to fetch recent unboxes"); } const data = await response.json(); setUnboxEvents(data.events); } catch (error) { console.error("Error fetching unboxes:", error); } }, []); useEffect(()=>{ fetchRecentUnboxes(); const interval = setInterval(fetchRecentUnboxes, 5000); return ()=>clearInterval(interval); }, [ fetchRecentUnboxes ]); const startSpin = useCallback(()=>{ if (isSpinning) return; setIsSpinning(true); setIsDemoSpin(true); // Randomly select a reward based on tier probabilities const random = Math.random() * 100; let selectedReward; if (random < 0.5) { // Gold tier (0.5%) selectedReward = demoRewards.find((r)=>r.tier === "Gold"); } else if (random < 3) { // Red tier (2.5%) selectedReward = demoRewards.find((r)=>r.tier === "Red"); } else if (random < 10) { // Pink tier (7%) selectedReward = demoRewards.find((r)=>r.tier === "Pink"); } else if (random < 25) { // Blue tier (15%) selectedReward = demoRewards.find((r)=>r.tier === "Blue"); } else { // Grey tier (75%) selectedReward = demoRewards.find((r)=>r.tier === "Grey"); } // Generate new spinner items sequence centered on selected reward setSpinnerItems(generateSpinnerItems(selectedReward)); // Wait for animation to complete before showing result setTimeout(()=>{ setIsSpinning(false); setCurrentReward(selectedReward); }, 4500); // Animation now runs for 4.5 seconds }, [ isSpinning, demoRewards, generateSpinnerItems ]); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0A0A0A] text-white font-sans", __source: { fileName: "", lineNumber: 323, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 z-0", __source: { fileName: "", lineNumber: 325, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-br from-purple-900/20 to-blue-900/20", __source: { fileName: "", lineNumber: 326, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('https://ucarecdn.com/7f8a5dd4-951a-45ed-9979-4f853d7adc78/-/format/auto/')] opacity-5 bg-cover bg-center", __source: { fileName: "", lineNumber: 327, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[#0A0A0A] opacity-90", __source: { fileName: "", lineNumber: 328, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 332, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black/60 backdrop-blur-sm border-b border-white/5", __source: { fileName: "", lineNumber: 334, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 py-2 text-center", __source: { fileName: "", lineNumber: 335, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-sm flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 336, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 337, columnNumber: 15 }, __self: this }, "Contract Address:"), /*#__PURE__*/ React.createElement("code", { className: "bg-black/30 px-2 py-1 rounded text-purple-400 font-mono", __source: { fileName: "", lineNumber: 338, columnNumber: 15 }, __self: this }, "J3noosARsN6X9kXwksMdFHCFZGUAhh581bYUkaHWpump"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>{ navigator.clipboard.writeText("J3noosARsN6X9kXwksMdFHCFZGUAhh581bYUkaHWpump"); }, className: "text-gray-500 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 341, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-copy", __source: { fileName: "", lineNumber: 349, columnNumber: 17 }, __self: this }))))), /*#__PURE__*/ React.createElement("nav", { className: "fixed w-full top-8 z-50 bg-black/40 backdrop-blur-xl border-b border-white/5", __source: { fileName: "", lineNumber: 356, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 357, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between h-16", __source: { fileName: "", lineNumber: 358, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-4", __source: { fileName: "", lineNumber: 359, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/ee7d6ab7-cb2e-4843-9f37-bc2357923c11/-/format/auto/", alt: "Solana Case", className: "h-8", __source: { fileName: "", lineNumber: 360, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/4a3952ad-0a34-44b5-9b85-8f11e9a679a7/-/format/auto/", alt: "SolCase", className: "h-6", __source: { fileName: "", lineNumber: 365, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 371, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://x.com/solcasefun", target: "_blank", rel: "noopener noreferrer", className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 372, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter text-xl", __source: { fileName: "", lineNumber: 378, columnNumber: 19 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "https://pump.fun/coin/J3noosARsN6X9kXwksMdFHCFZGUAhh581bYUkaHWpump", target: "_blank", rel: "noopener noreferrer", className: "text-gray-300 hover:text-white transition-colors", __source: { fileName: "", lineNumber: 380, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-rocket text-xl", __source: { fileName: "", lineNumber: 386, columnNumber: 19 }, __self: this })))))), /*#__PURE__*/ React.createElement("main", { className: "pt-20 pb-12 px-4", __source: { fileName: "", lineNumber: 394, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto text-center mb-12", __source: { fileName: "", lineNumber: 396, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/4a3952ad-0a34-44b5-9b85-8f11e9a679a7/-/format/auto/", alt: "SolCase", className: "h-16 md:h-20 mx-auto mb-4", __source: { fileName: "", lineNumber: 397, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 text-lg md:text-xl", __source: { fileName: "", lineNumber: 402, columnNumber: 13 }, __self: this }, "The Premier Solana Mystery Box Experience")), /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto mb-16", __source: { fileName: "", lineNumber: 408, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-black/50 backdrop-blur-xl rounded-2xl p-6 border border-white/10", __source: { fileName: "", lineNumber: 409, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-[180px] overflow-hidden rounded-xl border border-white/10 mb-6 bg-black/30", __source: { fileName: "", lineNumber: 411, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute left-1/2 top-0 bottom-0 w-1 bg-purple-500 z-10", __source: { fileName: "", lineNumber: 412, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `flex gap-2 items-center h-full ${isSpinning ? "case-spin" : ""}`, style: { transform: !isSpinning ? "translateX(-82px)" : undefined, transition: isSpinning ? "none" : "transform 0.3s ease-out" }, __source: { fileName: "", lineNumber: 413, columnNumber: 17 }, __self: this }, spinnerItems.map((reward, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: ` flex-shrink-0 w-[160px] h-[160px] bg-black/60 rounded-xl flex items-center justify-center border-2 transition-all duration-200 ${reward.tier === "Gold" ? "border-yellow-400 shadow-[0_0_20px_rgba(250,204,21,0.3)]" : reward.tier === "Red" ? "border-red-400 shadow-[0_0_20px_rgba(248,113,113,0.3)]" : reward.tier === "Pink" ? "border-pink-400 shadow-[0_0_20px_rgba(244,114,182,0.3)]" : reward.tier === "Blue" ? "border-blue-400 shadow-[0_0_20px_rgba(96,165,250,0.3)]" : "border-gray-600"} `, __source: { fileName: "", lineNumber: 421, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: reward.image, alt: reward.name, className: "w-32 h-32 object-contain", __source: { fileName: "", lineNumber: 441, columnNumber: 23 }, __self: this }))))), /*#__PURE__*/ React.createElement("div", { className: "max-w-lg mx-auto mb-6", __source: { fileName: "", lineNumber: 452, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Enter your Solana wallet address", value: walletAddress, onChange: (e)=>setWalletAddress(e.target.value), className: "w-full px-6 py-4 bg-black/30 rounded-xl text-white border border-white/10 focus:border-purple-500 outline-none text-center transition-all", __source: { fileName: "", lineNumber: 453, columnNumber: 17 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", __source: { fileName: "", lineNumber: 463, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { disabled: true, className: "px-8 py-4 rounded-xl font-bold text-lg bg-gray-800 cursor-not-allowed opacity-50 flex items-center justify-center gap-2", __source: { fileName: "", lineNumber: 464, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lock", __source: { fileName: "", lineNumber: 470, columnNumber: 19 }, __self: this }), "Live Opening Disabled"), /*#__PURE__*/ React.createElement("button", { onClick: startSpin, disabled: isSpinning, className: "px-8 py-4 rounded-xl font-bold text-lg bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 transition-all duration-300", __source: { fileName: "", lineNumber: 474, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-dice", __source: { fileName: "", lineNumber: 483, columnNumber: 19 }, __self: this }), isSpinning ? "Opening Case..." : "Try Demo Case")), currentReward && !isSpinning && !isDemoSpin && /*#__PURE__*/ React.createElement("div", { className: "mt-8 text-center animate-fadeIn", __source: { fileName: "", lineNumber: 490, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `text-3xl font-bold mb-4 ${currentReward.tier === "Gold" ? "text-yellow-400" : currentReward.tier === "Red" ? "text-red-400" : currentReward.tier === "Pink" ? "text-pink-400" : currentReward.tier === "Blue" ? "text-blue-400" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 491, columnNumber: 19 }, __self: this }, "You won: ", currentReward.name, "!"), /*#__PURE__*/ React.createElement("img", { src: currentReward.image, alt: currentReward.name, className: "w-40 h-40 mx-auto animate-float", __source: { fileName: "", lineNumber: 506, columnNumber: 19 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto mb-16", __source: { fileName: "", lineNumber: 517, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-8 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 518, columnNumber: 13 }, __self: this }, "Recent Openings"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 521, columnNumber: 13 }, __self: this }, unboxEvents.slice(0, 6).map((event, index)=>{ const rewardInfo = demoRewards.find((r)=>r.tier === event.reward_tier && r.name === event.reward_name); // Format the timestamp const timestamp = new Date(event.created_at); const timeAgo = Math.floor((new Date() - timestamp) / 1000); const timeDisplay = timeAgo < 60 ? `${timeAgo}s ago` : timeAgo < 3600 ? `${Math.floor(timeAgo / 60)}m ago` : timeAgo < 86400 ? `${Math.floor(timeAgo / 3600)}h ago` : `${Math.floor(timeAgo / 86400)}d ago`; return /*#__PURE__*/ React.createElement("div", { key: index, className: "bg-black/30 backdrop-blur-xl rounded-xl p-6 border border-white/10 hover:border-white/20 transition-all duration-300 group", __source: { fileName: "", lineNumber: 542, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-start gap-4", __source: { fileName: "", lineNumber: 547, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-20 h-20 rounded-xl flex items-center justify-center transform group-hover:scale-105 transition-all duration-300 ${event.reward_tier === "Gold" ? "bg-yellow-400/10 border-2 border-yellow-400/30" : event.reward_tier === "Red" ? "bg-red-400/10 border-2 border-red-400/30" : event.reward_tier === "Pink" ? "bg-pink-400/10 border-2 border-pink-400/30" : event.reward_tier === "Blue" ? "bg-blue-400/10 border-2 border-blue-400/30" : "bg-gray-600/10 border-2 border-gray-600/30"}`, __source: { fileName: "", lineNumber: 548, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: rewardInfo?.image, alt: event.reward_name, className: "w-16 h-16 object-contain", __source: { fileName: "", lineNumber: 563, columnNumber: 25 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 569, columnNumber: 23 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between mb-2", __source: { fileName: "", lineNumber: 570, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-400", __source: { fileName: "", lineNumber: 571, columnNumber: 27 }, __self: this }, event.wallet_address.slice(0, 6), "...", event.wallet_address.slice(-4)), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-gray-500", __source: { fileName: "", lineNumber: 575, columnNumber: 27 }, __self: this }, timeDisplay)), /*#__PURE__*/ React.createElement("p", { className: "font-medium text-lg mb-1", __source: { fileName: "", lineNumber: 579, columnNumber: 25 }, __self: this }, event.reward_name), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 582, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `px-2 py-1 rounded-md text-xs font-medium ${event.reward_tier === "Gold" ? "bg-yellow-400/10 text-yellow-400" : event.reward_tier === "Red" ? "bg-red-400/10 text-red-400" : event.reward_tier === "Pink" ? "bg-pink-400/10 text-pink-400" : event.reward_tier === "Blue" ? "bg-blue-400/10 text-blue-400" : "bg-gray-600/10 text-gray-400"}`, __source: { fileName: "", lineNumber: 583, columnNumber: 27 }, __self: this }, event.reward_tier, " Tier"), /*#__PURE__*/ React.createElement("i", { className: `fas fa-${event.reward_tier === "Gold" ? "crown text-yellow-400" : event.reward_tier === "Red" ? "fire text-red-400" : event.reward_tier === "Pink" ? "gem text-pink-400" : event.reward_tier === "Blue" ? "star text-blue-400" : "box text-gray-400"}`, __source: { fileName: "", lineNumber: 599, columnNumber: 27 }, __self: this }))))); }))), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto", __source: { fileName: "", lineNumber: 622, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold text-center mb-8 bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent", __source: { fileName: "", lineNumber: 623, columnNumber: 13 }, __self: this }, "Case Tiers"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4", __source: { fileName: "", lineNumber: 626, columnNumber: 13 }, __self: this }, tierExamples.map((tier, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-black/30 backdrop-blur-xl p-4 rounded-xl border border-white/10 hover:border-white/20 transition-all duration-300", __source: { fileName: "", lineNumber: 628, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: tier.image, alt: `${tier.tier} Case`, className: "w-24 h-24 mx-auto mb-4", __source: { fileName: "", lineNumber: 633, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: `text-xl font-bold text-center ${tier.tier === "Gold" ? "text-yellow-400" : tier.tier === "Red" ? "text-red-400" : tier.tier === "Pink" ? "text-pink-400" : tier.tier === "Blue" ? "text-blue-400" : tier.tier === "Mystery" ? "bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent" : "text-gray-400"}`, __source: { fileName: "", lineNumber: 638, columnNumber: 19 }, __self: this }, tier.tier)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-black/40 backdrop-blur-xl border-t border-white/5 py-8", __source: { fileName: "", lineNumber: 662, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4 text-center", __source: { fileName: "", lineNumber: 663, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 mb-2", __source: { fileName: "", lineNumber: 664, columnNumber: 13 }, __self: this }, "© 2025 SolCase. All rights reserved."), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-500", __source: { fileName: "", lineNumber: 667, columnNumber: 13 }, __self: this }, "SolCase is a Solana-based mystery case platform. Not financial advice."))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 674, columnNumber: 9 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .animate-fadeIn { animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .animate-float { animation: float 2s ease-in-out infinite; } .case-spin { animation: case-spin 4.5s cubic-bezier(0.32, 0, 0.23, 1) forwards; } @keyframes case-spin { 0% { transform: translateX(-82px); } 20% { transform: translateX(calc(-40% - 82px)); } 85% { transform: translateX(calc(-170% - 82px)); } 100% { transform: translateX(-82px); } } `))); }