[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/header" import { HeroSection } from "@/components/hero-section" import { StatsSection } from "@/components/stats-section" import { GamesSection } from "@/components/games-section" import { RecentWins } from "@/components/recent-wins" import { AboutSection } from "@/components/about-section" import { WhyChooseSection } from "@/components/why-choose-section" import { Footer } from "@/components/footer" export default function HomePage() { return (

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import { Suspense } from "react" import { AuthProvider } from "@/components/auth/auth-provider" import { LanguageProvider } from "@/lib/language-context" import { AgeVerificationModal } from "@/components/age-verification-modal" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "CryptoMoney - Premier Online Casino", description: "Experience the thrill of online casino gaming at CryptoMoney. Play live casino games, slots, and more with secure betting and instant withdrawals.", generator: "CryptoMoney Casino", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]png:file="public/coin-flip-game.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/coin-flip-game-PjOJ7xVcEzV4RD8TaZbu9w2E3Fcivc.png" isMerged="true" [V0_FILE]png:file="public/placeholder-nnped.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-yna4s.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-86gvu.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-grt1u.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-8c4q5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/classic-slot-machine.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/classic-slot-machine-G2MHBz5w0rBVzteGjCL7AVg1FN9PLE.png" isMerged="true" [V0_FILE]png:file="public/placeholder-7nt68.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/roulette-casino-game.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/roulette-casino-game-tSAEQtpWSQzVUJEfdZ9jHHMPjI2NCB.png" isMerged="true" [V0_FILE]png:file="public/placeholder-13nhn.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/keno-lottery-game.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/keno-lottery-game-4VOFYDNUguZG8oazKlH5VdM3rKo0q9.png" isMerged="true" [V0_FILE]png:file="public/placeholder-n2sty.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]jpg:file="public/mines-casino-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mines-casino-game-uSH4ghBodwpbeTzAAWatWBWiRAdIS4.jpg" isMerged="true" [V0_FILE]png:file="public/placeholder-kolzc.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-v9dgs.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]png:file="public/placeholder-btp6y.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/auth/login-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Eye, EyeOff, Mail, Lock } from "lucide-react" import { useAuth } from "./auth-provider" interface LoginModalProps { isOpen: boolean onClose: () => void onSwitchToRegister: () => void } export function LoginModal({ isOpen, onClose, onSwitchToRegister }: LoginModalProps) { const [showPassword, setShowPassword] = useState(false) const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const { login } = useAuth() const handleLogin = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { await login(email, password) onClose() setEmail("") setPassword("") } catch (error) { alert("Login failed. Please try again.") } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/auth/register-modal.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Eye, EyeOff, Mail, Lock, User, Phone } from "lucide-react" import { useAuth } from "./auth-provider" interface RegisterModalProps { isOpen: boolean onClose: () => void onSwitchToLogin: () => void } export function RegisterModal({ isOpen, onClose, onSwitchToLogin }: RegisterModalProps) { const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [formData, setFormData] = useState({ username: "", email: "", phone: "", password: "", confirmPassword: "", }) const [isLoading, setIsLoading] = useState(false) const { register } = useAuth() const handleRegister = async (e: React.FormEvent) => { e.preventDefault() if (formData.password !== formData.confirmPassword) { alert("Passwords do not match!") return } setIsLoading(true) try { await register(formData) onClose() setFormData({ username: "", email: "", phone: "", password: "", confirmPassword: "", }) } catch (error) { alert("Registration failed. Please try again.") } finally { setIsLoading(false) } } const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } return ( ) } [V0_FILE]typescriptreact:file="app/games/page.tsx" isEdit="true" isMerged="true" "use client" import { Header } from "@/components/header" import { GamesSection } from "@/components/games-section" import { Footer } from "@/components/footer" import { useLanguage } from "@/lib/language-context" export default function GamesPage() { const { t } = useLanguage() return (

{t("allCasinoGames")}

{t("allCasinoGamesDesc")}

) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isMerged="true" "use client" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { ProfileSection } from "@/components/profile/profile-section" import { BalanceSection } from "@/components/profile/balance-section" import { TransactionHistory } from "@/components/profile/transaction-history" import { GameStats } from "@/components/profile/game-stats" import { useAuth } from "@/components/auth/auth-provider" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import Link from "next/link" import { useLanguage } from "@/lib/language-context" export default function ProfilePage() { const { isAuthenticated } = useAuth() const { t } = useLanguage() if (!isAuthenticated) { return (

{t("accessDenied")}

{t("pleaseLoginToView")}

) } return (

{t("myProfile")}

{t("myProfileDesc")}

{/* Left Column */}

{/* Right Column */}

) } [V0_FILE]typescriptreact:file="components/profile/profile-section.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useAuth } from "@/components/auth/auth-provider" import { User, Mail, Edit3, Save, X } from "lucide-react" export function ProfileSection() { const { user } = useAuth() const [isEditing, setIsEditing] = useState(false) const [formData, setFormData] = useState({ username: user?.username || "", email: user?.email || "", }) const handleSave = () => { // Here you would typically update the user data setIsEditing(false) // Simulate API call console.log("Updating user data:", formData) } const handleCancel = () => { setFormData({ username: user?.username || "", email: user?.email || "", }) setIsEditing(false) } return (

Profile Information

{!isEditing ? ( ) : (

)}

{/* Profile Avatar */}

{user?.username}

Member since 2024

{/* Profile Form */}

Username

setFormData({ ...formData, username: e.target.value })} className="pl-10 bg-slate-700 border-slate-600 text-white" disabled={!isEditing} />

Email Address

setFormData({ ...formData, email: e.target.value })} className="pl-10 bg-slate-700 border-slate-600 text-white" disabled={!isEditing} />

{/* Account Status */}

Account Status

Verified Account

Premium Member

) } [V0_FILE]typescriptreact:file="components/profile/balance-section.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { useAuth } from "@/components/auth/auth-provider" import { Wallet, Plus, Minus, CreditCard, Banknote } from "lucide-react" export function BalanceSection() { const { user, updateBalance } = useAuth() const [depositAmount, setDepositAmount] = useState("") const [withdrawAmount, setWithdrawAmount] = useState("") const [isProcessing, setIsProcessing] = useState(false) const handleDeposit = async () => { const amount = Number.parseFloat(depositAmount) if (amount <= 0 || !amount) return setIsProcessing(true) // Simulate API call setTimeout(() => { updateBalance?.(amount) setDepositAmount("") setIsProcessing(false) }, 1500) } const handleWithdraw = async () => { const amount = Number.parseFloat(withdrawAmount) if (amount <= 0 || !amount || amount > (user?.balance || 0)) return setIsProcessing(true) // Simulate API call setTimeout(() => { updateBalance?.(-amount) setWithdrawAmount("") setIsProcessing(false) }, 1500) } return (

Current Balance

${user?.balance?.toFixed(2)}

{/* Deposit Section */}

Deposit Funds

setDepositAmount(e.target.value)} className="bg-slate-700 border-slate-600 text-white" disabled={isProcessing} />

{/* Withdraw Section */}

Withdraw Funds

setWithdrawAmount(e.target.value)} className="bg-slate-700 border-slate-600 text-white" disabled={isProcessing} />

{/* Quick Actions */}

Quick Deposit

{[10, 50, 100].map((amount) => ( ))}

) } [V0_FILE]typescriptreact:file="components/profile/transaction-history.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { ArrowUpRight, ArrowDownLeft, Gamepad2 } from "lucide-react" interface Transaction { id: string type: "deposit" | "withdraw" | "bet" | "win" amount: number description: string date: string status: "completed" | "pending" | "failed" } const mockTransactions: Transaction[] = [ { id: "1", type: "deposit", amount: 100, description: "Credit Card Deposit", date: "2024-01-15 14:30", status: "completed", }, { id: "2", type: "bet", amount: -25, description: "Roulette Game", date: "2024-01-15 15:45", status: "completed", }, { id: "3", type: "win", amount: 50, description: "Coin Flip Win", date: "2024-01-15 16:20", status: "completed", }, { id: "4", type: "withdraw", amount: -75, description: "Bank Transfer", date: "2024-01-14 10:15", status: "pending", }, { id: "5", type: "bet", amount: -10, description: "Slot Machine", date: "2024-01-14 09:30", status: "completed", }, ] export function TransactionHistory() { const getTransactionIcon = (type: string) => { switch (type) { case "deposit": return case "withdraw": return case "bet": return case "win": return default: return } } const getStatusColor = (status: string) => { switch (status) { case "completed": return "text-green-500" case "pending": return "text-yellow-500" case "failed": return "text-red-500" default: return "text-gray-500" } } return (

Transaction History

{mockTransactions.map((transaction) => (

{getTransactionIcon(transaction.type)}

{transaction.description}

{transaction.date}

0 ? "text-green-500" : "text-red-500"}`}> {transaction.amount > 0 ? "+" : ""}${Math.abs(transaction.amount)}

{transaction.status}

))}

{mockTransactions.length === 0 && (

No transactions yet

)} ) } [V0_FILE]typescriptreact:file="components/profile/game-stats.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Trophy, Target, TrendingUp, Clock } from "lucide-react" export function GameStats() { const stats = [ { icon: Trophy, label: "Total Wins", value: "47", color: "text-yellow-500", }, { icon: Target, label: "Games Played", value: "156", color: "text-blue-500", }, { icon: TrendingUp, label: "Win Rate", value: "30.1%", color: "text-green-500", }, { icon: Clock, label: "Play Time", value: "24h 15m", color: "text-purple-500", }, ] const favoriteGames = [ { name: "Roulette", plays: 45, winRate: "32%" }, { name: "Coin Flip", plays: 38, winRate: "47%" }, { name: "Slot Machine", plays: 29, winRate: "28%" }, { name: "Mines", plays: 22, winRate: "35%" }, { name: "Dice Rolling", plays: 22, winRate: "29%" }, ] return (

Gaming Statistics

{/* Overall Stats */}

{stats.map((stat, index) => (

{stat.value}

{stat.label}

))}

{/* Favorite Games */}

Favorite Games

{favoriteGames.map((game, index) => (

{game.name}

{game.plays} plays

{game.winRate}

win rate

))}

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isEdit="true" isMerged="true" "use client" import { Header } from "@/components/header" import { Footer } from "@/components/footer" import { Card } from "@/components/ui/card" import { Shield, Users, Award, Clock } from "lucide-react" import { useLanguage } from "@/lib/language-context" export default function AboutPage() { const { t } = useLanguage() const features = [ { icon: Shield, title: t("secureAndFair"), description: t("secureDesc"), }, { icon: Users, title: t("trustedCommunity"), description: t("trustedDesc"), }, { icon: Award, title: t("licensedRegulated"), description: t("licensedDesc"), }, { icon: Clock, title: t("support247"), description: t("supportDesc"), }, ] return (

{/* Hero Section */}

{t("aboutTitle")}

{t("aboutDesc")}

{/* Features Grid */}

{features.map((feature, index) => (

{feature.title}

{feature.description}

))}

{/* Story Section */}

{t("ourStory")}

Founded in 2020, CryptoMoney emerged from a vision to revolutionize crypto gaming. We saw the need for a platform that combines cutting-edge blockchain technology with traditional casino excitement.

Our team of crypto gaming experts, blockchain security specialists, and customer service professionals work tirelessly to ensure every player has an exceptional experience. From our provably fair games to our instant crypto withdrawal system, every feature is designed with our crypto players in mind.

Today, CryptoMoney serves over 1.2 million crypto players across the globe, processing millions in Bitcoin and other cryptocurrencies every month. We're proud to be a trusted name in crypto gaming.

{t("byTheNumbers")}

1.2M+

{t("activePlayers")}

500 BTC+

{t("paidOut")}

{t("gameTypes")}

24/7

{t("support")}

) } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]png:file="public/placeholder-fg6gq.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-k8yr4.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-woxez.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-r0t5m.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-bsf5l.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-2h3b5.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-ahycx.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-jjy0o.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-w9czs.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-n3oum.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]png:file="public/placeholder-jbkyv.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/placeholder-ObxMt4d3T5MDA2Ca7JyHf5lCNuxMZN.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/stats-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import { Trophy, Users, DollarSign, TrendingUp } from "lucide-react"
import { OnlineCounter } from "@/components/online-counter"

export function StatsSection() {
  const stats = [
    {
      icon: Trophy,
      label: "Total Winnings",
      value: "845,000",
    },
    {
      icon: DollarSign,
      label: "Total Deposit",
      value: "4,845,000",
    },
    {
      icon: TrendingUp,
      label: "Total Withdraw",
      value: "845,000",
    },
  ]

return (
    <section className="bg-slate-800 py-16 border-y border-slate-700">
      <div className="container mx-auto px-4">
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
          <div className="text-center group">
            <div className="flex justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
              <div className="bg-orange-500/10 p-4 rounded-full border border-orange-500/20">
                <Users className="w-8 h-8 text-orange-500" />
              </div>
            </div>
            <div className="mb-2">
              <OnlineCounter />
            </div>
            <div className="text-gray-400 font-medium text-sm lg:text-base">Players Online</div>
          </div>

{stats.map((stat, index) => (
            <div key={index} className="text-center group">
              <div className="flex justify-center mb-4 transform group-hover:scale-110 transition-transform duration-300">
                <div className="bg-orange-500/10 p-4 rounded-full border border-orange-500/20">
                  <stat.icon className="w-8 h-8 text-orange-500" />
                </div>
              </div>
              <div className="text-3xl lg:text-4xl font-bold text-white mb-2 font-mono">{stat.value}</div>
              <div className="text-gray-400 font-medium text-sm lg:text-base">{stat.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/sports/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function SportsPage() {
  return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="pt-32 pb-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">Sports Betting</h1>
            <p className="text-gray-400 text-lg">Bet on your favorite sports with the best odds</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              { name: "Football", matches: 45, icon: "⚽" },
              { name: "Basketball", matches: 32, icon: "🏀" },
              { name: "Tennis", matches: 28, icon: "🎾" },
              { name: "Baseball", matches: 18, icon: "⚾" },
              { name: "Hockey", matches: 15, icon: "🏒" },
              { name: "Soccer", matches: 52, icon: "⚽" },
            ].map((sport) => (
              <div key={sport.name} className="bg-slate-800 rounded-lg p-6 hover:bg-slate-700 transition-colors">
                <div className="text-4xl mb-4">{sport.icon}</div>
                <h3 className="text-xl font-bold text-white mb-2">{sport.name}</h3>
                <p className="text-gray-400">{sport.matches} live matches</p>
                <button className="mt-4 w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded-lg font-semibold">
                  View Matches
                </button>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/promotions/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function PromotionsPage() {
  return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="pt-32 pb-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">Promotions & Bonuses</h1>
            <p className="text-gray-400 text-lg">Exclusive offers and rewards for CryptoMoney players</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              {
                title: "Welcome Bonus",
                description: "Get 100% match on your first deposit up to 1 BTC",
                bonus: "100% Match",
                color: "from-orange-500 to-red-500",
              },
              {
                title: "Daily Cashback",
                description: "Get 10% cashback on all losses every day",
                bonus: "10% Daily",
                color: "from-blue-500 to-purple-500",
              },
              {
                title: "VIP Rewards",
                description: "Exclusive bonuses and perks for VIP members",
                bonus: "VIP Only",
                color: "from-yellow-500 to-orange-500",
              },
              {
                title: "Weekend Boost",
                description: "50% bonus on all deposits during weekends",
                bonus: "50% Boost",
                color: "from-green-500 to-blue-500",
              },
              {
                title: "Referral Program",
                description: "Earn 0.01 BTC for every friend you refer",
                bonus: "0.01 BTC",
                color: "from-purple-500 to-pink-500",
              },
              {
                title: "High Roller",
                description: "Special bonuses for deposits over 5 BTC",
                bonus: "High Roller",
                color: "from-red-500 to-orange-500",
              },
            ].map((promo) => (
              <div
                key={promo.title}
                className="bg-slate-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all"
              >
                <div className={`h-32 bg-gradient-to-r ${promo.color} flex items-center justify-center`}>
                  <span className="text-2xl font-bold text-white">{promo.bonus}</span>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-bold text-white mb-2">{promo.title}</h3>
                  <p className="text-gray-400 mb-4">{promo.description}</p>
                  <button className="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded-lg font-semibold">
                    Claim Now
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/tournaments/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function TournamentsPage() {
  return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="pt-32 pb-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">Tournaments</h1>
            <p className="text-gray-400 text-lg">Compete with players worldwide for massive prizes</p>
          </div>

<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
            {[
              {
                title: "Weekly Slots Tournament",
                prize: "10 BTC",
                participants: 1247,
                timeLeft: "2d 14h 32m",
                status: "Active",
                entry: "0.001 BTC",
              },
              {
                title: "Blackjack Championship",
                prize: "5 BTC",
                participants: 892,
                timeLeft: "5d 8h 15m",
                status: "Active",
                entry: "0.005 BTC",
              },
              {
                title: "Roulette Masters",
                prize: "7.5 BTC",
                participants: 654,
                timeLeft: "1d 22h 45m",
                status: "Active",
                entry: "0.002 BTC",
              },
              {
                title: "Poker Pro Series",
                prize: "15 BTC",
                participants: 2156,
                timeLeft: "Starting Soon",
                status: "Upcoming",
                entry: "0.01 BTC",
              },
            ].map((tournament) => (
              <div key={tournament.title} className="bg-slate-800 rounded-lg p-6 border border-slate-700">
                <div className="flex justify-between items-start mb-4">
                  <h3 className="text-xl font-bold text-white">{tournament.title}</h3>
                  <span
                    className={`px-3 py-1 rounded-full text-sm font-semibold ${
                      tournament.status === "Active" ? "bg-green-500 text-white" : "bg-yellow-500 text-black"
                    }`}
                  >
                    {tournament.status}
                  </span>
                </div>

<div className="grid grid-cols-2 gap-4 mb-6">
                  <div>
                    <p className="text-gray-400 text-sm">Prize Pool</p>
                    <p className="text-2xl font-bold text-orange-500">{tournament.prize}</p>
                  </div>
                  <div>
                    <p className="text-gray-400 text-sm">Entry Fee</p>
                    <p className="text-xl font-semibold text-white">{tournament.entry}</p>
                  </div>
                  <div>
                    <p className="text-gray-400 text-sm">Participants</p>
                    <p className="text-xl font-semibold text-white">{tournament.participants.toLocaleString()}</p>
                  </div>
                  <div>
                    <p className="text-gray-400 text-sm">Time Left</p>
                    <p className="text-xl font-semibold text-white">{tournament.timeLeft}</p>
                  </div>
                </div>

<button className="w-full bg-orange-500 hover:bg-orange-600 text-white py-3 rounded-lg font-semibold">
                  {tournament.status === "Active" ? "Join Tournament" : "Register Now"}
                </button>
              </div>
            ))}
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contact/page.tsx" isEdit="true" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Mail, Phone, MapPin, Clock } from "lucide-react"

export default function ContactPage() {
  const contactInfo = [
    {
      icon: Mail,
      title: "Email Support",
      details: "support@cryptomoney.com",
      description: "Get help via email within 24 hours",
    },
    {
      icon: Phone,
      title: "Live Chat",
      details: "Available 24/7",
      description: "Instant support through live chat",
    },
    {
      icon: MapPin,
      title: "Address",
      details: "123 Blockchain Avenue, Crypto City",
      description: "Our headquarters location",
    },
    {
      icon: Clock,
      title: "Response Time",
      details: "< 2 hours",
      description: "Average response time for all inquiries",
    },
  ]

return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="py-16 pt-32">
        <div className="container mx-auto px-4">
          {/* Header */}
          <div className="text-center mb-16">
            <h1 className="text-4xl lg:text-5xl font-bold text-white mb-6">Contact Us</h1>
            <p className="text-gray-300 text-lg max-w-2xl mx-auto">
              Have questions or need assistance? Our support team is here to help you 24/7.
            </p>
          </div>

<div className="grid lg:grid-cols-2 gap-12">
            {/* Contact Form */}
            <Card className="bg-slate-800 border-slate-700 p-8">
              <h2 className="text-2xl font-bold text-white mb-6">Send us a Message</h2>
              <form className="space-y-6">
                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="firstName" className="text-gray-300">
                      First Name
                    </Label>
                    <Input
                      id="firstName"
                      className="bg-slate-700 border-slate-600 text-white mt-1"
                      placeholder="Enter your first name"
                    />
                  </div>
                  <div>
                    <Label htmlFor="lastName" className="text-gray-300">
                      Last Name
                    </Label>
                    <Input
                      id="lastName"
                      className="bg-slate-700 border-slate-600 text-white mt-1"
                      placeholder="Enter your last name"
                    />
                  </div>
                </div>

<div>
                  <Label htmlFor="email" className="text-gray-300">
                    Email Address
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    className="bg-slate-700 border-slate-600 text-white mt-1"
                    placeholder="Enter your email"
                  />
                </div>

<div>
                  <Label htmlFor="subject" className="text-gray-300">
                    Subject
                  </Label>
                  <Input
                    id="subject"
                    className="bg-slate-700 border-slate-600 text-white mt-1"
                    placeholder="What is this about?"
                  />
                </div>

<div>
                  <Label htmlFor="message" className="text-gray-300">
                    Message
                  </Label>
                  <Textarea
                    id="message"
                    rows={5}
                    className="bg-slate-700 border-slate-600 text-white mt-1"
                    placeholder="Tell us how we can help you..."
                  />
                </div>

<Button className="w-full bg-orange-500 hover:bg-orange-600 text-black font-semibold py-3">
                  Send Message
                </Button>
              </form>
            </Card>

{/* Contact Information */}
            <div className="space-y-8">
              <div>
                <h2 className="text-2xl font-bold text-white mb-6">Get in Touch</h2>
                <p className="text-gray-300 mb-8">
                  We're here to help! Choose the best way to reach us and we'll get back to you as soon as possible.
                </p>
              </div>

<div className="grid gap-6">
                {contactInfo.map((info, index) => (
                  <Card key={index} className="bg-slate-800 border-slate-700 p-6">
                    <div className="flex items-start space-x-4">
                      <div className="w-12 h-12 bg-orange-500 rounded-full flex items-center justify-center flex-shrink-0">
                        <info.icon className="w-6 h-6 text-black" />
                      </div>
                      <div>
                        <h3 className="text-white font-semibold mb-1">{info.title}</h3>
                        <p className="text-orange-500 font-medium mb-1">{info.details}</p>
                        <p className="text-gray-400 text-sm">{info.description}</p>
                      </div>
                    </div>
                  </Card>
                ))}
              </div>

{/* FAQ Link */}
              <Card className="bg-slate-800 border-slate-700 p-6">
                <h3 className="text-white font-semibold mb-2">Frequently Asked Questions</h3>
                <p className="text-gray-300 mb-4">Check out our FAQ section for quick answers to common questions.</p>
                <Button
                  variant="outline"
                  className="border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-black bg-transparent"
                >
                  View FAQ
                </Button>
              </Card>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/casino/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { GamesSection } from "@/components/games-section"

export default function CasinoPage() {
  return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="pt-20">
        <div className="container mx-auto px-4 py-8">
          <div className="text-center mb-8">
            <h1 className="text-4xl font-bold text-white mb-4">Casino Games</h1>
            <p className="text-gray-400 text-lg">Discover our extensive collection of casino games</p>
          </div>
          <GamesSection />
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/online-counter.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function OnlineCounter() {
  const [onlineCount, setOnlineCount] = useState(1247)

useEffect(() => {
    const interval = setInterval(
      () => {
        // Случайное изменение от -5 до +10 игроков каждые 3-8 секунд
        const change = Math.floor(Math.random() * 16) - 5
        setOnlineCount((prev) => {
          const newCount = prev + change
          // Держим счетчик в разумных пределах (800-2000)
          return Math.max(800, Math.min(2000, newCount))
        })
      },
      Math.random() * 5000 + 3000,
    ) // Случайный интервал 3-8 секунд

return () => clearInterval(interval)
  }, [])

return (
    <div className="flex items-center space-x-2">
      <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
      <span className="text-green-400 font-semibold">{onlineCount.toLocaleString()}</span>
      <span className="text-gray-400">players online</span>
    </div>
  )
}
[V0_FILE]jpg:file="public/number-guessing-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/number-guessing-game-ATizZwgJtBNbHBbsVm0lqStX7SKW1S.jpg" isMerged="true"
[V0_FILE]jpg:file="public/rock-paper-scissors-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/rock-paper-scissors-game-0P45gOVBYHHA3ShPdiWTHQNEnzhOUp.jpg" isMerged="true"
[V0_FILE]jpg:file="public/spin-wheel-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/spin-wheel-game-Bzi8PkOc5LMqjgf0J77lROq64uvTvJ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/blackjack-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/blackjack-game-7hf4cGeTFluQbSE7CeZPlg85oV2bxZ.jpg" isMerged="true"
[V0_FILE]jpg:file="public/card-finding-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/card-finding-game-MSGJv7cXyQcxrMLZu0GBYAGUk4M6Mm.jpg" isMerged="true"
[V0_FILE]jpg:file="public/casino-dice-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/casino-dice-game-ndppxtwQDzkxkzivDmORK3cFnUH4uC.jpg" isMerged="true"
[V0_FILE]jpg:file="public/color-prediction-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/color-prediction-game-Noi4JNlzyAgMzitAi7i6JXDIH2nOkW.jpg" isMerged="true"
[V0_FILE]jpg:file="public/crazy-time-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/crazy-time-game-GCE5Qpabwc3QANXeIOBeRB6xmD9DxA.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dice-rolling-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dice-rolling-game-LwsbXnXkDmUe3EqJHYjwh9cvdvcjn6.jpg" isMerged="true"
[V0_FILE]jpg:file="public/slot-machine-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slot-machine-game-5ctptMLAxN8FDMeSIGD6FmcQWWzQ7h.jpg" isMerged="true"
[V0_FILE]jpg:file="public/poker-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/poker-game-aDJNQnOUsujU185yPRBMYApnuRmgct.jpg" isMerged="true"
[V0_FILE]jpg:file="public/pool-number-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/pool-number-game-LMS2yOfEP5596NCsTaBaTfb7jdmoPq.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="app/help/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function HelpPage() {
  return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="pt-20 pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h1 className="text-4xl font-bold text-white mb-8">Help & Support</h1>

<div className="grid md:grid-cols-2 gap-8">
              <div className="bg-slate-800 p-6 rounded-lg border border-slate-700">
                <h2 className="text-2xl font-bold text-orange-500 mb-4">Frequently Asked Questions</h2>
                <div className="space-y-4">
                  <div>
                    <h3 className="text-white font-semibold mb-2">How do I create an account?</h3>
                    <p className="text-gray-400">
                      Click the "SIGN UP" button and fill in your details. Verification is instant!
                    </p>
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-2">How do I deposit funds?</h3>
                    <p className="text-gray-400">
                      Go to your profile and click "Deposit". We accept crypto and traditional payment methods.
                    </p>
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-2">Are the games fair?</h3>
                    <p className="text-gray-400">
                      Yes! All our games use provably fair algorithms and are regularly audited.
                    </p>
                  </div>
                </div>
              </div>

<div className="bg-slate-800 p-6 rounded-lg border border-slate-700">
                <h2 className="text-2xl font-bold text-orange-500 mb-4">Contact Support</h2>
                <div className="space-y-4">
                  <div>
                    <h3 className="text-white font-semibold mb-2">Live Chat</h3>
                    <p className="text-gray-400">Available 24/7 for instant assistance</p>
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-2">Email</h3>
                    <p className="text-gray-400">support@cryptomoney.com</p>
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-2">Response Time</h3>
                    <p className="text-gray-400">Usually within 5 minutes</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/responsible-gaming/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"

export default function ResponsibleGamingPage() {
  return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="pt-20 pb-16">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto">
            <h1 className="text-4xl font-bold text-white mb-8">Responsible Gaming</h1>

<div className="bg-slate-800 p-8 rounded-lg border border-slate-700 mb-8">
              <h2 className="text-2xl font-bold text-orange-500 mb-6">Our Commitment</h2>
              <p className="text-gray-300 mb-6 leading-relaxed">
                At CryptoMoney, we are committed to promoting responsible gaming and ensuring that our platform remains
                a source of entertainment rather than a problem. We provide tools and resources to help you maintain
                control over your gaming activities.
              </p>

<div className="grid md:grid-cols-2 gap-6">
                <div>
                  <h3 className="text-xl font-semibold text-white mb-4">Self-Control Tools</h3>
                  <ul className="space-y-2 text-gray-400">
                    <li>• Deposit limits</li>
                    <li>• Session time limits</li>
                    <li>• Loss limits</li>
                    <li>• Self-exclusion options</li>
                    <li>• Reality checks</li>
                  </ul>
                </div>

<div>
                  <h3 className="text-xl font-semibold text-white mb-4">Warning Signs</h3>
                  <ul className="space-y-2 text-gray-400">
                    <li>• Spending more than you can afford</li>
                    <li>• Chasing losses</li>
                    <li>• Gaming affecting relationships</li>
                    <li>• Neglecting responsibilities</li>
                    <li>• Feeling anxious when not gaming</li>
                  </ul>
                </div>
              </div>
            </div>

<div className="bg-slate-800 p-8 rounded-lg border border-slate-700">
              <h2 className="text-2xl font-bold text-orange-500 mb-6">Get Help</h2>
              <p className="text-gray-300 mb-4">
                If you or someone you know needs help with gambling addiction, these organizations provide support:
              </p>
              <div className="space-y-2 text-gray-400">
                <p>• Gamblers Anonymous: www.gamblersanonymous.org</p>
                <p>• National Council on Problem Gambling: www.ncpgambling.org</p>
                <p>• GamCare: www.gamcare.org.uk</p>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/language-context.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"
import { translations, type Language, type TranslationKey } from "./translations"

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
  t: (key: TranslationKey) => string
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [language, setLanguageState] = useState<Language>("en")

useEffect(() => {
    const saved = localStorage.getItem("language") as Language
    if (saved && translations[saved]) {
      setLanguageState(saved)
    }
  }, [])

const setLanguage = (lang: Language) => {
    setLanguageState(lang)
    localStorage.setItem("language", lang)
  }

const t = (key: TranslationKey): string => {
    return translations[language][key] || translations.en[key] || key
  }

return <LanguageContext.Provider value={{ language, setLanguage, t }}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Menu, X, User, Wallet, LogOut, Search } from "lucide-react"
import { LoginModal } from "@/components/auth/login-modal"
import { RegisterModal } from "@/components/auth/register-modal"
import { useAuth } from "@/components/auth/auth-provider"
import { LanguageSwitcher } from "@/components/language-switcher"
import { useLanguage } from "@/lib/language-context"

export function Header() {
  const [isMenuOpen, setIsMenuOpen] = useState(false)
  const [isLoginOpen, setIsLoginOpen] = useState(false)
  const [isRegisterOpen, setIsRegisterOpen] = useState(false)
  const { user, isAuthenticated, logout } = useAuth()
  const { t } = useLanguage()

const handleSwitchToRegister = () => {
    setIsLoginOpen(false)
    setIsRegisterOpen(true)
  }

const handleSwitchToLogin = () => {
    setIsRegisterOpen(false)
    setIsLoginOpen(true)
  }

return (
    <>
      {/* Top bar */}
      <div className="bg-slate-800 border-b border-slate-700">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-10 text-sm">
            <div className="flex items-center space-x-6 text-gray-300">
              <span className="flex items-center space-x-2">
                <span className="w-2 h-2 bg-green-500 rounded-full"></span>
                <span>Live Support 24/7</span>
              </span>
              <span>🎁 Welcome Bonus up to $1000</span>
            </div>
            <div className="flex items-center space-x-4 text-gray-300">
              <Link href="/help" className="hover:text-orange-500 transition-colors">
                {t("help")}
              </Link>
              <Link href="/responsible-gaming" className="hover:text-orange-500 transition-colors">
                {t("responsibleGaming")}
              </Link>
              <LanguageSwitcher />
            </div>
          </div>
        </div>
      </div>

{/* Main header */}
      <header className="bg-slate-900/95 backdrop-blur-sm border-b border-slate-700 sticky top-0 z-50">
        <div className="container mx-auto px-4">
          <div className="flex items-center justify-between h-16">
            {/* Logo */}
            <Link href="/" className="flex items-center space-x-3">
              <div className="w-10 h-10 bg-gradient-to-r from-orange-500 to-orange-600 rounded-lg flex items-center justify-center shadow-lg">
                <span className="text-white font-bold text-lg">C</span>
              </div>
              <div className="flex flex-col">
                <span className="text-white font-bold text-xl">CryptoMoney</span>
                <span className="text-orange-500 text-xs font-medium">CASINO</span>
              </div>
            </Link>

{/* Navigation */}
            <nav className="hidden lg:flex items-center space-x-8">
              <Link href="/casino" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                {t("casino").toUpperCase()}
              </Link>
              <Link href="/sports" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                {t("sports").toUpperCase()}
              </Link>
              <Link href="/promotions" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                {t("promotions").toUpperCase()}
              </Link>
              <Link href="/tournaments" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                {t("tournaments").toUpperCase()}
              </Link>
              <Link href="/vip" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                {t("vipClub").toUpperCase()}
              </Link>
            </nav>

{/* Auth buttons */}
            <div className="hidden lg:flex items-center space-x-4">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
                <input
                  type="text"
                  placeholder={t("searchGames")}
                  className="bg-slate-800 border border-slate-600 rounded-lg pl-10 pr-4 py-2 text-white placeholder-gray-400 focus:outline-none focus:border-orange-500 w-48"
                />
              </div>

{isAuthenticated ? (
                <>
                  <div className="flex items-center space-x-2 bg-slate-800 px-3 py-2 rounded-lg border border-slate-600">
                    <Wallet className="w-4 h-4 text-orange-500" />
                    <span className="text-white font-semibold">${user?.balance}</span>
                  </div>
                  <Link href="/profile">
                    <div className="flex items-center space-x-2 text-white hover:text-orange-500 transition-colors cursor-pointer bg-slate-800 px-3 py-2 rounded-lg border border-slate-600">
                      <User className="w-4 h-4" />
                      <span>{user?.username}</span>
                    </div>
                  </Link>
                  <Button
                    onClick={logout}
                    variant="outline"
                    className="border-slate-600 text-gray-300 hover:bg-slate-800 bg-transparent hover:border-orange-500"
                  >
                    <LogOut className="w-4 h-4 mr-2" />
                    {t("logout").toUpperCase()}
                  </Button>
                </>
              ) : (
                <>
                  <Button
                    onClick={() => setIsLoginOpen(true)}
                    variant="outline"
                    className="border-slate-600 text-gray-300 hover:bg-slate-800 bg-transparent hover:border-orange-500 hover:text-orange-500"
                  >
                    <User className="w-4 h-4 mr-2" />
                    {t("login").toUpperCase()}
                  </Button>
                  <Button
                    onClick={() => setIsRegisterOpen(true)}
                    className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold shadow-lg glow-orange"
                  >
                    {t("register").toUpperCase()}
                  </Button>
                </>
              )}
            </div>

{/* Mobile Menu Button */}
            <button className="lg:hidden text-white" onClick={() => setIsMenuOpen(!isMenuOpen)}>
              {isMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
            </button>
          </div>

{/* Mobile menu */}
          {isMenuOpen && (
            <div className="lg:hidden py-4 border-t border-slate-700">
              <nav className="flex flex-col space-y-4">
                <Link href="/casino" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                  {t("casino").toUpperCase()}
                </Link>
                <Link href="/sports" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                  {t("sports").toUpperCase()}
                </Link>
                <Link href="/promotions" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                  {t("promotions").toUpperCase()}
                </Link>
                <Link href="/tournaments" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                  {t("tournaments").toUpperCase()}
                </Link>
                <Link href="/vip" className="text-gray-300 hover:text-orange-500 transition-colors font-medium">
                  {t("vipClub").toUpperCase()}
                </Link>

<div className="flex flex-col space-y-2">
                    {isAuthenticated ? (
                      <>
                        <div className="text-white text-center py-2 bg-slate-800 rounded-lg border border-slate-600">
                          Welcome, {user?.username}! Balance: ${user?.balance}
                        </div>
                        <Link href="/profile">
                          <Button
                            variant="outline"
                            className="w-full border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white bg-transparent"
                          >
                            {t("profile").toUpperCase()}
                          </Button>
                        </Link>
                        <Button
                          onClick={logout}
                          variant="outline"
                          className="border-slate-600 text-gray-300 hover:bg-slate-800 bg-transparent"
                        >
                          {t("logout").toUpperCase()}
                        </Button>
                      </>
                    ) : (
                      <>
                        <Button
                          onClick={() => setIsLoginOpen(true)}
                          variant="outline"
                          className="border-slate-600 text-gray-300 hover:bg-slate-800 bg-transparent hover:border-orange-500 hover:text-orange-500"
                        >
                          {t("login").toUpperCase()}
                        </Button>
                        <Button
                          onClick={() => setIsRegisterOpen(true)}
                          className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold"
                        >
                          {t("register").toUpperCase()}
                        </Button>
                      </>
                    )}
                  </div>
                </div>
              </nav>
            </div>
          )}
        </div>
      </header>

<LoginModal
        isOpen={isLoginOpen}
        onClose={() => setIsLoginOpen(false)}
        onSwitchToRegister={handleSwitchToRegister}
      />
      <RegisterModal
        isOpen={isRegisterOpen}
        onClose={() => setIsRegisterOpen(false)}
        onSwitchToLogin={handleSwitchToLogin}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { useAuth } from "@/components/auth/auth-provider"
import { useState } from "react"
import { LoginModal } from "@/components/auth/login-modal"
import { RegisterModal } from "@/components/auth/register-modal"
import { useLanguage } from "@/lib/language-context"
import Link from "next/link"

export function HeroSection() {
  const { isAuthenticated } = useAuth()
  const [showLogin, setShowLogin] = useState(false)
  const [showRegister, setShowRegister] = useState(false)
  const { t } = useLanguage()

return (
    <>
      <section className="relative bg-gradient-to-br from-slate-900 via-blue-950 to-slate-900 py-32 overflow-hidden">
        {/* Background pattern */}
        <div className="absolute inset-0 opacity-10">
          <div
            className="absolute inset-0"
            style={{
              backgroundImage: `radial-gradient(circle at 25% 25%, #f97316 0%, transparent 50%), 
                             radial-gradient(circle at 75% 75%, #ea580c 0%, transparent 50%)`,
            }}
          ></div>
        </div>

{/* Floating crypto symbols */}
        <div className="absolute inset-0 overflow-hidden">
          <div className="absolute top-20 left-20 text-orange-500/20 text-4xl animate-pulse">₿</div>
          <div className="absolute top-40 right-32 text-orange-400/20 text-3xl animate-bounce">Ξ</div>
          <div className="absolute bottom-40 left-40 text-orange-500/20 text-5xl animate-pulse">₿</div>
          <div className="absolute bottom-20 right-20 text-orange-400/20 text-2xl animate-bounce">Ξ</div>
          <div className="absolute top-60 left-60 text-orange-500/20 text-3xl animate-pulse">₿</div>
        </div>

<div className="container mx-auto px-4 relative z-10">
          <div className="text-center space-y-8">
            <h1 className="text-5xl lg:text-7xl font-bold text-white mb-4">
              {t("welcomeTo")} <span className="text-orange-500">CryptoMoney</span>
            </h1>

<p className="text-xl lg:text-2xl text-gray-300 mb-8 max-w-4xl mx-auto">{t("heroTitle")}</p>

<p className="text-lg text-gray-400 mb-12 max-w-3xl mx-auto leading-relaxed">{t("heroSubtitle")}</p>

<div className="flex flex-col sm:flex-row gap-6 justify-center items-center mb-16">
              {isAuthenticated ? (
                <Link href="/games">
                  <Button className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-bold px-12 py-4 text-lg rounded-xl transition-all duration-300 hover:scale-105 shadow-lg">
                    🎮 {t("playNow")}
                  </Button>
                </Link>
              ) : (
                <>
                  <Button
                    onClick={() => setShowRegister(true)}
                    className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-bold px-12 py-4 text-lg rounded-xl transition-all duration-300 hover:scale-105 shadow-lg"
                  >
                    🎮 {t("playNow")}
                  </Button>
                  <Button
                    onClick={() => setShowLogin(true)}
                    variant="outline"
                    className="border-2 border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-12 py-4 text-lg rounded-xl bg-transparent transition-all duration-300 hover:scale-105 font-bold"
                  >
                    📚 {t("learnMore")}
                  </Button>
                </>
              )}
            </div>

<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
              <div className="text-center">
                <div className="text-3xl font-bold text-orange-500 mb-2">⭐ 2,947</div>
                <div className="text-sm text-gray-400">{t("playersOnline")}</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-orange-500 mb-2">🏆 $12,450</div>
                <div className="text-sm text-gray-400">{t("lastWin")}</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-orange-500 mb-2">🎯 2,500+</div>
                <div className="text-sm text-gray-400">{t("gamesAvailable")}</div>
              </div>
              <div className="text-center">
                <div className="text-3xl font-bold text-orange-500 mb-2">💰 $2.5M</div>
                <div className="text-sm text-gray-400">{t("totalPayouts")}</div>
              </div>
            </div>
          </div>
        </div>
      </section>

<LoginModal isOpen={showLogin} onClose={() => setShowLogin(false)} />
      <RegisterModal isOpen={showRegister} onClose={() => setShowRegister(false)} />
    </>
  )
}
[V0_FILE]jpg:file="public/baccarat-card-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/baccarat-card-game-41tQ2KT23gv8YDppFbBFEHVh7R8UhR.jpg" isMerged="true"
[V0_FILE]jpg:file="public/crash-crypto-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/crash-crypto-game-8R10g1cEs2h7vn5FOVOZdIr3zsaFV5.jpg" isMerged="true"
[V0_FILE]jpg:file="public/plinko-casino-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/plinko-casino-game-FkUv6HgkRd1BAeFJKALAsPGYkoWvka.jpg" isMerged="true"
[V0_FILE]jpg:file="public/limbo-casino-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/limbo-casino-game-k59SHaORfbkfdbUfTPRQDlC6zqFUyR.jpg" isMerged="true"
[V0_FILE]jpg:file="public/dragon-tiger-card-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dragon-tiger-card-game-HiI7KTzOiHtG0Udj0cz2EwG5s5282I.jpg" isMerged="true"
[V0_FILE]png:file="public/generic-crash-game.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/generic-crash-game-3LxPdMeH8JWC88bA9kxsXSMkztcumT.png" isMerged="true"
[V0_FILE]jpg:file="public/wheel-of-fortune.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/wheel-of-fortune-cnAymsUbuoNtGJFVR3PFuOn7bqnzQj.jpg" isMerged="true"
[V0_FILE]jpg:file="public/hi-lo-card-game.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/hi-lo-card-game-RLrPS26UDpauQReR2rfamt8sqEFawN.jpg" isMerged="true"
[V0_FILE]typescriptreact:file="components/games/dice-rolling-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/components/auth/auth-provider"
import { useToast } from "@/hooks/use-toast"
import { Dices, TrendingUp, TrendingDown } from "lucide-react"

export function DiceRollingGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { toast } = useToast()
  const [bet, setBet] = useState(10)
  const [prediction, setPrediction] = useState<"over" | "under" | null>(null)
  const [targetNumber, setTargetNumber] = useState(7)
  const [diceResult, setDiceResult] = useState<number[]>([1, 1])
  const [isRolling, setIsRolling] = useState(false)
  const [gameResult, setGameResult] = useState<"win" | "lose" | null>(null)

const rollDice = () => {
    if (!prediction || !isAuthenticated) return

if (!user || user.balance < bet) {
      toast({
        title: "Insufficient Balance",
        description: "You don't have enough balance to place this bet.",
        variant: "destructive",
      })
      return
    }

updateBalance(-bet)
    setIsRolling(true)
    setGameResult(null)

let rollCount = 0
    const rollInterval = setInterval(() => {
      setDiceResult([Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1])
      rollCount++
    }, 100)

setTimeout(() => {
      clearInterval(rollInterval)

const finalDice = [Math.floor(Math.random() * 6) + 1, Math.floor(Math.random() * 6) + 1]
      const total = finalDice[0] + finalDice[1]

setDiceResult(finalDice)

let won = false
      if (prediction === "over" && total > targetNumber) {
        won = true
      } else if (prediction === "under" && total < targetNumber) {
        won = true
      }

if (won) {
        const winAmount = bet * 1.95
        updateBalance(winAmount)
        toast({
          title: "You Won!",
          description: `+$${winAmount.toFixed(2)}`,
        })
      } else {
        toast({
          title: "You Lost",
          description: `-$${bet}`,
          variant: "destructive",
        })
      }

setGameResult(won ? "win" : "lose")
      setIsRolling(false)
    }, 2000)
  }

const resetGame = () => {
    setPrediction(null)
    setGameResult(null)
    setDiceResult([1, 1])
  }

const getDiceFace = (value: number) => {
    const faces = ["⚀", "⚁", "⚂", "⚃", "⚄", "⚅"]
    return faces[value - 1]
  }

const total = diceResult[0] + diceResult[1]

return (
    <Card className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 border-orange-500/20 p-8 shadow-2xl">
      <div className="text-center space-y-6">
        <div className="mb-6">
          <h2 className="text-3xl font-bold text-white mb-2 flex items-center justify-center gap-2">
            <Dices className="w-8 h-8 text-orange-500" />
            Dice Roll
          </h2>
          <p className="text-gray-400">Predict if the total will be over or under the target</p>
        </div>

<div className="flex justify-center space-x-6 my-8">
          {diceResult.map((die, index) => (
            <div
              key={index}
              className={`w-28 h-28 bg-gradient-to-br from-white to-gray-200 rounded-2xl flex items-center justify-center text-6xl border-4 border-gray-300 shadow-2xl transform transition-all duration-300 ${
                isRolling ? "animate-spin" : "hover:scale-110"
              }`}
              style={{
                boxShadow: "0 10px 30px rgba(0,0,0,0.3), inset 0 2px 10px rgba(255,255,255,0.5)",
              }}
            >
              {getDiceFace(die)}
            </div>
          ))}
        </div>

<div className="bg-slate-800/50 rounded-xl p-6 border border-orange-500/20">
          <div className="text-xl text-gray-400 mb-2">Total Roll</div>
          <div className="text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-orange-400 to-yellow-500">
            {total}
          </div>
        </div>

{gameResult && (
          <div
            className={`p-6 rounded-xl border-2 ${gameResult === "win" ? "bg-green-500/20 border-green-500" : "bg-red-500/20 border-red-500"}`}
          >
            <div className={`text-3xl font-bold ${gameResult === "win" ? "text-green-400" : "text-red-400"}`}>
              {gameResult === "win" ? `+$${(bet * 1.95).toFixed(2)}` : `-$${bet}`}
            </div>
          </div>
        )}

{/* Game Controls */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label className="block text-white font-semibold mb-2">Bet Amount</label>
            <Input
              type="number"
              value={bet}
              onChange={(e) => setBet(Number(e.target.value))}
              min="1"
              max="300"
              className="bg-slate-700/50 border-orange-500/30 text-white text-center text-lg font-semibold"
              disabled={isRolling}
            />
          </div>

<div>
            <label className="block text-white font-semibold mb-2">Target Number</label>
            <Input
              type="number"
              value={targetNumber}
              onChange={(e) => setTargetNumber(Math.min(11, Math.max(2, Number(e.target.value))))}
              min="2"
              max="11"
              className="bg-slate-700/50 border-orange-500/30 text-white text-center text-lg font-semibold"
              disabled={isRolling}
            />
          </div>
        </div>

<div>
          <label className="block text-white font-semibold mb-4 text-lg">Your Prediction</label>
          <div className="flex justify-center space-x-4">
            <Button
              onClick={() => setPrediction("over")}
              variant={prediction === "over" ? "default" : "outline"}
              className={`px-8 py-6 text-lg font-bold transition-all ${
                prediction === "over"
                  ? "bg-gradient-to-r from-green-600 to-green-700 text-white shadow-lg shadow-green-500/50"
                  : "border-2 border-green-600 text-green-400 hover:bg-green-600/20 bg-transparent"
              }`}
              disabled={isRolling}
            >
              <TrendingUp className="w-5 h-5 mr-2" />
              Over {targetNumber}
            </Button>
            <Button
              onClick={() => setPrediction("under")}
              variant={prediction === "under" ? "default" : "outline"}
              className={`px-8 py-6 text-lg font-bold transition-all ${
                prediction === "under"
                  ? "bg-gradient-to-r from-red-600 to-red-700 text-white shadow-lg shadow-red-500/50"
                  : "border-2 border-red-600 text-red-400 hover:bg-red-600/20 bg-transparent"
              }`}
              disabled={isRolling}
            >
              <TrendingDown className="w-5 h-5 mr-2" />
              Under {targetNumber}
            </Button>
          </div>
        </div>

{/* Action Buttons */}
        <div className="flex justify-center space-x-4">
          {!isAuthenticated ? (
            <div className="text-gray-400 text-lg">Please login to play</div>
          ) : (
            <>
              <Button
                onClick={rollDice}
                disabled={!prediction || isRolling}
                className="bg-gradient-to-r from-orange-500 to-yellow-500 hover:from-orange-600 hover:to-yellow-600 text-black font-bold px-12 py-6 text-lg shadow-lg shadow-orange-500/50"
              >
                {isRolling ? "Rolling..." : `Roll Dice ($${bet})`}
              </Button>
              <Button
                onClick={resetGame}
                variant="outline"
                className="border-orange-500 text-orange-400 hover:bg-orange-500/20 bg-transparent px-8 py-6 text-lg"
              >
                Reset
              </Button>
            </>
          )}
        </div>

{/* Balance Display */}
        {isAuthenticated && (
          <div className="p-4 bg-slate-800/50 rounded-lg border border-orange-500/20">
            <span className="text-gray-300 text-lg">Balance: </span>
            <span className="text-orange-400 font-bold text-2xl">${user?.balance.toFixed(2)}</span>
          </div>
        )}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/games/keno-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export function KenoGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { toast } = useToast()
  const [bet, setBet] = useState(5)
  const [selectedNumbers, setSelectedNumbers] = useState<number[]>([])
  const [drawnNumbers, setDrawnNumbers] = useState<number[]>([])
  const [isDrawing, setIsDrawing] = useState(false)
  const [gameResult, setGameResult] = useState<{ matches: number; payout: number } | null>(null)

const payoutTable: { [key: number]: { [key: number]: number } } = {
    1: { 1: 3 },
    2: { 2: 12 },
    3: { 2: 1, 3: 42 },
    4: { 2: 1, 3: 4, 4: 108 },
    5: { 3: 1, 4: 12, 5: 810 },
    6: { 3: 1, 4: 3, 5: 23, 6: 1600 },
    7: { 4: 1, 5: 6, 6: 98, 7: 7000 },
    8: { 5: 2, 6: 25, 7: 1000, 8: 25000 },
    9: { 5: 1, 6: 6, 7: 187, 8: 4700, 9: 50000 },
    10: { 5: 1, 6: 2, 7: 25, 8: 400, 9: 4500, 10: 100000 },
  }

const toggleNumber = (number: number) => {
    if (isDrawing) return

if (selectedNumbers.includes(number)) {
      setSelectedNumbers(selectedNumbers.filter((n) => n !== number))
    } else if (selectedNumbers.length < 10) {
      setSelectedNumbers([...selectedNumbers, number])
    }
  }

const drawNumbers = () => {
    if (selectedNumbers.length === 0 || !isAuthenticated) return

updateBalance(-bet)
    setIsDrawing(true)
    setGameResult(null)
    setDrawnNumbers([])

const currentDrawn: number[] = []
    const drawInterval = setInterval(() => {
      if (currentDrawn.length < 20) {
        let newNumber
        do {
          newNumber = Math.floor(Math.random() * 80) + 1
        } while (currentDrawn.includes(newNumber))

currentDrawn.push(newNumber)
        setDrawnNumbers([...currentDrawn])
      } else {
        clearInterval(drawInterval)

const matches = selectedNumbers.filter((num) => currentDrawn.includes(num)).length
        const selectedCount = selectedNumbers.length
        const multiplier = payoutTable[selectedCount]?.[matches] || 0
        const payout = multiplier * bet

if (payout > 0) {
          updateBalance(payout)
          toast({
            title: `${matches} Matches!`,
            description: `You won $${payout.toFixed(2)}!`,
          })
        } else {
          toast({
            title: "No Win",
            description: `Better luck next time!`,
            variant: "destructive",
          })
        }

setGameResult({ matches, payout })
        setIsDrawing(false)
      }
    }, 150)
  }

const resetGame = () => {
    setSelectedNumbers([])
    setDrawnNumbers([])
    setGameResult(null)
  }

return (
    <Card className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 border-orange-500/20 p-8 shadow-2xl">
      <div className="space-y-6">
        <div className="text-center mb-6">
          <h2 className="text-3xl font-bold text-white mb-2 flex items-center justify-center gap-2">
            <CircleDot className="w-8 h-8 text-orange-500" />
            Keno
          </h2>
          <p className="text-gray-400">Pick up to 10 numbers and match them with 20 drawn numbers</p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div>
            <label className="block text-white font-semibold mb-2">Bet Amount</label>
            <Input
              type="number"
              value={bet}
              onChange={(e) => setBet(Number(e.target.value))}
              min="1"
              max="50"
              className="bg-slate-700/50 border-orange-500/30 text-white text-lg font-semibold"
              disabled={isDrawing}
            />
          </div>
          <div>
            <label className="block text-white font-semibold mb-2">Selected Numbers</label>
            <div className="bg-gradient-to-r from-orange-500 to-yellow-500 rounded-md px-3 py-2 text-black text-center text-lg font-bold">
              {selectedNumbers.length}/10
            </div>
          </div>
        </div>

{gameResult && (
          <div
            className={`text-center p-6 rounded-xl border-2 ${gameResult.payout > 0 ? "bg-green-500/20 border-green-500" : "bg-red-500/20 border-red-500"}`}
          >
            <div className="flex items-center justify-center gap-3 mb-2">
              {gameResult.payout > 0 && <Trophy className="w-8 h-8 text-green-400" />}
              <div className="text-2xl text-white">
                Matches: <span className="text-orange-400 font-bold text-3xl">{gameResult.matches}</span>
              </div>
            </div>
            <div className={`text-3xl font-bold ${gameResult.payout > 0 ? "text-green-400" : "text-red-400"}`}>
              {gameResult.payout > 0 ? `+$${gameResult.payout.toFixed(2)}` : `-$${bet}`}
            </div>
          </div>
        )}

<div>
          <h3 className="text-white font-semibold mb-4 text-center text-lg">Select up to 10 numbers (1-80)</h3>
          <div className="grid grid-cols-10 gap-2 max-w-4xl mx-auto p-6 bg-slate-800/50 rounded-xl">
            {Array.from({ length: 80 }, (_, i) => i + 1).map((number) => {
              const isSelected = selectedNumbers.includes(number)
              const isDrawn = drawnNumbers.includes(number)
              const isMatch = isSelected && isDrawn

return (
                <Button
                  key={number}
                  onClick={() => toggleNumber(number)}
                  disabled={isDrawing}
                  className={`w-12 h-12 text-sm font-bold transition-all duration-300 ${
                    isMatch
                      ? "bg-gradient-to-br from-green-500 to-green-700 text-white hover:from-green-600 hover:to-green-800 shadow-lg shadow-green-500/50 scale-110"
                      : isSelected
                        ? "bg-gradient-to-br from-orange-500 to-yellow-500 text-black hover:from-orange-600 hover:to-yellow-600 shadow-md"
                        : isDrawn
                          ? "bg-gradient-to-br from-red-500 to-red-700 text-white hover:from-red-600 hover:to-red-800 shadow-md"
                          : "bg-gradient-to-br from-slate-600 to-slate-700 text-white hover:from-slate-500 hover:to-slate-600"
                  }`}
                >
                  {number}
                </Button>
              )
            })}
          </div>
        </div>

{drawnNumbers.length > 0 && (
          <div className="bg-slate-800/50 rounded-xl p-6 border border-orange-500/20">
            <h3 className="text-white font-semibold mb-4 text-center text-lg">
              Drawn Numbers ({drawnNumbers.length}/20)
            </h3>
            <div className="flex flex-wrap gap-3 justify-center">
              {drawnNumbers.map((number) => (
                <div
                  key={number}
                  className={`w-14 h-14 rounded-full flex items-center justify-center text-lg font-bold shadow-lg transition-all ${
                    selectedNumbers.includes(number)
                      ? "bg-gradient-to-br from-green-500 to-green-700 text-white shadow-green-500/50 scale-110 animate-pulse"
                      : "bg-gradient-to-br from-slate-600 to-slate-700 text-white"
                  }`}
                >
                  {number}
                </div>
              ))}
            </div>
          </div>
        )}

<div className="flex justify-center space-x-4">
          {!isAuthenticated ? (
            <div className="text-gray-400 text-lg">Please login to play</div>
          ) : (
            <>
              <Button
                onClick={drawNumbers}
                disabled={selectedNumbers.length === 0 || isDrawing}
                className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-bold px-12 py-6 text-lg shadow-lg shadow-green-500/50"
              >
                {isDrawing ? "Drawing..." : `Draw Numbers ($${bet})`}
              </Button>
              <Button
                onClick={resetGame}
                variant="outline"
                className="border-orange-500 text-orange-400 hover:bg-orange-500/20 bg-transparent px-8 py-6 text-lg"
              >
                Reset
              </Button>
            </>
          )}
        </div>

{isAuthenticated && (
          <div className="text-center p-4 bg-slate-800/50 rounded-lg border border-orange-500/20">
            <span className="text-gray-300 text-lg">Balance: </span>
            <span className="text-orange-400 font-bold text-2xl">${user?.balance.toFixed(2)}</span>
          </div>
        )}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/games/[slug]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"
import { useParams, useRouter } from "next/navigation"
import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { ArrowLeft } from "lucide-react"
import { CoinFlipGame } from "@/components/games/coin-flip-game"
import { RouletteGame } from "@/components/games/roulette-game"
import { SlotMachineGame } from "@/components/games/slot-machine-game"
import { MinesGame } from "@/components/games/mines-game"
import { KenoGame } from "@/components/games/keno-game"
import { DiceRollingGame } from "@/components/games/dice-rolling-game"
import { BlackjackGame } from "@/components/games/blackjack-game"
import { CrashGame } from "@/components/games/crash-game"
import { PlinkoGame } from "@/components/games/plinko-game"
import { useLanguage } from "@/lib/language-context"

const gameComponents: { [key: string]: React.ComponentType } = {
  "head-tail": CoinFlipGame,
  roulette: RouletteGame,
  "number-slot": SlotMachineGame,
  mines: MinesGame,
  keno: KenoGame,
  "dice-rolling": DiceRollingGame,
  blackjack: BlackjackGame,
  crash: CrashGame,
  plinko: PlinkoGame,
  // Use existing games as placeholders for now
  "number-guessing": CoinFlipGame,
  "rock-paper-scissors": CoinFlipGame,
  "spin-wheel": RouletteGame,
  "card-finding": BlackjackGame,
  "casino-dice": DiceRollingGame,
  "color-prediction": CoinFlipGame,
  "crazy-time": RouletteGame,
  poker: BlackjackGame,
  "pool-number": KenoGame,
  baccarat: BlackjackGame,
  limbo: CrashGame,
  "dragon-tiger": BlackjackGame,
  aviator: CrashGame,
  "wheel-fortune": RouletteGame,
  "hi-lo": BlackjackGame,
}

const gameInfo: { [key: string]: { name: string; description: string; minBet: number; maxBet: number } } = {
  "head-tail": {
    name: "Head & Tail",
    description: "Classic coin flip game. Choose heads or tails and win double your bet!",
    minBet: 1,
    maxBet: 1000,
  },
  roulette: {
    name: "Roulette",
    description: "European roulette with single zero. Place your bets and spin the wheel!",
    minBet: 1,
    maxBet: 500,
  },
  "number-slot": {
    name: "Number Slot",
    description: "Classic 3-reel slot machine with lucky numbers. Match 3 to win big!",
    minBet: 1,
    maxBet: 100,
  },
  mines: {
    name: "Mines",
    description: "Navigate through the minefield and cash out before hitting a mine!",
    minBet: 1,
    maxBet: 200,
  },
  keno: {
    name: "KENO",
    description: "Pick your lucky numbers and watch the draw. More matches = bigger wins!",
    minBet: 1,
    maxBet: 50,
  },
  "dice-rolling": {
    name: "Dice Rolling",
    description: "Roll the dice and predict the outcome. Simple yet exciting!",
    minBet: 1,
    maxBet: 300,
  },
  blackjack: {
    name: "Blackjack",
    description: "Classic card game. Bet on getting closer to 21 without going over!",
    minBet: 5,
    maxBet: 1000,
  },
  crash: {
    name: "Crash",
    description: "Watch the multiplier rise and cash out before it crashes!",
    minBet: 1,
    maxBet: 500,
  },
  plinko: {
    name: "Plinko",
    description: "Drop the ball and watch it bounce to a winning multiplier!",
    minBet: 1,
    maxBet: 100,
  },
  "number-guessing": {
    name: "Number Guessing",
    description: "Guess the number and win big!",
    minBet: 1,
    maxBet: 200,
  },
  "rock-paper-scissors": {
    name: "Rock Paper Scissors",
    description: "Play classic rock paper scissors and win your bet!",
    minBet: 1,
    maxBet: 300,
  },
  "spin-wheel": {
    name: "Spin Wheel",
    description: "Spin the wheel and win up to 50x your bet!",
    minBet: 1,
    maxBet: 300,
  },
  "card-finding": {
    name: "Card Finding",
    description: "Find the matching card and win your bet!",
    minBet: 5,
    maxBet: 1000,
  },
  "casino-dice": {
    name: "Casino Dice",
    description: "Roll the dice and predict the outcome. Simple yet exciting!",
    minBet: 1,
    maxBet: 300,
  },
  "color-prediction": {
    name: "Color Prediction",
    description: "Predict the color of the ball and win your bet!",
    minBet: 1,
    maxBet: 200,
  },
  "crazy-time": {
    name: "Crazy Time",
    description: "Watch the multiplier rise and cash out before it crashes!",
    minBet: 1,
    maxBet: 500,
  },
  poker: {
    name: "Poker",
    description: "Play classic poker and win your bet!",
    minBet: 5,
    maxBet: 1000,
  },
  "pool-number": {
    name: "Pool Number",
    description: "Pick your lucky numbers and watch the draw. More matches = bigger wins!",
    minBet: 1,
    maxBet: 50,
  },
  baccarat: {
    name: "Baccarat",
    description: "Classic card game. Bet on getting closer to 21 without going over!",
    minBet: 5,
    maxBet: 1000,
  },
  limbo: {
    name: "Limbo",
    description: "Watch the multiplier rise and cash out before it crashes!",
    minBet: 1,
    maxBet: 500,
  },
  "dragon-tiger": {
    name: "Dragon Tiger",
    description: "Play classic dragon tiger and win your bet!",
    minBet: 5,
    maxBet: 800,
  },
  aviator: {
    name: "Aviator",
    description: "Fly high and cash out before the plane flies away!",
    minBet: 1,
    maxBet: 500,
  },
  "wheel-fortune": {
    name: "Wheel of Fortune",
    description: "Spin the wheel and win up to 50x your bet!",
    minBet: 1,
    maxBet: 300,
  },
  "hi-lo": {
    name: "Hi-Lo",
    description: "Guess if the next card will be higher or lower!",
    minBet: 1,
    maxBet: 200,
  },
}

export default function GamePage() {
  const params = useParams()
  const router = useRouter()
  const { t } = useLanguage()
  const slug = params.slug as string

const GameComponent = gameComponents[slug]
  const info = gameInfo[slug]

if (!GameComponent || !info) {
    return (
      <div className="min-h-screen bg-slate-900">
        <Header />
        <main className="flex items-center justify-center min-h-[60vh]">
          <Card className="bg-slate-800 border-slate-700 p-8 text-center">
            <h1 className="text-2xl font-bold text-white mb-4">{t("gameNotFound")}</h1>
            <p className="text-gray-300 mb-6">{t("gameNotFoundDesc")}</p>
            <Button
              onClick={() => router.push("/games")}
              className="bg-yellow-500 hover:bg-yellow-600 text-black font-semibold"
            >
              {t("backToGames")}
            </Button>
          </Card>
        </main>
        <Footer />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="py-8">
        <div className="container mx-auto px-4">
          {/* Game Header */}
          <div className="flex items-center justify-between mb-8">
            <Button
              onClick={() => router.push("/games")}
              variant="outline"
              className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
            >
              <ArrowLeft className="w-4 h-4 mr-2" />
              {t("backToGames")}
            </Button>
            <div className="text-center">
              <h1 className="text-3xl lg:text-4xl font-bold text-white mb-2">{info.name}</h1>
              <p className="text-gray-300">{info.description}</p>
            </div>
            <div className="text-right text-sm text-gray-400">
              <div>
                {t("minBet")}: ${info.minBet}
              </div>
              <div>
                {t("maxBet")}: ${info.maxBet}
              </div>
            </div>
          </div>

{/* Game Component */}
          <div className="max-w-4xl mx-auto">
            <GameComponent />
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/games-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { useAuth } from "@/components/auth/auth-provider"
import { useState } from "react"
import { LoginModal } from "@/components/auth/login-modal"
import { useLanguage } from "@/lib/language-context"
import { Search } from "lucide-react"

export function GamesSection() {
  const { isAuthenticated } = useAuth()
  const [showLogin, setShowLogin] = useState(false)
  const { t } = useLanguage()

const games = [
    { name: "Head & Tail", image: "/coin-flip-game.png", slug: "head-tail", category: "Crypto", price: "₿ 1,250,000" },
    { name: "Blackjack", image: "/blackjack-game.jpg", slug: "blackjack", category: "Cards", price: "₿ 4,250,000" },
    { name: "Crash", image: "/crash-crypto-game.jpg", slug: "crash", category: "Crypto", price: "₿ 2,150,000" },
    { name: "Plinko", image: "/plinko-casino-game.jpg", slug: "plinko", category: "Arcade", price: "₿ 1,450,000" },
    {
      name: "Roulette",
      image: "/roulette-casino-game.png",
      slug: "roulette",
      category: "Roulette",
      price: "₿ 2,850,000",
    },
    {
      name: "Number Slot",
      image: "/slot-machine-game.jpg",
      slug: "number-slot",
      category: "Slots",
      price: "₿ 5,500,000",
    },
    { name: "Mines", image: "/mines-casino-game.jpg", slug: "mines", category: "Strategy", price: "₿ 1,850,000" },
    { name: "Keno", image: "/keno-lottery-game.png", slug: "keno", category: "Numbers", price: "₿ 750,000" },
    {
      name: "Dice Rolling",
      image: "/dice-rolling-game.jpg",
      slug: "dice-rolling",
      category: "Dice",
      price: "₿ 4,750,000",
    },
    { name: "Baccarat", image: "/baccarat-card-game.jpg", slug: "baccarat", category: "Cards", price: "₿ 3,250,000" },
    { name: "Limbo", image: "/limbo-casino-game.jpg", slug: "limbo", category: "Crypto", price: "₿ 980,000" },
    {
      name: "Dragon Tiger",
      image: "/dragon-tiger-card-game.jpg",
      slug: "dragon-tiger",
      category: "Cards",
      price: "₿ 2,750,000",
    },
    { name: "Aviator", image: "/generic-crash-game.png", slug: "aviator", category: "Crash", price: "₿ 3,850,000" },
    {
      name: "Wheel of Fortune",
      image: "/wheel-of-fortune.jpg",
      slug: "wheel-fortune",
      category: "Wheel",
      price: "₿ 4,250,000",
    },
    { name: "Hi-Lo", image: "/hi-lo-card-game.jpg", slug: "hi-lo", category: "Cards", price: "₿ 1,150,000" },
    {
      name: "Number Guessing",
      image: "/number-guessing-game.jpg",
      slug: "number-guessing",
      category: "Prediction",
      price: "₿ 847,000",
    },
    {
      name: "Rock Paper Scissors",
      image: "/rock-paper-scissors-game.jpg",
      slug: "rock-paper-scissors",
      category: "Classic",
      price: "₿ 850,000",
    },
    { name: "Spin Wheel", image: "/spin-wheel-game.jpg", slug: "spin-wheel", category: "Wheel", price: "₿ 4,845,000" },
    {
      name: "Card Finding",
      image: "/card-finding-game.jpg",
      slug: "card-finding",
      category: "Cards",
      price: "₿ 1,850,000",
    },
    {
      name: "Casino Dice",
      image: "/casino-dice-game.jpg",
      slug: "casino-dice",
      category: "Dice",
      price: "₿ 1,850,000",
    },
    {
      name: "Color Prediction",
      image: "/color-prediction-game.jpg",
      slug: "color-prediction",
      category: "Prediction",
      price: "₿ 5,750,000",
    },
    { name: "Crazy Time", image: "/crazy-time-game.jpg", slug: "crazy-time", category: "Live", price: "₿ 5,550,000" },
    { name: "Poker", image: "/poker-game.jpg", slug: "poker", category: "Cards", price: "₿ 5,550,000" },
    { name: "Pool Number", image: "/pool-number-game.jpg", slug: "pool-number", category: "Pool", price: "₿ 850,000" },
    // Additional games can be added here
  ]

const handlePlayClick = (slug: string) => {
    if (!isAuthenticated) {
      setShowLogin(true)
      return
    }
    window.location.href = `/games/${slug}`
  }

return (
    <>
      <section className="bg-slate-900 py-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">{t("featuredGames")}</h2>
            <p className="text-gray-400 text-lg max-w-3xl mx-auto mb-8">{t("gamesDescription")}</p>
          </div>

<div className="mb-8">
            <div className="relative max-w-md">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
              <input
                type="text"
                placeholder={t("searchGames")}
                className="w-full bg-slate-800 border border-slate-600 rounded-lg pl-10 pr-4 py-3 text-white placeholder-gray-400 focus:outline-none focus:border-orange-500"
              />
            </div>
            <p className="text-gray-400 text-sm mt-2">
              {t("showing")} {games.length} {t("of")} {games.length} {t("gamesAvailable")}
            </p>
          </div>

<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
            {games.map((game, index) => (
              <Card
                key={index}
                className="bg-slate-800 border border-slate-700 overflow-hidden group hover:border-orange-500/50 transition-all duration-300 cursor-pointer"
                onClick={() => handlePlayClick(game.slug)}
              >
                <div className="relative">
                  <img src={game.image || "/placeholder.svg"} alt={game.name} className="w-full h-32 object-cover" />
                  <div className="absolute top-2 left-2">
                    <span className="px-2 py-1 bg-orange-500 text-white text-xs font-medium rounded">
                      {game.category}
                    </span>
                  </div>
                  <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
                    <Button className="bg-orange-500 hover:bg-orange-600 text-white font-medium px-4 py-2 rounded-lg">
                      {t("playNow")}
                    </Button>
                  </div>
                </div>
                <div className="p-3">
                  <h3 className="text-white font-medium text-sm mb-1">{game.name}</h3>
                  <p className="text-orange-500 text-xs font-medium">{game.price}</p>
                </div>
              </Card>
            ))}
          </div>

<div className="text-center mt-12">
            <Button
              variant="outline"
              className="border-orange-500 text-orange-500 hover:bg-orange-500 hover:text-white px-8 py-3 rounded-lg font-medium bg-transparent"
            >
              {t("allGames")}
            </Button>
          </div>
        </div>
      </section>

<LoginModal isOpen={showLogin} onClose={() => setShowLogin(false)} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/auth/auth-provider.tsx" isEdit="true" isMerged="true"
"use client"

import { createContext, useContext, useState, useEffect, type ReactNode } from "react"

interface User {
  id: string
  username: string
  email: string
  balance: number
  role: "user" | "admin"
}

interface AuthContextType {
  user: User | null
  isAuthenticated: boolean
  login: (email: string, password: string) => Promise<void>
  register: (userData: any) => Promise<void>
  logout: () => void
  updateBalance?: (amount: number) => void
  isAdmin: boolean
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

const TEST_ACCOUNT = {
  email: "test@cryptomoney.com",
  password: "test123",
  user: {
    id: "test-user",
    username: "TestPlayer",
    email: "test@cryptomoney.com",
    balance: 10000,
    role: "user" as const,
  },
}

const ADMIN_ACCOUNT = {
  email: "admin@cryptomoney.com",
  password: "admin123",
  user: {
    id: "admin-user",
    username: "Administrator",
    email: "admin@cryptomoney.com",
    balance: 999999,
    role: "admin" as const,
  },
}

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)

useEffect(() => {
    const savedUser = localStorage.getItem("user")
    if (savedUser) {
      setUser(JSON.parse(savedUser))
    }
  }, [])

const login = async (email: string, password: string) => {
    if (email === ADMIN_ACCOUNT.email && password === ADMIN_ACCOUNT.password) {
      setUser(ADMIN_ACCOUNT.user)
      localStorage.setItem("user", JSON.stringify(ADMIN_ACCOUNT.user))
      return
    }

if (email === TEST_ACCOUNT.email && password === TEST_ACCOUNT.password) {
      setUser(TEST_ACCOUNT.user)
      localStorage.setItem("user", JSON.stringify(TEST_ACCOUNT.user))
      return
    }

const mockUser: User = {
      id: "1",
      username: "player123",
      email: email,
      balance: 1000,
      role: "user",
    }
    setUser(mockUser)
    localStorage.setItem("user", JSON.stringify(mockUser))
  }

const register = async (userData: any) => {
    const mockUser: User = {
      id: "2",
      username: userData.username,
      email: userData.email,
      balance: 100,
      role: "user",
    }
    setUser(mockUser)
    localStorage.setItem("user", JSON.stringify(mockUser))
  }

const logout = () => {
    setUser(null)
    localStorage.removeItem("user")
  }

const updateBalance = (amount: number) => {
    if (user) {
      const updatedUser = {
        ...user,
        balance: Math.max(0, user.balance + amount),
      }
      setUser(updatedUser)
      localStorage.setItem("user", JSON.stringify(updatedUser))
    }
  }

return (
    <AuthContext.Provider
      value={{
        user,
        isAuthenticated: !!user,
        login,
        register,
        logout,
        updateBalance,
        isAdmin: user?.role === "admin",
      }}
    >
      {children}
    </AuthContext.Provider>
  )
}

export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error("useAuth must be used within an AuthProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="app/admin/games/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/components/auth/auth-provider"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { Gamepad2, Search, Settings } from "lucide-react"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

export default function GamesManagement() {
  const { isAdmin, isAuthenticated } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [searchQuery, setSearchQuery] = useState("")

useEffect(() => {
    if (!isAuthenticated || !isAdmin) {
      router.push("/")
    }
  }, [isAuthenticated, isAdmin, router])

const [games, setGames] = useState([
    { id: "1", name: "Coin Flip", category: "Classic", enabled: true, rtp: 98.5, totalPlays: 15420, revenue: 45200 },
    { id: "2", name: "Roulette", category: "Table", enabled: true, rtp: 97.3, totalPlays: 8950, revenue: 78900 },
    { id: "3", name: "Slot Machine", category: "Slots", enabled: true, rtp: 96.8, totalPlays: 23100, revenue: 125000 },
    { id: "4", name: "Blackjack", category: "Card", enabled: true, rtp: 99.5, totalPlays: 12400, revenue: 89500 },
    { id: "5", name: "Crash", category: "Crypto", enabled: true, rtp: 99.0, totalPlays: 18700, revenue: 156000 },
    { id: "6", name: "Plinko", category: "Arcade", enabled: true, rtp: 98.0, totalPlays: 9800, revenue: 67800 },
    { id: "7", name: "Mines", category: "Strategy", enabled: false, rtp: 97.5, totalPlays: 5600, revenue: 34200 },
    { id: "8", name: "Dice Rolling", category: "Classic", enabled: true, rtp: 98.8, totalPlays: 14200, revenue: 52100 },
  ])

const handleToggleGame = (gameId: string) => {
    setGames(games.map((game) => (game.id === gameId ? { ...game, enabled: !game.enabled } : game)))
    toast({
      title: "Game Status Updated",
      description: "Game has been enabled/disabled successfully",
    })
  }

const handleUpdateRTP = (gameId: string, newRTP: number) => {
    setGames(games.map((game) => (game.id === gameId ? { ...game, rtp: newRTP } : game)))
    toast({
      title: "RTP Updated",
      description: "Game RTP has been updated successfully",
    })
  }

const filteredGames = games.filter((game) => game.name.toLowerCase().includes(searchQuery.toLowerCase()))

if (!isAdmin) return null

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950 pt-24 pb-12">
      <div className="container mx-auto px-4">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold text-white mb-2 flex items-center gap-3">
              <Gamepad2 className="w-10 h-10 text-orange-500" />
              Games Management
            </h1>
            <p className="text-slate-400">Configure and manage all casino games</p>
          </div>
          <Link href="/admin">
            <Button variant="outline" className="border-slate-700 text-white hover:bg-slate-800 bg-transparent">
              Back to Dashboard
            </Button>
          </Link>
        </div>

{/* Search Bar */}
        <Card className="bg-slate-900/50 border-slate-800 p-6 mb-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
            <Input
              type="text"
              placeholder="Search games..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 bg-slate-800 border-slate-700 text-white"
            />
          </div>
        </Card>

{/* Games Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {filteredGames.map((game) => (
            <Card key={game.id} className="bg-slate-900/50 border-slate-800 p-6">
              <div className="flex items-start justify-between mb-4">
                <div>
                  <h3 className="text-xl font-bold text-white mb-1">{game.name}</h3>
                  <p className="text-slate-400 text-sm">{game.category}</p>
                </div>
                <div className="flex items-center gap-2">
                  <span className="text-slate-400 text-sm">{game.enabled ? "Enabled" : "Disabled"}</span>
                  <Switch checked={game.enabled} onCheckedChange={() => handleToggleGame(game.id)} />
                </div>
              </div>

<div className="grid grid-cols-3 gap-4 mb-4">
                <div className="bg-slate-800/50 p-3 rounded-lg">
                  <div className="text-slate-400 text-xs mb-1">RTP</div>
                  <div className="text-green-500 font-bold text-lg">{game.rtp}%</div>
                </div>
                <div className="bg-slate-800/50 p-3 rounded-lg">
                  <div className="text-slate-400 text-xs mb-1">Total Plays</div>
                  <div className="text-white font-bold text-lg">{game.totalPlays.toLocaleString()}</div>
                </div>
                <div className="bg-slate-800/50 p-3 rounded-lg">
                  <div className="text-slate-400 text-xs mb-1">Revenue</div>
                  <div className="text-orange-500 font-bold text-lg">${(game.revenue / 1000).toFixed(1)}k</div>
                </div>
              </div>

<div className="flex items-center gap-3">
                <Input
                  type="number"
                  min="90"
                  max="100"
                  step="0.1"
                  value={game.rtp}
                  onChange={(e) => handleUpdateRTP(game.id, Number.parseFloat(e.target.value))}
                  className="bg-slate-800 border-slate-700 text-white"
                  placeholder="RTP %"
                />
                <Button className="bg-orange-600 hover:bg-orange-700 text-white">
                  <Settings className="w-4 h-4 mr-2" />
                  Configure
                </Button>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/games/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/transactions/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/components/auth/auth-provider"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { DollarSign, Search, Check, X, Clock } from "lucide-react"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

export default function TransactionsManagement() {
  const { isAdmin, isAuthenticated } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [searchQuery, setSearchQuery] = useState("")

useEffect(() => {
    if (!isAuthenticated || !isAdmin) {
      router.push("/")
    }
  }, [isAuthenticated, isAdmin, router])

const [transactions, setTransactions] = useState([
    {
      id: "1",
      user: "player123",
      type: "withdrawal",
      amount: 2500,
      status: "pending",
      method: "Bitcoin",
      date: "2025-01-13 14:30",
      wallet: "bc1q...xyz123",
    },
    {
      id: "2",
      user: "crypto_king",
      type: "deposit",
      amount: 1000,
      status: "completed",
      method: "Ethereum",
      date: "2025-01-13 13:15",
      wallet: "0x...abc456",
    },
    {
      id: "3",
      user: "lucky_seven",
      type: "withdrawal",
      amount: 5000,
      status: "pending",
      method: "USDT",
      date: "2025-01-13 12:45",
      wallet: "TR7...def789",
    },
    {
      id: "4",
      user: "slot_master",
      type: "deposit",
      amount: 500,
      status: "completed",
      method: "Bitcoin",
      date: "2025-01-13 11:20",
      wallet: "bc1q...ghi012",
    },
    {
      id: "5",
      user: "roulette_pro",
      type: "withdrawal",
      amount: 1200,
      status: "rejected",
      method: "Ethereum",
      date: "2025-01-13 10:00",
      wallet: "0x...jkl345",
    },
  ])

const handleApprove = (transactionId: string) => {
    setTransactions(transactions.map((tx) => (tx.id === transactionId ? { ...tx, status: "completed" } : tx)))
    toast({
      title: "Transaction Approved",
      description: "Withdrawal has been processed successfully",
    })
  }

const handleReject = (transactionId: string) => {
    setTransactions(transactions.map((tx) => (tx.id === transactionId ? { ...tx, status: "rejected" } : tx)))
    toast({
      title: "Transaction Rejected",
      description: "Withdrawal has been rejected",
      variant: "destructive",
    })
  }

const filteredTransactions = transactions.filter(
    (tx) =>
      tx.user.toLowerCase().includes(searchQuery.toLowerCase()) ||
      tx.method.toLowerCase().includes(searchQuery.toLowerCase()),
  )

if (!isAdmin) return null

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950 pt-24 pb-12">
      <div className="container mx-auto px-4">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold text-white mb-2 flex items-center gap-3">
              <DollarSign className="w-10 h-10 text-orange-500" />
              Transactions Management
            </h1>
            <p className="text-slate-400">Process deposits and withdrawals</p>
          </div>
          <Link href="/admin">
            <Button variant="outline" className="border-slate-700 text-white hover:bg-slate-800 bg-transparent">
              Back to Dashboard
            </Button>
          </Link>
        </div>

{/* Stats */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <div className="text-slate-400 text-sm mb-2">Pending Withdrawals</div>
            <div className="text-3xl font-bold text-orange-500">
              {transactions.filter((tx) => tx.type === "withdrawal" && tx.status === "pending").length}
            </div>
          </Card>
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <div className="text-slate-400 text-sm mb-2">Total Deposits Today</div>
            <div className="text-3xl font-bold text-green-500">
              $
              {transactions
                .filter((tx) => tx.type === "deposit" && tx.status === "completed")
                .reduce((sum, tx) => sum + tx.amount, 0)
                .toLocaleString()}
            </div>
          </Card>
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <div className="text-slate-400 text-sm mb-2">Total Withdrawals Today</div>
            <div className="text-3xl font-bold text-red-500">
              $
              {transactions
                .filter((tx) => tx.type === "withdrawal" && tx.status === "completed")
                .reduce((sum, tx) => sum + tx.amount, 0)
                .toLocaleString()}
            </div>
          </Card>
        </div>

{/* Search Bar */}
        <Card className="bg-slate-900/50 border-slate-800 p-6 mb-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
            <Input
              type="text"
              placeholder="Search transactions..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 bg-slate-800 border-slate-700 text-white"
            />
          </div>
        </Card>

{/* Transactions Table */}
        <Card className="bg-slate-900/50 border-slate-800 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-slate-800/50">
                <tr>
                  <th className="text-left p-4 text-slate-300 font-semibold">User</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Type</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Amount</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Method</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Wallet</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Date</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Status</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Actions</th>
                </tr>
              </thead>
              <tbody>
                {filteredTransactions.map((tx) => (
                  <tr key={tx.id} className="border-t border-slate-800 hover:bg-slate-800/30 transition-colors">
                    <td className="p-4 text-white font-medium">{tx.user}</td>
                    <td className="p-4">
                      <span
                        className={`px-3 py-1 rounded-full text-xs font-semibold ${
                          tx.type === "deposit" ? "bg-green-500/20 text-green-500" : "bg-orange-500/20 text-orange-500"
                        }`}
                      >
                        {tx.type}
                      </span>
                    </td>
                    <td className="p-4 text-white font-bold">${tx.amount.toLocaleString()}</td>
                    <td className="p-4 text-slate-300">{tx.method}</td>
                    <td className="p-4 text-slate-400 font-mono text-sm">{tx.wallet}</td>
                    <td className="p-4 text-slate-400">{tx.date}</td>
                    <td className="p-4">
                      <span
                        className={`px-3 py-1 rounded-full text-xs font-semibold flex items-center gap-1 w-fit ${
                          tx.status === "completed"
                            ? "bg-green-500/20 text-green-500"
                            : tx.status === "pending"
                              ? "bg-yellow-500/20 text-yellow-500"
                              : "bg-red-500/20 text-red-500"
                        }`}
                      >
                        {tx.status === "completed" && <Check className="w-3 h-3" />}
                        {tx.status === "pending" && <Clock className="w-3 h-3" />}
                        {tx.status === "rejected" && <X className="w-3 h-3" />}
                        {tx.status}
                      </span>
                    </td>
                    <td className="p-4">
                      {tx.status === "pending" && tx.type === "withdrawal" && (
                        <div className="flex gap-2">
                          <Button
                            size="sm"
                            className="bg-green-600 hover:bg-green-700 text-white"
                            onClick={() => handleApprove(tx.id)}
                          >
                            <Check className="w-4 h-4" />
                          </Button>
                          <Button
                            size="sm"
                            variant="outline"
                            className="border-red-700 text-red-500 hover:bg-red-950 bg-transparent"
                            onClick={() => handleReject(tx.id)}
                          >
                            <X className="w-4 h-4" />
                          </Button>
                        </div>
                      )}
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/transactions/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="app/admin/settings/page.tsx" isMerged="true"
"use client"

import { useAuth } from "@/components/auth/auth-provider"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Switch } from "@/components/ui/switch"
import { Settings, Save } from "lucide-react"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

export default function SettingsManagement() {
  const { isAdmin, isAuthenticated } = useAuth()
  const router = useRouter()
  const { toast } = useToast()

useEffect(() => {
    if (!isAuthenticated || !isAdmin) {
      router.push("/")
    }
  }, [isAuthenticated, isAdmin, router])

const [settings, setSettings] = useState({
    siteName: "CryptoMoney",
    maintenanceMode: false,
    registrationEnabled: true,
    minDeposit: 10,
    maxDeposit: 100000,
    minWithdrawal: 50,
    maxWithdrawal: 50000,
    withdrawalFee: 2.5,
    welcomeBonus: 100,
    referralBonus: 50,
    maxBetAmount: 10000,
    minBetAmount: 1,
  })

const handleSave = () => {
    toast({
      title: "Settings Saved",
      description: "Platform settings have been updated successfully",
    })
  }

if (!isAdmin) return null

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950 pt-24 pb-12">
      <div className="container mx-auto px-4 max-w-4xl">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold text-white mb-2 flex items-center gap-3">
              <Settings className="w-10 h-10 text-orange-500" />
              Platform Settings
            </h1>
            <p className="text-slate-400">Configure platform-wide settings</p>
          </div>
          <Link href="/admin">
            <Button variant="outline" className="border-slate-700 text-white hover:bg-slate-800 bg-transparent">
              Back to Dashboard
            </Button>
          </Link>
        </div>

<div className="space-y-6">
          {/* General Settings */}
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <h2 className="text-2xl font-bold text-white mb-6">General Settings</h2>
            <div className="space-y-4">
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Site Name</label>
                <Input
                  value={settings.siteName}
                  onChange={(e) => setSettings({ ...settings, siteName: e.target.value })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-white font-medium">Maintenance Mode</div>
                  <div className="text-slate-400 text-sm">Disable site access for maintenance</div>
                </div>
                <Switch
                  checked={settings.maintenanceMode}
                  onCheckedChange={(checked) => setSettings({ ...settings, maintenanceMode: checked })}
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <div className="text-white font-medium">Registration Enabled</div>
                  <div className="text-slate-400 text-sm">Allow new user registrations</div>
                </div>
                <Switch
                  checked={settings.registrationEnabled}
                  onCheckedChange={(checked) => setSettings({ ...settings, registrationEnabled: checked })}
                />
              </div>
            </div>
          </Card>

{/* Deposit Settings */}
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <h2 className="text-2xl font-bold text-white mb-6">Deposit Settings</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Minimum Deposit ($)</label>
                <Input
                  type="number"
                  value={settings.minDeposit}
                  onChange={(e) => setSettings({ ...settings, minDeposit: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Maximum Deposit ($)</label>
                <Input
                  type="number"
                  value={settings.maxDeposit}
                  onChange={(e) => setSettings({ ...settings, maxDeposit: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
            </div>
          </Card>

{/* Withdrawal Settings */}
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <h2 className="text-2xl font-bold text-white mb-6">Withdrawal Settings</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Minimum Withdrawal ($)</label>
                <Input
                  type="number"
                  value={settings.minWithdrawal}
                  onChange={(e) => setSettings({ ...settings, minWithdrawal: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Maximum Withdrawal ($)</label>
                <Input
                  type="number"
                  value={settings.maxWithdrawal}
                  onChange={(e) => setSettings({ ...settings, maxWithdrawal: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Withdrawal Fee (%)</label>
                <Input
                  type="number"
                  step="0.1"
                  value={settings.withdrawalFee}
                  onChange={(e) => setSettings({ ...settings, withdrawalFee: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
            </div>
          </Card>

{/* Bonus Settings */}
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <h2 className="text-2xl font-bold text-white mb-6">Bonus Settings</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Welcome Bonus ($)</label>
                <Input
                  type="number"
                  value={settings.welcomeBonus}
                  onChange={(e) => setSettings({ ...settings, welcomeBonus: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Referral Bonus ($)</label>
                <Input
                  type="number"
                  value={settings.referralBonus}
                  onChange={(e) => setSettings({ ...settings, referralBonus: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
            </div>
          </Card>

{/* Betting Limits */}
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <h2 className="text-2xl font-bold text-white mb-6">Betting Limits</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Minimum Bet ($)</label>
                <Input
                  type="number"
                  value={settings.minBetAmount}
                  onChange={(e) => setSettings({ ...settings, minBetAmount: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
              <div>
                <label className="text-slate-300 text-sm mb-2 block">Maximum Bet ($)</label>
                <Input
                  type="number"
                  value={settings.maxBetAmount}
                  onChange={(e) => setSettings({ ...settings, maxBetAmount: Number.parseFloat(e.target.value) })}
                  className="bg-slate-800 border-slate-700 text-white"
                />
              </div>
            </div>
          </Card>

{/* Save Button */}
          <Button onClick={handleSave} className="w-full bg-orange-600 hover:bg-orange-700 text-white py-6 text-lg">
            <Save className="w-5 h-5 mr-2" />
            Save All Settings
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ui/switch.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = React.forwardRef<
  React.ElementRef<typeof SwitchPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
>(({ className, ...props }, ref) => (
  <SwitchPrimitives.Root
    className={cn(
      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-orange-600 data-[state=unchecked]:bg-slate-700",
      className,
    )}
    {...props}
    ref={ref}
  >
    <SwitchPrimitives.Thumb
      className={cn(
        "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
      )}
    />
  </SwitchPrimitives.Root>
))
Switch.displayName = SwitchPrimitives.Root.displayName

export { Switch }
[V0_FILE]typescriptreact:file="app/admin/users/loading.tsx" isMerged="true"
export default function Loading() {
  return (
    <div className="min-h-screen bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 pt-32 pb-16">
      <div className="container mx-auto px-4">
        <div className="mb-8">
          <div className="h-10 w-64 bg-slate-800 rounded animate-pulse mb-2" />
          <div className="h-6 w-96 bg-slate-800 rounded animate-pulse" />
        </div>

<div className="bg-slate-900/50 backdrop-blur-sm border border-slate-800 rounded-xl p-6">
          <div className="space-y-4">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="flex items-center gap-4 p-4 bg-slate-800/50 rounded-lg">
                <div className="w-12 h-12 bg-slate-700 rounded-full animate-pulse" />
                <div className="flex-1 space-y-2">
                  <div className="h-5 w-48 bg-slate-700 rounded animate-pulse" />
                  <div className="h-4 w-64 bg-slate-700 rounded animate-pulse" />
                </div>
                <div className="flex gap-2">
                  <div className="h-10 w-24 bg-slate-700 rounded animate-pulse" />
                  <div className="h-10 w-24 bg-slate-700 rounded animate-pulse" />
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/sound-effects.ts" isMerged="true"
export class SoundEffects {
  private audioContext: AudioContext | null = null

constructor() {
    if (typeof window !== "undefined") {
      this.audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
    }
  }

private playTone(frequency: number, duration: number, type: OscillatorType = "sine", volume = 0.3) {
    if (!this.audioContext) return

const oscillator = this.audioContext.createOscillator()
    const gainNode = this.audioContext.createGain()

oscillator.connect(gainNode)
    gainNode.connect(this.audioContext.destination)

oscillator.frequency.value = frequency
    oscillator.type = type
    gainNode.gain.value = volume

oscillator.start(this.audioContext.currentTime)
    oscillator.stop(this.audioContext.currentTime + duration)
  }

coinFlip() {
    this.playTone(800, 0.1, "sine")
    setTimeout(() => this.playTone(600, 0.1, "sine"), 100)
  }

win() {
    this.playTone(523, 0.15, "sine")
    setTimeout(() => this.playTone(659, 0.15, "sine"), 150)
    setTimeout(() => this.playTone(784, 0.3, "sine"), 300)
  }

lose() {
    this.playTone(400, 0.2, "sawtooth")
    setTimeout(() => this.playTone(300, 0.3, "sawtooth"), 200)
  }

click() {
    this.playTone(1000, 0.05, "square", 0.1)
  }

spin() {
    for (let i = 0; i < 10; i++) {
      setTimeout(() => this.playTone(400 + i * 50, 0.05, "sine", 0.2), i * 100)
    }
  }

cashout() {
    this.playTone(880, 0.1, "sine")
    setTimeout(() => this.playTone(1047, 0.2, "sine"), 100)
  }

crash() {
    this.playTone(200, 0.5, "sawtooth", 0.4)
  }
}

export const soundEffects = new SoundEffects()
[V0_FILE]typescriptreact:file="components/ui/confetti.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

interface ConfettiProps {
  active: boolean
}

export function Confetti({ active }: ConfettiProps) {
  const [particles, setParticles] = useState<
    Array<{ id: number; x: number; y: number; color: string; rotation: number }>
  >([])

useEffect(() => {
    if (active) {
      const newParticles = Array.from({ length: 50 }, (_, i) => ({
        id: i,
        x: Math.random() * 100,
        y: -10,
        color: ["#FFD700", "#FF6B35", "#4ECDC4", "#FF006E", "#8338EC"][Math.floor(Math.random() * 5)],
        rotation: Math.random() * 360,
      }))
      setParticles(newParticles)

setTimeout(() => setParticles([]), 3000)
    }
  }, [active])

if (!active || particles.length === 0) return null

return (
    <div className="fixed inset-0 pointer-events-none z-50 overflow-hidden">
      {particles.map((particle) => (
        <div
          key={particle.id}
          className="absolute w-3 h-3 animate-confetti-fall"
          style={{
            left: `${particle.x}%`,
            top: `${particle.y}%`,
            backgroundColor: particle.color,
            transform: `rotate(${particle.rotation}deg)`,
            animation: `confetti-fall ${2 + Math.random()}s linear forwards`,
          }}
        />
      ))}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/games/slot-machine-game.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/components/auth/auth-provider"
import { useLanguage } from "@/lib/language-context"
import { useToast } from "@/hooks/use-toast"
import { soundEffects } from "@/lib/sound-effects"
import { Confetti } from "@/components/ui/confetti"

const symbols = ["🍒", "🍋", "🍊", "🍇", "⭐", "💎", "7️⃣"]
const payouts = {
  "🍒🍒🍒": 5,
  "🍋🍋🍋": 10,
  "🍊🍊🍊": 15,
  "🍇🍇🍇": 20,
  "⭐⭐⭐": 50,
  "💎💎💎": 100,
  "7️⃣7️⃣7️⃣": 500,
}

export function SlotMachineGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { t } = useLanguage()
  const { toast } = useToast()
  const [bet, setBet] = useState(5)
  const [reels, setReels] = useState(["🍒", "🍋", "🍊"])
  const [isSpinning, setIsSpinning] = useState(false)
  const [gameResult, setGameResult] = useState<{ win: boolean; payout: number } | null>(null)
  const [showConfetti, setShowConfetti] = useState(false)

const spinReels = () => {
    if (!isAuthenticated || !user) return

if (user.balance < bet) {
      toast({
        title: "Insufficient Balance",
        description: "You don't have enough balance to place this bet.",
        variant: "destructive",
      })
      return
    }

setIsSpinning(true)
    setGameResult(null)
    setShowConfetti(false)

soundEffects.spin()

updateBalance?.(-bet)

const spinInterval = setInterval(() => {
      setReels([
        symbols[Math.floor(Math.random() * symbols.length)],
        symbols[Math.floor(Math.random() * symbols.length)],
        symbols[Math.floor(Math.random() * symbols.length)],
      ])
    }, 100)

setTimeout(() => {
      clearInterval(spinInterval)

const finalReels = [
        symbols[Math.floor(Math.random() * symbols.length)],
        symbols[Math.floor(Math.random() * symbols.length)],
        symbols[Math.floor(Math.random() * symbols.length)],
      ]

setReels(finalReels)

const combination = finalReels.join("")
      const multiplier = payouts[combination as keyof typeof payouts] || 0
      const payout = multiplier * bet

setGameResult({
        win: payout > 0,
        payout: payout,
      })

if (payout > 0) {
        updateBalance?.(payout)
        soundEffects.win()
        setShowConfetti(true)
        toast({
          title: `${t("youWon")} $${payout}!`,
          description: `${multiplier}x multiplier!`,
        })
      } else {
        soundEffects.lose()
        toast({
          title: `${t("youLost")} $${bet}`,
          description: "Try again!",
          variant: "destructive",
        })
      }

setIsSpinning(false)
    }, 2500)
  }

return (
    <>
      <Confetti active={showConfetti} />

<div className="flex justify-center space-x-4 mb-6 relative z-10">
              {reels.map((symbol, index) => (
                <div
                  key={index}
                  className={`w-28 h-28 bg-gradient-to-br from-white via-gray-50 to-gray-200 rounded-xl flex items-center justify-center text-6xl border-4 border-yellow-400 shadow-2xl transform transition-all ${
                    isSpinning ? "animate-bounce scale-105" : "hover:scale-110"
                  }`}
                  style={{
                    boxShadow: isSpinning ? "0 0 30px rgba(250, 204, 21, 0.8)" : "0 10px 25px rgba(0,0,0,0.3)",
                  }}
                >
                  {symbol}
                </div>
              ))}
            </div>

{gameResult && (
            <div className={`text-4xl font-bold neon-text ${gameResult.win ? "text-green-400" : "text-red-400"}`}>
              {gameResult.win ? `🎰 ${t("youWon")} $${gameResult.payout}! 🎰` : `${t("youLost")} $${bet}`}
            </div>
          )}

<div className="bg-gradient-to-br from-slate-800 to-slate-900 p-6 rounded-xl shadow-2xl border border-orange-500/30">
            <h3 className="text-white font-bold text-xl mb-4 flex items-center justify-center gap-2">
              <span className="text-2xl">💰</span>
              Paytable (multiplier × bet)
              <span className="text-2xl">💰</span>
            </h3>
            <div className="grid grid-cols-2 gap-3 text-base">
              {Object.entries(payouts).map(([combo, multiplier]) => (
                <div
                  key={combo}
                  className="flex justify-between text-gray-300 bg-slate-700/50 p-3 rounded-lg hover:bg-slate-700 transition-all border border-slate-600"
                >
                  <span className="text-2xl">{combo}</span>
                  <span className="text-yellow-400 font-bold text-lg">{multiplier}x</span>
                </div>
              ))}
            </div>
          </div>

<div className="max-w-xs mx-auto">
            <label className="block text-white font-semibold mb-2">{t("betAmount")}</label>
            <Input
              type="number"
              value={bet}
              onChange={(e) => setBet(Number(e.target.value))}
              min="1"
              max="100"
              className="bg-slate-700 border-slate-600 text-white text-center text-xl font-bold"
              disabled={isSpinning}
            />
          </div>

<div className="flex justify-center space-x-4">
            {!isAuthenticated ? (
              <div className="text-gray-400 text-lg">{t("pleaseLoginToPlay")}</div>
            ) : (
              <Button
                onClick={spinReels}
                disabled={isSpinning}
                className="bg-gradient-to-r from-green-600 via-green-500 to-green-600 hover:from-green-700 hover:to-green-700 text-white font-bold px-16 py-8 text-2xl shadow-2xl shadow-green-500/50 transform hover:scale-105 transition-all"
              >
                {isSpinning ? "🎰 SPINNING..." : "🎰 SPIN 🎰"}
              </Button>
            )}
          </div>

{isAuthenticated && (
            <div className="text-gray-300 text-xl">
              {t("yourBalance")}: <span className="text-yellow-500 font-bold">${user?.balance.toFixed(2)}</span>
            </div>
          )}
        </div>
      </Card>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/games/roulette-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/components/auth/auth-provider"
import { useLanguage } from "@/lib/language-context"
import { useToast } from "@/hooks/use-toast"
import { soundEffects } from "@/lib/sound-effects"
import { Confetti } from "@/components/ui/confetti"

const rouletteNumbers = [
  { number: 0, color: "green" },
  { number: 32, color: "red" },
  { number: 15, color: "black" },
  { number: 19, color: "red" },
  { number: 4, color: "black" },
  { number: 21, color: "red" },
  { number: 2, color: "black" },
  { number: 25, color: "red" },
  { number: 17, color: "black" },
  { number: 34, color: "red" },
  { number: 6, color: "black" },
  { number: 27, color: "red" },
  { number: 13, color: "black" },
  { number: 36, color: "red" },
  { number: 11, color: "black" },
  { number: 30, color: "red" },
  { number: 8, color: "black" },
  { number: 23, color: "red" },
  { number: 10, color: "black" },
  { number: 5, color: "red" },
  { number: 24, color: "black" },
  { number: 16, color: "red" },
  { number: 33, color: "black" },
  { number: 1, color: "red" },
  { number: 20, color: "black" },
  { number: 14, color: "red" },
  { number: 31, color: "black" },
  { number: 9, color: "red" },
  { number: 22, color: "black" },
  { number: 18, color: "red" },
  { number: 29, color: "black" },
  { number: 7, color: "red" },
  { number: 28, color: "black" },
  { number: 12, color: "red" },
  { number: 35, color: "black" },
  { number: 3, color: "red" },
  { number: 26, color: "black" },
]

export function RouletteGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { t } = useLanguage()
  const { toast } = useToast()
  const [bet, setBet] = useState(10)
  const [selectedBets, setSelectedBets] = useState<{ number?: number; color?: string; type?: string }>({})
  const [isSpinning, setIsSpinning] = useState(false)
  const [result, setResult] = useState<{ number: number; color: string } | null>(null)
  const [gameResult, setGameResult] = useState<"win" | "lose" | null>(null)
  const [showConfetti, setShowConfetti] = useState(false)

const placeBet = (type: string, value?: number | string) => {
    soundEffects.click()
    if (type === "number" && typeof value === "number") {
      setSelectedBets({ number: value })
    } else if (type === "color" && typeof value === "string") {
      setSelectedBets({ color: value })
    }
  }

const spinWheel = () => {
    if (Object.keys(selectedBets).length === 0 || !isAuthenticated || !user) return

setIsSpinning(true)
    setGameResult(null)
    setShowConfetti(false)

soundEffects.spin()

updateBalance?.(-bet)

setTimeout(() => {
      const randomIndex = Math.floor(Math.random() * rouletteNumbers.length)
      const winningNumber = rouletteNumbers[randomIndex]
      setResult(winningNumber)

let won = false
      let payout = 0

if (selectedBets.number === winningNumber.number) {
        won = true
        payout = bet * 35
      } else if (selectedBets.color === winningNumber.color && winningNumber.color !== "green") {
        won = true
        payout = bet * 2
      }

setGameResult(won ? "win" : "lose")

if (won) {
        updateBalance?.(payout)
        soundEffects.win()
        setShowConfetti(true)
        toast({
          title: `${t("youWon")} $${payout}!`,
          description: "Congratulations on your win!",
        })
      } else {
        soundEffects.lose()
        toast({
          title: `${t("youLost")} $${bet}`,
          description: "Better luck next time!",
          variant: "destructive",
        })
      }

setIsSpinning(false)
    }, 3500)
  }

const resetGame = () => {
    setSelectedBets({})
    setResult(null)
    setGameResult(null)
    setShowConfetti(false)
  }

return (
    <>
      <Confetti active={showConfetti} />

{result && (
            <div className="text-center">
              <div
                className={`inline-block px-10 py-5 rounded-2xl text-4xl font-bold shadow-2xl transform scale-110 ${
                  result.color === "red"
                    ? "bg-gradient-to-br from-red-500 to-red-700 text-white shadow-red-500/70"
                    : result.color === "black"
                      ? "bg-gradient-to-br from-gray-800 to-black text-white shadow-gray-500/70"
                      : "bg-gradient-to-br from-green-500 to-green-700 text-white shadow-green-500/70"
                }`}
              >
                {result.number}
              </div>
              {gameResult && (
                <div
                  className={`mt-4 text-3xl font-bold neon-text ${gameResult === "win" ? "text-green-400" : "text-red-400"}`}
                >
                  {gameResult === "win" ? `🎉 ${t("youWon")}! 🎉` : `${t("youLost")} $${bet}`}
                </div>
              )}
            </div>
          )}

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label className="block text-white font-semibold mb-2">{t("betAmount")}</label>
              <Input
                type="number"
                value={bet}
                onChange={(e) => setBet(Number(e.target.value))}
                min="1"
                max="500"
                className="bg-slate-700 border-slate-600 text-white text-xl font-bold"
                disabled={isSpinning}
              />
            </div>

<div>
              <label className="block text-white font-semibold mb-2">Color Bet (2x)</label>
              <div className="flex space-x-2">
                <Button
                  onClick={() => placeBet("color", "red")}
                  variant={selectedBets.color === "red" ? "default" : "outline"}
                  className={`flex-1 py-6 text-lg transition-all ${
                    selectedBets.color === "red"
                      ? "bg-red-600 text-white shadow-lg shadow-red-500/50 scale-105"
                      : "border-red-600 text-red-600 hover:bg-red-600 hover:text-white bg-transparent"
                  }`}
                  disabled={isSpinning}
                >
                  Red
                </Button>
                <Button
                  onClick={() => placeBet("color", "black")}
                  variant={selectedBets.color === "black" ? "default" : "outline"}
                  className={`flex-1 py-6 text-lg transition-all ${
                    selectedBets.color === "black"
                      ? "bg-black text-white shadow-lg shadow-gray-500/50 scale-105"
                      : "border-gray-600 text-gray-300 hover:bg-black hover:text-white bg-transparent"
                  }`}
                  disabled={isSpinning}
                >
                  Black
                </Button>
              </div>
            </div>
          </div>

<div>
            <label className="block text-white font-semibold mb-2">Number Bet (35x payout)</label>
            <div className="grid grid-cols-6 gap-1 max-w-md mx-auto">
              {rouletteNumbers.slice(1, 37).map((num) => (
                <Button
                  key={num.number}
                  onClick={() => placeBet("number", num.number)}
                  variant={selectedBets.number === num.number ? "default" : "outline"}
                  className={`w-12 h-12 text-sm font-bold transition-all ${
                    selectedBets.number === num.number
                      ? "bg-yellow-500 text-black shadow-lg shadow-yellow-500/50 scale-110"
                      : num.color === "red"
                        ? "border-red-600 text-red-600 hover:bg-red-600 hover:text-white bg-transparent"
                        : "border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
                  }`}
                  disabled={isSpinning}
                >
                  {num.number}
                </Button>
              ))}
            </div>
          </div>

<div className="flex justify-center space-x-4">
            {!isAuthenticated ? (
              <div className="text-gray-400 text-lg">{t("pleaseLoginToPlay")}</div>
            ) : (
              <>
                <Button
                  onClick={spinWheel}
                  disabled={Object.keys(selectedBets).length === 0 || isSpinning}
                  className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-semibold px-12 py-6 text-lg shadow-lg shadow-green-500/50"
                >
                  {isSpinning ? "Spinning..." : "Spin Wheel"}
                </Button>
                <Button
                  onClick={resetGame}
                  variant="outline"
                  className="border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent px-8 py-6 text-lg"
                >
                  {t("reset")}
                </Button>
              </>
            )}
          </div>

{isAuthenticated && (
            <div className="text-center text-gray-300 text-xl">
              {t("yourBalance")}: <span className="text-yellow-500 font-bold">${user?.balance.toFixed(2)}</span>
            </div>
          )}
        </div>
      </Card>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/recent-wins.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { Card } from "@/components/ui/card"
import { Trophy, TrendingUp } from "lucide-react"
import { useLanguage } from "@/lib/language-context"

interface Win {
  id: string
  username: string
  game: string
  amount: number
  time: string
}

const gameNames = [
  "Coin Flip",
  "Roulette",
  "Slot Machine",
  "Blackjack",
  "Crash",
  "Plinko",
  "Mines",
  "Dice",
  "Keno",
  "Baccarat",
  "Dragon Tiger",
  "Aviator",
]

const generateRandomUsername = () => {
  const prefixes = ["crypto", "lucky", "mega", "super", "pro", "king", "master", "elite"]
  const suffixes = ["player", "winner", "gamer", "star", "legend", "hero", "ace"]
  const numbers = Math.floor(Math.random() * 9999)
  return `${prefixes[Math.floor(Math.random() * prefixes.length)]}_${suffixes[Math.floor(Math.random() * suffixes.length)]}${numbers}`
}

const generateRandomWin = (): Win => {
  return {
    id: Math.random().toString(36).substr(2, 9),
    username: generateRandomUsername(),
    game: gameNames[Math.floor(Math.random() * gameNames.length)],
    amount: Math.floor(Math.random() * 50000) + 100,
    time: "Just now",
  }
}

export function RecentWins() {
  const { t } = useLanguage()
  const [wins, setWins] = useState<Win[]>([])

useEffect(() => {
    const initialWins = Array.from({ length: 10 }, generateRandomWin)
    setWins(initialWins)

const interval = setInterval(
      () => {
        const newWin = generateRandomWin()
        setWins((prev) => [newWin, ...prev.slice(0, 9)])
      },
      Math.random() * 5000 + 5000,
    )

return () => clearInterval(interval)
  }, [])

return (
    <section className="py-16 px-4 bg-gradient-to-b from-slate-900 to-slate-950">
      <div className="container mx-auto max-w-7xl">
        <div className="text-center mb-12">
          <div className="flex items-center justify-center gap-3 mb-4">
            <Trophy className="w-8 h-8 text-orange-500" />
            <h2 className="text-4xl font-bold text-white">{t("recentWins")}</h2>
            <TrendingUp className="w-8 h-8 text-green-500" />
          </div>
          <p className="text-slate-400 text-lg">{t("recentWinsDesc")}</p>
        </div>

<Card className="bg-slate-900/50 border-slate-800 backdrop-blur-sm overflow-hidden">
          <div className="p-6">
            <div className="space-y-3 max-h-[500px] overflow-y-auto custom-scrollbar">
              {wins.map((win, index) => (
                <div
                  key={win.id}
                  className="flex items-center justify-between p-4 bg-gradient-to-r from-slate-800/50 to-slate-800/30 rounded-lg hover:from-slate-800/70 hover:to-slate-800/50 transition-all animate-slideIn border border-slate-700/50"
                  style={{ animationDelay: `${index * 0.05}s` }}
                >
                  <div className="flex items-center gap-4">
                    <div className="w-12 h-12 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center">
                      <Trophy className="w-6 h-6 text-white" />
                    </div>
                    <div>
                      <div className="text-white font-bold">{win.username}</div>
                      <div className="text-slate-400 text-sm">
                        {t("wonOn")} {win.game}
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-2xl font-bold text-green-500">${win.amount.toLocaleString()}</div>
                    <div className="text-slate-500 text-xs">{t("justNow")}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Card>
      </div>
    </section>
  )
}
[V0_FILE]css:file="app/globals.css" isEdit="true" isQuickEdit="true" isMerged="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

@theme inline {
  /* optional: --font-sans, --font-serif, --font-mono if they are applied in the layout.tsx */
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

body {
  background: linear-gradient(135deg, rgb(15 23 42) 0%, rgb(30 41 59) 100%);
  min-height: 100vh;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: rgb(30 41 59);
}

::-webkit-scrollbar-thumb {
  background: rgb(249 115 22);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(234 88 12);
}

/* Custom scrollbar for recent wins section */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgb(30 41 59);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgb(249 115 22);
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgb(234 88 12);
}

/* Glow effects */
.glow-orange {
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
}

.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

/* Animations */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3);
  }
  50% {
    box-shadow: 0 0 30px rgba(249, 115, 22, 0.6);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Adding confetti animation for win celebrations */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

.confetti-fall {
  animation: confetti-fall 3s ease-in-out infinite;
}

/* Adding coin flip 3D animation */
@keyframes coin-flip-3d {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1800deg);
  }
}

.coin-flip-3d {
  animation: coin-flip-3d 5s ease-in-out infinite;
}

/* Adding slot machine reel spin animation */
@keyframes reel-spin {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

.reel-spin {
  animation: reel-spin 2s ease-in-out infinite;
}

/* Adding shimmer effect for wins */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.5), transparent);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* Adding neon glow effect */
@keyframes neon-glow {
  0%,
  100% {
    text-shadow: 0 0 10px #ff6b35, 0 0 20px #ff6b35, 0 0 30px #ff6b35;
  }
  50% {
    text-shadow: 0 0 20px #ff6b35, 0 0 40px #ff6b35, 0 0 60px #ff6b35;
  }
}

.neon-text {
  animation: neon-glow 1.5s ease-in-out infinite;
}

/* Adding slide-in animation for recent wins */
@keyframes slideIn {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate-slideIn {
  animation: slideIn 0.5s ease-out forwards;
}
[V0_FILE]typescriptreact:file="components/games/coin-flip-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/components/auth/auth-provider"
import { useLanguage } from "@/lib/language-context"
import { useToast } from "@/hooks/use-toast"
import { soundEffects } from "@/lib/sound-effects"
import { Confetti } from "@/components/ui/confetti"

export function CoinFlipGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { t } = useLanguage()
  const { toast } = useToast()
  const [bet, setBet] = useState(10)
  const [choice, setChoice] = useState<"heads" | "tails" | null>(null)
  const [result, setResult] = useState<"heads" | "tails" | null>(null)
  const [isFlipping, setIsFlipping] = useState(false)
  const [gameResult, setGameResult] = useState<"win" | "lose" | null>(null)
  const [showConfetti, setShowConfetti] = useState(false)

const flipCoin = () => {
    if (!isAuthenticated) {
      toast({
        title: t("loginRequired"),
        description: t("pleaseLoginToPlay"),
        variant: "destructive",
      })
      return
    }

if (!choice || !user) return

setIsFlipping(true)
    setGameResult(null)
    setShowConfetti(false)

soundEffects.coinFlip()

updateBalance(-bet)

setTimeout(() => {
      const coinResult = Math.random() < 0.5 ? "heads" : "tails"
      setResult(coinResult)
      const won = coinResult === choice

setGameResult(won ? "win" : "lose")

if (won) {
        updateBalance(bet * 2)
        soundEffects.win()
        setShowConfetti(true)
        toast({
          title: `${t("youWon")} $${bet * 2}!`,
          description: "Congratulations on your win!",
        })
      } else {
        soundEffects.lose()
        toast({
          title: `${t("youLost")} $${bet}`,
          description: "Better luck next time!",
          variant: "destructive",
        })
      }

setIsFlipping(false)
    }, 2000)
  }

const resetGame = () => {
    setChoice(null)
    setResult(null)
    setGameResult(null)
    setShowConfetti(false)
  }

return (
    <>
      <Confetti active={showConfetti} />

<div className="relative z-10 text-center space-y-8">
          <div className="flex justify-center perspective-1000">
            <div
              className={`relative w-56 h-56 rounded-full border-[12px] flex items-center justify-center text-8xl font-black transition-all duration-500 ${
                isFlipping ? "animate-[coin-flip-3d_2s_ease-in-out]" : ""
              } ${
                result === "heads"
                  ? "bg-gradient-to-br from-yellow-200 via-yellow-400 to-yellow-600 text-black shadow-[0_0_60px_rgba(234,179,8,0.8)] border-yellow-300"
                  : result === "tails"
                    ? "bg-gradient-to-br from-slate-400 via-slate-600 to-slate-900 text-white shadow-[0_0_60px_rgba(100,116,139,0.8)] border-slate-300"
                    : "bg-gradient-to-br from-yellow-400 via-orange-500 to-slate-700 text-white border-orange-400 shadow-[0_0_60px_rgba(249,115,22,0.6)] animate-pulse"
              }`}
              style={{
                transformStyle: "preserve-3d",
                boxShadow: isFlipping ? "0 20px 60px rgba(0,0,0,0.5)" : undefined,
              }}
            >
              <div className="absolute inset-4 rounded-full bg-gradient-to-br from-white/20 to-transparent"></div>
              <span className="relative z-10 drop-shadow-2xl">
                {isFlipping ? "?" : result === "heads" ? "👑" : result === "tails" ? "⚡" : "?"}
              </span>
            </div>
          </div>

{gameResult && (
            <div
              className={`text-5xl font-black animate-bounce ${gameResult === "win" ? "text-green-400 drop-shadow-[0_0_20px_rgba(74,222,128,0.8)]" : "text-red-400 drop-shadow-[0_0_20px_rgba(248,113,113,0.8)]"}`}
            >
              {gameResult === "win" ? `🎉 ${t("youWon")} $${bet * 2}! 🎉` : `💔 ${t("youLost")} $${bet}`}
            </div>
          )}

<div className="max-w-md mx-auto">
            <label className="block text-white font-bold mb-3 text-lg">{t("betAmount")}</label>
            <Input
              type="number"
              value={bet}
              onChange={(e) => setBet(Number(e.target.value))}
              min="1"
              max="1000"
              className="bg-slate-800/80 border-2 border-orange-500/50 text-white text-center text-2xl font-bold h-14 focus:border-orange-500 focus:ring-2 focus:ring-orange-500/50"
              disabled={isFlipping || !isAuthenticated}
            />
          </div>

<div className="flex justify-center gap-6">
            <Button
              onClick={() => {
                setChoice("heads")
                soundEffects.click()
              }}
              variant={choice === "heads" ? "default" : "outline"}
              className={`text-xl px-12 py-8 transition-all transform hover:scale-110 hover:-translate-y-1 ${
                choice === "heads"
                  ? "bg-gradient-to-br from-yellow-400 via-yellow-500 to-yellow-600 text-black shadow-[0_0_30px_rgba(234,179,8,0.6)] scale-110 border-0 font-black"
                  : "border-3 border-yellow-500/70 text-yellow-400 hover:bg-yellow-500/20 bg-slate-800/50 backdrop-blur font-bold"
              }`}
              disabled={isFlipping || !isAuthenticated}
            >
              <span className="text-3xl mr-3">👑</span>
              {t("heads")}
            </Button>
            <Button
              onClick={() => {
                setChoice("tails")
                soundEffects.click()
              }}
              variant={choice === "tails" ? "default" : "outline"}
              className={`text-xl px-12 py-8 transition-all transform hover:scale-110 hover:-translate-y-1 ${
                choice === "tails"
                  ? "bg-gradient-to-br from-slate-500 via-slate-600 to-slate-800 text-white shadow-[0_0_30px_rgba(100,116,139,0.6)] scale-110 border-0 font-black"
                  : "border-3 border-slate-400/70 text-slate-300 hover:bg-slate-500/20 bg-slate-800/50 backdrop-blur font-bold"
              }`}
              disabled={isFlipping || !isAuthenticated}
            >
              <span className="text-3xl mr-3">⚡</span>
              {t("tails")}
            </Button>
          </div>

<div className="flex justify-center gap-4">
            {!isAuthenticated ? (
              <div className="bg-orange-500/20 border-2 border-orange-500 rounded-lg px-8 py-4">
                <p className="text-orange-400 text-xl font-bold">{t("pleaseLoginToPlay")}</p>
              </div>
            ) : (
              <>
                <Button
                  onClick={flipCoin}
                  disabled={!choice || isFlipping}
                  className="bg-gradient-to-r from-green-600 via-green-700 to-green-800 hover:from-green-700 hover:via-green-800 hover:to-green-900 text-white font-black px-16 py-7 text-xl shadow-[0_0_30px_rgba(34,197,94,0.5)] hover:shadow-[0_0_40px_rgba(34,197,94,0.7)] transform hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                >
                  {isFlipping ? (
                    <>
                      <span className="animate-spin mr-2">🎲</span>
                      {t("flipping")}
                    </>
                  ) : (
                    <>
                      <span className="mr-2">🎲</span>
                      {t("flipCoin")}
                    </>
                  )}
                </Button>
                <Button
                  onClick={resetGame}
                  variant="outline"
                  className="border-2 border-gray-600 text-gray-300 hover:bg-gray-800 bg-slate-800/50 backdrop-blur px-10 py-7 text-xl font-bold hover:border-gray-500 transition-all"
                >
                  {t("reset")}
                </Button>
              </>
            )}
          </div>

{isAuthenticated && user && (
            <div className="bg-gradient-to-r from-slate-800/50 via-slate-700/50 to-slate-800/50 border-2 border-orange-500/30 rounded-xl px-8 py-4 backdrop-blur">
              <p className="text-gray-300 text-xl">
                {t("yourBalance")}:{" "}
                <span className="text-yellow-400 font-black text-2xl drop-shadow-[0_0_10px_rgba(234,179,8,0.5)]">
                  ${user.balance.toFixed(2)}
                </span>
              </p>
            </div>
          )}
        </div>
      </Card>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/games/crash-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { useAuth } from "@/components/auth/auth-provider"
import { useToast } from "@/hooks/use-toast"

export function CrashGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { toast } = useToast()
  const [betAmount, setBetAmount] = useState(10)
  const [multiplier, setMultiplier] = useState(1.0)
  const [gameState, setGameState] = useState<"betting" | "flying" | "crashed">("betting")
  const [cashoutMultiplier, setCashoutMultiplier] = useState<number | null>(null)
  const [crashPoint, setCrashPoint] = useState(1.0)
  const intervalRef = useRef<NodeJS.Timeout | null>(null)

const generateCrashPoint = () => {
    const random = Math.random()
    if (random < 0.05) return 1.0 + Math.random() * 0.5
    if (random < 0.15) return 1.5 + Math.random() * 0.5
    if (random < 0.3) return 2.0 + Math.random()
    if (random < 0.5) return 3.0 + Math.random() * 2
    if (random < 0.7) return 5.0 + Math.random() * 5
    return 10.0 + Math.random() * 40
  }

const startGame = () => {
    if (!isAuthenticated || !user) {
      toast({
        title: "Login Required",
        description: "Please login to play this game.",
        variant: "destructive",
      })
      return
    }

if (user.balance < betAmount) {
      toast({
        title: "Insufficient Balance",
        description: "You do not have enough balance to place this bet.",
        variant: "destructive",
      })
      return
    }

updateBalance(-betAmount)
    const newCrashPoint = generateCrashPoint()
    setCrashPoint(newCrashPoint)
    setMultiplier(1.0)
    setGameState("flying")
    setCashoutMultiplier(null)

let currentMultiplier = 1.0
    intervalRef.current = setInterval(() => {
      currentMultiplier += 0.01
      setMultiplier(currentMultiplier)

if (currentMultiplier >= newCrashPoint) {
        crash()
      }
    }, 50)
  }

const cashout = () => {
    if (gameState !== "flying") return

if (intervalRef.current) {
      clearInterval(intervalRef.current)
    }

const winAmount = betAmount * multiplier
    updateBalance(winAmount)
    setCashoutMultiplier(multiplier)
    setGameState("crashed")

toast({
      title: "Cashed Out!",
      description: `You won $${winAmount.toFixed(2)} at ${multiplier.toFixed(2)}x`,
    })
  }

const crash = () => {
    if (intervalRef.current) {
      clearInterval(intervalRef.current)
    }

setGameState("crashed")

if (!cashoutMultiplier) {
      toast({
        title: "Crashed!",
        description: `The rocket crashed at ${crashPoint.toFixed(2)}x. You lost $${betAmount}`,
        variant: "destructive",
      })
    }
  }

const resetGame = () => {
    setGameState("betting")
    setMultiplier(1.0)
    setCashoutMultiplier(null)
  }

useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current)
      }
    }
  }, [])

return (
    <Card className="relative overflow-hidden bg-gradient-to-br from-slate-950 via-blue-950/30 to-slate-950 border-2 border-blue-500/40 p-8 shadow-[0_0_50px_rgba(59,130,246,0.3)]">
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,rgba(59,130,246,0.15),transparent_70%)]"></div>
      <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-blue-500 to-transparent animate-[shimmer_2s_infinite]"></div>

<div className="relative z-10">
            <div
              className={`text-9xl font-black transition-all duration-100 ${
                gameState === "flying"
                  ? "text-green-400 animate-pulse drop-shadow-[0_0_30px_rgba(74,222,128,0.8)]"
                  : gameState === "crashed" && cashoutMultiplier
                    ? "text-yellow-400 drop-shadow-[0_0_30px_rgba(234,179,8,0.8)]"
                    : "text-red-500 drop-shadow-[0_0_30px_rgba(239,68,68,0.8)]"
              }`}
            >
              {multiplier.toFixed(2)}x
            </div>
            {gameState === "crashed" && !cashoutMultiplier && (
              <div className="text-4xl text-red-500 font-black mt-6 animate-bounce drop-shadow-[0_0_20px_rgba(239,68,68,0.8)]">
                💥 CRASHED! 💥
              </div>
            )}
            {cashoutMultiplier && (
              <div className="text-3xl text-green-400 font-black mt-6 animate-pulse drop-shadow-[0_0_20px_rgba(74,222,128,0.8)]">
                ✅ Cashed Out!
              </div>
            )}
          </div>

{gameState === "flying" && (
            <div
              className="absolute bottom-0 left-1/2 transform -translate-x-1/2 text-7xl transition-all duration-100 drop-shadow-[0_0_20px_rgba(249,115,22,0.8)]"
              style={{
                bottom: `${Math.min((multiplier - 1) * 35, 250)}px`,
                filter: "drop-shadow(0 0 20px rgba(249, 115, 22, 0.8))",
              }}
            >
              🚀
            </div>
          )}
        </div>

<div className="space-y-6">
          {gameState === "betting" && (
            <>
              <div className="flex items-center justify-center gap-4">
                <label className="text-white font-bold text-lg">Bet Amount:</label>
                <input
                  type="number"
                  value={betAmount}
                  onChange={(e) => setBetAmount(Math.max(1, Number.parseInt(e.target.value) || 1))}
                  className="w-40 px-6 py-3 rounded-xl bg-slate-800/80 text-white text-xl font-bold border-2 border-orange-500/50 focus:outline-none focus:border-orange-500 focus:ring-2 focus:ring-orange-500/50"
                  min="1"
                  disabled={!isAuthenticated}
                />
              </div>
              <div className="flex justify-center gap-3">
                {[10, 25, 50, 100].map((amount) => (
                  <Button
                    key={amount}
                    onClick={() => setBetAmount(amount)}
                    className="bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-bold px-6 py-3 shadow-lg hover:shadow-orange-500/50 transform hover:scale-105 transition-all"
                    disabled={!isAuthenticated}
                  >
                    ${amount}
                  </Button>
                ))}
              </div>
              <div className="flex justify-center">
                {!isAuthenticated ? (
                  <div className="bg-orange-500/20 border-2 border-orange-500 rounded-lg px-8 py-4">
                    <p className="text-orange-400 text-xl font-bold">Please login to play</p>
                  </div>
                ) : (
                  <Button
                    onClick={startGame}
                    className="bg-gradient-to-r from-green-600 via-green-700 to-green-800 hover:from-green-700 hover:via-green-800 hover:to-green-900 text-white font-black px-16 py-6 text-2xl shadow-[0_0_30px_rgba(34,197,94,0.5)] hover:shadow-[0_0_40px_rgba(34,197,94,0.7)] transform hover:scale-105 transition-all"
                  >
                    🚀 Start Flight
                  </Button>
                )}
              </div>
            </>
          )}

{gameState === "flying" && (
            <div className="flex justify-center">
              <Button
                onClick={cashout}
                className="bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 hover:from-yellow-600 hover:via-orange-600 hover:to-red-600 text-white font-black px-20 py-8 text-3xl animate-pulse shadow-[0_0_40px_rgba(249,115,22,0.7)] transform hover:scale-110 transition-all"
              >
                💰 Cash Out ${(betAmount * multiplier).toFixed(2)}
              </Button>
            </div>
          )}

{gameState === "crashed" && (
            <div className="flex justify-center">
              <Button
                onClick={resetGame}
                className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-black px-16 py-6 text-2xl shadow-lg transform hover:scale-105 transition-all"
              >
                🔄 Play Again
              </Button>
            </div>
          )}
        </div>

{isAuthenticated && user && (
          <div className="bg-gradient-to-r from-slate-800/50 via-slate-700/50 to-slate-800/50 border-2 border-blue-500/30 rounded-xl px-8 py-4 backdrop-blur text-center">
            <p className="text-xl text-white">
              Current Balance:{" "}
              <span className="font-black text-2xl text-yellow-400 drop-shadow-[0_0_10px_rgba(234,179,8,0.5)]">
                ${user.balance.toFixed(2)}
              </span>
            </p>
          </div>
        )}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/games/blackjack-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { useAuth } from "@/components/auth/auth-provider"
import { useToast } from "@/hooks/use-toast"

type CardType = { suit: string; value: string; numValue: number }

export function BlackjackGame() {
  const { user, updateBalance, isAuthenticated } = useAuth()
  const { toast } = useToast()
  const [betAmount, setBetAmount] = useState(10)
  const [playerHand, setPlayerHand] = useState<CardType[]>([])
  const [dealerHand, setDealerHand] = useState<CardType[]>([])
  const [gameState, setGameState] = useState<"betting" | "playing" | "finished">("betting")
  const [result, setResult] = useState("")
  const [isAnimating, setIsAnimating] = useState(false)

const suits = ["♠", "♥", "♦", "♣"]
  const values = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"]

const getCardValue = (card: CardType, currentTotal: number): number => {
    if (card.value === "A") {
      return currentTotal + 11 > 21 ? 1 : 11
    }
    return card.numValue
  }

const calculateHandValue = (hand: CardType[]): number => {
    let total = 0
    let aces = 0

hand.forEach((card) => {
      if (card.value === "A") {
        aces++
        total += 11
      } else {
        total += card.numValue
      }
    })

while (total > 21 && aces > 0) {
      total -= 10
      aces--
    }

return total
  }

const createCard = (): CardType => {
    const suit = suits[Math.floor(Math.random() * suits.length)]
    const value = values[Math.floor(Math.random() * values.length)]
    let numValue = Number.parseInt(value)
    if (isNaN(numValue)) {
      numValue = value === "A" ? 11 : 10
    }
    return { suit, value, numValue }
  }

updateBalance(-betAmount)
    setIsAnimating(true)

const newPlayerHand = [createCard(), createCard()]
    const newDealerHand = [createCard(), createCard()]

setPlayerHand(newPlayerHand)
    setDealerHand(newDealerHand)
    setGameState("playing")
    setResult("")

setTimeout(() => setIsAnimating(false), 500)

const playerValue = calculateHandValue(newPlayerHand)
    if (playerValue === 21) {
      endGame(newPlayerHand, newDealerHand)
    }
  }

const hit = () => {
    const newCard = createCard()
    const newHand = [...playerHand, newCard]
    setPlayerHand(newHand)

const handValue = calculateHandValue(newHand)
    if (handValue > 21) {
      endGame(newHand, dealerHand)
    } else if (handValue === 21) {
      stand(newHand)
    }
  }

const stand = (currentPlayerHand = playerHand) => {
    const newDealerHand = [...dealerHand]

while (calculateHandValue(newDealerHand) < 17) {
      newDealerHand.push(createCard())
    }

setDealerHand(newDealerHand)
    endGame(currentPlayerHand, newDealerHand)
  }

const endGame = (finalPlayerHand: CardType[], finalDealerHand: CardType[]) => {
    const playerValue = calculateHandValue(finalPlayerHand)
    const dealerValue = calculateHandValue(finalDealerHand)

let resultText = ""
    let winAmount = 0

if (playerValue > 21) {
      resultText = "Bust! Dealer wins"
    } else if (dealerValue > 21) {
      resultText = "Dealer busts! You win!"
      winAmount = betAmount * 2
    } else if (playerValue > dealerValue) {
      resultText = "You win!"
      winAmount = betAmount * 2
    } else if (playerValue < dealerValue) {
      resultText = "Dealer wins"
    } else {
      resultText = "Push! Bet returned"
      winAmount = betAmount
    }

if (winAmount > 0) {
      updateBalance(winAmount)
      toast({
        title: resultText,
        description: `You won $${winAmount}!`,
      })
    } else {
      toast({
        title: resultText,
        description: `You lost $${betAmount}`,
        variant: "destructive",
      })
    }

setResult(resultText)
    setGameState("finished")
  }

const resetGame = () => {
    setPlayerHand([])
    setDealerHand([])
    setGameState("betting")
    setResult("")
  }

const renderCard = (card: CardType, hidden = false) => {
    const isRed = card.suit === "♥" || card.suit === "♦"

return (
      <div
        className={`w-24 h-36 rounded-xl flex flex-col items-center justify-center text-3xl font-black shadow-2xl transform transition-all duration-300 border-4 ${
          hidden
            ? "bg-gradient-to-br from-blue-600 via-blue-700 to-blue-900 border-blue-400"
            : "bg-gradient-to-br from-white to-gray-100 border-gray-300"
        } ${isAnimating ? "scale-0 rotate-180" : "scale-100 rotate-0"} hover:scale-105`}
      >
        {hidden ? (
          <div className="text-white text-5xl drop-shadow-lg">🎴</div>
        ) : (
          <>
            <div className={`${isRed ? "text-red-600" : "text-black"} font-black text-2xl`}>{card.value}</div>
            <div className={`text-5xl ${isRed ? "text-red-600" : "text-black"} drop-shadow-md`}>{card.suit}</div>
          </>
        )}
      </div>
    )
  }

return (
    <Card className="relative overflow-hidden bg-gradient-to-br from-green-900 via-green-800 to-green-950 border-2 border-green-500/40 p-8 shadow-[0_0_50px_rgba(34,197,94,0.3)]">
      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,rgba(34,197,94,0.1),transparent_70%)]"></div>
      <div
        className="absolute inset-0 opacity-10"
        style={{
          backgroundImage:
            "repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255,255,255,0.05) 10px, rgba(255,255,255,0.05) 20px)",
        }}
      ></div>

<div className="relative z-10 space-y-8">
        <div className="text-center bg-green-950/50 rounded-2xl p-6 border border-green-500/20">
          <h3 className="text-2xl font-black text-white mb-6 drop-shadow-lg">
            🎩 Dealer's Hand{" "}
            {gameState !== "betting" && (
              <span className="text-yellow-400">
                ({gameState === "playing" ? "?" : calculateHandValue(dealerHand)})
              </span>
            )}
          </h3>
          <div className="flex justify-center gap-3 flex-wrap">
            {dealerHand.map((card, index) => (
              <div key={index} className="transform hover:-translate-y-2 transition-transform">
                {renderCard(card, gameState === "playing" && index === 1)}
              </div>
            ))}
          </div>
        </div>

<div className="text-center bg-green-950/50 rounded-2xl p-6 border border-green-500/20">
          <h3 className="text-2xl font-black text-white mb-6 drop-shadow-lg">
            🎰 Your Hand{" "}
            {gameState !== "betting" && <span className="text-yellow-400">({calculateHandValue(playerHand)})</span>}
          </h3>
          <div className="flex justify-center gap-3 flex-wrap">
            {playerHand.map((card, index) => (
              <div key={index} className="transform hover:-translate-y-2 transition-transform">
                {renderCard(card)}
              </div>
            ))}
          </div>
        </div>

{result && (
          <div className="text-center bg-gradient-to-r from-yellow-500/20 to-orange-500/20 rounded-2xl p-6 border-2 border-yellow-500">
            <div className="text-4xl font-black text-yellow-400 animate-pulse drop-shadow-[0_0_20px_rgba(234,179,8,0.8)]">
              {result}
            </div>
          </div>
        )}

<div className="space-y-6">
          {gameState === "betting" && (
            <>
              <div className="flex items-center justify-center gap-4">
                <label className="text-white font-bold text-lg">Bet Amount:</label>
                <input
                  type="number"
                  value={betAmount}
                  onChange={(e) => setBetAmount(Math.max(1, Number.parseInt(e.target.value) || 1))}
                  className="w-40 px-6 py-3 rounded-xl bg-slate-800/80 text-white text-xl font-bold border-2 border-orange-500/50 focus:outline-none focus:border-orange-500 focus:ring-2 focus:ring-orange-500/50"
                  min="1"
                  disabled={!isAuthenticated}
                />
              </div>
              <div className="flex justify-center gap-3">
                {[10, 25, 50, 100].map((amount) => (
                  <Button
                    key={amount}
                    onClick={() => setBetAmount(amount)}
                    className="bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-bold px-6 py-3 shadow-lg hover:shadow-orange-500/50 transform hover:scale-105 transition-all"
                    disabled={!isAuthenticated}
                  >
                    ${amount}
                  </Button>
                ))}
              </div>
              <div className="flex justify-center">
                {!isAuthenticated ? (
                  <div className="bg-orange-500/20 border-2 border-orange-500 rounded-lg px-8 py-4">
                    <p className="text-orange-400 text-xl font-bold">Please login to play</p>
                  </div>
                ) : (
                  <Button
                    onClick={startGame}
                    className="bg-gradient-to-r from-orange-500 via-orange-600 to-orange-700 hover:from-orange-600 hover:via-orange-700 hover:to-orange-800 text-white font-black px-16 py-6 text-2xl shadow-lg transform hover:scale-105 transition-all"
                  >
                    🎴 Deal Cards
                  </Button>
                )}
              </div>
            </>
          )}

{gameState === "playing" && (
            <div className="flex justify-center gap-6">
              <Button
                onClick={hit}
                className="bg-gradient-to-br from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-black px-12 py-6 text-xl shadow-lg transform hover:scale-105 transition-all"
              >
                ➕ Hit
              </Button>
              <Button
                onClick={() => stand()}
                className="bg-gradient-to-br from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-black px-12 py-6 text-xl shadow-lg transform hover:scale-105 transition-all"
              >
                ✋ Stand
              </Button>
            </div>
          )}

{gameState === "finished" && (
            <div className="flex justify-center">
              <Button
                onClick={resetGame}
                className="bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-black px-16 py-6 text-2xl shadow-lg transform hover:scale-105 transition-all"
              >
                🔄 Play Again
              </Button>
            </div>
          )}
        </div>

{isAuthenticated && user && (
          <div className="bg-gradient-to-r from-slate-800/50 via-slate-700/50 to-slate-800/50 border-2 border-green-500/30 rounded-xl px-8 py-4 backdrop-blur text-center">
            <p className="text-xl text-white">
              Current Balance:{" "}
              <span className="font-black text-2xl text-yellow-400 drop-shadow-[0_0_10px_rgba(234,179,8,0.5)]">
                ${user.balance.toFixed(2)}
              </span>
            </p>
          </div>
        )}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Gamepad2, CreditCard, Banknote, Headphones } from "lucide-react"
import { useLanguage } from "@/lib/language-context"

export function AboutSection() {
  const { t } = useLanguage()

const features = [
    {
      icon: Gamepad2,
      title: t("fairPlayCasino"),
      description: t("fairPlayDesc"),
    },
    {
      icon: CreditCard,
      title: t("quickDeposit"),
      description: t("quickDepositDesc"),
    },
    {
      icon: Banknote,
      title: t("quickWithdraw"),
      description: t("quickWithdrawDesc"),
    },
    {
      icon: Headphones,
      title: t("support247"),
      description: t("support247Desc"),
    },
  ]

return (
    <section className="bg-slate-900 py-16">
      <div className="container mx-auto px-4">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          {/* Left Content */}
          <div>
            <h2 className="text-3xl lg:text-4xl font-bold text-white mb-6">{t("aboutTitle")}</h2>
            <p className="text-gray-300 mb-8 leading-relaxed">{t("aboutDescription")}</p>

<div className="grid grid-cols-2 gap-6 mb-8">
              {features.map((feature, index) => (
                <div key={index} className="flex items-start space-x-3">
                  <div className="flex-shrink-0">
                    <feature.icon className="w-6 h-6 text-orange-500" />
                  </div>
                  <div>
                    <h3 className="text-white font-semibold mb-1">{feature.title}</h3>
                    <p className="text-gray-400 text-sm">{feature.description}</p>
                  </div>
                </div>
              ))}
            </div>

<Button className="bg-orange-500 hover:bg-orange-600 text-black font-semibold px-8">
              {t("learnMore")}
            </Button>
          </div>

{/* Right Content - Casino Illustration */}
          <div className="relative flex justify-center">
            <div className="relative w-80 h-80">
              {/* Casino Chips Stack */}
              <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
                <div className="relative">
                  {/* Chips */}
                  <div className="w-16 h-4 bg-yellow-500 rounded-full mb-1"></div>
                  <div className="w-16 h-4 bg-red-500 rounded-full mb-1"></div>
                  <div className="w-16 h-4 bg-blue-500 rounded-full mb-1"></div>
                  <div className="w-16 h-4 bg-green-500 rounded-full mb-1"></div>
                  <div className="w-16 h-4 bg-purple-500 rounded-full"></div>
                </div>
              </div>

{/* Floating Elements */}
              <div className="absolute top-10 left-10 w-12 h-12 bg-yellow-500 rounded-full opacity-20 animate-bounce"></div>
              <div className="absolute top-20 right-10 w-8 h-8 bg-red-500 rounded-full opacity-30 animate-pulse"></div>
              <div className="absolute bottom-20 left-20 w-10 h-10 bg-blue-500 rounded-full opacity-25 animate-bounce delay-300"></div>
              <div className="absolute bottom-10 right-20 w-6 h-6 bg-green-500 rounded-full opacity-40 animate-pulse delay-500"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/why-choose-section.tsx" isEdit="true" isMerged="true"
"use client"

import { Shield, Percent, Lock } from "lucide-react"
import { useLanguage } from "@/lib/language-context"

export function WhyChooseSection() {
  const { t } = useLanguage()

const reasons = [
    {
      icon: Shield,
      title: t("awesomeGaming"),
      description: t("awesomeGamingDesc"),
    },
    {
      icon: Percent,
      title: t("referralCommission"),
      description: t("referralCommissionDesc"),
    },
    {
      icon: Lock,
      title: t("secureBetting"),
      description: t("secureBettingDesc"),
    },
  ]

return (
    <section className="bg-slate-800 py-16">
      <div className="container mx-auto px-4">
        <div className="text-center mb-12">
          <h2 className="text-3xl lg:text-4xl font-bold text-white mb-4">{t("whyChooseTitle")}</h2>
          <p className="text-gray-300 max-w-2xl mx-auto">{t("whyChooseDesc")}</p>
        </div>

<div className="grid md:grid-cols-3 gap-8">
          {reasons.map((reason, index) => (
            <div key={index} className="text-center">
              <div className="flex justify-center mb-6">
                <div className="w-16 h-16 bg-orange-500 rounded-full flex items-center justify-center">
                  <reason.icon className="w-8 h-8 text-slate-900" />
                </div>
              </div>
              <h3 className="text-xl font-bold text-white mb-4">{reason.title}</h3>
              <p className="text-gray-300 leading-relaxed">{reason.description}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Facebook, Twitter, Instagram, Youtube, Shield, Zap, CheckCircle } from "lucide-react"
import { useLanguage } from "@/lib/language-context"

export function Footer() {
  const { t } = useLanguage()

return (
    <footer className="bg-slate-900 border-t border-slate-800 py-16 relative overflow-hidden">
      <div className="absolute inset-0 opacity-5">
        <div className="absolute top-10 left-10 w-20 h-20 border border-orange-500 rounded-full"></div>
        <div className="absolute bottom-10 right-10 w-16 h-16 border border-orange-400 rounded-full"></div>
        <div className="absolute top-1/2 left-1/4 w-12 h-12 border border-orange-300 rounded-full"></div>
      </div>

<div className="container mx-auto px-4 relative z-10">
        <div className="grid md:grid-cols-4 gap-8 mb-12">
          {/* Logo and Description */}
          <div className="md:col-span-2">
            <Link href="/" className="flex items-center space-x-3 mb-6 group">
              <div className="w-10 h-10 bg-gradient-to-br from-orange-400 to-orange-600 rounded-full flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                <span className="text-black font-bold text-lg">C</span>
              </div>
              <span className="text-white font-bold text-2xl">CryptoMoney</span>
            </Link>
            <p className="text-gray-400 mb-8 max-w-md leading-relaxed text-lg">{t("footerDescription")}</p>
            <div className="flex space-x-4">
              <a
                href="#"
                className="bg-slate-800 p-3 rounded-full text-gray-400 hover:text-orange-500 hover:bg-slate-700 transition-all duration-300 hover:scale-110"
              >
                <Facebook className="w-5 h-5" />
              </a>
              <a
                href="#"
                className="bg-slate-800 p-3 rounded-full text-gray-400 hover:text-orange-500 hover:bg-slate-700 transition-all duration-300 hover:scale-110"
              >
                <Twitter className="w-5 h-5" />
              </a>
              <a
                href="#"
                className="bg-slate-800 p-3 rounded-full text-gray-400 hover:text-orange-500 hover:bg-slate-700 transition-all duration-300 hover:scale-110"
              >
                <Instagram className="w-5 h-5" />
              </a>
              <a
                href="#"
                className="bg-slate-800 p-3 rounded-full text-gray-400 hover:text-orange-500 hover:bg-slate-700 transition-all duration-300 hover:scale-110"
              >
                <Youtube className="w-5 h-5" />
              </a>
            </div>
          </div>

{/* Quick Links */}
          <div>
            <h3 className="text-white font-bold mb-6 text-lg">{t("quickLinks")}</h3>
            <ul className="space-y-3">
              <li>
                <Link
                  href="/about"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("aboutUs")}
                </Link>
              </li>
              <li>
                <Link
                  href="/games"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("games")}
                </Link>
              </li>
              <li>
                <Link
                  href="/sports"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("sports")}
                </Link>
              </li>
              <li>
                <Link
                  href="/promotions"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("promotions")}
                </Link>
              </li>
              <li>
                <Link
                  href="/tournaments"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("tournaments")}
                </Link>
              </li>
              <li>
                <Link
                  href="/vip"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("vipClub")}
                </Link>
              </li>
            </ul>
          </div>

{/* Legal */}
          <div>
            <h3 className="text-white font-bold mb-6 text-lg">{t("legalSupport")}</h3>
            <ul className="space-y-3">
              <li>
                <Link
                  href="/terms"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("termsOfService")}
                </Link>
              </li>
              <li>
                <Link
                  href="/privacy"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("privacyPolicy")}
                </Link>
              </li>
              <li>
                <Link
                  href="/contact"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("contact")}
                </Link>
              </li>
              <li>
                <Link
                  href="/profile"
                  className="text-gray-400 hover:text-orange-400 transition-colors duration-300 flex items-center group"
                >
                  <span className="w-2 h-2 bg-orange-500 rounded-full mr-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
                  {t("myProfile")}
                </Link>
              </li>
            </ul>
          </div>
        </div>

<div className="border-t border-slate-800 pt-8">
          <div className="flex flex-col lg:flex-row justify-between items-center space-y-6 lg:space-y-0">
            <div className="text-center lg:text-left">
              <p className="text-gray-400 text-lg font-medium">© 2025 CryptoMoney. {t("allRightsReserved")}</p>
              <p className="text-gray-500 text-sm mt-2">{t("playResponsibly")}</p>
            </div>
            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-8 text-sm">
              <div className="flex items-center space-x-2 text-gray-400 bg-slate-800 px-4 py-2 rounded-full">
                <Shield className="w-4 h-4 text-green-400" />
                <span>{t("sslSecured")}</span>
              </div>
              <div className="flex items-center space-x-2 text-gray-400 bg-slate-800 px-4 py-2 rounded-full">
                <CheckCircle className="w-4 h-4 text-blue-400" />
                <span>{t("fairGaming")}</span>
              </div>
              <div className="flex items-center space-x-2 text-gray-400 bg-slate-800 px-4 py-2 rounded-full">
                <Zap className="w-4 h-4 text-orange-400" />
                <span>{t("instantPayouts")}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/language-switcher.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronDown } from "lucide-react"
import { useLanguage, type Language } from "@/lib/language-context"

interface LanguageOption {
  code: Language
  name: string
  flag: string
}

const languages: LanguageOption[] = [
  { code: "en", name: "English", flag: "🇺🇸" },
  { code: "ru", name: "Русский", flag: "🇷🇺" },
  { code: "es", name: "Español", flag: "🇪🇸" },
]

export function LanguageSwitcher() {
  const { language, setLanguage } = useLanguage()
  const [isOpen, setIsOpen] = useState(false)

const currentLanguage = languages.find((lang) => lang.code === language) || languages[0]

const handleLanguageChange = (lang: LanguageOption) => {
    setLanguage(lang.code)
    setIsOpen(false)

// Show notification
    const notification = document.createElement("div")
    notification.className =
      "fixed top-4 right-4 bg-orange-500 text-white px-4 py-2 rounded-lg shadow-lg z-50 transition-all duration-300"
    notification.textContent = `Language changed to ${lang.name}`
    document.body.appendChild(notification)

setTimeout(() => {
      notification.remove()
    }, 2000)
  }

useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      const target = event.target as HTMLElement
      if (!target.closest(".language-switcher")) {
        setIsOpen(false)
      }
    }

if (isOpen) {
      document.addEventListener("click", handleClickOutside)
    }

return () => {
      document.removeEventListener("click", handleClickOutside)
    }
  }, [isOpen])

return (
    <div className="relative language-switcher">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center space-x-2 text-gray-300 hover:text-orange-500 transition-colors"
      >
        <span>{currentLanguage.flag}</span>
        <span>{currentLanguage.code.toUpperCase()}</span>
        <ChevronDown className={`w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`} />
      </button>

{isOpen && (
        <div className="absolute top-full right-0 mt-2 bg-slate-800 border border-slate-600 rounded-lg shadow-lg z-[100] min-w-[150px]">
          {languages.map((lang) => (
            <button
              key={lang.code}
              onClick={() => handleLanguageChange(lang)}
              className={`w-full flex items-center space-x-3 px-4 py-2 text-left transition-colors first:rounded-t-lg last:rounded-b-lg ${
                currentLanguage.code === lang.code
                  ? "bg-orange-500/20 text-orange-500"
                  : "text-gray-300 hover:bg-slate-700 hover:text-orange-500"
              }`}
            >
              <span>{lang.flag}</span>
              <span>{lang.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/games/mines-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { useAuth } from "@/components/auth/auth-provider"
import { useToast } from "@/hooks/use-toast"
import { useLanguage } from "@/lib/language-context"
import { Bomb, Gem, Trophy } from "lucide-react"

export function MinesGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { toast } = useToast()
  const { t } = useLanguage()
  const [bet, setBet] = useState(10)
  const [mineCount, setMineCount] = useState(3)
  const [gameBoard, setGameBoard] = useState<Array<{ revealed: boolean; isMine: boolean; index: number }>>([])
  const [gameActive, setGameActive] = useState(false)
  const [gameResult, setGameResult] = useState<"win" | "lose" | null>(null)
  const [currentMultiplier, setCurrentMultiplier] = useState(1)
  const [revealedCount, setRevealedCount] = useState(0)

const initializeGame = () => {
    if (!user || user.balance < bet) {
      toast({
        title: "Insufficient Balance",
        description: "You don't have enough balance to place this bet.",
        variant: "destructive",
      })
      return
    }

updateBalance(-bet)

const board = Array.from({ length: 25 }, (_, index) => ({
      revealed: false,
      isMine: false,
      index,
    }))

const minePositions = new Set<number>()
    while (minePositions.size < mineCount) {
      minePositions.add(Math.floor(Math.random() * 25))
    }

minePositions.forEach((pos) => {
      board[pos].isMine = true
    })

setGameBoard(board)
    setGameActive(true)
    setGameResult(null)
    setCurrentMultiplier(1)
    setRevealedCount(0)
  }

const revealTile = (index: number) => {
    if (!gameActive || gameBoard[index].revealed) return

const newBoard = [...gameBoard]
    newBoard[index].revealed = true

if (newBoard[index].isMine) {
      newBoard.forEach((tile) => {
        if (tile.isMine) tile.revealed = true
      })
      setGameBoard(newBoard)
      setGameActive(false)
      setGameResult("lose")

toast({
        title: "Boom!",
        description: `You hit a mine and lost $${bet}`,
        variant: "destructive",
      })
    } else {
      const newRevealedCount = revealedCount + 1
      const safeSpots = 25 - mineCount
      const newMultiplier = 1 + (newRevealedCount / safeSpots) * (mineCount / 2)

setGameBoard(newBoard)
      setRevealedCount(newRevealedCount)
      setCurrentMultiplier(newMultiplier)

if (newRevealedCount === safeSpots) {
        const winAmount = bet * newMultiplier
        updateBalance(winAmount)
        setGameActive(false)
        setGameResult("win")

toast({
          title: "Perfect Game!",
          description: `You won $${winAmount.toFixed(2)}!`,
        })
      }
    }
  }

const cashOut = () => {
    if (!gameActive || revealedCount === 0) return

const winAmount = bet * currentMultiplier
    updateBalance(winAmount)
    setGameActive(false)
    setGameResult("win")

toast({
      title: "Cashed Out!",
      description: `You won $${winAmount.toFixed(2)}!`,
    })
  }

const resetGame = () => {
    setGameBoard([])
    setGameActive(false)
    setGameResult(null)
    setCurrentMultiplier(1)
    setRevealedCount(0)
  }

return (
    <Card className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 border-orange-500/20 p-8 shadow-2xl">
      <div className="space-y-6">
        <div className="text-center mb-6">
          <h2 className="text-3xl font-bold text-white mb-2 flex items-center justify-center gap-2">
            <Bomb className="w-8 h-8 text-red-500" />
            {t("mines")}
            <Gem className="w-8 h-8 text-green-500" />
          </h2>
          <p className="text-gray-400">{t("minesDesc")}</p>
        </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div>
            <label className="block text-white font-semibold mb-2">{t("betAmount")}</label>
            <Input
              type="number"
              value={bet}
              onChange={(e) => setBet(Number(e.target.value))}
              min="1"
              max="200"
              className="bg-slate-700/50 border-orange-500/30 text-white text-lg font-semibold"
              disabled={gameActive}
            />
          </div>
          <div>
            <label className="block text-white font-semibold mb-2">{t("minesCount")}</label>
            <Input
              type="number"
              value={mineCount}
              onChange={(e) => setMineCount(Math.min(20, Math.max(1, Number(e.target.value))))}
              min="1"
              max="20"
              className="bg-slate-700/50 border-orange-500/30 text-white text-lg font-semibold"
              disabled={gameActive}
            />
          </div>
          <div>
            <label className="block text-white font-semibold mb-2">{t("multiplier")}</label>
            <div className="bg-gradient-to-r from-orange-500 to-yellow-500 rounded-md px-3 py-2 text-black text-center text-lg font-bold">
              {currentMultiplier.toFixed(2)}x
            </div>
          </div>
        </div>

{gameResult && (
          <div
            className={`text-center p-4 rounded-lg ${gameResult === "win" ? "bg-green-500/20 border border-green-500" : "bg-red-500/20 border border-red-500"}`}
          >
            <div className="flex items-center justify-center gap-2 mb-2">
              {gameResult === "win" ? (
                <Trophy className="w-8 h-8 text-green-500" />
              ) : (
                <Bomb className="w-8 h-8 text-red-500" />
              )}
              <span className={`text-3xl font-bold ${gameResult === "win" ? "text-green-400" : "text-red-400"}`}>
                {gameResult === "win" ? `+$${(bet * currentMultiplier).toFixed(2)}` : `-$${bet}`}
              </span>
            </div>
          </div>
        )}

{gameBoard.length > 0 && (
          <div className="grid grid-cols-5 gap-3 max-w-lg mx-auto p-4 bg-slate-800/50 rounded-xl">
            {gameBoard.map((tile) => (
              <Button
                key={tile.index}
                onClick={() => revealTile(tile.index)}
                disabled={!gameActive || tile.revealed}
                className={`w-20 h-20 text-3xl transition-all duration-300 transform hover:scale-105 ${
                  tile.revealed
                    ? tile.isMine
                      ? "bg-gradient-to-br from-red-600 to-red-800 hover:from-red-600 hover:to-red-800 shadow-lg shadow-red-500/50 animate-pulse"
                      : "bg-gradient-to-br from-green-600 to-green-800 hover:from-green-600 hover:to-green-800 shadow-lg shadow-green-500/50"
                    : "bg-gradient-to-br from-slate-600 to-slate-700 hover:from-orange-500 hover:to-orange-600 shadow-md"
                }`}
              >
                {tile.revealed ? (
                  tile.isMine ? (
                    <Bomb className="w-8 h-8 animate-bounce" />
                  ) : (
                    <Gem className="w-8 h-8 animate-pulse" />
                  )
                ) : (
                  <span className="text-2xl">?</span>
                )}
              </Button>
            ))}
          </div>
        )}

<div className="flex justify-center space-x-4">
          {!isAuthenticated ? (
            <div className="text-gray-400 text-lg">{t("pleaseLoginToPlay")}</div>
          ) : (
            <>
              {!gameActive ? (
                <Button
                  onClick={initializeGame}
                  className="bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-bold px-10 py-6 text-lg shadow-lg shadow-green-500/50"
                >
                  {t("startGame")} (${bet})
                </Button>
              ) : (
                <Button
                  onClick={cashOut}
                  disabled={revealedCount === 0}
                  className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-black font-bold px-10 py-6 text-lg shadow-lg shadow-yellow-500/50"
                >
                  {t("cashOut")} ${(bet * currentMultiplier).toFixed(2)}
                </Button>
              )}
              <Button
                onClick={resetGame}
                variant="outline"
                className="border-orange-500 text-orange-400 hover:bg-orange-500/20 bg-transparent px-8 py-6 text-lg"
              >
                {t("reset")}
              </Button>
            </>
          )}
        </div>

{isAuthenticated && (
          <div className="text-center p-4 bg-slate-800/50 rounded-lg border border-orange-500/20">
            <span className="text-gray-300 text-lg">{t("balance")}: </span>
            <span className="text-orange-400 font-bold text-2xl">${user?.balance.toFixed(2)}</span>
          </div>
        )}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="components/games/plinko-game.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export function PlinkoGame() {
  const { user, isAuthenticated, updateBalance } = useAuth()
  const { toast } = useToast()
  const { t } = useLanguage()
  const [betAmount, setBetAmount] = useState(10)
  const [isDropping, setIsDropping] = useState(false)
  const [ballPosition, setBallPosition] = useState<number>(7)
  const [result, setResult] = useState<number | null>(null)

const multipliers = [16, 9, 2, 1.4, 1.4, 1.2, 1.1, 1, 0.5, 1, 1.1, 1.2, 1.4, 1.4, 2, 9, 16]
  const rows = 16

const dropBall = () => {
    if (!user || user.balance < betAmount) {
      toast({
        title: "Insufficient Balance",
        description: "You do not have enough balance to place this bet.",
        variant: "destructive",
      })
      return
    }

updateBalance(-betAmount)
    setIsDropping(true)
    setResult(null)

let position = 7
    const path = [position]

for (let i = 0; i < rows; i++) {
      const direction = Math.random() < 0.5 ? -1 : 1
      position += direction
      position = Math.max(0, Math.min(16, position))
      path.push(position)
    }

let step = 0
    const interval = setInterval(() => {
      if (step < path.length) {
        setBallPosition(path[step])
        step++
      } else {
        clearInterval(interval)
        const finalPosition = path[path.length - 1]
        const multiplier = multipliers[finalPosition]
        const winAmount = betAmount * multiplier

updateBalance(winAmount)
        setResult(multiplier)
        setIsDropping(false)

if (multiplier >= 1) {
          toast({
            title: "Winner!",
            description: `You won $${winAmount.toFixed(2)} with ${multiplier}x multiplier!`,
          })
        } else {
          toast({
            title: "Better luck next time",
            description: `You got ${multiplier}x multiplier`,
            variant: "destructive",
          })
        }
      }
    }, 100)
  }

return (
    <Card className="bg-gradient-to-br from-purple-900 via-blue-900 to-purple-900 border-purple-600 p-8">
      <div className="space-y-6">
        {/* Plinko Board */}
        <div className="relative bg-slate-800/50 rounded-lg p-8 min-h-[400px]">
          <div className="flex flex-col items-center gap-4">
            {/* Pegs */}
            {Array.from({ length: rows }).map((_, rowIndex) => (
              <div key={rowIndex} className="flex gap-8">
                {Array.from({ length: rowIndex + 2 }).map((_, pegIndex) => (
                  <div key={pegIndex} className="w-3 h-3 rounded-full bg-yellow-400 shadow-lg shadow-yellow-400/50" />
                ))}
              </div>
            ))}
          </div>

{/* Ball */}
          {isDropping && (
            <div
              className="absolute top-4 w-6 h-6 rounded-full bg-gradient-to-br from-red-500 to-orange-500 shadow-lg shadow-orange-500/50 transition-all duration-100"
              style={{
                left: `${(ballPosition / 16) * 100}%`,
                transform: "translateX(-50%)",
              }}
            />
          )}

{/* Multipliers */}
          <div className="flex justify-center gap-2 mt-4">
            {multipliers.map((mult, index) => (
              <div
                key={index}
                className={`w-12 h-12 flex items-center justify-center rounded-lg font-bold text-sm ${
                  mult >= 9
                    ? "bg-gradient-to-br from-yellow-400 to-orange-500 text-white"
                    : mult >= 2
                      ? "bg-gradient-to-br from-green-500 to-green-600 text-white"
                      : mult >= 1
                        ? "bg-gradient-to-br from-blue-500 to-blue-600 text-white"
                        : "bg-gradient-to-br from-red-500 to-red-600 text-white"
                } ${result === mult && !isDropping ? "ring-4 ring-yellow-400 animate-pulse" : ""}`}
              >
                {mult}x
              </div>
            ))}
          </div>
        </div>

{/* Result */}
        {result !== null && !isDropping && (
          <div className="text-center">
            <div className="text-3xl font-bold text-yellow-400 animate-pulse">{result}x Multiplier!</div>
            <div className="text-xl text-white mt-2">Won: ${(betAmount * result).toFixed(2)}</div>
          </div>
        )}

{/* Controls */}
        <div className="space-y-4">
          <div className="flex items-center justify-center gap-4">
            <label className="text-white font-medium">{t("betAmount")}:</label>
            <input
              type="number"
              value={betAmount}
              onChange={(e) => setBetAmount(Math.max(1, Number.parseInt(e.target.value) || 1))}
              disabled={isDropping}
              className="w-32 px-4 py-2 rounded-lg bg-slate-700 text-white border border-slate-600 focus:outline-none focus:border-orange-500 disabled:opacity-50"
              min="1"
            />
          </div>
          <div className="flex justify-center gap-2">
            {[10, 25, 50, 100].map((amount) => (
              <Button
                key={amount}
                onClick={() => setBetAmount(amount)}
                disabled={isDropping}
                className="bg-orange-500 hover:bg-orange-600 text-white disabled:opacity-50"
              >
                ${amount}
              </Button>
            ))}
          </div>
          <div className="flex justify-center">
            {!isAuthenticated ? (
              <div className="text-gray-400 text-lg">{t("pleaseLoginToPlay")}</div>
            ) : (
              <Button
                onClick={dropBall}
                disabled={isDropping}
                className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white font-bold px-8 py-3 text-lg disabled:opacity-50"
              >
                {isDropping ? t("dropping") : t("dropBall")}
              </Button>
            )}
          </div>
        </div>

{/* Balance Display */}
        {user && isAuthenticated && (
          <div className="text-center text-white">
            <p className="text-lg">
              {t("balance")}: <span className="font-bold text-yellow-400">${user.balance.toFixed(2)}</span>
            </p>
          </div>
        )}
      </div>
    </Card>
  )
}
[V0_FILE]typescriptreact:file="app/terms/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card } from "@/components/ui/card"
import { useLanguage } from "@/lib/language-context"

export default function TermsPage() {
  const { t } = useLanguage()

return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="py-16">
        <div className="container mx-auto px-4 max-w-4xl">
          <div className="text-center mb-12">
            <h1 className="text-4xl lg:text-5xl font-bold text-white mb-4">{t("termsTitle")}</h1>
            <p className="text-gray-300">{t("termsLastUpdated")}: January 1, 2024</p>
          </div>

<Card className="bg-slate-800 border-slate-700 p-8">
            <div className="prose prose-invert max-w-none">
              <div className="space-y-8 text-gray-300">
                <section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("acceptanceOfTermsTitle")}</h2>
                  <p>{t("acceptanceOfTermsDescription")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("eligibilityTitle")}</h2>
                  <p>{t("eligibilityDescription")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("eligibilityItem1")}</li>
                    <li>{t("eligibilityItem2")}</li>
                    <li>{t("eligibilityItem3")}</li>
                    <li>{t("eligibilityItem4")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("accountRegistrationTitle")}</h2>
                  <p>{t("accountRegistrationDescription")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("accountRegistrationItem1")}</li>
                    <li>{t("accountRegistrationItem2")}</li>
                    <li>{t("accountRegistrationItem3")}</li>
                    <li>{t("accountRegistrationItem4")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("responsibleGamingTitle")}</h2>
                  <p>{t("responsibleGamingDescription")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("responsibleGamingItem1")}</li>
                    <li>{t("responsibleGamingItem2")}</li>
                    <li>{t("responsibleGamingItem3")}</li>
                    <li>{t("responsibleGamingItem4")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("depositsAndWithdrawalsTitle")}</h2>
                  <p>{t("depositsAndWithdrawalsDescription")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("depositsAndWithdrawalsItem1")}</li>
                    <li>{t("depositsAndWithdrawalsItem2")}</li>
                    <li>{t("depositsAndWithdrawalsItem3")}</li>
                    <li>{t("depositsAndWithdrawalsItem4")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("gameRulesAndFairnessTitle")}</h2>
                  <p>{t("gameRulesAndFairnessDescription")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("prohibitedActivitiesTitle")}</h2>
                  <p>{t("prohibitedActivitiesDescription")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("prohibitedActivitiesItem1")}</li>
                    <li>{t("prohibitedActivitiesItem2")}</li>
                    <li>{t("prohibitedActivitiesItem3")}</li>
                    <li>{t("prohibitedActivitiesItem4")}</li>
                    <li>{t("prohibitedActivitiesItem5")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("limitationOfLiabilityTitle")}</h2>
                  <p>{t("limitationOfLiabilityDescription")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("changesToTermsTitle")}</h2>
                  <p>{t("changesToTermsDescription")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("contactInformationTitle")}</h2>
                  <p>{t("contactInformationDescription")}</p>
                </section>
              </div>
            </div>
          </Card>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/privacy/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { Card } from "@/components/ui/card"
import { useLanguage } from "@/lib/language-context"

export default function PrivacyPage() {
  const { t } = useLanguage()

return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="py-16">
        <div className="container mx-auto px-4 max-w-4xl">
          <div className="text-center mb-12">
            <h1 className="text-4xl lg:text-5xl font-bold text-white mb-4">{t("privacyTitle")}</h1>
            <p className="text-gray-300">{t("termsLastUpdated")}: January 1, 2024</p>
          </div>

<Card className="bg-slate-800 border-slate-700 p-8">
            <div className="prose prose-invert max-w-none">
              <div className="space-y-8 text-gray-300">
                <section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("infoWeCollect")}</h2>
                  <p>{t("weCollectInfo")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("accountRegistration")}</li>
                    <li>{t("paymentInfo")}</li>
                    <li>{t("communicationRecords")}</li>
                    <li>{t("gamingActivity")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("howWeUseInfo")}</h2>
                  <p>{t("weUseInfo")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("provideServices")}</li>
                    <li>{t("processTransactions")}</li>
                    <li>{t("verifyIdentity")}</li>
                    <li>{t("communicateAboutAccount")}</li>
                    <li>{t("complyWithLegal")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("infoSharing")}</h2>
                  <p>{t("weDoNotSell")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("withServiceProviders")}</li>
                    <li>{t("whenRequiredByLaw")}</li>
                    <li>{t("toProtectRights")}</li>
                    <li>{t("inConnectionWithBusinessTransfer")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("dataSecurity")}</h2>
                  <p>{t("weImplementSecurityMeasures")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("sslEncryption")}</li>
                    <li>{t("secureServers")}</li>
                    <li>{t("regularSecurityAudits")}</li>
                    <li>{t("accessControls")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("cookiesAndTracking")}</h2>
                  <p>{t("weUseCookies")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("yourRights")}</h2>
                  <p>{t("youHaveRights")}</p>
                  <ul className="list-disc pl-6 mt-2 space-y-1">
                    <li>{t("accessAndReview")}</li>
                    <li>{t("requestCorrections")}</li>
                    <li>{t("requestDeletion")}</li>
                    <li>{t("optOutMarketing")}</li>
                    <li>{t("dataPortability")}</li>
                  </ul>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("dataRetention")}</h2>
                  <p>{t("weRetainInfo")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("internationalTransfers")}</h2>
                  <p>{t("yourInfoMayBeTransferred")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("changesToPrivacyPolicy")}</h2>
                  <p>{t("weMayUpdatePolicy")}</p>
                </section>

<section>
                  <h2 className="text-2xl font-bold text-white mb-4">{t("contactUs")}</h2>
                  <p>{t("ifYouHaveQuestions")}</p>
                  <div className="mt-4 p-4 bg-slate-700 rounded-lg">
                    <p>
                      <strong>{t("email")}</strong>: privacy@playwiny.com
                    </p>
                    <p>
                      <strong>{t("address")}</strong>: 123 Gaming Street, Casino City
                    </p>
                  </div>
                </section>
              </div>
            </div>
          </Card>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/vip/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { Header } from "@/components/header"
import { Footer } from "@/components/footer"
import { useLanguage } from "@/lib/language-context"

export default function VIPPage() {
  const { t } = useLanguage()

return (
    <div className="min-h-screen bg-slate-900">
      <Header />
      <main className="pt-32 pb-16">
        <div className="container mx-auto px-4">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white mb-4">{t("vipTitle")}</h1>
            <p className="text-gray-400 text-lg">{t("vipDesc")}</p>
          </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
            {[
              {
                level: "Bronze",
                requirement: "Deposit 1 BTC",
                cashback: "5%",
                color: "from-amber-600 to-amber-800",
              },
              {
                level: "Silver",
                requirement: "Deposit 5 BTC",
                cashback: "10%",
                color: "from-gray-400 to-gray-600",
              },
              {
                level: "Gold",
                requirement: "Deposit 10 BTC",
                cashback: "15%",
                color: "from-yellow-400 to-yellow-600",
              },
              {
                level: "Platinum",
                requirement: "Deposit 25 BTC",
                cashback: "20%",
                color: "from-blue-400 to-blue-600",
              },
              {
                level: "Diamond",
                requirement: "Deposit 50 BTC",
                cashback: "25%",
                color: "from-purple-400 to-purple-600",
              },
              {
                level: "Elite",
                requirement: "Deposit 100 BTC",
                cashback: "30%",
                color: "from-red-400 to-red-600",
              },
            ].map((tier) => (
              <div key={tier.level} className="bg-slate-800 rounded-lg overflow-hidden">
                <div className={`h-24 bg-gradient-to-r ${tier.color} flex items-center justify-center`}>
                  <h3 className="text-2xl font-bold text-white">{tier.level}</h3>
                </div>
                <div className="p-6">
                  <p className="text-gray-400 mb-2">{t("requirement")}:</p>
                  <p className="text-white font-semibold mb-4">{tier.requirement}</p>
                  <p className="text-gray-400 mb-2">{t("cashback")}:</p>
                  <p className="text-2xl font-bold text-orange-500 mb-4">{tier.cashback}</p>
                  <button className="w-full bg-orange-500 hover:bg-orange-600 text-white py-2 rounded-lg font-semibold">
                    {t("learnMoreBtn")}
                  </button>
                </div>
              </div>
            ))}
          </div>

<div className="bg-slate-800 rounded-lg p-8">
            <h2 className="text-2xl font-bold text-white mb-6">{t("vipBenefits")}</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              {[
                t("higherWithdrawalLimits"),
                t("personalAccountManager"),
                t("exclusiveTournaments"),
                t("birthdayBonuses"),
                t("fasterWithdrawals"),
                t("customBettingLimits"),
                t("vipCustomerSupport"),
                t("exclusivePromotions"),
              ].map((benefit) => (
                <div key={benefit} className="flex items-center">
                  <div className="w-2 h-2 bg-orange-500 rounded-full mr-3"></div>
                  <span className="text-gray-300">{benefit}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/age-verification-modal.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { Checkbox } from "@/components/ui/checkbox"
import Link from "next/link"
import { useLanguage } from "@/lib/language-context"

export function AgeVerificationModal() {
  const [isOpen, setIsOpen] = useState(false)
  const [agreedToAge, setAgreedToAge] = useState(false)
  const [agreedToTerms, setAgreedToTerms] = useState(false)
  const { t } = useLanguage()

useEffect(() => {
    // Check if user has already verified
    const hasVerified = localStorage.getItem("age_verified")
    if (!hasVerified) {
      setIsOpen(true)
    }
  }, [])

const handleAccept = () => {
    if (agreedToAge && agreedToTerms) {
      localStorage.setItem("age_verified", "true")
      setIsOpen(false)
    }
  }

const handleDecline = () => {
    window.location.href = "https://www.google.com"
  }

if (!isOpen) return null

return (
    <div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
      <Card className="bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 border-2 border-orange-500/30 max-w-lg w-full p-8 shadow-2xl">
        <div className="text-center mb-6">
          <div className="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full flex items-center justify-center">
            <span className="text-4xl">🔞</span>
          </div>
          <h2 className="text-3xl font-bold text-white mb-2">{t("ageVerificationTitle")}</h2>
          <p className="text-gray-300">{t("ageVerificationSubtitle")}</p>
        </div>

<div className="space-y-4 mb-6">
          <div className="flex items-start space-x-3 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
            <Checkbox
              id="age"
              checked={agreedToAge}
              onCheckedChange={(checked) => setAgreedToAge(checked as boolean)}
              className="mt-1 border-orange-500 data-[state=checked]:bg-orange-500"
            />
            <label htmlFor="age" className="text-sm text-gray-300 cursor-pointer leading-relaxed">
              {t("ageVerificationConfirm")}
            </label>
          </div>

<div className="flex items-start space-x-3 p-4 bg-slate-800/50 rounded-lg border border-slate-700">
            <Checkbox
              id="terms"
              checked={agreedToTerms}
              onCheckedChange={(checked) => setAgreedToTerms(checked as boolean)}
              className="mt-1 border-orange-500 data-[state=checked]:bg-orange-500"
            />
            <label htmlFor="terms" className="text-sm text-gray-300 cursor-pointer leading-relaxed">
              {t("ageVerificationTerms")}{" "}
              <Link href="/terms" className="text-orange-500 hover:text-orange-400 underline">
                {t("termsOfService")}
              </Link>{" "}
              {t("and")}{" "}
              <Link href="/privacy" className="text-orange-500 hover:text-orange-400 underline">
                {t("privacyPolicy")}
              </Link>
            </label>
          </div>
        </div>

<div className="flex gap-3">
          <Button
            onClick={handleDecline}
            variant="outline"
            className="flex-1 border-gray-600 text-gray-300 hover:bg-gray-800 bg-transparent"
          >
            {t("decline")}
          </Button>
          <Button
            onClick={handleAccept}
            disabled={!agreedToAge || !agreedToTerms}
            className="flex-1 bg-gradient-to-r from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
          >
            {t("accept")}
          </Button>
        </div>

<p className="text-xs text-gray-500 text-center mt-4">{t("ageVerificationWarning")}</p>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/translations.ts" isEdit="true" isQuickEdit="true" isMerged="true"
export const translations = {
  en: {
    // Header
    casino: "Casino",
    sports: "Sports",
    promotions: "Promotions",
    tournaments: "Tournaments",
    vipClub: "VIP Club",
    login: "Login",
    register: "Register",
    profile: "Profile",
    logout: "Logout",

// Hero
    welcomeTo: "Welcome to",
    heroTitle: "The Ultimate Crypto Casino Experience",
    heroSubtitle:
      "Play, Win, and Earn with Cryptocurrency. Join thousands of players worldwide in the most exciting crypto gaming platform.",
    playNow: "Play Now",
    learnMore: "Learn More",
    playersOnline: "Online now",
    lastWin: "Last win",
    gamesAvailable: "games",
    totalPayouts: "Total payouts",

// Games
    featuredGames: "Featured Games",
    gamesDescription:
      "Our collection of Live Casino titles offers you a fantastic range of games to choose from, including card and popular games all.",
    searchGames: "Search games...",
    showing: "Showing",
    of: "of",
    allGames: "All Games & Advanced Search",
    gameNotFound: "Game Not Found",
    gameNotFoundDesc: "The game you're looking for doesn't exist.",
    backToGames: "Back to Games",
    minBet: "Min Bet",
    maxBet: "Max Bet",
    betAmount: "Bet Amount",
    yourBalance: "Your Balance",
    pleaseLoginToPlay: "Please login to play",
    mines: "Mines",
    minesDesc: "Find all gems without hitting a mine!",
    startGame: "Start Game",
    cashOut: "Cash Out",
    balance: "Balance",
    multiplier: "Multiplier",
    minesCount: "Mines",
    plinko: "Plinko",
    plinkoDesc: "Drop the ball and win big!",
    dropBall: "Drop Ball",
    dropping: "Dropping...",
    blackjack: "Blackjack",
    blackjackDesc: "Beat the dealer to 21!",
    hit: "Hit",
    stand: "Stand",
    dealerHand: "Dealer Hand",
    yourHand: "Your Hand",
    crash: "Crash",
    crashDesc: "Cash out before it crashes!",
    currentMultiplier: "Current Multiplier",
    crashed: "Crashed",
    roulette: "Roulette",
    rouletteDesc: "Place your bets and spin the wheel!",
    spin: "Spin",
    spinning: "Spinning...",
    red: "Red",
    black: "Black",
    green: "Green",
    slots: "Slot Machine",
    slotsDesc: "Spin the reels and win big!",
    dice: "Dice Rolling",
    diceDesc: "Roll the dice and predict the outcome!",
    rollDice: "Roll Dice",
    rolling: "Rolling...",
    keno: "Keno",
    kenoDesc: "Pick your lucky numbers!",
    selectNumbers: "Select Numbers",
    draw: "Draw",

// Coin Flip
    heads: "Heads",
    tails: "Tails",
    flipCoin: "Flip Coin",
    flipping: "Flipping...",
    reset: "Reset",
    youWon: "You Won",
    youLost: "You Lost",

// Recent Wins
    recentWins: "Recent Wins",
    recentWinsDesc: "See what our players are winning right now!",
    wonOn: "won on",
    justNow: "Just now",

// About Section
    aboutTitle: "About",
    aboutDescription:
      "CryptoMoney aims to provide users with the widest possible variety of gambling entertainment. To this end, in addition to betting on online games, customers have been offered the opportunity to bet on real-time online casino.",
    fairPlayCasino: "Fair Play Casino",
    fairPlayDesc: "All our games are fair and transparent",
    quickDeposit: "Quick Deposit",
    quickDepositDesc: "Fast and secure deposit methods",
    quickWithdraw: "Quick Withdraw",
    quickWithdrawDesc: "Instant withdrawal processing",
    support247: "24/7 Support",
    support247Desc: "Round the clock customer support",

// Why Choose Section
    whyChooseTitle: "Why Choose CryptoMoney",
    whyChooseDesc:
      "Every month, our customers trust us to make wise some of their money. Here are some of the important ways we protect them.",
    awesomeGaming: "Awesome Gaming Platform",
    awesomeGamingDesc:
      "All-round gaming platform with the latest games and features. Continuously updated with new games and features to offer the best gaming experience.",
    referralCommission: "Referral Commission System",
    referralCommissionDesc:
      "Invite friends and earn commission for every friend you refer. Earn up to 10% commission from your referrals (referrals). Withdraw your referral earnings anytime.",
    secureBetting: "Secure Betting Platform",
    secureBettingDesc:
      "We make sure your money is secure with our advanced security system. All transactions are encrypted and protected from the most sophisticated fraud.",

// Footer
    footerDescription:
      "The premier crypto casino where digital currency meets opportunity. Join thousands of players and experience the thrill of winning with our secure, fair, and exciting gaming platform.",
    quickLinks: "Quick Links",
    aboutUs: "About Us",
    games: "Games",
    legalSupport: "Legal & Support",
    termsOfService: "Terms of Service",
    privacyPolicy: "Privacy Policy",
    contact: "Contact",
    myProfile: "My Profile",
    allRightsReserved: "All rights reserved.",
    playResponsibly: "Licensed and regulated. Play responsibly. 18+",
    sslSecured: "SSL Secured",
    fairGaming: "Fair Gaming",
    instantPayouts: "Instant Payouts",

// Contact Page
    contactUs: "Contact Us",
    contactDesc: "Have questions or need assistance? Our support team is here to help you 24/7.",
    sendMessage: "Send us a Message",
    firstName: "First Name",
    lastName: "Last Name",
    emailAddress: "Email Address",
    subject: "Subject",
    message: "Message",
    sendMessageBtn: "Send Message",
    getInTouch: "Get in Touch",
    getInTouchDesc:
      "We're here to help! Choose the best way to reach us and we'll get back to you as soon as possible.",
    emailSupport: "Email Support",
    emailSupportDetails: "support@cryptomoney.com",
    emailSupportDesc: "Get help via email within 24 hours",
    liveChat: "Live Chat",
    liveChatDetails: "Available 24/7",
    liveChatDesc: "Instant support through live chat",
    address: "Address",
    addressDetails: "123 Blockchain Avenue, Crypto City",
    addressDesc: "Our headquarters location",
    responseTime: "Response Time",
    responseTimeDetails: "< 2 hours",
    responseTimeDesc: "Average response time for all inquiries",
    faq: "Frequently Asked Questions",
    faqDesc: "Check out our FAQ section for quick answers to common questions.",
    viewFaq: "View FAQ",

// Sports Page
    sportsBetting: "Sports Betting",
    sportsBettingDesc: "Bet on your favorite sports with the best odds",
    liveMatches: "live matches",
    viewMatches: "View Matches",
    football: "Football",
    basketball: "Basketball",
    tennis: "Tennis",
    baseball: "Baseball",
    hockey: "Hockey",
    soccer: "Soccer",

// Promotions Page
    promotionsTitle: "Promotions & Bonuses",
    promotionsDesc: "Exclusive offers and rewards for CryptoMoney players",
    welcomeBonus: "Welcome Bonus",
    welcomeBonusDesc: "Get 100% match on your first deposit up to 1 BTC",
    dailyCashback: "Daily Cashback",
    dailyCashbackDesc: "Get 10% cashback on all losses every day",
    vipRewards: "VIP Rewards",
    vipRewardsDesc: "Exclusive bonuses and perks for VIP members",
    weekendBoost: "Weekend Boost",
    weekendBoostDesc: "50% bonus on all deposits during weekends",
    referralProgram: "Referral Program",
    referralProgramDesc: "Earn 0.01 BTC for every friend you refer",
    highRoller: "High Roller",
    highRollerDesc: "Special bonuses for deposits over 5 BTC",
    claimNow: "Claim Now",

// Terms & Privacy
    termsTitle: "Terms of Service",
    termsLastUpdated: "Last updated",
    privacyTitle: "Privacy Policy",

// VIP Page
    vipTitle: "VIP Club",
    vipDesc: "Exclusive benefits and rewards for our most valued players",
    requirement: "Requirement",
    cashback: "Cashback",
    learnMoreBtn: "Learn More",
    vipBenefits: "VIP Benefits",
    higherWithdrawalLimits: "Higher withdrawal limits",
    personalAccountManager: "Personal account manager",
    exclusiveTournaments: "Exclusive tournaments",
    birthdayBonuses: "Birthday bonuses",
    fasterWithdrawals: "Faster withdrawals",
    customBettingLimits: "Custom betting limits",
    vipCustomerSupport: "VIP customer support",
    exclusivePromotions: "Exclusive promotions",

// Age Verification
    ageVerificationTitle: "Age Verification Required",
    ageVerificationSubtitle: "You must be 18 years or older to access this site",
    ageVerificationConfirm:
      "I confirm that I am 18 years of age or older and I am legally allowed to participate in gambling activities in my jurisdiction.",
    ageVerificationTerms: "I have read and agree to the",
    and: "and",
    accept: "Accept & Enter",
    decline: "I'm Under 18",
    ageVerificationWarning: "Gambling can be addictive. Please play responsibly.",
  },
  ru: {
    // Header
    casino: "Казино",
    sports: "Спорт",
    promotions: "Акции",
    tournaments: "Турниры",
    vipClub: "VIP Клуб",
    login: "Войти",
    register: "Регистрация",
    profile: "Профиль",
    logout: "Выйти",

// Hero
    welcomeTo: "Добро пожаловать в",
    heroTitle: "Лучший Крипто Казино Опыт",
    heroSubtitle:
      "Играйте, выигрывайте и зарабатывайте с криптовалютой. Присоединяйтесь к тысячам игроков по всему миру на самой захватывающей крипто-игровой платформе.",
    playNow: "Играть сейчас",
    learnMore: "Узнать больше",
    playersOnline: "Онлайн сейчас",
    lastWin: "Последний выигрыш",
    gamesAvailable: "игр",
    totalPayouts: "Всего выплат",

// Games
    featuredGames: "Популярные игры",
    gamesDescription:
      "Наша коллекция игр Live Casino предлагает вам фантастический выбор игр, включая карточные и популярные игры.",
    searchGames: "Поиск игр...",
    showing: "Показано",
    of: "из",
    allGames: "Все игры и расширенный поиск",
    gameNotFound: "Игра не найдена",
    gameNotFoundDesc: "Игра, которую вы ищете, не существует.",
    backToGames: "Назад к играм",
    minBet: "Мин. ставка",
    maxBet: "Макс. ставка",
    betAmount: "Сумма ставки",
    yourBalance: "Ваш баланс",
    pleaseLoginToPlay: "Пожалуйста, войдите, чтобы играть",
    mines: "Мины",
    minesDesc: "Найдите все драгоценные камни, не наткнувшись на мину!",
    startGame: "Начать игру",
    cashOut: "Забрать выигрыш",
    balance: "Баланс",
    multiplier: "Множитель",
    minesCount: "Мины",
    plinko: "Плинко",
    plinkoDesc: "Бросьте мяч и выиграйте по-крупному!",
    dropBall: "Бросить мяч",
    dropping: "Бросаем...",
    blackjack: "Блэкджек",
    blackjackDesc: "Обыграйте дилера до 21!",
    hit: "Взять",
    stand: "Стоп",
    dealerHand: "Рука дилера",
    yourHand: "Ваша рука",
    crash: "Краш",
    crashDesc: "Заберите выигрыш до краха!",
    currentMultiplier: "Текущий множитель",
    crashed: "Крах",
    roulette: "Рулетка",
    rouletteDesc: "Делайте ставки и крутите колесо!",
    spin: "Крутить",
    spinning: "Крутим...",
    red: "Красное",
    black: "Черное",
    green: "Зеленое",
    slots: "Слот-машина",
    slotsDesc: "Крутите барабаны и выигрывайте по-крупному!",
    dice: "Кости",
    diceDesc: "Бросьте кости и предскажите результат!",
    rollDice: "Бросить кости",
    rolling: "Бросаем...",
    keno: "Кено",
    kenoDesc: "Выберите свои счастливые числа!",
    selectNumbers: "Выбрать числа",
    draw: "Розыгрыш",

// Coin Flip
    heads: "Орел",
    tails: "Решка",
    flipCoin: "Подбросить монету",
    flipping: "Подбрасываем...",
    reset: "Сброс",
    youWon: "Вы выиграли",
    youLost: "Вы проиграли",

// Recent Wins
    recentWins: "Последние выигрыши",
    recentWinsDesc: "Смотрите, что выигрывают наши игроки прямо сейчас!",
    wonOn: "выиграл в",
    justNow: "Только что",

// About Section
    aboutTitle: "О нас",
    aboutDescription:
      "CryptoMoney стремится предоставить пользователям максимально широкий выбор азартных развлечений. С этой целью, помимо ставок на онлайн-игры, клиентам предлагается возможность делать ставки в онлайн-казино в реальном времени.",
    fairPlayCasino: "Честное казино",
    fairPlayDesc: "Все наши игры честные и прозрачные",
    quickDeposit: "Быстрый депозит",
    quickDepositDesc: "Быстрые и безопасные методы пополнения",
    quickWithdraw: "Быстрый вывод",
    quickWithdrawDesc: "Мгновенная обработка вывода средств",
    support247: "Поддержка 24/7",
    support247Desc: "Круглосуточная поддержка клиентов",

// Why Choose Section
    whyChooseTitle: "Почему выбирают CryptoMoney",
    whyChooseDesc:
      "Каждый месяц наши клиенты доверяют нам свои деньги. Вот некоторые важные способы, которыми мы их защищаем.",
    awesomeGaming: "Отличная игровая платформа",
    awesomeGamingDesc:
      "Всесторонняя игровая платформа с новейшими играми и функциями. Постоянно обновляется новыми играми и функциями для лучшего игрового опыта.",
    referralCommission: "Реферальная система",
    referralCommissionDesc:
      "Приглашайте друзей и зарабатывайте комиссию за каждого приглашенного друга. Зарабатывайте до 10% комиссии с рефералов. Выводите реферальные заработки в любое время.",
    secureBetting: "Безопасная платформа для ставок",
    secureBettingDesc:
      "Мы гарантируем безопасность ваших денег с помощью нашей передовой системы безопасности. Все транзакции зашифрованы и защищены от самого изощренного мошенничества.",

// Footer
    footerDescription:
      "Премиальное крипто-казино, где цифровая валюта встречается с возможностями. Присоединяйтесь к тысячам игроков и испытайте острые ощущения от выигрыша на нашей безопасной, честной и захватывающей игровой платформе.",
    quickLinks: "Быстрые ссылки",
    aboutUs: "О нас",
    games: "Игры",
    legalSupport: "Юридическая информация и поддержка",
    termsOfService: "Условия использования",
    privacyPolicy: "Политика конфиденциальности",
    contact: "Контакты",
    myProfile: "Мой профиль",
    allRightsReserved: "Все права защищены.",
    playResponsibly: "Лицензировано и регулируется. Играйте ответственно. 18+",
    sslSecured: "SSL защита",
    fairGaming: "Честная игра",
    instantPayouts: "Мгновенные выплаты",

// Contact Page
    contactUs: "Свяжитесь с нами",
    contactDesc: "Есть вопросы или нужна помощь? Наша служба поддержки готова помочь вам 24/7.",
    sendMessage: "Отправьте нам сообщение",
    firstName: "Имя",
    lastName: "Фамилия",
    emailAddress: "Email адрес",
    subject: "Тема",
    message: "Сообщение",
    sendMessageBtn: "Отправить сообщение",
    getInTouch: "Свяжитесь с нами",
    getInTouchDesc:
      "Мы здесь, чтобы помочь! Выберите лучший способ связаться с нами, и мы свяжемся с вами как можно скорее.",
    emailSupport: "Поддержка по email",
    emailSupportDetails: "support@cryptomoney.com",
    emailSupportDesc: "Получите помощь по email в течение 24 часов",
    liveChat: "Онлайн-чат",
    liveChatDetails: "Доступен 24/7",
    liveChatDesc: "Мгновенная поддержка через онлайн-чат",
    address: "Адрес",
    addressDetails: "123 Blockchain Avenue, Crypto City",
    addressDesc: "Расположение нашей штаб-квартиры",
    responseTime: "Время ответа",
    responseTimeDetails: "< 2 часов",
    responseTimeDesc: "Среднее время ответа на все запросы",
    faq: "Часто задаваемые вопросы",
    faqDesc: "Ознакомьтесь с нашим разделом FAQ для быстрых ответов на распространенные вопросы.",
    viewFaq: "Посмотреть FAQ",

// Sports Page
    sportsBetting: "Ставки на спорт",
    sportsBettingDesc: "Делайте ставки на ваши любимые виды спорта с лучшими коэффициентами",
    liveMatches: "матчей в прямом эфире",
    viewMatches: "Посмотреть матчи",
    football: "Футбол",
    basketball: "Баскетбол",
    tennis: "Теннис",
    baseball: "Бейсбол",
    hockey: "Хоккей",
    soccer: "Футбол",

// Promotions Page
    promotionsTitle: "Акции и бонусы",
    promotionsDesc: "Эксклюзивные предложения и награды для игроков CryptoMoney",
    welcomeBonus: "Приветственный бонус",
    welcomeBonusDesc: "Получите 100% совпадение на ваш первый депозит до 1 BTC",
    dailyCashback: "Ежедневный кэшбэк",
    dailyCashbackDesc: "Получайте 10% кэшбэка на все проигрыши каждый день",
    vipRewards: "VIP награды",
    vipRewardsDesc: "Эксклюзивные бонусы и привилегии для VIP-членов",
    weekendBoost: "Выходной буст",
    weekendBoostDesc: "50% бонус на все депозиты в выходные",
    referralProgram: "Реферальная программа",
    referralProgramDesc: "Зарабатывайте 0.01 BTC за каждого приглашенного друга",
    highRoller: "Хайроллер",
    highRollerDesc: "Специальные бонусы для депозитов свыше 5 BTC",
    claimNow: "Получить сейчас",

// Terms & Privacy
    termsTitle: "Условия использования",
    termsLastUpdated: "Последнее обновление",
    privacyTitle: "Политика конфиденциальности",

// VIP Page
    vipTitle: "VIP Клуб",
    vipDesc: "Эксклюзивные преимущества и награды для наших самых ценных игроков",
    requirement: "Требование",
    cashback: "Кэшбэк",
    learnMoreBtn: "Узнать больше",
    vipBenefits: "VIP преимущества",
    higherWithdrawalLimits: "Более высокие лимиты на вывод",
    personalAccountManager: "Персональный менеджер аккаунта",
    exclusiveTournaments: "Эксклюзивные турниры",
    birthdayBonuses: "Бонусы на день рождения",
    fasterWithdrawals: "Более быстрые выводы",
    customBettingLimits: "Индивидуальные лимиты ставок",
    vipCustomerSupport: "VIP поддержка клиентов",
    exclusivePromotions: "Эксклюзивные акции",

// Age Verification
    ageVerificationTitle: "Требуется подтверждение возраста",
    ageVerificationSubtitle: "Вам должно быть 18 лет или больше для доступа к этому сайту",
    ageVerificationConfirm:
      "Я подтверждаю, что мне исполнилось 18 лет или больше, и я имею законное право участвовать в азартных играх в моей юрисдикции.",
    ageVerificationTerms: "Я прочитал и согласен с",
    and: "и",
    accept: "Принять и войти",
    decline: "Мне меньше 18",
    ageVerificationWarning: "Азартные игры могут вызывать зависимость. Пожалуйста, играйте ответственно.",
  },
  es: {
    // Header
    casino: "Casino",
    sports: "Deportes",
    promotions: "Promociones",
    tournaments: "Torneos",
    vipClub: "Club VIP",
    login: "Iniciar sesión",
    register: "Registrarse",
    profile: "Perfil",
    logout: "Cerrar sesión",

// Hero
    welcomeTo: "Bienvenido a",
    heroTitle: "La Mejor Experiencia de Casino Cripto",
    heroSubtitle:
      "Juega, gana y gana con criptomonedas. Únete a miles de jugadores en todo el mundo en la plataforma de juegos cripto más emocionante.",
    playNow: "Jugar ahora",
    learnMore: "Saber más",
    playersOnline: "En línea ahora",
    lastWin: "Última victoria",
    gamesAvailable: "juegos",
    totalPayouts: "Pagos totales",

// Games
    featuredGames: "Juegos destacados",
    gamesDescription:
      "Nuestra colección de títulos de Casino en Vivo te ofrece una fantástica variedad de juegos para elegir, incluyendo juegos de cartas y populares.",
    searchGames: "Buscar juegos...",
    showing: "Mostrando",
    of: "de",
    allGames: "Todos los juegos y búsqueda avanzada",
    gameNotFound: "Juego no encontrado",
    gameNotFoundDesc: "El juego que buscas no existe.",
    backToGames: "Volver a juegos",
    minBet: "Apuesta mín.",
    maxBet: "Apuesta máx.",
    betAmount: "Cantidad de apuesta",
    yourBalance: "Tu saldo",
    pleaseLoginToPlay: "Por favor inicia sesión para jugar",
    mines: "Minas",
    minesDesc: "¡Encuentra todas las gemas sin tocar una mina!",
    startGame: "Comenzar juego",
    cashOut: "Cobrar",
    balance: "Saldo",
    multiplier: "Multiplicador",
    minesCount: "Minas",
    plinko: "Plinko",
    plinkoDesc: "¡Suelta la bola y gana en grande!",
    dropBall: "Soltar bola",
    dropping: "Soltando...",
    blackjack: "Blackjack",
    blackjackDesc: "¡Vence al crupier hasta 21!",
    hit: "Pedir",
    stand: "Plantarse",
    dealerHand: "Mano del crupier",
    yourHand: "Tu mano",
    crash: "Crash",
    crashDesc: "¡Cobra antes de que se estrelle!",
    currentMultiplier: "Multiplicador actual",
    crashed: "Estrellado",
    roulette: "Ruleta",
    rouletteDesc: "¡Haz tus apuestas y gira la rueda!",
    spin: "Girar",
    spinning: "Girando...",
    red: "Rojo",
    black: "Negro",
    green: "Verde",
    slots: "Máquina tragamonedas",
    slotsDesc: "¡Gira los carretes y gana en grande!",
    dice: "Dados",
    diceDesc: "¡Tira los dados y predice el resultado!",
    rollDice: "Tirar dados",
    rolling: "Tirando...",
    keno: "Keno",
    kenoDesc: "¡Elige tus números de la suerte!",
    selectNumbers: "Seleccionar números",
    draw: "Sorteo",

// Coin Flip
    heads: "Cara",
    tails: "Cruz",
    flipCoin: "Lanzar moneda",
    flipping: "Lanzando...",
    reset: "Reiniciar",
    youWon: "Ganaste",
    youLost: "Perdiste",

// Recent Wins
    recentWins: "Victorias recientes",
    recentWinsDesc: "¡Mira lo que nuestros jugadores están ganando ahora mismo!",
    wonOn: "ganó en",
    justNow: "Justo ahora",

// About Section
    aboutTitle: "Acerca de",
    aboutDescription:
      "CryptoMoney tiene como objetivo proporcionar a los usuarios la mayor variedad posible de entretenimiento de juego. Con este fin, además de apostar en juegos en línea, se ha ofrecido a los clientes la oportunidad de apostar en casino en línea en tiempo real.",
    fairPlayCasino: "Casino de juego limpio",
    fairPlayDesc: "Todos nuestros juegos son justos y transparentes",
    quickDeposit: "Depósito rápido",
    quickDepositDesc: "Métodos de depósito rápidos y seguros",
    quickWithdraw: "Retiro rápido",
    quickWithdrawDesc: "Procesamiento instantáneo de retiros",
    support247: "Soporte 24/7",
    support247Desc: "Atención al cliente las 24 horas",

// Why Choose Section
    whyChooseTitle: "Por qué elegir CryptoMoney",
    whyChooseDesc:
      "Cada mes, nuestros clientes confían en nosotros para hacer sabio algo de su dinero. Aquí hay algunas de las formas importantes en que los protegemos.",
    awesomeGaming: "Plataforma de juego increíble",
    awesomeGamingDesc:
      "Plataforma de juego integral con los últimos juegos y características. Actualizada continuamente con nuevos juegos y características para ofrecer la mejor experiencia de juego.",
    referralCommission: "Sistema de comisión por referidos",
    referralCommissionDesc:
      "Invita amigos y gana comisión por cada amigo que refieras. Gana hasta un 10% de comisión de tus referidos. Retira tus ganancias por referidos en cualquier momento.",
    secureBetting: "Plataforma de apuestas segura",
    secureBettingDesc:
      "Nos aseguramos de que tu dinero esté seguro con nuestro sistema de seguridad avanzado. Todas las transacciones están encriptadas y protegidas del fraude más sofisticado.",

// Footer
    footerDescription:
      "El casino cripto premier donde la moneda digital se encuentra con la oportunidad. Únete a miles de jugadores y experimenta la emoción de ganar con nuestra plataforma de juego segura, justa y emocionante.",
    quickLinks: "Enlaces rápidos",
    aboutUs: "Sobre nosotros",
    games: "Juegos",
    legalSupport: "Legal y soporte",
    termsOfService: "Términos de servicio",
    privacyPolicy: "Política de privacidad",
    contact: "Contacto",
    myProfile: "Mi perfil",
    allRightsReserved: "Todos los derechos reservados.",
    playResponsibly: "Con licencia y regulado. Juega responsablemente. 18+",
    sslSecured: "Seguridad SSL",
    fairGaming: "Juego justo",
    instantPayouts: "Pagos instantáneos",

// Contact Page
    contactUs: "Contáctanos",
    contactDesc: "¿Tienes preguntas o necesitas ayuda? Nuestro equipo de soporte está aquí para ayudarte 24/7.",
    sendMessage: "Envíanos un mensaje",
    firstName: "Nombre",
    lastName: "Apellido",
    emailAddress: "Dirección de correo electrónico",
    subject: "Asunto",
    message: "Mensaje",
    sendMessageBtn: "Enviar mensaje",
    getInTouch: "Ponte en contacto",
    getInTouchDesc:
      "¡Estamos aquí para ayudar! Elige la mejor manera de contactarnos y te responderemos lo antes posible.",
    emailSupport: "Soporte por correo",
    emailSupportDetails: "support@cryptomoney.com",
    emailSupportDesc: "Obtén ayuda por correo en 24 horas",
    liveChat: "Chat en vivo",
    liveChatDetails: "Disponible 24/7",
    liveChatDesc: "Soporte instantáneo a través de chat en vivo",
    address: "Dirección",
    addressDetails: "123 Blockchain Avenue, Crypto City",
    addressDesc: "Ubicación de nuestra sede",
    responseTime: "Tiempo de respuesta",
    responseTimeDetails: "< 2 horas",
    responseTimeDesc: "Tiempo promedio de respuesta para todas las consultas",
    faq: "Preguntas frecuentes",
    faqDesc: "Consulta nuestra sección de preguntas frecuentes para respuestas rápidas a preguntas comunes.",
    viewFaq: "Ver FAQ",

// Sports Page
    sportsBetting: "Apuestas deportivas",
    sportsBettingDesc: "Apuesta en tus deportes favoritos con las mejores cuotas",
    liveMatches: "partidos en vivo",
    viewMatches: "Ver partidos",
    football: "Fútbol americano",
    basketball: "Baloncesto",
    tennis: "Tenis",
    baseball: "Béisbol",
    hockey: "Hockey",
    soccer: "Fútbol",

// Promotions Page
    promotionsTitle: "Promociones y bonos",
    promotionsDesc: "Ofertas exclusivas y recompensas para jugadores de CryptoMoney",
    welcomeBonus: "Bono de bienvenida",
    welcomeBonusDesc: "Obtén 100% de coincidencia en tu primer depósito hasta 1 BTC",
    dailyCashback: "Reembolso diario",
    dailyCashbackDesc: "Obtén 10% de reembolso en todas las pérdidas todos los días",
    vipRewards: "Recompensas VIP",
    vipRewardsDesc: "Bonos exclusivos y ventajas para miembros VIP",
    weekendBoost: "Impulso de fin de semana",
    weekendBoostDesc: "50% de bono en todos los depósitos durante los fines de semana",
    referralProgram: "Programa de referidos",
    referralProgramDesc: "Gana 0.01 BTC por cada amigo que refieras",
    highRoller: "Alto apostador",
    highRollerDesc: "Bonos especiales para depósitos superiores a 5 BTC",
    claimNow: "Reclamar ahora",

// Terms & Privacy
    termsTitle: "Términos de servicio",
    termsLastUpdated: "Última actualización",
    privacyTitle: "Política de privacidad",

// VIP Page
    vipTitle: "Club VIP",
    vipDesc: "Beneficios exclusivos y recompensas para nuestros jugadores más valiosos",
    requirement: "Requisito",
    cashback: "Reembolso",
    learnMoreBtn: "Saber más",
    vipBenefits: "Beneficios VIP",
    higherWithdrawalLimits: "Límites de retiro más altos",
    personalAccountManager: "Gerente de cuenta personal",
    exclusiveTournaments: "Torneos exclusivos",
    birthdayBonuses: "Bonos de cumpleaños",
    fasterWithdrawals: "Retiros más rápidos",
    customBettingLimits: "Límites de apuesta personalizados",
    vipCustomerSupport: "Soporte al cliente VIP",
    exclusivePromotions: "Promociones exclusivas",

// Age Verification
    ageVerificationTitle: "Verificación de edad requerida",
    ageVerificationSubtitle: "Debes tener 18 años o más para acceder a este sitio",
    ageVerificationConfirm:
      "Confirmo que tengo 18 años o más y tengo permitido legalmente participar en actividades de juego en mi jurisdicción.",
    ageVerificationTerms: "He leído y acepto los",
    and: "y",
    accept: "Aceptar y entrar",
    decline: "Soy menor de 18",
    ageVerificationWarning: "El juego puede ser adictivo. Por favor, juega responsablemente.",
  },
}

export type Language = keyof typeof translations
export type TranslationKey = keyof (typeof translations)["en"]
[V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true"
"use client"

import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"

import { cn } from "@/lib/utils"

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
>(({ className, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      "peer h-5 w-5 shrink-0 rounded border-2 border-slate-300 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=checked]:text-slate-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=checked]:bg-slate-50 dark:data-[state=checked]:text-slate-900",
      className,
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
      <Check className="h-4 w-4" />
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }
[V0_FILE]typescriptreact:file="app/admin/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useAuth } from "@/components/auth/auth-provider"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { Card } from "@/components/ui/card"
import { Users, Gamepad2, DollarSign, TrendingUp, Activity, BarChart3 } from "lucide-react"
import Link from "next/link"

export default function AdminDashboard() {
  const { isAdmin, isAuthenticated } = useAuth()
  const router = useRouter()

const [stats, setStats] = useState({
    totalUsers: 12847,
    activeUsers: 3421,
    activeGames: 50,
    totalRevenue: 2847392,
    weeklyRevenue: 245000,
    onlinePlayers: 1253,
    totalBets: 45892,
    totalWins: 38921,
  })

useEffect(() => {
    if (!isAuthenticated || !isAdmin) {
      router.push("/")
    }
  }, [isAuthenticated, isAdmin, router])

useEffect(() => {
    const interval = setInterval(() => {
      setStats((prev) => ({
        totalUsers: prev.totalUsers + Math.floor(Math.random() * 5),
        activeUsers: Math.max(2000, Math.min(5000, prev.activeUsers + Math.floor(Math.random() * 21) - 10)),
        activeGames: 50,
        totalRevenue: prev.totalRevenue + Math.floor(Math.random() * 15000),
        weeklyRevenue: prev.weeklyRevenue + Math.floor(Math.random() * 8000),
        onlinePlayers: Math.max(800, Math.min(2000, prev.onlinePlayers + Math.floor(Math.random() * 16) - 5)),
        totalBets: prev.totalBets + Math.floor(Math.random() * 500),
        totalWins: prev.totalWins + Math.floor(Math.random() * 400),
      }))
    }, 5000)

return () => clearInterval(interval)
  }, [])

if (!isAdmin) return null

const statsDisplay = [
    {
      label: "Total Users",
      value: stats.totalUsers.toLocaleString(),
      icon: Users,
      change: "+12.5%",
      color: "text-blue-500",
    },
    {
      label: "Active Users",
      value: stats.activeUsers.toLocaleString(),
      icon: Activity,
      change: "+8.3%",
      color: "text-green-500",
    },
    {
      label: "Total Revenue",
      value: `$${(stats.totalRevenue / 1000).toFixed(1)}K`,
      icon: DollarSign,
      change: "+18.2%",
      color: "text-orange-500",
    },
    {
      label: "Weekly Revenue",
      value: `$${(stats.weeklyRevenue / 1000).toFixed(1)}K`,
      icon: TrendingUp,
      change: "+5.7%",
      color: "text-purple-500",
    },
    {
      label: "Online Players",
      value: stats.onlinePlayers.toLocaleString(),
      icon: Gamepad2,
      change: "+3.2%",
      color: "text-pink-500",
    },
    {
      label: "Active Games",
      value: stats.activeGames.toString(),
      icon: BarChart3,
      change: "+2",
      color: "text-cyan-500",
    },
  ]

const recentActivity = [
    { user: "player123", action: "Won $5,000 on Blackjack", time: "2 min ago", type: "win", amount: "+$5,000" },
    { user: "crypto_king", action: "Deposited $1,000", time: "5 min ago", type: "deposit", amount: "+$1,000" },
    {
      user: "lucky_seven",
      action: "Requested withdrawal $2,500",
      time: "12 min ago",
      type: "withdrawal",
      amount: "-$2,500",
    },
    { user: "slot_master", action: "Won $15,000 on Mega Slots", time: "18 min ago", type: "win", amount: "+$15,000" },
    { user: "roulette_pro", action: "Lost $500 on Roulette", time: "25 min ago", type: "loss", amount: "-$500" },
    { user: "dice_roller", action: "Won $3,200 on Dice", time: "32 min ago", type: "win", amount: "+$3,200" },
  ]

const topGames = [
    { name: "Blackjack", players: 342, revenue: 45200, rtp: "96.5%" },
    { name: "Roulette", players: 285, revenue: 38900, rtp: "97.3%" },
    { name: "Crash", players: 198, revenue: 28500, rtp: "95.8%" },
    { name: "Slots", players: 456, revenue: 52300, rtp: "94.2%" },
    { name: "Plinko", players: 167, revenue: 21400, rtp: "96.1%" },
  ]

const userMetrics = [
    { metric: "Total Bets", value: stats.totalBets.toLocaleString(), change: "+4.2%" },
    { metric: "Total Wins", value: stats.totalWins.toLocaleString(), change: "+6.8%" },
    { metric: "Avg Session", value: "24 min", change: "+2.1%" },
    { metric: "Retention Rate", value: "73%", change: "+3.5%" },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950 pt-24 pb-12">
      <div className="container mx-auto px-4">
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">Admin Dashboard</h1>
          <p className="text-slate-400">Complete analytics and platform management</p>
        </div>

{/* Main Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
          {statsDisplay.map((stat, index) => (
            <Card key={index} className="bg-slate-900/50 border-slate-800 p-6 hover:bg-slate-900/70 transition-colors">
              <div className="flex items-center justify-between mb-4">
                <stat.icon className={`w-8 h-8 ${stat.color}`} />
                <span className="text-green-500 text-sm font-medium">{stat.change}</span>
              </div>
              <div className="text-3xl font-bold text-white mb-1">{stat.value}</div>
              <div className="text-slate-400 text-sm">{stat.label}</div>
            </Card>
          ))}
        </div>

{/* Quick Actions */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
          <Link href="/admin/users">
            <Card className="bg-gradient-to-br from-blue-600 to-blue-700 border-0 p-6 hover:from-blue-700 hover:to-blue-800 transition-all cursor-pointer">
              <Users className="w-8 h-8 text-white mb-3" />
              <h3 className="text-white font-bold text-lg">Manage Users</h3>
              <p className="text-blue-100 text-sm">View, block, or delete users</p>
            </Card>
          </Link>

<Link href="/admin/games">
            <Card className="bg-gradient-to-br from-green-600 to-green-700 border-0 p-6 hover:from-green-700 hover:to-green-800 transition-all cursor-pointer">
              <Gamepad2 className="w-8 h-8 text-white mb-3" />
              <h3 className="text-white font-bold text-lg">Manage Games</h3>
              <p className="text-green-100 text-sm">Configure game settings</p>
            </Card>
          </Link>

<Link href="/admin/transactions">
            <Card className="bg-gradient-to-br from-orange-600 to-orange-700 border-0 p-6 hover:from-orange-700 hover:to-orange-800 transition-all cursor-pointer">
              <DollarSign className="w-8 h-8 text-white mb-3" />
              <h3 className="text-white font-bold text-lg">Transactions</h3>
              <p className="text-orange-100 text-sm">Process withdrawals & deposits</p>
            </Card>
          </Link>

<Link href="/admin/settings">
            <Card className="bg-gradient-to-br from-purple-600 to-purple-700 border-0 p-6 hover:from-purple-700 hover:to-purple-800 transition-all cursor-pointer">
              <TrendingUp className="w-8 h-8 text-white mb-3" />
              <h3 className="text-white font-bold text-lg">Settings</h3>
              <p className="text-purple-100 text-sm">Platform configuration</p>
            </Card>
          </Link>
        </div>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
          {/* Top Games */}
          <Card className="lg:col-span-2 bg-slate-900/50 border-slate-800 p-6">
            <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
              <Gamepad2 className="w-6 h-6 text-green-500" />
              Top Games Performance
            </h2>
            <div className="space-y-4">
              {topGames.map((game, index) => (
                <div
                  key={index}
                  className="p-4 bg-slate-800/50 rounded-lg hover:bg-slate-800 transition-colors flex items-center justify-between"
                >
                  <div className="flex-1">
                    <div className="text-white font-semibold mb-1">{game.name}</div>
                    <div className="text-slate-400 text-sm">
                      {game.players} players | Revenue: ${game.revenue.toLocaleString()}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="text-green-500 font-semibold text-lg">{game.rtp}</div>
                    <div className="text-slate-400 text-xs">RTP</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>

{/* User Metrics */}
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
              <BarChart3 className="w-6 h-6 text-blue-500" />
              User Metrics
            </h2>
            <div className="space-y-4">
              {userMetrics.map((item, index) => (
                <div key={index} className="p-3 bg-slate-800/50 rounded-lg">
                  <div className="text-slate-400 text-sm mb-1">{item.metric}</div>
                  <div className="flex items-center justify-between">
                    <div className="text-white font-bold text-lg">{item.value}</div>
                    <div className="text-green-500 text-xs font-semibold">{item.change}</div>
                  </div>
                </div>
              ))}
            </div>
          </Card>
        </div>

{/* Recent Activity */}
        <Card className="bg-slate-900/50 border-slate-800 p-6">
          <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
            <Activity className="w-6 h-6 text-orange-500" />
            Recent Activity
          </h2>
          <div className="space-y-4">
            {recentActivity.map((activity, index) => (
              <div
                key={index}
                className="flex items-center justify-between p-4 bg-slate-800/50 rounded-lg hover:bg-slate-800 transition-colors"
              >
                <div className="flex items-center gap-4">
                  <div
                    className={`w-2 h-2 rounded-full ${
                      activity.type === "win"
                        ? "bg-green-500"
                        : activity.type === "deposit"
                          ? "bg-blue-500"
                          : activity.type === "withdrawal"
                            ? "bg-orange-500"
                            : "bg-red-500"
                    }`}
                  />
                  <div>
                    <div className="text-white font-medium">{activity.user}</div>
                    <div className="text-slate-400 text-sm">{activity.action}</div>
                  </div>
                </div>
                <div className="text-right">
                  <div
                    className={`font-bold ${activity.type === "win" || activity.type === "deposit" ? "text-green-500" : "text-red-500"}`}
                  >
                    {activity.amount}
                  </div>
                  <div className="text-slate-500 text-xs">{activity.time}</div>
                </div>
              </div>
            ))}
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/users/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useAuth } from "@/components/auth/auth-provider"
import { useRouter } from "next/navigation"
import { useEffect, useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Users, Search, Ban, Trash2 } from "lucide-react"
import Link from "next/link"
import { useToast } from "@/hooks/use-toast"

export default function UsersManagement() {
  const { isAdmin, isAuthenticated } = useAuth()
  const router = useRouter()
  const { toast } = useToast()
  const [searchQuery, setSearchQuery] = useState("")

useEffect(() => {
    if (!isAuthenticated || !isAdmin) {
      router.push("/")
    }
  }, [isAuthenticated, isAdmin, router])

const [users, setUsers] = useState([
    {
      id: "1",
      username: "player123",
      email: "player123@example.com",
      balance: 5420,
      status: "active",
      joinDate: "2024-01-15",
      totalBets: 1247,
      totalWins: 8950,
      winRate: "31.2%",
      avgBet: 45.8,
      country: "USA",
      lastActive: "2 min ago",
    },
    {
      id: "2",
      username: "crypto_king",
      email: "cryptoking@example.com",
      balance: 12500,
      status: "active",
      joinDate: "2024-02-03",
      totalBets: 2891,
      totalWins: 15200,
      winRate: "42.5%",
      avgBet: 78.3,
      country: "UK",
      lastActive: "5 min ago",
    },
    {
      id: "3",
      username: "lucky_seven",
      email: "lucky7@example.com",
      balance: 3200,
      status: "active",
      joinDate: "2024-03-12",
      totalBets: 567,
      totalWins: 4100,
      winRate: "38.9%",
      avgBet: 32.5,
      country: "Canada",
      lastActive: "12 min ago",
    },
    {
      id: "4",
      username: "slot_master",
      email: "slotmaster@example.com",
      balance: 890,
      status: "blocked",
      joinDate: "2024-01-28",
      totalBets: 3421,
      totalWins: 2100,
      winRate: "18.3%",
      avgBet: 62.1,
      country: "Australia",
      lastActive: "3 hours ago",
    },
    {
      id: "5",
      username: "roulette_pro",
      email: "roulettepro@example.com",
      balance: 8750,
      status: "active",
      joinDate: "2024-02-15",
      totalBets: 2104,
      totalWins: 12340,
      winRate: "45.3%",
      avgBet: 55.2,
      country: "Germany",
      lastActive: "1 min ago",
    },
    {
      id: "6",
      username: "dice_roller",
      email: "diceroller@example.com",
      balance: 2150,
      status: "active",
      joinDate: "2024-03-05",
      totalBets: 892,
      totalWins: 3450,
      winRate: "28.7%",
      avgBet: 38.9,
      country: "France",
      lastActive: "8 min ago",
    },
  ])

const handleBlockUser = (userId: string) => {
    setUsers(
      users.map((user) =>
        user.id === userId ? { ...user, status: user.status === "active" ? "blocked" : "active" } : user,
      ),
    )
    toast({
      title: "User Status Updated",
      description: "User has been blocked/unblocked successfully",
    })
  }

const handleDeleteUser = (userId: string) => {
    setUsers(users.filter((user) => user.id !== userId))
    toast({
      title: "User Deleted",
      description: "User has been permanently deleted",
      variant: "destructive",
    })
  }

const filteredUsers = users.filter(
    (user) =>
      user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
      user.email.toLowerCase().includes(searchQuery.toLowerCase()),
  )

if (!isAdmin) return null

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950 pt-24 pb-12">
      <div className="container mx-auto px-4">
        <div className="mb-8 flex items-center justify-between">
          <div>
            <h1 className="text-4xl font-bold text-white mb-2 flex items-center gap-3">
              <Users className="w-10 h-10 text-orange-500" />
              Users Management
            </h1>
            <p className="text-slate-400">Manage all {users.length} registered users</p>
          </div>
          <Link href="/admin">
            <Button variant="outline" className="border-slate-700 text-white hover:bg-slate-800 bg-transparent">
              Back to Dashboard
            </Button>
          </Link>
        </div>

{/* Search Bar */}
        <Card className="bg-slate-900/50 border-slate-800 p-6 mb-6">
          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
            <Input
              type="text"
              placeholder="Search users by username or email..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10 bg-slate-800 border-slate-700 text-white"
            />
          </div>
        </Card>

{/* Users Table */}
        <Card className="bg-slate-900/50 border-slate-800 overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead className="bg-slate-800/50">
                <tr>
                  <th className="text-left p-4 text-slate-300 font-semibold">User</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Email</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Balance</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Bets</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Wins</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Win Rate</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Country</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Status</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Join Date</th>
                  <th className="text-left p-4 text-slate-300 font-semibold">Actions</th>
                </tr>
              </thead>
              <tbody>
                {filteredUsers.map((user) => (
                  <tr key={user.id} className="border-t border-slate-800 hover:bg-slate-800/30 transition-colors">
                    <td className="p-4">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-full bg-gradient-to-br from-orange-500 to-orange-600 flex items-center justify-center text-white font-bold">
                          {user.username[0].toUpperCase()}
                        </div>
                        <span className="text-white font-medium">{user.username}</span>
                      </div>
                    </td>
                    <td className="p-4 text-slate-400 text-sm">{user.email}</td>
                    <td className="p-4 text-green-500 font-semibold">${user.balance.toLocaleString()}</td>
                    <td className="p-4 text-slate-300">{user.totalBets}</td>
                    <td className="p-4 text-orange-500 font-semibold">${user.totalWins.toLocaleString()}</td>
                    <td className="p-4 text-blue-500 font-semibold">{user.winRate}</td>
                    <td className="p-4 text-slate-400 text-sm">{user.country}</td>
                    <td className="p-4">
                      <span
                        className={`px-3 py-1 rounded-full text-xs font-semibold ${
                          user.status === "active" ? "bg-green-500/20 text-green-500" : "bg-red-500/20 text-red-500"
                        }`}
                      >
                        {user.status}
                      </span>
                    </td>
                    <td className="p-4 text-slate-400 text-sm">{user.joinDate}</td>
                    <td className="p-4">
                      <div className="flex gap-2">
                        <Button
                          size="sm"
                          variant="outline"
                          className="border-slate-700 text-slate-300 hover:bg-slate-800 bg-transparent"
                          onClick={() => handleBlockUser(user.id)}
                        >
                          <Ban className="w-4 h-4" />
                        </Button>
                        <Button
                          size="sm"
                          variant="outline"
                          className="border-red-700 text-red-500 hover:bg-red-950 bg-transparent"
                          onClick={() => handleDeleteUser(user.id)}
                        >
                          <Trash2 className="w-4 h-4" />
                        </Button>
                      </div>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/layout.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useAuth } from "@/components/auth/auth-provider"
import { useRouter } from "next/navigation"
import { useEffect } from "react"
import Link from "next/link"
import { LayoutDashboard, Users, Gamepad2, DollarSign, Settings, LogOut, BarChart3 } from "lucide-react"

export default function AdminLayout({ children }: { children: React.ReactNode }) {
  const { isAdmin, isAuthenticated, logout } = useAuth()
  const router = useRouter()

useEffect(() => {
    if (!isAuthenticated || !isAdmin) {
      router.push("/")
    }
  }, [isAuthenticated, isAdmin, router])

if (!isAdmin) return null

const navItems = [
    { href: "/admin", icon: LayoutDashboard, label: "Dashboard" },
    { href: "/admin/users", icon: Users, label: "Users" },
    { href: "/admin/games", icon: Gamepad2, label: "Games" },
    { href: "/admin/transactions", icon: DollarSign, label: "Transactions" },
    { href: "/admin/settings", icon: Settings, label: "Settings" },
    { href: "/admin/analytics", icon: BarChart3, label: "Analytics" },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950">
      {/* Sidebar */}
      <aside className="fixed left-0 top-0 h-full w-64 bg-slate-900/80 backdrop-blur-xl border-r border-slate-800 z-50">
        <div className="p-6">
          <Link href="/admin" className="flex items-center gap-2 mb-8">
            <div className="w-10 h-10 bg-gradient-to-br from-orange-500 to-orange-600 rounded-lg flex items-center justify-center">
              <span className="text-white font-bold text-xl">CM</span>
            </div>
            <div>
              <div className="text-white font-bold">CryptoMoney</div>
              <div className="text-xs text-slate-400">Admin Panel</div>
            </div>
          </Link>

<nav className="space-y-2">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="flex items-center gap-3 px-4 py-3 text-slate-300 hover:text-white hover:bg-slate-800/50 rounded-lg transition-all"
              >
                <item.icon className="w-5 h-5" />
                <span>{item.label}</span>
              </Link>
            ))}
          </nav>

<button
            onClick={logout}
            className="flex items-center gap-3 px-4 py-3 text-slate-300 hover:text-white hover:bg-red-500/20 rounded-lg transition-all w-full mt-8"
          >
            <LogOut className="w-5 h-5" />
            <span>Logout</span>
          </button>
        </div>
      </aside>

{/* Main Content */}
      <div className="ml-64">{children}</div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/admin/analytics/page.tsx" isEdit="true"
"use client"

export default function AnalyticsPage() {
  const { isAdmin, isAuthenticated } = useAuth()
  const router = useRouter()
  const [timeRange, setTimeRange] = useState("week")

useEffect(() => {
    if (!isAuthenticated || !isAdmin) {
      router.push("/")
    }
  }, [isAuthenticated, isAdmin, router])

if (!isAdmin) return null

const chartData: Record<string, Array<{ day: string; revenue: number; players: number }>> = {
    week: [
      { day: "Mon", revenue: 35000, players: 250 },
      { day: "Tue", revenue: 42000, players: 280 },
      { day: "Wed", revenue: 38000, players: 265 },
      { day: "Thu", revenue: 45000, players: 310 },
      { day: "Fri", revenue: 52000, players: 380 },
      { day: "Sat", revenue: 58000, players: 420 },
      { day: "Sun", revenue: 48000, players: 350 },
    ],
    month: [
      { day: "Week 1", revenue: 245000, players: 1800 },
      { day: "Week 2", revenue: 268000, players: 1950 },
      { day: "Week 3", revenue: 282000, players: 2100 },
      { day: "Week 4", revenue: 295000, players: 2250 },
    ],
  }

const currentData = chartData[timeRange]
  const maxRevenue = Math.max(...currentData.map((d) => d.revenue))

const gameAnalytics = [
    { name: "Slots", totalBets: 125000, winRate: 94.2, avgBet: 25, players: 456 },
    { name: "Blackjack", totalBets: 98000, winRate: 96.5, avgBet: 35, players: 342 },
    { name: "Roulette", totalBets: 87000, winRate: 97.3, avgBet: 42, players: 285 },
    { name: "Crash", totalBets: 65000, winRate: 95.8, avgBet: 28, players: 198 },
    { name: "Plinko", totalBets: 52000, winRate: 96.1, avgBet: 18, players: 167 },
  ]

return (
    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-blue-950 to-slate-950 pt-24 pb-12">
      <div className="container mx-auto px-4">
        <div className="mb-8">
          <h1 className="text-4xl font-bold text-white mb-2">Analytics</h1>
          <p className="text-slate-400">Detailed platform analytics and insights</p>
        </div>

<div className="flex gap-4 mb-8">
          {(["week", "month"] as const).map((range) => (
            <button
              key={range}
              onClick={() => setTimeRange(range)}
              className={`px-6 py-2 rounded-lg font-medium transition-all ${
                timeRange === range ? "bg-orange-500 text-white" : "bg-slate-800 text-slate-300 hover:bg-slate-700"
              }`}
            >
              {range === "week" ? "This Week" : "This Month"}
            </button>
          ))}
        </div>

{/* Revenue Chart */}
        <Card className="bg-slate-900/50 border-slate-800 p-6 mb-8">
          <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
            <TrendingUp className="w-6 h-6 text-green-500" />
            Revenue Trend
          </h2>
          <div className="h-64 flex items-end gap-2">
            {currentData.map((data, index) => (
              <div key={index} className="flex-1 flex flex-col items-center">
                <div className="relative h-full w-full flex items-end justify-center group">
                  <div
                    className="w-full bg-gradient-to-t from-orange-500 to-orange-400 rounded-t-lg hover:from-orange-600 hover:to-orange-500 transition-all cursor-pointer relative"
                    style={{ height: `${(data.revenue / maxRevenue) * 100}%` }}
                  >
                    <div className="absolute -top-8 left-1/2 transform -translate-x-1/2 bg-slate-800 text-white px-2 py-1 rounded text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity">
                      ${(data.revenue / 1000).toFixed(0)}K
                    </div>
                  </div>
                </div>
                <span className="text-slate-400 text-sm mt-4">{data.day}</span>
              </div>
            ))}
          </div>
        </Card>

{/* Key Metrics */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <Card className="bg-slate-900/50 border-slate-800 p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-slate-400 text-sm font-medium">Total Revenue</h3>
              <DollarSign className="w-5 h-5 text-green-500" />
            </div>
            <div className="text-3xl font-bold text-white">$2.84M</div>
            <div className="text-green-500 text-sm mt-2">+18.2% from last period</div>
          </Card>

<Card className="bg-slate-900/50 border-slate-800 p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-slate-400 text-sm font-medium">Active Players</h3>
              <Users className="w-5 h-5 text-blue-500" />
            </div>
            <div className="text-3xl font-bold text-white">3,421</div>
            <div className="text-blue-500 text-sm mt-2">+12.5% increase</div>
          </Card>

<Card className="bg-slate-900/50 border-slate-800 p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-slate-400 text-sm font-medium">Avg Win Rate</h3>
              <TrendingUp className="w-5 h-5 text-purple-500" />
            </div>
            <div className="text-3xl font-bold text-white">95.9%</div>
            <div className="text-purple-500 text-sm mt-2">Across all games</div>
          </Card>

<Card className="bg-slate-900/50 border-slate-800 p-6">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-slate-400 text-sm font-medium">Total Bets</h3>
              <Gamepad2 className="w-5 h-5 text-orange-500" />
            </div>
            <div className="text-3xl font-bold text-white">427K</div>
            <div className="text-orange-500 text-sm mt-2">+8.3% from last week</div>
          </Card>
        </div>

{/* Game Analytics Table */}
        <Card className="bg-slate-900/50 border-slate-800 p-6">
          <h2 className="text-2xl font-bold text-white mb-6 flex items-center gap-2">
            <Gamepad2 className="w-6 h-6 text-blue-500" />
            Game Performance Analysis
          </h2>
          <div className="overflow-x-auto">
            <table className="w-full">
              <thead>
                <tr className="border-b border-slate-800">
                  <th className="text-left py-3 px-4 text-slate-400 font-medium">Game Name</th>
                  <th className="text-right py-3 px-4 text-slate-400 font-medium">Total Bets</th>
                  <th className="text-right py-3 px-4 text-slate-400 font-medium">Win Rate</th>
                  <th className="text-right py-3 px-4 text-slate-400 font-medium">Avg Bet</th>
                  <th className="text-right py-3 px-4 text-slate-400 font-medium">Players</th>
                </tr>
              </thead>
              <tbody>
                {gameAnalytics.map((game, index) => (
                  <tr key={index} className="border-b border-slate-800/50 hover:bg-slate-800/30 transition-colors">
                    <td className="py-4 px-4 text-white font-medium">{game.name}</td>
                    <td className="py-4 px-4 text-right text-green-500">${(game.totalBets / 1000).toFixed(0)}K</td>
                    <td className="py-4 px-4 text-right text-blue-500">{game.winRate}%</td>
                    <td className="py-4 px-4 text-right text-orange-500">${game.avgBet}</td>
                    <td className="py-4 px-4 text-right text-purple-500">{game.players}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </Card>
      </div>
    </div>
  )
}</article></body></html>

About

Tags

Share

More from tetatetspace-6412

More Templates Like This

About

Tags

Share

About

Tags

Share

More from tetatetspace-6412

More Templates Like This