[V0_FILE]typescriptreact:file="app/contests/page.tsx" isMerged="true" import Header from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Trophy, Users, Clock, IndianRupee } from "lucide-react" const contests = [ { id: 1, title: "Mega Contest", sport: "Cricket", prizePool: "10,00,000", entry: "49", spots: "1,00,000", filled: "85,432", timeLeft: "2h 45m", winners: "16,000", }, { id: 2, title: "Head to Head", sport: "Football", prizePool: "98", entry: "49", spots: "2", filled: "1", timeLeft: "1h 30m", winners: "1", }, { id: 3, title: "Small League", sport: "Basketball", prizePool: "1,000", entry: "25", spots: "50", filled: "32", timeLeft: "3h 15m", winners: "5", }, ] export default function ContestsPage() { return (

Live Contests

Join contests and compete with other players

{contests.map((contest) => (

{contest.title} {contest.sport}

₹{contest.prizePool}

{contest.winners} Winners

Entry

₹{contest.entry}

Spots

{contest.filled}/{contest.spots}

Time Left

{contest.timeLeft}

))}

) } [V0_FILE]typescriptreact:file="app/leaderboard/page.tsx" isMerged="true" import Header from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Trophy, Medal, Award } from "lucide-react" const leaderboard = [ { rank: 1, name: "Rajesh Kumar", points: 2450, winnings: "₹1,25,000", avatar: "/placeholder.svg?height=40&width=40", }, { rank: 2, name: "Priya Sharma", points: 2380, winnings: "₹95,000", avatar: "/placeholder.svg?height=40&width=40", }, { rank: 3, name: "Amit Singh", points: 2320, winnings: "₹75,000", avatar: "/placeholder.svg?height=40&width=40", }, { rank: 4, name: "Sneha Patel", points: 2280, winnings: "₹65,000", avatar: "/placeholder.svg?height=40&width=40", }, { rank: 5, name: "Vikram Gupta", points: 2250, winnings: "₹55,000", avatar: "/placeholder.svg?height=40&width=40", }, ] export default function LeaderboardPage() { const getRankIcon = (rank: number) => { switch (rank) { case 1: return case 2: return case 3: return default: return #{rank} } } return (

Leaderboard

Top performers this month

Monthly Champions

{leaderboard.map((player) => (

{getRankIcon(player.rank)}

{player.name .split(" ") .map((n) => n[0]) .join("")}

{player.name}

{player.points} points

{player.winnings}

))}

) } [V0_FILE]typescriptreact:file="contexts/auth-context.tsx" isMerged="true" "use client" import type React from "react" import { createContext, useContext, useEffect, useState } from "react" interface User { id: string name: string email: string phone: string wallet_balance: number winnings: number avatar?: string referral_code: string is_verified: boolean } interface AuthContextType { user: User | null login: (email: string, password: string) => Promise register: (userData: any) => Promise logout: () => void loading: boolean updateUser: (userData: Partial) => void } const AuthContext = createContext(undefined) export function AuthProvider({ children }: { children: React.ReactNode }) { const [user, setUser] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { // Check for existing session const savedUser = localStorage.getItem("user") if (savedUser) { setUser(JSON.parse(savedUser)) } setLoading(false) }, []) const login = async (email: string, password: string) => { // Simulate API call const mockUser: User = { id: "1", name: "John Doe", email, phone: "+91 9876543210", wallet_balance: 1000, winnings: 5000, referral_code: "JOHN123", is_verified: true, } setUser(mockUser) localStorage.setItem("user", JSON.stringify(mockUser)) } const register = async (userData: any) => { const mockUser: User = { id: Date.now().toString(), ...userData, wallet_balance: 0, winnings: 0, referral_code: `USER${Date.now()}`, is_verified: false, } setUser(mockUser) localStorage.setItem("user", JSON.stringify(mockUser)) } const logout = () => { setUser(null) localStorage.removeItem("user") } const updateUser = (userData: Partial) => { if (user) { const updatedUser = { ...user, ...userData } setUser(updatedUser) localStorage.setItem("user", JSON.stringify(updatedUser)) } } return ( {children} ) } export const 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/matches/page.tsx" isMerged="true" "use client" import { useState } from "react" import Header from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Clock, MapPin, Trophy, Users } from "lucide-react" import Link from "next/link" interface Match { id: string sport: string team1: string team2: string team1_logo: string team2_logo: string league: string start_time: string status: "upcoming" | "live" | "completed" venue: string contests_count: number mega_contest_prize: string } const mockMatches: Match[] = [ { id: "1", sport: "Cricket", team1: "Mumbai Indians", team2: "Chennai Super Kings", team1_logo: "/placeholder.svg?height=40&width=40", team2_logo: "/placeholder.svg?height=40&width=40", league: "IPL 2024", start_time: "2024-01-20T19:30:00Z", status: "upcoming", venue: "Wankhede Stadium, Mumbai", contests_count: 156, mega_contest_prize: "1 Crore", }, { id: "2", sport: "Football", team1: "Manchester City", team2: "Liverpool", team1_logo: "/placeholder.svg?height=40&width=40", team2_logo: "/placeholder.svg?height=40&width=40", league: "Premier League", start_time: "2024-01-21T17:00:00Z", status: "live", venue: "Etihad Stadium", contests_count: 89, mega_contest_prize: "50 Lakh", }, { id: "3", sport: "Basketball", team1: "Lakers", team2: "Warriors", team1_logo: "/placeholder.svg?height=40&width=40", team2_logo: "/placeholder.svg?height=40&width=40", league: "NBA", start_time: "2024-01-22T08:00:00Z", status: "upcoming", venue: "Staples Center", contests_count: 45, mega_contest_prize: "25 Lakh", }, ] export default function MatchesPage() { const [matches, setMatches] = useState(mockMatches) const [activeTab, setActiveTab] = useState("all") const filteredMatches = matches.filter((match) => { if (activeTab === "all") return true return match.status === activeTab }) const formatTime = (dateString: string) => { const date = new Date(dateString) return date.toLocaleString("en-IN", { day: "numeric", month: "short", hour: "2-digit", minute: "2-digit", }) } const getStatusColor = (status: string) => { switch (status) { case "live": return "bg-red-500" case "upcoming": return "bg-green-500" case "completed": return "bg-gray-500" default: return "bg-gray-500" } } return (

Live Matches

Join contests for upcoming and live matches

All Live Upcoming Completed

{filteredMatches.map((match) => (

{match.sport} {match.status.toUpperCase()}

{match.league}

₹{match.mega_contest_prize}

Mega Contest

{/* Teams */}

{match.team1}

{match.team2}

{/* Match Details */}

{formatTime(match.start_time)}

{match.venue}

{match.contests_count} Contests

{/* Action Buttons */}

))}

) } [V0_FILE]typescriptreact:file="app/create-team/[matchId]/page.tsx" isMerged="true" "use client" import { useState } from "react" import Header from "@/components/header" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Plus, Minus, Crown, Shield } from "lucide-react" interface Player { id: string name: string team: string role: "WK" | "BAT" | "AR" | "BOWL" points: number credits: number selected_by: number avatar: string is_playing: boolean } const mockPlayers: Player[] = [ { id: "1", name: "Virat Kohli", team: "RCB", role: "BAT", points: 245, credits: 11.5, selected_by: 85.2, avatar: "/placeholder.svg?height=40&width=40", is_playing: true, }, { id: "2", name: "MS Dhoni", team: "CSK", role: "WK", points: 180, credits: 10.0, selected_by: 92.1, avatar: "/placeholder.svg?height=40&width=40", is_playing: true, }, { id: "3", name: "Jasprit Bumrah", team: "MI", role: "BOWL", points: 195, credits: 9.5, selected_by: 78.5, avatar: "/placeholder.svg?height=40&width=40", is_playing: true, }, { id: "4", name: "Hardik Pandya", team: "MI", role: "AR", points: 220, credits: 10.5, selected_by: 65.8, avatar: "/placeholder.svg?height=40&width=40", is_playing: true, }, ] export default function CreateTeamPage({ params }: { params: { matchId: string } }) { const [selectedPlayers, setSelectedPlayers] = useState([]) const [captain, setCaptain] = useState(null) const [viceCaptain, setViceCaptain] = useState(null) const [activeTab, setActiveTab] = useState("WK") const [creditsUsed, setCreditsUsed] = useState(0) const maxCredits = 100 const maxPlayers = 11 const roleRequirements = { WK: { min: 1, max: 4 }, BAT: { min: 3, max: 6 }, AR: { min: 1, max: 4 }, BOWL: { min: 3, max: 6 }, } const getSelectedByRole = (role: string) => { return selectedPlayers.filter((p) => p.role === role).length } const canSelectPlayer = (player: Player) => { if (selectedPlayers.includes(player)) return false if (selectedPlayers.length >= maxPlayers) return false if (creditsUsed + player.credits > maxCredits) return false const currentCount = getSelectedByRole(player.role) return currentCount < roleRequirements[player.role].max } const selectPlayer = (player: Player) => { if (canSelectPlayer(player)) { setSelectedPlayers([...selectedPlayers, player]) setCreditsUsed(creditsUsed + player.credits) } } const removePlayer = (player: Player) => { setSelectedPlayers(selectedPlayers.filter((p) => p.id !== player.id)) setCreditsUsed(creditsUsed - player.credits) if (captain === player.id) setCaptain(null) if (viceCaptain === player.id) setViceCaptain(null) } const filteredPlayers = mockPlayers.filter((p) => p.role === activeTab) const getRoleColor = (role: string) => { switch (role) { case "WK": return "bg-blue-100 text-blue-800" case "BAT": return "bg-green-100 text-green-800" case "AR": return "bg-purple-100 text-purple-800" case "BOWL": return "bg-red-100 text-red-800" default: return "bg-gray-100 text-gray-800" } } return (

{/* Player Selection */}

Select Players

Players: {selectedPlayers.length}/{maxPlayers} Credits: {creditsUsed.toFixed(1)}/{maxCredits}

WK ({getSelectedByRole("WK")}) BAT ({getSelectedByRole("BAT")}) AR ({getSelectedByRole("AR")}) BOWL ({getSelectedByRole("BOWL")})

{filteredPlayers.map((player) => { const isSelected = selectedPlayers.includes(player) const canSelect = canSelectPlayer(player) return (

{player.name .split(" ") .map((n) => n[0]) .join("")}

{player.name}

{player.role} {player.team} • {player.points} pts

{player.credits}

{player.selected_by}% selected

{isSelected ? ( ) : ( )}

) })}

{/* Team Preview */}

Your Team

{selectedPlayers.length === 0 ? (

Select players to build your team

) : ( selectedPlayers.map((player) => (

{player.name .split(" ") .map((n) => n[0]) .join("")}

{player.name}

{player.team}

{captain === player.id && } {viceCaptain === player.id && } {player.credits}

)) )}

{selectedPlayers.length === maxPlayers && (

Choose Captain (2x points)

{selectedPlayers.slice(0, 6).map((player) => ( ))}

Choose Vice Captain (1.5x points)

{selectedPlayers .filter((p) => p.id !== captain) .slice(0, 6) .map((player) => ( ))}

)}

) } [V0_FILE]typescriptreact:file="app/how-to-play/page.tsx" isMerged="true" import Header from "@/components/header" import Footer from "@/components/footer" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Users, Trophy, Target, Star, Crown, Shield } from "lucide-react" const steps = [ { step: 1, title: "Select a Match", description: "Choose from upcoming cricket, football, basketball, or kabaddi matches", icon: Target, }, { step: 2, title: "Create Your Team", description: "Pick 11 players within the 100 credit budget. Select players from both teams", icon: Users, }, { step: 3, title: "Choose Captain & Vice-Captain", description: "Captain gets 2x points, Vice-Captain gets 1.5x points", icon: Crown, }, { step: 4, title: "Join Contests", description: "Enter contests with different entry fees and prize pools", icon: Trophy, }, { step: 5, title: "Track Performance", description: "Watch live scores and track your team's performance", icon: Star, }, { step: 6, title: "Win Prizes", description: "Get instant withdrawals for your winnings", icon: Shield, }, ] const pointSystem = { cricket: [ { action: "Run", points: "+1" }, { action: "Boundary (4s)", points: "+1" }, { action: "Six", points: "+2" }, { action: "Half Century", points: "+4" }, { action: "Century", points: "+8" }, { action: "Wicket", points: "+25" }, { action: "Catch", points: "+8" }, { action: "Stumping", points: "+12" }, { action: "Run Out", points: "+6" }, ], football: [ { action: "Goal", points: "+16" }, { action: "Assist", points: "+12" }, { action: "Shot on Target", points: "+4" }, { action: "Pass Completed", points: "+0.5" }, { action: "Tackle Won", points: "+4" }, { action: "Clean Sheet (GK/DEF)", points: "+4" }, { action: "Save (GK)", points: "+2" }, { action: "Yellow Card", points: "-2" }, { action: "Red Card", points: "-8" }, ], } export default function HowToPlayPage() { return (

{/* Hero Section */}

How to Play Fantasy Sports

Learn how to create winning teams, join contests, and win real cash prizes in just 6 simple steps

{/* Steps Section */}

Getting Started

{steps.map((step) => (

Step {step.step}

{step.title}

{step.description}

))}

{/* Team Formation Rules */}

Team Formation Rules

Cricket Team Composition

Wicket Keepers 1-4 players

Batsmen 3-6 players

All Rounders 1-4 players

Bowlers 3-6 players

Total Players 11 players

Credit Limit 100 credits

Football Team Composition

Goalkeepers 1-2 players

Defenders 3-5 players

Midfielders 3-5 players

Forwards 1-3 players

Total Players 11 players

Credit Limit 100 credits

{/* Point System */}

Point System

Cricket Points

{pointSystem.cricket.map((item, index) => (

{item.action} {item.points}

))}

Football Points

{pointSystem.football.map((item, index) => (

{item.action} {item.points}

))}

{/* Tips Section */} Pro Tips for Winning

Team Selection

• Research player form and recent performances
• Check weather conditions and pitch reports
• Balance your team with players from both sides
• Don't spend all credits on star players

Contest Strategy

• Start with smaller contests to learn
• Create multiple teams for better chances
• Join guaranteed contests for assured prizes
• Track your performance and learn from mistakes

) } [V0_FILE]typescriptreact:file="app/terms/page.tsx" isMerged="true" import Header from "@/components/header" import Footer from "@/components/footer" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function TermsPage() { return (

Terms & Conditions

Last updated: January 2024

1. Acceptance of Terms

By accessing and using FantasyPro, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by the above, please do not use this service.

2. Eligibility

You must be at least 18 years old to use our services. By using FantasyPro, you represent and warrant that you are at least 18 years of age and have the legal capacity to enter into this agreement.

Must be a resident of India
Must provide accurate registration information
Must not be a professional athlete in the sport you're playing fantasy for

3. Account Responsibilities

You are responsible for maintaining the confidentiality of your account and password. You agree to accept responsibility for all activities that occur under your account.

Keep your login credentials secure
Notify us immediately of any unauthorized use
Provide accurate and complete information
Update your information when necessary

4. Fair Play Policy

FantasyPro is committed to providing a fair and enjoyable gaming experience for all users. Any form of cheating, manipulation, or unfair advantage is strictly prohibited.

No use of automated tools or bots
No sharing of insider information
No creation of multiple accounts
No collusion with other players

5. Payment Terms

All transactions on FantasyPro are processed securely. Winnings are credited to your account immediately after contest completion.

Minimum withdrawal amount: ₹100
Processing time: 1-2 business days
Valid ID required for withdrawals above ₹10,000
TDS applicable as per government regulations

6. Limitation of Liability

FantasyPro shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including without limitation, loss of profits, data, use, goodwill, or other intangible losses.

7. Contact Information

If you have any questions about these Terms & Conditions, please contact us at:

Email: legal@fantasypro.com
Phone: +91 1800-123-4567
Address: FantasyPro Pvt Ltd, Mumbai, India

) } [V0_FILE]typescriptreact:file="app/privacy/page.tsx" isMerged="true" import Header from "@/components/header" import Footer from "@/components/footer" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default function PrivacyPage() { return (

Privacy Policy

Last updated: January 2024

Information We Collect

We collect information you provide directly to us, such as when you create an account, participate in contests, or contact us for support.

Personal information (name, email, phone number)
Payment information (bank details, UPI ID)
Game data (teams created, contests joined)
Device information (IP address, browser type)

How We Use Your Information

We use the information we collect to:

Provide and maintain our services
Process transactions and send notifications
Improve our platform and user experience
Comply with legal obligations
Prevent fraud and ensure fair play

Information Sharing

We do not sell, trade, or otherwise transfer your personal information to third parties without your consent, except as described in this policy.

Service providers (payment processors, analytics)
Legal compliance (when required by law)
Business transfers (in case of merger or acquisition)

Data Security

We implement appropriate security measures to protect your personal information against unauthorized access, alteration, disclosure, or destruction.

SSL encryption for data transmission
Secure servers and databases
Regular security audits
Access controls and authentication

Your Rights

You have the right to:

Access your personal information
Correct inaccurate information
Delete your account and data
Opt-out of marketing communications
Data portability

If you have any questions about this Privacy Policy, please contact us:

Email: privacy@fantasypro.com
Phone: +91 1800-123-4567
Address: FantasyPro Pvt Ltd, Mumbai, India

) } [V0_FILE]typescriptreact:file="app/about/page.tsx" isMerged="true" import Header from "@/components/header" import Footer from "@/components/footer" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Trophy, Users, Shield, Zap, Target, Award } from "lucide-react" const stats = [ { icon: Users, label: "Active Users", value: "10M+" }, { icon: Trophy, label: "Contests Daily", value: "1000+" }, { icon: Shield, label: "Prize Money", value: "₹50Cr+" }, { icon: Zap, label: "Years Experience", value: "5+" }, ] const team = [ { name: "Rajesh Kumar", role: "CEO & Founder", description: "Former tech executive with 15+ years in gaming industry", }, { name: "Priya Sharma", role: "CTO", description: "Expert in scalable systems and fantasy sports algorithms", }, { name: "Amit Singh", role: "Head of Product", description: "Product strategist focused on user experience and engagement", }, ] export default function AboutPage() { return (

{/* Hero Section */}

About FantasyPro

India's most trusted fantasy sports platform, bringing millions of sports fans together to compete, win, and celebrate their passion for sports.

{/* Stats Section */}

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

{stat.value}

{stat.label}

))}

{/* Mission Section */}

Our Mission

To revolutionize the way sports fans engage with their favorite games by providing a fair, transparent, and exciting fantasy sports platform. We believe every sports enthusiast deserves the chance to showcase their knowledge and win real rewards.

Our Vision

To become the world's leading fantasy sports platform, fostering a global community of sports lovers who can compete, learn, and grow together while enjoying the thrill of fantasy sports in a safe and secure environment.

{/* Story Section */} Our Story

Founded in 2019 by a group of passionate sports enthusiasts and technology experts, FantasyPro was born from a simple idea: to create a platform where sports knowledge meets excitement and rewards.

Starting with just cricket, we quickly expanded to include football, basketball, and kabaddi, becoming one of India's fastest-growing fantasy sports platforms. Our commitment to fair play, user security, and innovative features has earned the trust of millions of users across the country.

Today, FantasyPro hosts thousands of contests daily, has distributed over ₹50 crores in prize money, and continues to set new standards in the fantasy sports industry with cutting-edge technology and user-centric design.

{/* Team Section */}

Meet Our Team

{team.map((member, index) => (

{member.name}

{member.role}

{member.description}

))}

{/* Values Section */} Our Values

Trust & Security

Your data and money are completely safe with bank-grade security measures.

Fair Play

We ensure a level playing field for all users with transparent algorithms.

Innovation

Constantly improving our platform with cutting-edge technology and features.

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import Header from "@/components/header" import Footer from "@/components/footer" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Mail, Phone, MapPin, Clock } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function ContactPage() { const [formData, setFormData] = useState({ name: "", email: "", subject: "", message: "", }) const [loading, setLoading] = useState(false) const { toast } = useToast() const handleChange = (e: React.ChangeEvent) => { setFormData({ ...formData, [e.target.name]: e.target.value, }) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setLoading(true) // Simulate form submission setTimeout(() => { toast({ title: "Message Sent!", description: "We'll get back to you within 24 hours.", }) setFormData({ name: "", email: "", subject: "", message: "" }) setLoading(false) }, 1000) } return (

Contact Us

Have questions? We're here to help. Reach out to us anytime.

{/* Contact Information */}

Email

support@fantasypro.com

Phone

+91 1800-123-4567

Address

FantasyPro Pvt Ltd
Mumbai, Maharashtra
India - 400001

Support Hours

Monday - Sunday
9:00 AM - 9:00 PM IST

{/* Contact Form */}

Send us a Message

Name

Subject

Message

</div>

<Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={loading}>
                    {loading ? "Sending..." : "Send Message"}
                  </Button>
                </form>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/contests/[matchId]/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Header from "@/components/header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Trophy, Users, Clock, IndianRupee, Star, Zap } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface Contest {
  id: string
  title: string
  type: "mega" | "small" | "head-to-head" | "winner-takes-all"
  entry_fee: number
  prize_pool: number
  total_spots: number
  filled_spots: number
  winners_count: number
  first_prize: number
  time_left: string
  guaranteed: boolean
  multi_entry: boolean
  max_entries?: number
}

const mockContests: Contest[] = [
  {
    id: "1",
    title: "Mega Contest",
    type: "mega",
    entry_fee: 49,
    prize_pool: 1000000,
    total_spots: 100000,
    filled_spots: 85432,
    winners_count: 16000,
    first_prize: 500000,
    time_left: "2h 45m",
    guaranteed: true,
    multi_entry: true,
    max_entries: 11,
  },
  {
    id: "2",
    title: "Head to Head",
    type: "head-to-head",
    entry_fee: 50,
    prize_pool: 98,
    total_spots: 2,
    filled_spots: 1,
    winners_count: 1,
    first_prize: 98,
    time_left: "2h 45m",
    guaranteed: false,
    multi_entry: false,
  },
  {
    id: "3",
    title: "Small League",
    type: "small",
    entry_fee: 25,
    prize_pool: 1000,
    total_spots: 50,
    filled_spots: 32,
    winners_count: 5,
    first_prize: 500,
    time_left: "2h 45m",
    guaranteed: true,
    multi_entry: true,
    max_entries: 5,
  },
  {
    id: "4",
    title: "Winner Takes All",
    type: "winner-takes-all",
    entry_fee: 100,
    prize_pool: 1000,
    total_spots: 10,
    filled_spots: 8,
    winners_count: 1,
    first_prize: 1000,
    time_left: "2h 45m",
    guaranteed: false,
    multi_entry: false,
  },
]

export default function ContestsPage({ params }: { params: { matchId: string } }) {
  const [contests, setContests] = useState<Contest[]>(mockContests)
  const [activeTab, setActiveTab] = useState("all")
  const { toast } = useToast()

const filteredContests = contests.filter((contest) => {
    if (activeTab === "all") return true
    return contest.type === activeTab
  })

const getContestIcon = (type: string) => {
    switch (type) {
      case "mega":
        return <Star className="h-5 w-5 text-yellow-500" />
      case "head-to-head":
        return <Users className="h-5 w-5 text-blue-500" />
      case "small":
        return <Trophy className="h-5 w-5 text-green-500" />
      case "winner-takes-all":
        return <Zap className="h-5 w-5 text-purple-500" />
      default:
        return <Trophy className="h-5 w-5" />
    }
  }

const formatNumber = (num: number) => {
    if (num >= 10000000) return `${(num / 10000000).toFixed(1)}Cr`
    if (num >= 100000) return `${(num / 100000).toFixed(1)}L`
    if (num >= 1000) return `${(num / 1000).toFixed(1)}K`
    return num.toString()
  }

const handleJoinContest = (contestId: string, entryFee: number) => {
    // Simulate joining contest
    toast({
      title: "Contest Joined!",
      description: `Successfully joined contest for ₹${entryFee}`,
    })
  }

const handleViewPrizes = (contest: Contest) => {
    // Simulate viewing prizes
    toast({
      title: "Prize Breakdown",
      description: `1st Prize: ₹${contest.first_prize}, Total Winners: ${contest.winners_count}`,
    })
  }

return (
    <div className="min-h-screen bg-gray-50">
      <Header />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 mb-2">Contest Lobby</h1>
          <p className="text-gray-600">Choose your contest and join the competition</p>
        </div>

<Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
          <TabsList className="grid w-full grid-cols-5 max-w-2xl">
            <TabsTrigger value="all">All</TabsTrigger>
            <TabsTrigger value="mega">Mega</TabsTrigger>
            <TabsTrigger value="small">Small</TabsTrigger>
            <TabsTrigger value="head-to-head">H2H</TabsTrigger>
            <TabsTrigger value="winner-takes-all">WTA</TabsTrigger>
          </TabsList>
        </Tabs>

<div className="grid gap-6">
          {filteredContests.map((contest) => (
            <Card key={contest.id} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div className="flex items-center gap-3">
                    {getContestIcon(contest.type)}
                    <div>
                      <CardTitle className="text-xl mb-1">{contest.title}</CardTitle>
                      <div className="flex gap-2">
                        {contest.guaranteed && <Badge className="bg-green-100 text-green-800">Guaranteed</Badge>}
                        {contest.multi_entry && <Badge variant="secondary">Multi Entry</Badge>}
                      </div>
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="flex items-center text-green-600 font-bold text-xl">
                      <Trophy className="h-5 w-5 mr-1" />₹{formatNumber(contest.prize_pool)}
                    </div>
                    <div className="text-sm text-gray-500">{contest.winners_count} Winners</div>
                  </div>
                </div>
              </CardHeader>

<CardContent>
                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
                  <div className="text-center">
                    <div className="flex items-center justify-center text-gray-600 mb-1">
                      <IndianRupee className="h-4 w-4 mr-1" />
                      <span className="text-sm">Entry</span>
                    </div>
                    <div className="font-semibold text-lg">₹{contest.entry_fee}</div>
                  </div>

<div className="text-center">
                    <div className="flex items-center justify-center text-gray-600 mb-1">
                      <Users className="h-4 w-4 mr-1" />
                      <span className="text-sm">Spots</span>
                    </div>
                    <div className="font-semibold text-lg">
                      {formatNumber(contest.filled_spots)}/{formatNumber(contest.total_spots)}
                    </div>
                  </div>

<div className="text-center">
                    <div className="flex items-center justify-center text-gray-600 mb-1">
                      <Trophy className="h-4 w-4 mr-1" />
                      <span className="text-sm">1st Prize</span>
                    </div>
                    <div className="font-semibold text-lg text-green-600">₹{formatNumber(contest.first_prize)}</div>
                  </div>

<div className="text-center">
                    <div className="flex items-center justify-center text-gray-600 mb-1">
                      <Clock className="h-4 w-4 mr-1" />
                      <span className="text-sm">Time Left</span>
                    </div>
                    <div className="font-semibold text-lg text-red-600">{contest.time_left}</div>
                  </div>
                </div>

{/* Progress Bar */}
                <div className="mb-6">
                  <div className="w-full bg-gray-200 rounded-full h-3">
                    <div
                      className="bg-green-600 h-3 rounded-full transition-all duration-300"
                      style={{
                        width: `${(contest.filled_spots / contest.total_spots) * 100}%`,
                      }}
                    ></div>
                  </div>
                  <div className="flex justify-between text-sm text-gray-600 mt-1">
                    <span>{formatNumber(contest.filled_spots)} joined</span>
                    <span>{formatNumber(contest.total_spots - contest.filled_spots)} spots left</span>
                  </div>
                </div>

{/* Action Buttons */}
                <div className="flex gap-4">
                  <Button
                    onClick={() => handleJoinContest(contest.id, contest.entry_fee)}
                    className="flex-1 bg-green-600 hover:bg-green-700"
                  >
                    Join ₹{contest.entry_fee}
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => handleViewPrizes(contest)}
                    className="border-green-600 text-green-600 hover:bg-green-50"
                  >
                    View Prizes
                  </Button>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/my-teams/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Header from "@/components/header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Plus, Edit, Trash2 } from "lucide-react"
import { useRouter } from "next/navigation"

const teams = [
  {
    id: 1,
    name: "Dream Warriors",
    sport: "Cricket",
    players: 11,
    captain: "V. Kohli",
    viceCaptain: "R. Sharma",
    contests: 3,
    points: 245,
  },
  {
    id: 2,
    name: "Goal Crushers",
    sport: "Football",
    players: 11,
    captain: "L. Messi",
    viceCaptain: "Neymar Jr",
    contests: 1,
    points: 180,
  },
]

export default function MyTeamsPage() {
  const router = useRouter()

const handleViewTeam = (teamId: string) => {
    // Navigate to team details
    router.push(`/team-details/${teamId}`)
  }

const handleCreateTeam = () => {
    // Navigate to create team page
    router.push("/create-team/new")
  }

return (
    <div className="min-h-screen bg-gray-50">
      <Header />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="flex justify-between items-center mb-8">
          <div>
            <h1 className="text-3xl font-bold text-gray-900 mb-2">My Teams</h1>
            <p className="text-gray-600">Manage your fantasy teams</p>
          </div>
          <Button onClick={handleCreateTeam} className="bg-green-600 hover:bg-green-700">
            <Plus className="h-4 w-4 mr-2" />
            Create Team
          </Button>
        </div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
          {teams.map((team) => (
            <Card key={team.id} className="hover:shadow-lg transition-shadow">
              <CardHeader>
                <div className="flex justify-between items-start">
                  <div>
                    <CardTitle className="text-lg mb-2">{team.name}</CardTitle>
                    <Badge variant="secondary">{team.sport}</Badge>
                  </div>
                  <div className="flex space-x-2">
                    <Button size="sm" variant="outline">
                      <Edit className="h-4 w-4" />
                    </Button>
                    <Button size="sm" variant="outline">
                      <Trash2 className="h-4 w-4" />
                    </Button>
                  </div>
                </div>
              </CardHeader>

<CardContent>
                <div className="space-y-3">
                  <div className="flex justify-between">
                    <span className="text-gray-600">Players:</span>
                    <span className="font-semibold">{team.players}/11</span>
                  </div>

<div className="flex justify-between">
                    <span className="text-gray-600">Captain:</span>
                    <span className="font-semibold">{team.captain}</span>
                  </div>

<div className="flex justify-between">
                    <span className="text-gray-600">Vice Captain:</span>
                    <span className="font-semibold">{team.viceCaptain}</span>
                  </div>

<div className="flex justify-between">
                    <span className="text-gray-600">Contests:</span>
                    <span className="font-semibold">{team.contests}</span>
                  </div>

<div className="flex justify-between">
                    <span className="text-gray-600">Points:</span>
                    <span className="font-semibold text-green-600">{team.points}</span>
                  </div>
                </div>

<Button onClick={() => handleViewTeam(team.id)} className="w-full mt-4 bg-green-600 hover:bg-green-700">
                  View Team
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/team-details/[teamId]/page.tsx" isMerged="true"
"use client"

import { useState } from "react"
import Header from "@/components/header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Crown, Shield, Edit, Share2 } from "lucide-react"

interface TeamPlayer {
  id: string
  name: string
  team: string
  role: "WK" | "BAT" | "AR" | "BOWL"
  points: number
  credits: number
  is_captain: boolean
  is_vice_captain: boolean
  avatar: string
}

const mockTeamPlayers: TeamPlayer[] = [
  {
    id: "1",
    name: "Virat Kohli",
    team: "RCB",
    role: "BAT",
    points: 245,
    credits: 11.5,
    is_captain: true,
    is_vice_captain: false,
    avatar: "/placeholder.svg?height=40&width=40",
  },
  {
    id: "2",
    name: "MS Dhoni",
    team: "CSK",
    role: "WK",
    points: 180,
    credits: 10.0,
    is_captain: false,
    is_vice_captain: true,
    avatar: "/placeholder.svg?height=40&width=40",
  },
  // Add more players...
]

export default function TeamDetailsPage({ params }: { params: { teamId: string } }) {
  const [teamPlayers, setTeamPlayers] = useState<TeamPlayer[]>(mockTeamPlayers)

const totalPoints = teamPlayers.reduce((sum, player) => {
    let points = player.points
    if (player.is_captain) points *= 2
    if (player.is_vice_captain) points *= 1.5
    return sum + points
  }, 0)

const getRoleColor = (role: string) => {
    switch (role) {
      case "WK":
        return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300"
      case "BAT":
        return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
      case "AR":
        return "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300"
      case "BOWL":
        return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
      default:
        return "bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300"
    }
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header />

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Team Header */}
        <Card className="mb-8 dark:bg-gray-800 dark:border-gray-700">
          <CardHeader>
            <div className="flex justify-between items-start">
              <div>
                <CardTitle className="text-2xl dark:text-white">Dream Warriors</CardTitle>
                <p className="text-gray-600 dark:text-gray-300">MI vs CSK • IPL 2024</p>
              </div>
              <div className="flex space-x-2">
                <Button variant="outline" size="sm">
                  <Edit className="h-4 w-4 mr-2" />
                  Edit
                </Button>
                <Button variant="outline" size="sm">
                  <Share2 className="h-4 w-4 mr-2" />
                  Share
                </Button>
              </div>
            </div>
          </CardHeader>
          <CardContent>
            <div className="grid grid-cols-3 gap-4 text-center">
              <div>
                <div className="text-2xl font-bold text-green-600 dark:text-green-400">{totalPoints}</div>
                <div className="text-sm text-gray-600 dark:text-gray-300">Total Points</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">11</div>
                <div className="text-sm text-gray-600 dark:text-gray-300">Players</div>
              </div>
              <div>
                <div className="text-2xl font-bold text-purple-600 dark:text-purple-400">100</div>
                <div className="text-sm text-gray-600 dark:text-gray-300">Credits Used</div>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Players List */}
        <Card className="dark:bg-gray-800 dark:border-gray-700">
          <CardHeader>
            <CardTitle className="dark:text-white">Team Players</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {teamPlayers.map((player) => (
                <div
                  key={player.id}
                  className="flex items-center justify-between p-4 rounded-lg border dark:border-gray-600 bg-white dark:bg-gray-700"
                >
                  <div className="flex items-center space-x-4">
                    <Avatar>
                      <AvatarImage src={player.avatar || "/placeholder.svg"} alt={player.name} />
                      <AvatarFallback>
                        {player.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>

<div>
                      <div className="flex items-center space-x-2">
                        <span className="font-semibold dark:text-white">{player.name}</span>
                        {player.is_captain && <Crown className="h-4 w-4 text-yellow-500" />}
                        {player.is_vice_captain && <Shield className="h-4 w-4 text-gray-500" />}
                      </div>
                      <div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-300">
                        <Badge className={getRoleColor(player.role)} variant="secondary">
                          {player.role}
                        </Badge>
                        <span>{player.team}</span>
                      </div>
                    </div>
                  </div>

<div className="text-right">
                    <div className="font-semibold text-green-600 dark:text-green-400">
                      {player.is_captain
                        ? player.points * 2
                        : player.is_vice_captain
                          ? player.points * 1.5
                          : player.points}{" "}
                      pts
                    </div>
                    <div className="text-sm text-gray-500">{player.credits} credits</div>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="tailwind.config.ts" isQuickEdit="true" isMerged="true"
import type { Config } from "tailwindcss"

const config: Config = {
  darkMode: "class",
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        chart: {
          "1": "hsl(var(--chart-1))",
          "2": "hsl(var(--chart-2))",
          "3": "hsl(var(--chart-3))",
          "4": "hsl(var(--chart-4))",
          "5": "hsl(var(--chart-5))",
        },
        sidebar: {
          DEFAULT: "hsl(var(--sidebar-background))",
          foreground: "hsl(var(--sidebar-foreground))",
          primary: "hsl(var(--sidebar-primary))",
          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
          accent: "hsl(var(--sidebar-accent))",
          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
          border: "hsl(var(--sidebar-border))",
          ring: "hsl(var(--sidebar-ring))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: {
            height: "0",
          },
          to: {
            height: "var(--radix-accordion-content-height)",
          },
        },
        "accordion-up": {
          from: {
            height: "var(--radix-accordion-content-height)",
          },
          to: {
            height: "0",
          },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
}
export default config
[V0_FILE]typescriptreact:file="app/payment/loading.tsx" isFixed="true" isMerged="true"
export default function Loading() {
  return null
}
[V0_FILE]typescriptreact:file="components/payment-methods.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { CreditCard, Smartphone, Plus, Edit, Trash2 } from "lucide-react"
import { useToast } from "@/hooks/use-toast"

interface PaymentMethod {
  id: string
  type: "card" | "upi"
  name: string
  details: string
  isDefault: boolean
}

interface PaymentMethodsProps {
  savedMethods?: PaymentMethod[]
  onSelect?: (method: PaymentMethod) => void
  showAddNew?: boolean
}

export default function PaymentMethods({ savedMethods = [], onSelect, showAddNew = true }: PaymentMethodsProps) {
  const { toast } = useToast()
  const [methods, setMethods] = useState<PaymentMethod[]>(
    savedMethods.length > 0
      ? savedMethods
      : [
          {
            id: "1",
            type: "card",
            name: "HDFC Bank Credit Card",
            details: "**** **** **** 1234",
            isDefault: true,
          },
          {
            id: "2",
            type: "upi",
            name: "PhonePe UPI",
            details: "user@phonepe",
            isDefault: false,
          },
        ],
  )
  const [showAddForm, setShowAddForm] = useState(false)
  const [newMethod, setNewMethod] = useState({
    type: "card" as "card" | "upi",
    name: "",
    details: "",
  })

const handleAddMethod = () => {
    if (newMethod.name && newMethod.details) {
      const method: PaymentMethod = {
        id: Date.now().toString(),
        type: newMethod.type,
        name: newMethod.name,
        details: newMethod.details,
        isDefault: methods.length === 0,
      }
      setMethods([...methods, method])
      setNewMethod({ type: "card", name: "", details: "" })
      setShowAddForm(false)
      toast({
        title: "Payment Method Added",
        description: "Your payment method has been saved successfully.",
      })
    }
  }

const handleDeleteMethod = (id: string) => {
    setMethods(methods.filter((method) => method.id !== id))
    toast({
      title: "Payment Method Removed",
      description: "The payment method has been removed from your account.",
    })
  }

const getMethodIcon = (type: string) => {
    switch (type) {
      case "card":
        return <CreditCard className="h-6 w-6 text-blue-600 dark:text-blue-400" />
      case "upi":
        return <Smartphone className="h-6 w-6 text-purple-600 dark:text-purple-400" />
      default:
        return <CreditCard className="h-6 w-6 text-gray-600 dark:text-gray-400" />
    }
  }

return (
    <div className="space-y-4">
      {/* Saved Payment Methods */}
      {methods.map((method) => (
        <Card
          key={method.id}
          className={`cursor-pointer transition-colors hover:bg-gray-50 dark:hover:bg-gray-700 dark:bg-gray-800 dark:border-gray-700 ${
            method.isDefault ? "ring-2 ring-green-500" : ""
          }`}
          onClick={() => onSelect?.(method)}
        >
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <div
                  className={`p-2 rounded-md ${
                    method.type === "card" ? "bg-blue-100 dark:bg-blue-900" : "bg-purple-100 dark:bg-purple-900"
                  }`}
                >
                  {getMethodIcon(method.type)}
                </div>
                <div>
                  <p className="font-medium dark:text-white">{method.name}</p>
                  <p className="text-sm text-gray-600 dark:text-gray-300">{method.details}</p>
                  {method.isDefault && <span className="text-xs text-green-600 dark:text-green-400">Default</span>}
                </div>
              </div>
              <div className="flex space-x-2">
                <Button size="sm" variant="ghost">
                  <Edit className="h-4 w-4" />
                </Button>
                <Button
                  size="sm"
                  variant="ghost"
                  onClick={(e) => {
                    e.stopPropagation()
                    handleDeleteMethod(method.id)
                  }}
                >
                  <Trash2 className="h-4 w-4" />
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}

{/* Add New Payment Method */}
      {showAddNew && (
        <>
          {!showAddForm ? (
            <Button
              variant="outline"
              className="w-full h-16 border-dashed dark:border-gray-600 dark:text-gray-300"
              onClick={() => setShowAddForm(true)}
            >
              <Plus className="h-5 w-5 mr-2" />
              Add New Payment Method
            </Button>
          ) : (
            <Card className="dark:bg-gray-800 dark:border-gray-700">
              <CardContent className="p-4 space-y-4">
                <div className="flex space-x-4">
                  <Button
                    variant={newMethod.type === "card" ? "default" : "outline"}
                    onClick={() => setNewMethod({ ...newMethod, type: "card" })}
                    className="flex-1"
                  >
                    <CreditCard className="h-4 w-4 mr-2" />
                    Card
                  </Button>
                  <Button
                    variant={newMethod.type === "upi" ? "default" : "outline"}
                    onClick={() => setNewMethod({ ...newMethod, type: "upi" })}
                    className="flex-1"
                  >
                    <Smartphone className="h-4 w-4 mr-2" />
                    UPI
                  </Button>
                </div>

<div>
                  <Label htmlFor="method-name" className="dark:text-gray-300">
                    {newMethod.type === "card" ? "Card Name" : "UPI Name"}
                  </Label>
                  <Input
                    id="method-name"
                    placeholder={newMethod.type === "card" ? "e.g., HDFC Credit Card" : "e.g., PhonePe UPI"}
                    value={newMethod.name}
                    onChange={(e) => setNewMethod({ ...newMethod, name: e.target.value })}
                    className="dark:bg-gray-700 dark:border-gray-600"
                  />
                </div>

<div>
                  <Label htmlFor="method-details" className="dark:text-gray-300">
                    {newMethod.type === "card" ? "Card Number" : "UPI ID"}
                  </Label>
                  <Input
                    id="method-details"
                    placeholder={newMethod.type === "card" ? "**** **** **** 1234" : "user@upi"}
                    value={newMethod.details}
                    onChange={(e) => setNewMethod({ ...newMethod, details: e.target.value })}
                    className="dark:bg-gray-700 dark:border-gray-600"
                  />
                </div>

<div className="flex space-x-2">
                  <Button onClick={handleAddMethod} className="flex-1 bg-green-600 hover:bg-green-700">
                    Add Method
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => setShowAddForm(false)}
                    className="flex-1 dark:border-gray-600"
                  >
                    Cancel
                  </Button>
                </div>
              </CardContent>
            </Card>
          )}
        </>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="lib/store.ts" isMerged="true"
import { configureStore } from "@reduxjs/toolkit"
import authSlice from "./features/auth/authSlice"
import walletSlice from "./features/wallet/walletSlice"
import contestsSlice from "./features/contests/contestsSlice"
import teamsSlice from "./features/teams/teamsSlice"
import matchesSlice from "./features/matches/matchesSlice"
import profileSlice from "./features/profile/profileSlice"
import notificationsSlice from "./features/notifications/notificationsSlice"

export const store = configureStore({
  reducer: {
    auth: authSlice,
    wallet: walletSlice,
    contests: contestsSlice,
    teams: teamsSlice,
    matches: matchesSlice,
    profile: profileSlice,
    notifications: notificationsSlice,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: ["persist/PERSIST"],
      },
    }),
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
[V0_FILE]typescriptreact:file="lib/hooks.ts" isMerged="true"
import { useDispatch, useSelector, useStore } from "react-redux"
import type { TypedUseSelectorHook } from "react-redux"
import type { RootState, AppDispatch } from "./store"

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector
export const useAppStore = () => useStore()
[V0_FILE]typescriptreact:file="lib/features/auth/authSlice.ts" isMerged="true"
import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

export interface User {
  id: string
  name: string
  email: string
  phone: string
  wallet_balance: number
  winnings: number
  avatar?: string
  referral_code: string
  is_verified: boolean
  created_at: string
  last_login?: string
}

interface AuthState {
  user: User | null
  isAuthenticated: boolean
  loading: boolean
  error: string | null
  loginAttempts: number
  lastLoginAttempt: number | null
}

const initialState: AuthState = {
  user: null,
  isAuthenticated: false,
  loading: false,
  error: null,
  loginAttempts: 0,
  lastLoginAttempt: null,
}

// Async thunks
export const loginUser = createAsyncThunk(
  "auth/loginUser",
  async ({ email, password }: { email: string; password: string }, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

// Mock user data
      const mockUser: User = {
        id: "1",
        name: "John Doe",
        email,
        phone: "+91 9876543210",
        wallet_balance: 1000,
        winnings: 5000,
        referral_code: "JOHN123",
        is_verified: true,
        created_at: new Date().toISOString(),
        last_login: new Date().toISOString(),
      }

// Store in localStorage
      localStorage.setItem("user", JSON.stringify(mockUser))
      localStorage.setItem("token", "mock-jwt-token")

return mockUser
    } catch (error) {
      return rejectWithValue("Invalid credentials")
    }
  },
)

export const registerUser = createAsyncThunk(
  "auth/registerUser",
  async (
    userData: Omit<User, "id" | "wallet_balance" | "winnings" | "referral_code" | "is_verified" | "created_at">,
    { rejectWithValue },
  ) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

const mockUser: User = {
        id: Date.now().toString(),
        ...userData,
        wallet_balance: 0,
        winnings: 0,
        referral_code: `USER${Date.now()}`,
        is_verified: false,
        created_at: new Date().toISOString(),
      }

// Store in localStorage
      localStorage.setItem("user", JSON.stringify(mockUser))
      localStorage.setItem("token", "mock-jwt-token")

return mockUser
    } catch (error) {
      return rejectWithValue("Registration failed")
    }
  },
)

export const loadUserFromStorage = createAsyncThunk("auth/loadUserFromStorage", async (_, { rejectWithValue }) => {
  try {
    const savedUser = localStorage.getItem("user")
    const token = localStorage.getItem("token")

if (savedUser && token) {
      return JSON.parse(savedUser) as User
    }

return null
  } catch (error) {
    return rejectWithValue("Failed to load user from storage")
  }
})

export const updateUserProfile = createAsyncThunk(
  "auth/updateUserProfile",
  async (updates: Partial<User>, { getState, rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const state = getState() as { auth: AuthState }
      const currentUser = state.auth.user

if (!currentUser) {
        return rejectWithValue("No user found")
      }

const updatedUser = { ...currentUser, ...updates }

// Update localStorage
      localStorage.setItem("user", JSON.stringify(updatedUser))

return updatedUser
    } catch (error) {
      return rejectWithValue("Failed to update profile")
    }
  },
)

const authSlice = createSlice({
  name: "auth",
  initialState,
  reducers: {
    logout: (state) => {
      state.user = null
      state.isAuthenticated = false
      state.error = null
      localStorage.removeItem("user")
      localStorage.removeItem("token")
    },
    clearError: (state) => {
      state.error = null
    },
    updateWalletBalance: (state, action: PayloadAction<number>) => {
      if (state.user) {
        state.user.wallet_balance = action.payload
        localStorage.setItem("user", JSON.stringify(state.user))
      }
    },
    updateWinnings: (state, action: PayloadAction<number>) => {
      if (state.user) {
        state.user.winnings = action.payload
        localStorage.setItem("user", JSON.stringify(state.user))
      }
    },
  },
  extraReducers: (builder) => {
    builder
      // Login
      .addCase(loginUser.pending, (state) => {
        state.loading = true
        state.error = null
      })
      .addCase(loginUser.fulfilled, (state, action) => {
        state.loading = false
        state.user = action.payload
        state.isAuthenticated = true
        state.loginAttempts = 0
        state.lastLoginAttempt = null
      })
      .addCase(loginUser.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload as string
        state.loginAttempts += 1
        state.lastLoginAttempt = Date.now()
      })
      // Register
      .addCase(registerUser.pending, (state) => {
        state.loading = true
        state.error = null
      })
      .addCase(registerUser.fulfilled, (state, action) => {
        state.loading = false
        state.user = action.payload
        state.isAuthenticated = true
      })
      .addCase(registerUser.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload as string
      })
      // Load from storage
      .addCase(loadUserFromStorage.fulfilled, (state, action) => {
        if (action.payload) {
          state.user = action.payload
          state.isAuthenticated = true
        }
      })
      // Update profile
      .addCase(updateUserProfile.pending, (state) => {
        state.loading = true
      })
      .addCase(updateUserProfile.fulfilled, (state, action) => {
        state.loading = false
        state.user = action.payload
      })
      .addCase(updateUserProfile.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload as string
      })
  },
})

export const { logout, clearError, updateWalletBalance, updateWinnings } = authSlice.actions
export default authSlice.reducer
[V0_FILE]typescriptreact:file="lib/features/wallet/walletSlice.ts" isMerged="true"
import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

export interface Transaction {
  id: string
  type: "credit" | "debit"
  amount: number
  description: string
  date: string
  status: "completed" | "pending" | "failed"
  transaction_id?: string
  payment_method?: string
}

export interface PaymentMethod {
  id: string
  type: "card" | "upi" | "netbanking"
  name: string
  details: string
  is_default: boolean
  created_at: string
}

interface WalletState {
  transactions: Transaction[]
  paymentMethods: PaymentMethod[]
  loading: boolean
  error: string | null
  addMoneyLoading: boolean
  withdrawLoading: boolean
  selectedPaymentMethod: string | null
}

const initialState: WalletState = {
  transactions: [],
  paymentMethods: [],
  loading: false,
  error: null,
  addMoneyLoading: false,
  withdrawLoading: false,
  selectedPaymentMethod: null,
}

// Async thunks
export const fetchTransactions = createAsyncThunk("wallet/fetchTransactions", async (_, { rejectWithValue }) => {
  try {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 500))

const mockTransactions: Transaction[] = [
      {
        id: "1",
        type: "credit",
        amount: 500,
        description: "Contest Winnings - IPL Match",
        date: new Date(Date.now() - 86400000).toISOString(),
        status: "completed",
        transaction_id: "TXN123456",
      },
      {
        id: "2",
        type: "debit",
        amount: 49,
        description: "Contest Entry - MI vs CSK",
        date: new Date(Date.now() - 172800000).toISOString(),
        status: "completed",
        transaction_id: "TXN123457",
      },
      {
        id: "3",
        type: "credit",
        amount: 1000,
        description: "Wallet Top-up",
        date: new Date(Date.now() - 259200000).toISOString(),
        status: "completed",
        transaction_id: "TXN123458",
        payment_method: "Credit Card",
      },
    ]

return mockTransactions
  } catch (error) {
    return rejectWithValue("Failed to fetch transactions")
  }
})

export const addMoney = createAsyncThunk(
  "wallet/addMoney",
  async ({ amount, paymentMethodId }: { amount: number; paymentMethodId: string }, { getState, rejectWithValue }) => {
    try {
      // Simulate payment processing
      await new Promise((resolve) => setTimeout(resolve, 2000))

const state = getState() as { wallet: WalletState }
      const paymentMethod = state.wallet.paymentMethods.find((pm) => pm.id === paymentMethodId)

const transaction: Transaction = {
        id: Date.now().toString(),
        type: "credit",
        amount,
        description: "Wallet Top-up",
        date: new Date().toISOString(),
        status: "completed",
        transaction_id: `TXN${Math.floor(Math.random() * 1000000)}`,
        payment_method: paymentMethod?.name || "Unknown",
      }

return { transaction, amount }
    } catch (error) {
      return rejectWithValue("Payment failed")
    }
  },
)

export const withdrawMoney = createAsyncThunk(
  "wallet/withdrawMoney",
  async ({ amount }: { amount: number }, { rejectWithValue }) => {
    try {
      // Simulate withdrawal processing
      await new Promise((resolve) => setTimeout(resolve, 1500))

const transaction: Transaction = {
        id: Date.now().toString(),
        type: "debit",
        amount,
        description: "Withdrawal to Bank Account",
        date: new Date().toISOString(),
        status: "completed",
        transaction_id: `TXN${Math.floor(Math.random() * 1000000)}`,
      }

return { transaction, amount }
    } catch (error) {
      return rejectWithValue("Withdrawal failed")
    }
  },
)

export const fetchPaymentMethods = createAsyncThunk("wallet/fetchPaymentMethods", async (_, { rejectWithValue }) => {
  try {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 300))

const mockPaymentMethods: PaymentMethod[] = [
      {
        id: "1",
        type: "card",
        name: "HDFC Bank Credit Card",
        details: "**** **** **** 1234",
        is_default: true,
        created_at: new Date().toISOString(),
      },
      {
        id: "2",
        type: "upi",
        name: "PhonePe UPI",
        details: "user@phonepe",
        is_default: false,
        created_at: new Date().toISOString(),
      },
    ]

return mockPaymentMethods
  } catch (error) {
    return rejectWithValue("Failed to fetch payment methods")
  }
})

export const addPaymentMethod = createAsyncThunk(
  "wallet/addPaymentMethod",
  async (paymentMethod: Omit<PaymentMethod, "id" | "created_at">, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const newPaymentMethod: PaymentMethod = {
        ...paymentMethod,
        id: Date.now().toString(),
        created_at: new Date().toISOString(),
      }

return newPaymentMethod
    } catch (error) {
      return rejectWithValue("Failed to add payment method")
    }
  },
)

const walletSlice = createSlice({
  name: "wallet",
  initialState,
  reducers: {
    clearError: (state) => {
      state.error = null
    },
    setSelectedPaymentMethod: (state, action: PayloadAction<string | null>) => {
      state.selectedPaymentMethod = action.payload
    },
    removePaymentMethod: (state, action: PayloadAction<string>) => {
      state.paymentMethods = state.paymentMethods.filter((pm) => pm.id !== action.payload)
    },
    setDefaultPaymentMethod: (state, action: PayloadAction<string>) => {
      state.paymentMethods = state.paymentMethods.map((pm) => ({
        ...pm,
        is_default: pm.id === action.payload,
      }))
    },
  },
  extraReducers: (builder) => {
    builder
      // Fetch transactions
      .addCase(fetchTransactions.pending, (state) => {
        state.loading = true
        state.error = null
      })
      .addCase(fetchTransactions.fulfilled, (state, action) => {
        state.loading = false
        state.transactions = action.payload
      })
      .addCase(fetchTransactions.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload as string
      })
      // Add money
      .addCase(addMoney.pending, (state) => {
        state.addMoneyLoading = true
        state.error = null
      })
      .addCase(addMoney.fulfilled, (state, action) => {
        state.addMoneyLoading = false
        state.transactions.unshift(action.payload.transaction)
      })
      .addCase(addMoney.rejected, (state, action) => {
        state.addMoneyLoading = false
        state.error = action.payload as string
      })
      // Withdraw money
      .addCase(withdrawMoney.pending, (state) => {
        state.withdrawLoading = true
        state.error = null
      })
      .addCase(withdrawMoney.fulfilled, (state, action) => {
        state.withdrawLoading = false
        state.transactions.unshift(action.payload.transaction)
      })
      .addCase(withdrawMoney.rejected, (state, action) => {
        state.withdrawLoading = false
        state.error = action.payload as string
      })
      // Fetch payment methods
      .addCase(fetchPaymentMethods.fulfilled, (state, action) => {
        state.paymentMethods = action.payload
      })
      // Add payment method
      .addCase(addPaymentMethod.fulfilled, (state, action) => {
        state.paymentMethods.push(action.payload)
      })
  },
})

export const { clearError, setSelectedPaymentMethod, removePaymentMethod, setDefaultPaymentMethod } =
  walletSlice.actions
export default walletSlice.reducer
[V0_FILE]typescriptreact:file="lib/features/contests/contestsSlice.ts" isMerged="true"
import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

export interface Contest {
  id: string
  title: string
  type: "mega" | "small" | "head-to-head" | "winner-takes-all"
  sport: string
  match_id: string
  entry_fee: number
  prize_pool: number
  total_spots: number
  filled_spots: number
  winners_count: number
  first_prize: number
  time_left: string
  guaranteed: boolean
  multi_entry: boolean
  max_entries?: number
  status: "upcoming" | "live" | "completed"
  created_at: string
}

export interface UserContest {
  id: string
  contest_id: string
  user_id: string
  team_id: string
  entry_fee: number
  rank?: number
  points?: number
  winnings?: number
  joined_at: string
}

interface ContestsState {
  contests: Contest[]
  userContests: UserContest[]
  loading: boolean
  error: string | null
  joinContestLoading: boolean
  selectedSport: string | null
  selectedMatchId: string | null
}

const initialState: ContestsState = {
  contests: [],
  userContests: [],
  loading: false,
  error: null,
  joinContestLoading: false,
  selectedSport: null,
  selectedMatchId: null,
}

// Async thunks
export const fetchContests = createAsyncThunk(
  "contests/fetchContests",
  async ({ matchId, sport }: { matchId?: string; sport?: string }, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const mockContests: Contest[] = [
        {
          id: "1",
          title: "Mega Contest",
          type: "mega",
          sport: "Cricket",
          match_id: "1",
          entry_fee: 49,
          prize_pool: 1000000,
          total_spots: 100000,
          filled_spots: 85432,
          winners_count: 16000,
          first_prize: 500000,
          time_left: "2h 45m",
          guaranteed: true,
          multi_entry: true,
          max_entries: 11,
          status: "upcoming",
          created_at: new Date().toISOString(),
        },
        {
          id: "2",
          title: "Head to Head",
          type: "head-to-head",
          sport: "Cricket",
          match_id: "1",
          entry_fee: 50,
          prize_pool: 98,
          total_spots: 2,
          filled_spots: 1,
          winners_count: 1,
          first_prize: 98,
          time_left: "2h 45m",
          guaranteed: false,
          multi_entry: false,
          status: "upcoming",
          created_at: new Date().toISOString(),
        },
      ]

let filteredContests = mockContests

if (matchId) {
        filteredContests = filteredContests.filter((contest) => contest.match_id === matchId)
      }

if (sport) {
        filteredContests = filteredContests.filter((contest) => contest.sport.toLowerCase() === sport.toLowerCase())
      }

return filteredContests
    } catch (error) {
      return rejectWithValue("Failed to fetch contests")
    }
  },
)

export const joinContest = createAsyncThunk(
  "contests/joinContest",
  async ({ contestId, teamId }: { contestId: string; teamId: string }, { getState, rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

const state = getState() as { contests: ContestsState; auth: { user: { id: string } | null } }
      const contest = state.contests.contests.find((c) => c.id === contestId)
      const userId = state.auth.user?.id

if (!contest || !userId) {
        return rejectWithValue("Contest or user not found")
      }

const userContest: UserContest = {
        id: Date.now().toString(),
        contest_id: contestId,
        user_id: userId,
        team_id: teamId,
        entry_fee: contest.entry_fee,
        joined_at: new Date().toISOString(),
      }

return { userContest, contestId }
    } catch (error) {
      return rejectWithValue("Failed to join contest")
    }
  },
)

export const fetchUserContests = createAsyncThunk("contests/fetchUserContests", async (_, { rejectWithValue }) => {
  try {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 300))

const mockUserContests: UserContest[] = [
      {
        id: "1",
        contest_id: "1",
        user_id: "1",
        team_id: "1",
        entry_fee: 49,
        rank: 1250,
        points: 245,
        winnings: 500,
        joined_at: new Date(Date.now() - 86400000).toISOString(),
      },
    ]

return mockUserContests
  } catch (error) {
    return rejectWithValue("Failed to fetch user contests")
  }
})

const contestsSlice = createSlice({
  name: "contests",
  initialState,
  reducers: {
    clearError: (state) => {
      state.error = null
    },
    setSelectedSport: (state, action: PayloadAction<string | null>) => {
      state.selectedSport = action.payload
    },
    setSelectedMatchId: (state, action: PayloadAction<string | null>) => {
      state.selectedMatchId = action.payload
    },
    updateContestSpots: (state, action: PayloadAction<{ contestId: string; filledSpots: number }>) => {
      const contest = state.contests.find((c) => c.id === action.payload.contestId)
      if (contest) {
        contest.filled_spots = action.payload.filledSpots
      }
    },
  },
  extraReducers: (builder) => {
    builder
      // Fetch contests
      .addCase(fetchContests.pending, (state) => {
        state.loading = true
        state.error = null
      })
      .addCase(fetchContests.fulfilled, (state, action) => {
        state.loading = false
        state.contests = action.payload
      })
      .addCase(fetchContests.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload as string
      })
      // Join contest
      .addCase(joinContest.pending, (state) => {
        state.joinContestLoading = true
        state.error = null
      })
      .addCase(joinContest.fulfilled, (state, action) => {
        state.joinContestLoading = false
        state.userContests.push(action.payload.userContest)
        // Update contest filled spots
        const contest = state.contests.find((c) => c.id === action.payload.contestId)
        if (contest) {
          contest.filled_spots += 1
        }
      })
      .addCase(joinContest.rejected, (state, action) => {
        state.joinContestLoading = false
        state.error = action.payload as string
      })
      // Fetch user contests
      .addCase(fetchUserContests.fulfilled, (state, action) => {
        state.userContests = action.payload
      })
  },
})

export const { clearError, setSelectedSport, setSelectedMatchId, updateContestSpots } = contestsSlice.actions
export default contestsSlice.reducer
[V0_FILE]typescriptreact:file="lib/features/teams/teamsSlice.ts" isMerged="true"
import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

export interface Player {
  id: string
  name: string
  team: string
  role: "WK" | "BAT" | "AR" | "BOWL"
  points: number
  credits: number
  selected_by: number
  avatar: string
  is_playing: boolean
  match_id: string
}

export interface Team {
  id: string
  name: string
  sport: string
  match_id: string
  players: Player[]
  captain_id: string | null
  vice_captain_id: string | null
  total_points: number
  credits_used: number
  created_at: string
  updated_at: string
}

interface TeamsState {
  teams: Team[]
  availablePlayers: Player[]
  selectedTeam: Team | null
  loading: boolean
  error: string | null
  createTeamLoading: boolean
  playersLoading: boolean
}

const initialState: TeamsState = {
  teams: [],
  availablePlayers: [],
  selectedTeam: null,
  loading: false,
  error: null,
  createTeamLoading: false,
  playersLoading: false,
}

// Async thunks
export const fetchUserTeams = createAsyncThunk("teams/fetchUserTeams", async (_, { rejectWithValue }) => {
  try {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 500))

const mockTeams: Team[] = [
      {
        id: "1",
        name: "Dream Warriors",
        sport: "Cricket",
        match_id: "1",
        players: [],
        captain_id: "1",
        vice_captain_id: "2",
        total_points: 245,
        credits_used: 100,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      },
    ]

return mockTeams
  } catch (error) {
    return rejectWithValue("Failed to fetch teams")
  }
})

export const fetchAvailablePlayers = createAsyncThunk(
  "teams/fetchAvailablePlayers",
  async ({ matchId }: { matchId: string }, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const mockPlayers: Player[] = [
        {
          id: "1",
          name: "Virat Kohli",
          team: "RCB",
          role: "BAT",
          points: 245,
          credits: 11.5,
          selected_by: 85.2,
          avatar: "/placeholder.svg?height=40&width=40",
          is_playing: true,
          match_id: matchId,
        },
        {
          id: "2",
          name: "MS Dhoni",
          team: "CSK",
          role: "WK",
          points: 180,
          credits: 10.0,
          selected_by: 92.1,
          avatar: "/placeholder.svg?height=40&width=40",
          is_playing: true,
          match_id: matchId,
        },
        {
          id: "3",
          name: "Jasprit Bumrah",
          team: "MI",
          role: "BOWL",
          points: 195,
          credits: 9.5,
          selected_by: 78.5,
          avatar: "/placeholder.svg?height=40&width=40",
          is_playing: true,
          match_id: matchId,
        },
        {
          id: "4",
          name: "Hardik Pandya",
          team: "MI",
          role: "AR",
          points: 220,
          credits: 10.5,
          selected_by: 65.8,
          avatar: "/placeholder.svg?height=40&width=40",
          is_playing: true,
          match_id: matchId,
        },
      ]

return mockPlayers
    } catch (error) {
      return rejectWithValue("Failed to fetch players")
    }
  },
)

export const createTeam = createAsyncThunk(
  "teams/createTeam",
  async (
    {
      name,
      sport,
      matchId,
      players,
      captainId,
      viceCaptainId,
    }: {
      name: string
      sport: string
      matchId: string
      players: Player[]
      captainId: string
      viceCaptainId: string
    },
    { rejectWithValue },
  ) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 1000))

const creditsUsed = players.reduce((sum, player) => sum + player.credits, 0)

const newTeam: Team = {
        id: Date.now().toString(),
        name,
        sport,
        match_id: matchId,
        players,
        captain_id: captainId,
        vice_captain_id: viceCaptainId,
        total_points: 0,
        credits_used: creditsUsed,
        created_at: new Date().toISOString(),
        updated_at: new Date().toISOString(),
      }

return newTeam
    } catch (error) {
      return rejectWithValue("Failed to create team")
    }
  },
)

export const updateTeam = createAsyncThunk(
  "teams/updateTeam",
  async (
    {
      teamId,
      updates,
    }: {
      teamId: string
      updates: Partial<Team>
    },
    { getState, rejectWithValue },
  ) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const state = getState() as { teams: TeamsState }
      const existingTeam = state.teams.teams.find((team) => team.id === teamId)

if (!existingTeam) {
        return rejectWithValue("Team not found")
      }

const updatedTeam: Team = {
        ...existingTeam,
        ...updates,
        updated_at: new Date().toISOString(),
      }

return updatedTeam
    } catch (error) {
      return rejectWithValue("Failed to update team")
    }
  },
)

const teamsSlice = createSlice({
  name: "teams",
  initialState,
  reducers: {
    clearError: (state) => {
      state.error = null
    },
    setSelectedTeam: (state, action: PayloadAction<Team | null>) => {
      state.selectedTeam = action.payload
    },
    deleteTeam: (state, action: PayloadAction<string>) => {
      state.teams = state.teams.filter((team) => team.id !== action.payload)
    },
    updateTeamPoints: (state, action: PayloadAction<{ teamId: string; points: number }>) => {
      const team = state.teams.find((t) => t.id === action.payload.teamId)
      if (team) {
        team.total_points = action.payload.points
      }
    },
  },
  extraReducers: (builder) => {
    builder
      // Fetch user teams
      .addCase(fetchUserTeams.pending, (state) => {
        state.loading = true
        state.error = null
      })
      .addCase(fetchUserTeams.fulfilled, (state, action) => {
        state.loading = false
        state.teams = action.payload
      })
      .addCase(fetchUserTeams.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload as string
      })
      // Fetch available players
      .addCase(fetchAvailablePlayers.pending, (state) => {
        state.playersLoading = true
        state.error = null
      })
      .addCase(fetchAvailablePlayers.fulfilled, (state, action) => {
        state.playersLoading = false
        state.availablePlayers = action.payload
      })
      .addCase(fetchAvailablePlayers.rejected, (state, action) => {
        state.playersLoading = false
        state.error = action.payload as string
      })
      // Create team
      .addCase(createTeam.pending, (state) => {
        state.createTeamLoading = true
        state.error = null
      })
      .addCase(createTeam.fulfilled, (state, action) => {
        state.createTeamLoading = false
        state.teams.push(action.payload)
      })
      .addCase(createTeam.rejected, (state, action) => {
        state.createTeamLoading = false
        state.error = action.payload as string
      })
      // Update team
      .addCase(updateTeam.fulfilled, (state, action) => {
        const index = state.teams.findIndex((team) => team.id === action.payload.id)
        if (index !== -1) {
          state.teams[index] = action.payload
        }
      })
  },
})

export const { clearError, setSelectedTeam, deleteTeam, updateTeamPoints } = teamsSlice.actions
export default teamsSlice.reducer
[V0_FILE]typescriptreact:file="lib/features/matches/matchesSlice.ts" isMerged="true"
import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

export interface Match {
  id: string
  sport: string
  team1: string
  team2: string
  team1_logo: string
  team2_logo: string
  league: string
  start_time: string
  status: "upcoming" | "live" | "completed"
  venue: string
  contests_count: number
  mega_contest_prize: string
  weather?: string
  pitch_report?: string
  team1_score?: string
  team2_score?: string
}

interface MatchesState {
  matches: Match[]
  selectedMatch: Match | null
  loading: boolean
  error: string | null
  liveMatches: Match[]
  upcomingMatches: Match[]
  completedMatches: Match[]
}

const initialState: MatchesState = {
  matches: [],
  selectedMatch: null,
  loading: false,
  error: null,
  liveMatches: [],
  upcomingMatches: [],
  completedMatches: [],
}

// Async thunks
export const fetchMatches = createAsyncThunk(
  "matches/fetchMatches",
  async ({ sport, status }: { sport?: string; status?: string } = {}, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const mockMatches: Match[] = [
        {
          id: "1",
          sport: "Cricket",
          team1: "Mumbai Indians",
          team2: "Chennai Super Kings",
          team1_logo: "/placeholder.svg?height=40&width=40",
          team2_logo: "/placeholder.svg?height=40&width=40",
          league: "IPL 2024",
          start_time: new Date(Date.now() + 7200000).toISOString(), // 2 hours from now
          status: "upcoming",
          venue: "Wankhede Stadium, Mumbai",
          contests_count: 156,
          mega_contest_prize: "1 Crore",
          weather: "Clear, 28°C",
          pitch_report: "Good batting track, expect high scores",
        },
        {
          id: "2",
          sport: "Football",
          team1: "Manchester City",
          team2: "Liverpool",
          team1_logo: "/placeholder.svg?height=40&width=40",
          team2_logo: "/placeholder.svg?height=40&width=40",
          league: "Premier League",
          start_time: new Date(Date.now() + 3600000).toISOString(), // 1 hour from now
          status: "live",
          venue: "Etihad Stadium",
          contests_count: 89,
          mega_contest_prize: "50 Lakh",
          team1_score: "1",
          team2_score: "0",
        },
        {
          id: "3",
          sport: "Basketball",
          team1: "Lakers",
          team2: "Warriors",
          team1_logo: "/placeholder.svg?height=40&width=40",
          team2_logo: "/placeholder.svg?height=40&width=40",
          league: "NBA",
          start_time: new Date(Date.now() + 14400000).toISOString(), // 4 hours from now
          status: "upcoming",
          venue: "Staples Center",
          contests_count: 45,
          mega_contest_prize: "25 Lakh",
        },
      ]

let filteredMatches = mockMatches

if (sport) {
        filteredMatches = filteredMatches.filter((match) => match.sport.toLowerCase() === sport.toLowerCase())
      }

if (status) {
        filteredMatches = filteredMatches.filter((match) => match.status === status)
      }

return filteredMatches
    } catch (error) {
      return rejectWithValue("Failed to fetch matches")
    }
  },
)

export const fetchMatchDetails = createAsyncThunk(
  "matches/fetchMatchDetails",
  async ({ matchId }: { matchId: string }, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 300))

// This would normally fetch detailed match info
      const mockMatch: Match = {
        id: matchId,
        sport: "Cricket",
        team1: "Mumbai Indians",
        team2: "Chennai Super Kings",
        team1_logo: "/placeholder.svg?height=40&width=40",
        team2_logo: "/placeholder.svg?height=40&width=40",
        league: "IPL 2024",
        start_time: new Date(Date.now() + 7200000).toISOString(),
        status: "upcoming",
        venue: "Wankhede Stadium, Mumbai",
        contests_count: 156,
        mega_contest_prize: "1 Crore",
        weather: "Clear, 28°C",
        pitch_report: "Good batting track, expect high scores",
      }

return mockMatch
    } catch (error) {
      return rejectWithValue("Failed to fetch match details")
    }
  },
)

export const { clearError, setSelectedMatch, updateMatchStatus, updateMatchScore, categorizeMatches } =
  matchesSlice.actions
export default matchesSlice.reducer
[V0_FILE]typescriptreact:file="lib/features/profile/profileSlice.ts" isMerged="true"
import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

export interface ProfileSettings {
  notifications: {
    email: boolean
    push: boolean
    sms: boolean
    promotions: boolean
    contests: boolean
    results: boolean
    withdrawals: boolean
  }
  privacy: {
    profile_visibility: "public" | "private"
    show_winnings: boolean
    show_stats: boolean
  }
  preferences: {
    default_sport: string
    language: string
    currency: string
    timezone: string
  }
}

interface ProfileState {
  settings: ProfileSettings
  loading: boolean
  error: string | null
  updateLoading: boolean
}

const initialState: ProfileState = {
  settings: {
    notifications: {
      email: true,
      push: true,
      sms: false,
      promotions: true,
      contests: true,
      results: true,
      withdrawals: true,
    },
    privacy: {
      profile_visibility: "public",
      show_winnings: true,
      show_stats: true,
    },
    preferences: {
      default_sport: "Cricket",
      language: "English",
      currency: "INR",
      timezone: "Asia/Kolkata",
    },
  },
  loading: false,
  error: null,
  updateLoading: false,
}

// Async thunks
export const fetchProfileSettings = createAsyncThunk("profile/fetchProfileSettings", async (_, { rejectWithValue }) => {
  try {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 300))

// This would normally fetch from API
    const savedSettings = localStorage.getItem("profileSettings")
    if (savedSettings) {
      return JSON.parse(savedSettings) as ProfileSettings
    }

return initialState.settings
  } catch (error) {
    return rejectWithValue("Failed to fetch profile settings")
  }
})

export const updateProfileSettings = createAsyncThunk(
  "profile/updateProfileSettings",
  async (settings: Partial<ProfileSettings>, { getState, rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 500))

const state = getState() as { profile: ProfileState }
      const updatedSettings = {
        ...state.profile.settings,
        ...settings,
      }

// Save to localStorage
      localStorage.setItem("profileSettings", JSON.stringify(updatedSettings))

return updatedSettings
    } catch (error) {
      return rejectWithValue("Failed to update profile settings")
    }
  },
)

export const updateNotificationSettings = createAsyncThunk(
  "profile/updateNotificationSettings",
  async (notifications: Partial<ProfileSettings["notifications"]>, { getState, rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 300))

const state = getState() as { profile: ProfileState }
      const updatedSettings = {
        ...state.profile.settings,
        notifications: {
          ...state.profile.settings.notifications,
          ...notifications,
        },
      }

localStorage.setItem("profileSettings", JSON.stringify(updatedSettings))

return updatedSettings
    } catch (error) {
      return rejectWithValue("Failed to update notification settings")
    }
  },
)

export const { clearError, updateNotificationSetting, updatePrivacySetting, updatePreferenceSetting } =
  profileSlice.actions
export default profileSlice.reducer
[V0_FILE]typescriptreact:file="lib/features/notifications/notificationsSlice.ts" isMerged="true"
import { createSlice, createAsyncThunk, type PayloadAction } from "@reduxjs/toolkit"

export interface Notification {
  id: string
  type: "contest" | "payment" | "match" | "promotion" | "system"
  title: string
  message: string
  read: boolean
  created_at: string
  action_url?: string
  icon?: string
}

interface NotificationsState {
  notifications: Notification[]
  unreadCount: number
  loading: boolean
  error: string | null
}

const initialState: NotificationsState = {
  notifications: [],
  unreadCount: 0,
  loading: false,
  error: null,
}

// Async thunks
export const fetchNotifications = createAsyncThunk(
  "notifications/fetchNotifications",
  async (_, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 300))

const mockNotifications: Notification[] = [
        {
          id: "1",
          type: "contest",
          title: "Contest Result",
          message: "You won ₹500 in the Mega Contest!",
          read: false,
          created_at: new Date(Date.now() - 3600000).toISOString(),
          action_url: "/wallet",
          icon: "🏆",
        },
        {
          id: "2",
          type: "match",
          title: "Match Starting Soon",
          message: "MI vs CSK starts in 30 minutes. Join contests now!",
          read: false,
          created_at: new Date(Date.now() - 7200000).toISOString(),
          action_url: "/matches/1",
          icon: "🏏",
        },
        {
          id: "3",
          type: "payment",
          title: "Payment Successful",
          message: "₹1000 has been added to your wallet",
          read: true,
          created_at: new Date(Date.now() - 86400000).toISOString(),
          action_url: "/wallet",
          icon: "💰",
        },
      ]

return mockNotifications
    } catch (error) {
      return rejectWithValue("Failed to fetch notifications")
    }
  },
)

export const markAsRead = createAsyncThunk(
  "notifications/markAsRead",
  async ({ notificationId }: { notificationId: string }, { rejectWithValue }) => {
    try {
      // Simulate API call
      await new Promise((resolve) => setTimeout(resolve, 200))

return notificationId
    } catch (error) {
      return rejectWithValue("Failed to mark notification as read")
    }
  },
)

export const markAllAsRead = createAsyncThunk("notifications/markAllAsRead", async (_, { rejectWithValue }) => {
  try {
    // Simulate API call
    await new Promise((resolve) => setTimeout(resolve, 300))

return true
  } catch (error) {
    return rejectWithValue("Failed to mark all notifications as read")
  }
})

export const addNotification = createAsyncThunk(
  "notifications/addNotification",
  async (notification: Omit<Notification, "id" | "created_at">, { rejectWithValue }) => {
    try {
      const newNotification: Notification = {
        ...notification,
        id: Date.now().toString(),
        created_at: new Date().toISOString(),
      }

return newNotification
    } catch (error) {
      return rejectWithValue("Failed to add notification")
    }
  },
)

const notificationsSlice = createSlice({
  name: "notifications",
  initialState,
  reducers: {
    clearError: (state) => {
      state.error = null
    },
    removeNotification: (state, action: PayloadAction<string>) => {
      state.notifications = state.notifications.filter((n) => n.id !== action.payload)
      state.unreadCount = state.notifications.filter((n) => !n.read).length
    },
    clearAllNotifications: (state) => {
      state.notifications = []
      state.unreadCount = 0
    },
  },
  extraReducers: (builder) => {
    builder
      // Fetch notifications
      .addCase(fetchNotifications.pending, (state) => {
        state.loading = true
        state.error = null
      })
      .addCase(fetchNotifications.fulfilled, (state, action) => {
        state.loading = false
        state.notifications = action.payload
        state.unreadCount = action.payload.filter((n) => !n.read).length
      })
      .addCase(fetchNotifications.rejected, (state, action) => {
        state.loading = false
        state.error = action.payload as string
      })
      // Mark as read
      .addCase(markAsRead.fulfilled, (state, action) => {
        const notification = state.notifications.find((n) => n.id === action.payload)
        if (notification && !notification.read) {
          notification.read = true
          state.unreadCount = Math.max(0, state.unreadCount - 1)
        }
      })
      // Mark all as read
      .addCase(markAllAsRead.fulfilled, (state) => {
        state.notifications = state.notifications.map((n) => ({ ...n, read: true }))
        state.unreadCount = 0
      })
      // Add notification
      .addCase(addNotification.fulfilled, (state, action) => {
        state.notifications.unshift(action.payload)
        if (!action.payload.read) {
          state.unreadCount += 1
        }
      })
  },
})

export const { clearError, removeNotification, clearAllNotifications } = notificationsSlice.actions
export default notificationsSlice.reducer
[V0_FILE]typescriptreact:file="lib/providers/redux-provider.tsx" isMerged="true"
"use client"

import { Provider } from "react-redux"
import { store } from "../store"
import type React from "react"

export function ReduxProvider({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>
}
[V0_FILE]typescriptreact:file="hooks/use-auth-redux.ts" isMerged="true"
"use client"

import { useEffect } from "react"
import { useAppDispatch, useAppSelector } from "@/lib/hooks"
import { loginUser, registerUser, logout, loadUserFromStorage, updateUserProfile } from "@/lib/features/auth/authSlice"

export const useAuthRedux = () => {
  const dispatch = useAppDispatch()
  const { user, isAuthenticated, loading, error } = useAppSelector((state) => state.auth)

useEffect(() => {
    // Load user from storage on app start
    dispatch(loadUserFromStorage())
  }, [dispatch])

const login = async (email: string, password: string) => {
    const result = await dispatch(loginUser({ email, password }))
    if (loginUser.fulfilled.match(result)) {
      return result.payload
    }
    throw new Error(result.payload as string)
  }

const register = async (userData: any) => {
    const result = await dispatch(registerUser(userData))
    if (registerUser.fulfilled.match(result)) {
      return result.payload
    }
    throw new Error(result.payload as string)
  }

const updateUser = async (updates: any) => {
    const result = await dispatch(updateUserProfile(updates))
    if (updateUserProfile.fulfilled.match(result)) {
      return result.payload
    }
    throw new Error(result.payload as string)
  }

const logoutUser = () => {
    dispatch(logout())
  }

return {
    user,
    isAuthenticated,
    loading,
    error,
    login,
    register,
    updateUser,
    logout: logoutUser,
  }
}
[V0_FILE]typescriptreact:file="app/profile/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"
import { useAuthRedux } from "@/hooks/use-auth-redux"
import { User, Trophy, Wallet, Bell, Shield, Upload, Edit, Smartphone, Mail, Plus, Trash2 } from "lucide-react"

export default function ProfilePage() {
  const { user, updateUser } = useAuthRedux()
  const { toast } = useToast()
  const [activeTab, setActiveTab] = useState("personal")
  const [loading, setLoading] = useState(false)
  const [personalInfo, setPersonalInfo] = useState({
    name: user?.name || "",
    email: user?.email || "",
    phone: user?.phone || "",
    dob: "1990-01-01",
    gender: "Male",
    address: "Mumbai, Maharashtra",
  })

const [notifications, setNotifications] = useState({
    email: true,
    push: true,
    sms: false,
    promotions: true,
    contests: true,
    results: true,
    withdrawals: true,
  })

const handlePersonalInfoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPersonalInfo({
      ...personalInfo,
      [e.target.name]: e.target.value,
    })
  }

const handleNotificationChange = (key: string, value: boolean) => {
    setNotifications({
      ...notifications,
      [key]: value,
    })
  }

const handleSavePersonalInfo = async () => {
    setLoading(true)
    try {
      await updateUser({ name: personalInfo.name, email: personalInfo.email, phone: personalInfo.phone })
      toast({
        title: "Profile Updated",
        description: "Your personal information has been updated successfully.",
      })
    } catch (error) {
      toast({
        title: "Update Failed",
        description: "Failed to update profile. Please try again.",
        variant: "destructive",
      })
    } finally {
      setLoading(false)
    }
  }

const handleSaveNotifications = () => {
    setLoading(true)
    setTimeout(() => {
      toast({
        title: "Preferences Updated",
        description: "Your notification preferences have been updated successfully.",
      })
      setLoading(false)
    }, 1000)
  }

const handleAvatarUpload = () => {
    // Simulate avatar upload
    toast({
      title: "Avatar Updated",
      description: "Your profile picture has been updated successfully.",
    })
  }

if (!user) {
    return <div>Please login to view your profile</div>
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header />

<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
          {/* Profile Sidebar */}
          <div className="lg:col-span-1">
            <Card className="sticky top-24 dark:bg-gray-800 dark:border-gray-700">
              <CardContent className="p-6">
                <div className="flex flex-col items-center mb-6">
                  <div className="relative mb-4">
                    <Avatar className="w-24 h-24">
                      <AvatarImage src="/placeholder.svg?height=96&width=96" alt={user.name} />
                      <AvatarFallback className="text-2xl">
                        {user.name
                          .split(" ")
                          .map((n) => n[0])
                          .join("")}
                      </AvatarFallback>
                    </Avatar>
                    <Button
                      size="sm"
                      className="absolute bottom-0 right-0 rounded-full w-8 h-8 p-0"
                      onClick={handleAvatarUpload}
                    >
                      <Upload className="h-4 w-4" />
                    </Button>
                  </div>
                  <h2 className="text-xl font-bold dark:text-white">{user.name}</h2>
                  <p className="text-gray-600 dark:text-gray-300 text-sm">{user.email}</p>
                  <Badge className="mt-2 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                    {user.is_verified ? "Verified" : "Unverified"}
                  </Badge>
                </div>

<div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <div className="flex items-center space-x-2">
                      <Wallet className="h-5 w-5 text-green-600 dark:text-green-400" />
                      <span className="text-gray-600 dark:text-gray-300">Wallet Balance</span>
                    </div>
                    <span className="font-semibold dark:text-white">₹{user.wallet_balance}</span>
                  </div>

<div className="flex justify-between items-center">
                    <div className="flex items-center space-x-2">
                      <Trophy className="h-5 w-5 text-green-600 dark:text-green-400" />
                      <span className="text-gray-600 dark:text-gray-300">Total Winnings</span>
                    </div>
                    <span className="font-semibold dark:text-white">₹{user.winnings}</span>
                  </div>

<div className="flex justify-between items-center">
                    <div className="flex items-center space-x-2">
                      <User className="h-5 w-5 text-green-600 dark:text-green-400" />
                      <span className="text-gray-600 dark:text-gray-300">Referral Code</span>
                    </div>
                    <span className="font-semibold dark:text-white">{user.referral_code}</span>
                  </div>
                </div>

<div className="space-y-2">
                  <Button
                    variant={activeTab === "personal" ? "default" : "ghost"}
                    className="w-full justify-start"
                    onClick={() => setActiveTab("personal")}
                  >
                    <User className="h-4 w-4 mr-2" />
                    Personal Info
                  </Button>
                  <Button
                    variant={activeTab === "security" ? "default" : "ghost"}
                    className="w-full justify-start"
                    onClick={() => setActiveTab("security")}
                  >
                    <Shield className="h-4 w-4 mr-2" />
                    Security
                  </Button>
                  <Button
                    variant={activeTab === "notifications" ? "default" : "ghost"}
                    className="w-full justify-start"
                    onClick={() => setActiveTab("notifications")}
                  >
                    <Bell className="h-4 w-4 mr-2" />
                    Notifications
                  </Button>
                  <Button
                    variant={activeTab === "payment" ? "default" : "ghost"}
                    className="w-full justify-start"
                    onClick={() => setActiveTab("payment")}
                  >
                    <Wallet className="h-4 w-4 mr-2" />
                    Payment Methods
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>

{/* Profile Content */}
          <div className="lg:col-span-3">
            <Card className="dark:bg-gray-800 dark:border-gray-700">
              <CardHeader>
                <CardTitle className="dark:text-white">
                  {activeTab === "personal" && "Personal Information"}
                  {activeTab === "security" && "Security Settings"}
                  {activeTab === "notifications" && "Notification Preferences"}
                  {activeTab === "payment" && "Payment Methods"}
                </CardTitle>
              </CardHeader>
              <CardContent>
                {/* Personal Information */}
                {activeTab === "personal" && (
                  <div className="space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <Label htmlFor="name" className="dark:text-gray-300">
                          Full Name
                        </Label>
                        <Input
                          id="name"
                          name="name"
                          value={personalInfo.name}
                          onChange={handlePersonalInfoChange}
                          className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                        />
                      </div>
                      <div>
                        <Label htmlFor="email" className="dark:text-gray-300">
                          Email Address
                        </Label>
                        <Input
                          id="email"
                          name="email"
                          type="email"
                          value={personalInfo.email}
                          onChange={handlePersonalInfoChange}
                          className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                        />
                      </div>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <Label htmlFor="phone" className="dark:text-gray-300">
                          Phone Number
                        </Label>
                        <Input
                          id="phone"
                          name="phone"
                          value={personalInfo.phone}
                          onChange={handlePersonalInfoChange}
                          className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                        />
                      </div>
                      <div>
                        <Label htmlFor="dob" className="dark:text-gray-300">
                          Date of Birth
                        </Label>
                        <Input
                          id="dob"
                          name="dob"
                          type="date"
                          value={personalInfo.dob}
                          onChange={handlePersonalInfoChange}
                          className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                        />
                      </div>
                    </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                      <div>
                        <Label htmlFor="gender" className="dark:text-gray-300">
                          Gender
                        </Label>
                        <Input
                          id="gender"
                          name="gender"
                          value={personalInfo.gender}
                          onChange={handlePersonalInfoChange}
                          className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                        />
                      </div>
                      <div>
                        <Label htmlFor="address" className="dark:text-gray-300">
                          Address
                        </Label>
                        <Input
                          id="address"
                          name="address"
                          value={personalInfo.address}
                          onChange={handlePersonalInfoChange}
                          className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                        />
                      </div>
                    </div>

<div className="flex justify-end">
                      <Button
                        onClick={handleSavePersonalInfo}
                        disabled={loading}
                        className="bg-green-600 hover:bg-green-700"
                      >
                        {loading ? "Saving..." : "Save Changes"}
                      </Button>
                    </div>
                  </div>
                )}

{/* Security Settings */}
                {activeTab === "security" && (
                  <div className="space-y-6">
                    <div className="space-y-4">
                      <h3 className="text-lg font-medium dark:text-white">Change Password</h3>
                      <div className="grid grid-cols-1 gap-4">
                        <div>
                          <Label htmlFor="current-password" className="dark:text-gray-300">
                            Current Password
                          </Label>
                          <Input
                            id="current-password"
                            type="password"
                            className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                          />
                        </div>
                        <div>
                          <Label htmlFor="new-password" className="dark:text-gray-300">
                            New Password
                          </Label>
                          <Input
                            id="new-password"
                            type="password"
                            className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                          />
                        </div>
                        <div>
                          <Label htmlFor="confirm-password" className="dark:text-gray-300">
                            Confirm New Password
                          </Label>
                          <Input
                            id="confirm-password"
                            type="password"
                            className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                          />
                        </div>
                      </div>
                      <div className="flex justify-end">
                        <Button className="bg-green-600 hover:bg-green-700">Update Password</Button>
                      </div>
                    </div>

<div className="space-y-4">
                      <h3 className="text-lg font-medium dark:text-white">Two-Factor Authentication</h3>
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="font-medium dark:text-white">Enable Two-Factor Authentication</p>
                          <p className="text-sm text-gray-600 dark:text-gray-300">
                            Add an extra layer of security to your account
                          </p>
                        </div>
                        <Switch />
                      </div>
                    </div>

<div className="space-y-4">
                      <h3 className="text-lg font-medium dark:text-white">Login Sessions</h3>
                      <div className="space-y-4">
                        <div className="flex items-center justify-between p-4 border rounded-lg dark:border-gray-700">
                          <div className="flex items-center space-x-4">
                            <Smartphone className="h-8 w-8 text-gray-500 dark:text-gray-400" />
                            <div>
                              <p className="font-medium dark:text-white">iPhone 13 Pro • Mumbai</p>
                              <p className="text-sm text-gray-600 dark:text-gray-300">Active now • Chrome Browser</p>
                            </div>
                          </div>
                          <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">
                            Current Device
                          </Badge>
                        </div>
                      </div>
                    </div>
                  </div>
                )}

{/* Notification Preferences */}
                {activeTab === "notifications" && (
                  <div className="space-y-6">
                    <div className="space-y-4">
                      <h3 className="text-lg font-medium dark:text-white">Notification Channels</h3>
                      <div className="space-y-3">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center space-x-2">
                            <Mail className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                            <Label htmlFor="email-notifications" className="dark:text-gray-300">
                              Email Notifications
                            </Label>
                          </div>
                          <Switch
                            id="email-notifications"
                            checked={notifications.email}
                            onCheckedChange={(checked) => handleNotificationChange("email", checked)}
                          />
                        </div>

<div className="flex items-center justify-between">
                          <div className="flex items-center space-x-2">
                            <Bell className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                            <Label htmlFor="push-notifications" className="dark:text-gray-300">
                              Push Notifications
                            </Label>
                          </div>
                          <Switch
                            id="push-notifications"
                            checked={notifications.push}
                            onCheckedChange={(checked) => handleNotificationChange("push", checked)}
                          />
                        </div>

<div className="flex items-center justify-between">
                          <div className="flex items-center space-x-2">
                            <Smartphone className="h-5 w-5 text-gray-500 dark:text-gray-400" />
                            <Label htmlFor="sms-notifications" className="dark:text-gray-300">
                              SMS Notifications
                            </Label>
                          </div>
                          <Switch
                            id="sms-notifications"
                            checked={notifications.sms}
                            onCheckedChange={(checked) => handleNotificationChange("sms", checked)}
                          />
                        </div>
                      </div>
                    </div>

<div className="space-y-4">
                      <h3 className="text-lg font-medium dark:text-white">Notification Types</h3>
                      <div className="space-y-3">
                        <div className="flex items-center justify-between">
                          <Label htmlFor="promotions-notifications" className="dark:text-gray-300">
                            Promotions and Offers
                          </Label>
                          <Switch
                            id="promotions-notifications"
                            checked={notifications.promotions}
                            onCheckedChange={(checked) => handleNotificationChange("promotions", checked)}
                          />
                        </div>

<div className="flex items-center justify-between">
                          <Label htmlFor="contests-notifications" className="dark:text-gray-300">
                            Contest Updates
                          </Label>
                          <Switch
                            id="contests-notifications"
                            checked={notifications.contests}
                            onCheckedChange={(checked) => handleNotificationChange("contests", checked)}
                          />
                        </div>

<div className="flex items-center justify-between">
                          <Label htmlFor="results-notifications" className="dark:text-gray-300">
                            Match Results
                          </Label>
                          <Switch
                            id="results-notifications"
                            checked={notifications.results}
                            onCheckedChange={(checked) => handleNotificationChange("results", checked)}
                          />
                        </div>

<div className="flex items-center justify-between">
                          <Label htmlFor="withdrawals-notifications" className="dark:text-gray-300">
                            Withdrawals and Deposits
                          </Label>
                          <Switch
                            id="withdrawals-notifications"
                            checked={notifications.withdrawals}
                            onCheckedChange={(checked) => handleNotificationChange("withdrawals", checked)}
                          />
                        </div>
                      </div>
                    </div>

<div className="flex justify-end">
                      <Button
                        onClick={handleSaveNotifications}
                        disabled={loading}
                        className="bg-green-600 hover:bg-green-700"
                      >
                        {loading ? "Saving..." : "Save Preferences"}
                      </Button>
                    </div>
                  </div>
                )}

{/* Payment Methods */}
                {activeTab === "payment" && (
                  <div className="space-y-6">
                    <div className="space-y-4">
                      <div className="flex justify-between items-center">
                        <h3 className="text-lg font-medium dark:text-white">Saved Payment Methods</h3>
                        <Button variant="outline" className="flex items-center">
                          <Plus className="h-4 w-4 mr-2" />
                          Add New
                        </Button>
                      </div>

<div className="space-y-4">
                        <div className="flex items-center justify-between p-4 border rounded-lg dark:border-gray-700">
                          <div className="flex items-center space-x-4">
                            <div className="bg-blue-100 dark:bg-blue-900 p-2 rounded-md">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="text-blue-600 dark:text-blue-400"
                              >
                                <rect width="20" height="14" x="2" y="5" rx="2" />
                                <line x1="2" x2="22" y1="10" y2="10" />
                              </svg>
                            </div>
                            <div>
                              <p className="font-medium dark:text-white">HDFC Bank Credit Card</p>
                              <p className="text-sm text-gray-600 dark:text-gray-300">**** **** **** 1234</p>
                            </div>
                          </div>
                          <div className="flex space-x-2">
                            <Button size="sm" variant="ghost">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="ghost">
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>

<div className="flex items-center justify-between p-4 border rounded-lg dark:border-gray-700">
                          <div className="flex items-center space-x-4">
                            <div className="bg-purple-100 dark:bg-purple-900 p-2 rounded-md">
                              <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="24"
                                height="24"
                                viewBox="0 0 24 24"
                                fill="none"
                                stroke="currentColor"
                                strokeWidth="2"
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                className="text-purple-600 dark:text-purple-400"
                              >
                                <path d="M5.5 8.5 9 12l-3.5 3.5L2 12l3.5-3.5Z" />
                                <path d="m12 2 3.5 3.5L12 9 8.5 5.5 12 2Z" />
                                <path d="M18.5 8.5 22 12l-3.5 3.5L15 12l3.5-3.5Z" />
                                <path d="m12 15 3.5 3.5L12 22l-3.5-3.5L12 15Z" />
                              </svg>
                            </div>
                            <div>
                              <p className="font-medium dark:text-white">PhonePe UPI</p>
                              <p className="text-sm text-gray-600 dark:text-gray-300">user@phonepe</p>
                            </div>
                          </div>
                          <div className="flex space-x-2">
                            <Button size="sm" variant="ghost">
                              <Edit className="h-4 w-4" />
                            </Button>
                            <Button size="sm" variant="ghost">
                              <Trash2 className="h-4 w-4" />
                            </Button>
                          </div>
                        </div>
                      </div>
                    </div>

<div className="space-y-4">
                      <h3 className="text-lg font-medium dark:text-white">Bank Account Details</h3>
                      <p className="text-sm text-gray-600 dark:text-gray-300">For withdrawals and receiving winnings</p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <div>
                          <Label htmlFor="account-name" className="dark:text-gray-300">
                            Account Holder Name
                          </Label>
                          <Input
                            id="account-name"
                            placeholder="Enter account holder name"
                            className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                          />
                        </div>
                        <div>
                          <Label htmlFor="account-number" className="dark:text-gray-300">
                            Account Number
                          </Label>
                          <Input
                            id="account-number"
                            placeholder="Enter account number"
                            className="mt-1 dark:bg-gray-700 dark:border-gray-600"
                          />
                        </div>
                      </div>

<div className="flex justify-end">
                        <Button className="bg-green-600 hover:bg-green-700">Save Bank Details</Button>
                      </div>
                    </div>
                  </div>
                )}
              </CardContent>
            </Card>
          </div>
        </div>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/wallet/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  Wallet,
  ArrowUpRight,
  ArrowDownLeft,
  CreditCard,
  Smartphone,
  Clock,
  CheckCircle2,
  AlertCircle,
  ChevronRight,
  Download,
  Plus,
} from "lucide-react"
import { useAuthRedux } from "@/hooks/use-auth-redux"
import { useAppDispatch, useAppSelector } from "@/lib/hooks"
import { fetchTransactions, addMoney, withdrawMoney, fetchPaymentMethods } from "@/lib/features/wallet/walletSlice"
import { updateWalletBalance } from "@/lib/features/auth/authSlice"
import { useToast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"

export default function WalletPage() {
  const { user } = useAuthRedux()
  const dispatch = useAppDispatch()
  const { transactions, paymentMethods, addMoneyLoading, withdrawLoading, selectedPaymentMethod } = useAppSelector(
    (state) => state.wallet,
  )
  const { toast } = useToast()
  const router = useRouter()
  const [addAmount, setAddAmount] = useState("")
  const [withdrawAmount, setWithdrawAmount] = useState("")
  const [showPaymentConfirmation, setShowPaymentConfirmation] = useState(false)

useEffect(() => {
    dispatch(fetchTransactions())
    dispatch(fetchPaymentMethods())
  }, [dispatch])

if (!user) {
    return <div>Please login to access wallet</div>
  }

const handleAddMoney = async () => {
    if (!selectedPaymentMethod) {
      toast({
        title: "Payment Method Required",
        description: "Please select a payment method to continue",
        variant: "destructive",
      })
      return
    }

const amount = Number.parseFloat(addAmount)
    if (amount > 0) {
      try {
        const result = await dispatch(addMoney({ amount, paymentMethodId: selectedPaymentMethod }))
        if (addMoney.fulfilled.match(result)) {
          dispatch(updateWalletBalance(user.wallet_balance + amount))
          setAddAmount("")
          toast({
            title: "Payment Successful",
            description: `₹${amount} has been added to your wallet`,
          })
        }
      } catch (error) {
        toast({
          title: "Payment Failed",
          description: "Something went wrong. Please try again.",
          variant: "destructive",
        })
      }
    }
  }

const handleWithdraw = async () => {
    const amount = Number.parseFloat(withdrawAmount)
    if (amount > 0 && amount <= user.wallet_balance) {
      try {
        const result = await dispatch(withdrawMoney({ amount }))
        if (withdrawMoney.fulfilled.match(result)) {
          dispatch(updateWalletBalance(user.wallet_balance - amount))
          setWithdrawAmount("")
          toast({
            title: "Withdrawal Initiated",
            description: `₹${amount} will be credited to your bank account within 24 hours`,
          })
        }
      } catch (error) {
        toast({
          title: "Withdrawal Failed",
          description: "Something went wrong. Please try again.",
          variant: "destructive",
        })
      }
    }
  }

const formatDate = (dateString: string) => {
    return new Date(dateString).toLocaleDateString("en-IN", {
      day: "numeric",
      month: "short",
      year: "numeric",
      hour: "2-digit",
      minute: "2-digit",
    })
  }

const getStatusIcon = (status: string) => {
    switch (status) {
      case "completed":
        return <CheckCircle2 className="h-5 w-5 text-green-600" />
      case "pending":
        return <Clock className="h-5 w-5 text-yellow-600" />
      case "failed":
        return <AlertCircle className="h-5 w-5 text-red-600" />
      default:
        return null
    }
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header />

<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-gray-900 dark:text-white mb-2">My Wallet</h1>
          <p className="text-gray-600 dark:text-gray-300">Manage your funds and view transaction history</p>
        </div>

{/* Wallet Balance */}
        <Card className="mb-8 dark:bg-gray-800 dark:border-gray-700">
          <CardContent className="p-6">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between">
              <div className="flex items-center space-x-4 mb-4 md:mb-0">
                <div className="bg-green-100 dark:bg-green-900 rounded-full p-3">
                  <Wallet className="h-8 w-8 text-green-600 dark:text-green-400" />
                </div>
                <div>
                  <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
                    ₹{user.wallet_balance.toFixed(2)}
                  </h2>
                  <p className="text-gray-600 dark:text-gray-300">Available Balance</p>
                </div>
              </div>
              <div className="flex space-x-3">
                <Button
                  onClick={() => router.push("/wallet?tab=add-money")}
                  className="bg-green-600 hover:bg-green-700"
                >
                  <Plus className="h-4 w-4 mr-2" />
                  Add Money
                </Button>
                <Button
                  onClick={() => router.push("/wallet?tab=withdraw")}
                  variant="outline"
                  className="border-green-600 text-green-600 hover:bg-green-50 dark:hover:bg-green-900"
                >
                  <Download className="h-4 w-4 mr-2" />
                  Withdraw
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

<Tabs defaultValue="add-money" className="space-y-6">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="add-money">Add Money</TabsTrigger>
            <TabsTrigger value="withdraw">Withdraw</TabsTrigger>
            <TabsTrigger value="transactions">Transactions</TabsTrigger>
          </TabsList>

<TabsContent value="add-money">
            <Card className="dark:bg-gray-800 dark:border-gray-700">
              <CardHeader>
                <CardTitle className="dark:text-white">Add Money to Wallet</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Amount</label>
                  <Input
                    type="number"
                    placeholder="Enter amount"
                    value={addAmount}
                    onChange={(e) => setAddAmount(e.target.value)}
                    className="dark:bg-gray-700 dark:border-gray-600"
                  />
                </div>

<div className="grid grid-cols-3 gap-4">
                  {[100, 500, 1000].map((amount) => (
                    <Button
                      key={amount}
                      variant="outline"
                      onClick={() => setAddAmount(amount.toString())}
                      className="h-12 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
                    >
                      ₹{amount}
                    </Button>
                  ))}
                </div>

<div className="space-y-4">
                  <h3 className="font-medium dark:text-white">Payment Methods</h3>
                  <div className="space-y-3">
                    {paymentMethods.map((method) => (
                      <div
                        key={method.id}
                        className={`flex items-center justify-between p-4 border rounded-lg cursor-pointer transition-colors ${
                          selectedPaymentMethod === method.id
                            ? "border-green-600 bg-green-50 dark:bg-green-900/20 dark:border-green-500"
                            : "dark:border-gray-600 dark:hover:border-gray-500"
                        }`}
                        onClick={() => dispatch({ type: "wallet/setSelectedPaymentMethod", payload: method.id })}
                      >
                        <div className="flex items-center space-x-3">
                          {method.type === "card" ? (
                            <CreditCard className="h-6 w-6 text-gray-600 dark:text-gray-300" />
                          ) : (
                            <Smartphone className="h-6 w-6 text-gray-600 dark:text-gray-300" />
                          )}
                          <div>
                            <span className="font-medium dark:text-white">{method.name}</span>
                            <p className="text-sm text-gray-600 dark:text-gray-300">{method.details}</p>
                          </div>
                        </div>
                        <ChevronRight className="h-5 w-5 text-gray-400" />
                      </div>
                    ))}
                  </div>
                </div>

<Button
                  onClick={handleAddMoney}
                  className="w-full bg-green-600 hover:bg-green-700"
                  disabled={
                    addMoneyLoading || !addAmount || Number.parseFloat(addAmount) <= 0 || !selectedPaymentMethod
                  }
                >
                  {addMoneyLoading ? "Processing..." : `Add ₹${addAmount || "0"} to Wallet`}
                </Button>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="withdraw">
            <Card className="dark:bg-gray-800 dark:border-gray-700">
              <CardHeader>
                <CardTitle className="dark:text-white">Withdraw Money</CardTitle>
              </CardHeader>
              <CardContent className="space-y-6">
                <div>
                  <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Amount</label>
                  <Input
                    type="number"
                    placeholder="Enter amount"
                    value={withdrawAmount}
                    onChange={(e) => setWithdrawAmount(e.target.value)}
                    max={user.wallet_balance}
                    className="dark:bg-gray-700 dark:border-gray-600"
                  />
                  <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
                    Available balance: ₹{user.wallet_balance.toFixed(2)}
                  </p>
                </div>

<div className="grid grid-cols-3 gap-4">
                  {[100, 500, 1000].map((amount) => (
                    <Button
                      key={amount}
                      variant="outline"
                      onClick={() => setWithdrawAmount(amount.toString())}
                      disabled={amount > user.wallet_balance}
                      className="h-12 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
                    >
                      ₹{amount}
                    </Button>
                  ))}
                </div>

<div className="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-lg">
                  <h4 className="font-medium text-blue-900 dark:text-blue-300 mb-2">Withdrawal Information</h4>
                  <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
                    <li>• Minimum withdrawal amount: ₹100</li>
                    <li>• Processing time: 1-2 business days</li>
                    <li>• No withdrawal charges</li>
                    <li>• Withdrawals are processed to your registered bank account</li>
                  </ul>
                </div>

<Button
                  onClick={handleWithdraw}
                  className="w-full bg-green-600 hover:bg-green-700"
                  disabled={
                    withdrawLoading ||
                    !withdrawAmount ||
                    Number.parseFloat(withdrawAmount) <= 0 ||
                    Number.parseFloat(withdrawAmount) > user.wallet_balance ||
                    Number.parseFloat(withdrawAmount) < 100
                  }
                >
                  {withdrawLoading ? "Processing..." : `Withdraw ₹${withdrawAmount || "0"}`}
                </Button>
              </CardContent>
            </Card>
          </TabsContent>

<TabsContent value="transactions">
            <Card className="dark:bg-gray-800 dark:border-gray-700">
              <CardHeader className="flex flex-row items-center justify-between">
                <CardTitle className="dark:text-white">Transaction History</CardTitle>
                <Button variant="outline" size="sm" className="dark:border-gray-600 dark:text-gray-300">
                  <Download className="h-4 w-4 mr-2" />
                  Export
                </Button>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  {transactions.map((transaction) => (
                    <div
                      key={transaction.id}
                      className="flex items-center justify-between p-4 border rounded-lg dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
                    >
                      <div className="flex items-center space-x-4">
                        <div
                          className={`p-2 rounded-full ${
                            transaction.type === "credit"
                              ? "bg-green-100 dark:bg-green-900/50"
                              : "bg-red-100 dark:bg-red-900/50"
                          }`}
                        >
                          {transaction.type === "credit" ? (
                            <ArrowDownLeft
                              className={`h-5 w-5 ${
                                transaction.type === "credit"
                                  ? "text-green-600 dark:text-green-400"
                                  : "text-red-600 dark:text-red-400"
                              }`}
                            />
                          ) : (
                            <ArrowUpRight
                              className={`h-5 w-5 ${
                                transaction.type === "credit"
                                  ? "text-green-600 dark:text-green-400"
                                  : "text-red-600 dark:text-red-400"
                              }`}
                            />
                          )}
                        </div>
                        <div>
                          <div className="font-medium dark:text-white">{transaction.description}</div>
                          <div className="text-sm text-gray-500 dark:text-gray-400">{formatDate(transaction.date)}</div>
                        </div>
                      </div>
                      <div className="text-right">
                        <div
                          className={`font-semibold ${
                            transaction.type === "credit"
                              ? "text-green-600 dark:text-green-400"
                              : "text-red-600 dark:text-red-400"
                          }`}
                        >
                          {transaction.type === "credit" ? "+" : "-"}₹{transaction.amount}
                        </div>
                        <div className="flex items-center justify-end space-x-1 mt-1">
                          {getStatusIcon(transaction.status)}
                          <Badge
                            variant="secondary"
                            className={`text-xs ${
                              transaction.status === "completed"
                                ? "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300"
                                : transaction.status === "pending"
                                  ? "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
                                  : "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300"
                            }`}
                          >
                            {transaction.status}
                          </Badge>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/payment/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import { useRouter, useSearchParams } from "next/navigation"
import Header from "@/components/header"
import Footer from "@/components/footer"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Separator } from "@/components/ui/separator"
import { useToast } from "@/hooks/use-toast"
import { useAuthRedux } from "@/hooks/use-auth-redux"
import { CreditCard, Calendar, Lock, ChevronLeft, CheckCircle2 } from "lucide-react"

export default function PaymentPage() {
  const router = useRouter()
  const searchParams = useSearchParams()
  const amount = searchParams.get("amount") || "0"
  const returnUrl = searchParams.get("returnUrl") || "/wallet"

const { user, updateUser } = useAuthRedux()
  const { toast } = useToast()

const [loading, setLoading] = useState(false)
  const [paymentSuccess, setPaymentSuccess] = useState(false)
  const [cardDetails, setCardDetails] = useState({
    cardNumber: "",
    cardName: "",
    expiryDate: "",
    cvv: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setCardDetails({
      ...cardDetails,
      [e.target.name]: e.target.value,
    })
  }

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)

// Simulate payment processing
    setTimeout(async () => {
      if (user) {
        await updateUser({ wallet_balance: user.wallet_balance + Number(amount) })
      }
      setLoading(false)
      setPaymentSuccess(true)
    }, 2000)
  }

const handleBackToWallet = () => {
    router.push(returnUrl)
  }

if (paymentSuccess) {
    return (
      <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
        <Header />

<div>
                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">Payment Successful!</h2>
                <p className="text-gray-600 dark:text-gray-300">
                  Your payment of ₹{amount} has been processed successfully.
                </p>
              </div>

<div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg">
                <div className="flex justify-between mb-2">
                  <span className="text-gray-600 dark:text-gray-300">Amount</span>
                  <span className="font-medium dark:text-white">₹{amount}</span>
                </div>
                <div className="flex justify-between mb-2">
                  <span className="text-gray-600 dark:text-gray-300">Transaction ID</span>
                  <span className="font-medium dark:text-white">TXN{Math.floor(Math.random() * 1000000)}</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-gray-600 dark:text-gray-300">Date & Time</span>
                  <span className="font-medium dark:text-white">{new Date().toLocaleString("en-IN")}</span>
                </div>
              </div>

<Button onClick={handleBackToWallet} className="w-full bg-green-600 hover:bg-green-700">
                Back to Wallet
              </Button>
            </CardContent>
          </Card>
        </div>

<Footer />
      </div>
    )
  }

return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header />

<Card className="dark:bg-gray-800 dark:border-gray-700">
          <CardHeader>
            <CardTitle className="dark:text-white">Payment Details</CardTitle>
          </CardHeader>
          <CardContent>
            <form onSubmit={handleSubmit} className="space-y-6">
              <div className="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg mb-6">
                <div className="flex justify-between items-center">
                  <span className="text-gray-600 dark:text-gray-300">Amount</span>
                  <span className="text-xl font-bold text-gray-900 dark:text-white">₹{amount}</span>
                </div>
              </div>

<div className="space-y-4">
                <div>
                  <Label htmlFor="cardNumber" className="dark:text-gray-300">
                    Card Number
                  </Label>
                  <div className="relative">
                    <Input
                      id="cardNumber"
                      name="cardNumber"
                      placeholder="1234 5678 9012 3456"
                      value={cardDetails.cardNumber}
                      onChange={handleChange}
                      required
                      className="pl-10 dark:bg-gray-700 dark:border-gray-600"
                    />
                    <CreditCard className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400" />
                  </div>
                </div>

<div>
                  <Label htmlFor="cardName" className="dark:text-gray-300">
                    Cardholder Name
                  </Label>
                  <Input
                    id="cardName"
                    name="cardName"
                    placeholder="John Doe"
                    value={cardDetails.cardName}
                    onChange={handleChange}
                    required
                    className="dark:bg-gray-700 dark:border-gray-600"
                  />
                </div>

<div className="grid grid-cols-2 gap-4">
                  <div>
                    <Label htmlFor="expiryDate" className="dark:text-gray-300">
                      Expiry Date
                    </Label>
                    <div className="relative">
                      <Input
                        id="expiryDate"
                        name="expiryDate"
                        placeholder="MM/YY"
                        value={cardDetails.expiryDate}
                        onChange={handleChange}
                        required
                        className="pl-10 dark:bg-gray-700 dark:border-gray-600"
                      />
                      <Calendar className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400" />
                    </div>
                  </div>

<div className="flex items-center justify-between mb-4">
                <span className="font-medium dark:text-white">Total Amount</span>
                <span className="text-xl font-bold text-green-600 dark:text-green-400">₹{amount}</span>
              </div>

<Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={loading}>
                {loading ? "Processing..." : "Pay Now"}
              </Button>

<div className="flex items-center justify-center space-x-2 text-sm text-gray-500 dark:text-gray-400">
                <Lock className="h-4 w-4" />
                <span>Secure payment powered by Razorpay</span>
              </div>
            </form>
          </CardContent>
        </Card>
      </div>

<Footer />
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/globals.css" isMerged="true"
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: rgb(var(--foreground-rgb));
  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

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

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}
[V0_FILE]typescriptreact:file="app/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  Box,
  Button,
  Card,
  CardContent,
  Checkbox,
  Container,
  Divider,
  FormControlLabel,
  Grid,
  IconButton,
  InputAdornment,
  TextField,
  Typography,
  useTheme,
} from "@mui/material"
import {
  Visibility,
  VisibilityOff,
  Google as GoogleIcon,
  Facebook as FacebookIcon,
  ArrowBack,
} from "@mui/icons-material"
import { useAuthRedux } from "@/hooks/use-auth-redux"
import { useToast } from "@/hooks/use-toast"

export default function LoginPage() {
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [showPassword, setShowPassword] = useState(false)
  const [rememberMe, setRememberMe] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { login } = useAuthRedux()
  const { toast } = useToast()
  const router = useRouter()
  const theme = useTheme()

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsLoading(true)

try {
      await login(email, password)
      toast({
        title: "Welcome back!",
        description: "You have been successfully logged in.",
        variant: "success",
      })
      router.push("/")
    } catch (error) {
      toast({
        title: "Login failed",
        description: "Please check your credentials and try again.",
        variant: "error",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleSocialLogin = (provider: string) => {
    toast({
      title: `${provider} login`,
      description: "Social login will be implemented soon.",
      variant: "info",
    })
  }

return (
    <Box
      sx={{
        minHeight: "100vh",
        background: `linear-gradient(135deg, ${theme.palette.primary.main}10 0%, ${theme.palette.secondary.main}10 100%)`,
        display: "flex",
        alignItems: "center",
        py: 4,
      }}
    >
      <Container maxWidth="sm">
        <Box sx={{ mb: 4 }}>
          <IconButton
            component={Link}
            href="/"
            sx={{
              mb: 2,
              color: theme.palette.primary.main,
              "&:hover": {
                backgroundColor: `${theme.palette.primary.main}10`,
              },
            }}
          >
            <ArrowBack />
          </IconButton>
        </Box>

<Card
          elevation={0}
          sx={{
            borderRadius: 3,
            border: `1px solid ${theme.palette.divider}`,
            backdropFilter: "blur(10px)",
            backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(255, 255, 255, 0.8)",
          }}
        >
          <CardContent sx={{ p: 4 }}>
            <Box sx={{ textAlign: "center", mb: 4 }}>
              <Typography
                variant="h4"
                component="h1"
                sx={{
                  fontWeight: 700,
                  background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                  backgroundClip: "text",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  mb: 1,
                }}
              >
                Welcome Back
              </Typography>
              <Typography variant="body1" color="text.secondary">
                Sign in to your FantasyPro account
              </Typography>
            </Box>

<Box component="form" onSubmit={handleSubmit} sx={{ mb: 3 }}>
              <TextField
                fullWidth
                label="Email Address"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
                sx={{ mb: 2 }}
                InputProps={{
                  sx: { borderRadius: 2 },
                }}
              />

<TextField
                fullWidth
                label="Password"
                type={showPassword ? "text" : "password"}
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
                sx={{ mb: 2 }}
                InputProps={{
                  sx: { borderRadius: 2 },
                  endAdornment: (
                    <InputAdornment position="end">
                      <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
                        {showPassword ? <VisibilityOff /> : <Visibility />}
                      </IconButton>
                    </InputAdornment>
                  ),
                }}
              />

<Box
                sx={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  mb: 3,
                }}
              >
                <FormControlLabel
                  control={
                    <Checkbox checked={rememberMe} onChange={(e) => setRememberMe(e.target.checked)} color="primary" />
                  }
                  label="Remember me"
                />
                <Link href="/forgot-password" style={{ textDecoration: "none" }}>
                  <Typography
                    variant="body2"
                    sx={{
                      color: theme.palette.primary.main,
                      "&:hover": {
                        textDecoration: "underline",
                      },
                    }}
                  >
                    Forgot password?
                  </Typography>
                </Link>
              </Box>

<Button
                type="submit"
                fullWidth
                variant="contained"
                size="large"
                disabled={isLoading}
                sx={{
                  py: 1.5,
                  borderRadius: 2,
                  background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
                  "&:hover": {
                    background: `linear-gradient(135deg, ${theme.palette.primary.dark}, ${theme.palette.primary.main})`,
                  },
                }}
              >
                {isLoading ? "Signing In..." : "Sign In"}
              </Button>
            </Box>

<Divider sx={{ my: 3 }}>
              <Typography variant="body2" color="text.secondary">
                Or continue with
              </Typography>
            </Divider>

<Grid container spacing={2} sx={{ mb: 3 }}>
              <Grid item xs={6}>
                <Button
                  fullWidth
                  variant="outlined"
                  startIcon={<GoogleIcon />}
                  onClick={() => handleSocialLogin("Google")}
                  sx={{
                    py: 1.5,
                    borderRadius: 2,
                    borderColor: theme.palette.divider,
                    color: theme.palette.text.primary,
                    "&:hover": {
                      borderColor: theme.palette.primary.main,
                      backgroundColor: `${theme.palette.primary.main}05`,
                    },
                  }}
                >
                  Google
                </Button>
              </Grid>
              <Grid item xs={6}>
                <Button
                  fullWidth
                  variant="outlined"
                  startIcon={<FacebookIcon />}
                  onClick={() => handleSocialLogin("Facebook")}
                  sx={{
                    py: 1.5,
                    borderRadius: 2,
                    borderColor: theme.palette.divider,
                    color: theme.palette.text.primary,
                    "&:hover": {
                      borderColor: "#1877f2",
                      backgroundColor: "#1877f205",
                    },
                  }}
                >
                  Facebook
                </Button>
              </Grid>
            </Grid>

<Box sx={{ textAlign: "center" }}>
              <Typography variant="body2" color="text.secondary">
                {"Don't have an account? "}
                <Link href="/register" style={{ textDecoration: "none" }}>
                  <Typography
                    component="span"
                    sx={{
                      color: theme.palette.primary.main,
                      fontWeight: 600,
                      "&:hover": {
                        textDecoration: "underline",
                      },
                    }}
                  >
                    Sign up
                  </Typography>
                </Link>
              </Typography>
            </Box>
          </CardContent>
        </Card>
      </Container>
    </Box>
  )
}
[V0_FILE]typescriptreact:file="app/register/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  Box,
  Button,
  Card,
  CardContent,
  Checkbox,
  Container,
  Divider,
  FormControlLabel,
  Grid,
  IconButton,
  InputAdornment,
  Step,
  StepLabel,
  Stepper,
  TextField,
  Typography,
  useTheme,
} from "@mui/material"
import {
  Visibility,
  VisibilityOff,
  Google as GoogleIcon,
  Facebook as FacebookIcon,
  ArrowBack,
  Person,
  Email,
  Lock,
  Phone,
} from "@mui/icons-material"
import { useAuthRedux } from "@/hooks/use-auth-redux"
import { useToast } from "@/hooks/use-toast"

const steps = ["Personal Info", "Account Details", "Verification"]

export default function RegisterPage() {
  const [activeStep, setActiveStep] = useState(0)
  const [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: "",
    phone: "",
    password: "",
    confirmPassword: "",
    dateOfBirth: "",
    agreeToTerms: false,
    agreeToMarketing: false,
  })
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  const [isLoading, setIsLoading] = useState(false)
  const { register } = useAuthRedux()
  const { toast } = useToast()
  const router = useRouter()
  const theme = useTheme()

const handleInputChange = (field: string, value: string | boolean) => {
    setFormData((prev) => ({ ...prev, [field]: value }))
  }

const handleNext = () => {
    if (activeStep === 0) {
      if (!formData.firstName || !formData.lastName || !formData.dateOfBirth) {
        toast({
          title: "Missing Information",
          description: "Please fill in all required fields.",
          variant: "error",
        })
        return
      }
    } else if (activeStep === 1) {
      if (!formData.email || !formData.phone || !formData.password || !formData.confirmPassword) {
        toast({
          title: "Missing Information",
          description: "Please fill in all required fields.",
          variant: "error",
        })
        return
      }
      if (formData.password !== formData.confirmPassword) {
        toast({
          title: "Password Mismatch",
          description: "Passwords do not match.",
          variant: "error",
        })
        return
      }
      if (!formData.agreeToTerms) {
        toast({
          title: "Terms Required",
          description: "Please agree to the terms and conditions.",
          variant: "error",
        })
        return
      }
    }
    setActiveStep((prev) => prev + 1)
  }

const handleBack = () => {
    setActiveStep((prev) => prev - 1)
  }

const handleSubmit = async () => {
    setIsLoading(true)
    try {
      await register(formData.email, formData.password, {
        firstName: formData.firstName,
        lastName: formData.lastName,
        phone: formData.phone,
        dateOfBirth: formData.dateOfBirth,
      })
      toast({
        title: "Account Created!",
        description: "Welcome to FantasyPro! Your account has been created successfully.",
        variant: "success",
      })
      router.push("/")
    } catch (error) {
      toast({
        title: "Registration Failed",
        description: "Please try again or contact support.",
        variant: "error",
      })
    } finally {
      setIsLoading(false)
    }
  }

const handleSocialLogin = (provider: string) => {
    toast({
      title: `${provider} registration`,
      description: "Social registration will be implemented soon.",
      variant: "info",
    })
  }

const renderStepContent = (step: number) => {
    switch (step) {
      case 0:
        return (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
            <Grid container spacing={2}>
              <Grid item xs={6}>
                <TextField
                  fullWidth
                  label="First Name"
                  value={formData.firstName}
                  onChange={(e) => handleInputChange("firstName", e.target.value)}
                  required
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <Person color="action" />
                      </InputAdornment>
                    ),
                  }}
                />
              </Grid>
              <Grid item xs={6}>
                <TextField
                  fullWidth
                  label="Last Name"
                  value={formData.lastName}
                  onChange={(e) => handleInputChange("lastName", e.target.value)}
                  required
                />
              </Grid>
            </Grid>
            <TextField
              fullWidth
              label="Date of Birth"
              type="date"
              value={formData.dateOfBirth}
              onChange={(e) => handleInputChange("dateOfBirth", e.target.value)}
              required
              InputLabelProps={{ shrink: true }}
            />
          </Box>
        )
      case 1:
        return (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
            <TextField
              fullWidth
              label="Email Address"
              type="email"
              value={formData.email}
              onChange={(e) => handleInputChange("email", e.target.value)}
              required
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Email color="action" />
                  </InputAdornment>
                ),
              }}
            />
            <TextField
              fullWidth
              label="Phone Number"
              value={formData.phone}
              onChange={(e) => handleInputChange("phone", e.target.value)}
              required
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Phone color="action" />
                  </InputAdornment>
                ),
              }}
            />
            <TextField
              fullWidth
              label="Password"
              type={showPassword ? "text" : "password"}
              value={formData.password}
              onChange={(e) => handleInputChange("password", e.target.value)}
              required
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <Lock color="action" />
                  </InputAdornment>
                ),
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton onClick={() => setShowPassword(!showPassword)} edge="end">
                      {showPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
            <TextField
              fullWidth
              label="Confirm Password"
              type={showConfirmPassword ? "text" : "password"}
              value={formData.confirmPassword}
              onChange={(e) => handleInputChange("confirmPassword", e.target.value)}
              required
              InputProps={{
                endAdornment: (
                  <InputAdornment position="end">
                    <IconButton onClick={() => setShowConfirmPassword(!showConfirmPassword)} edge="end">
                      {showConfirmPassword ? <VisibilityOff /> : <Visibility />}
                    </IconButton>
                  </InputAdornment>
                ),
              }}
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={formData.agreeToTerms}
                  onChange={(e) => handleInputChange("agreeToTerms", e.target.checked)}
                  color="primary"
                />
              }
              label={
                <Typography variant="body2">
                  I agree to the{" "}
                  <Link href="/terms" style={{ color: theme.palette.primary.main }}>
                    Terms of Service
                  </Link>{" "}
                  and{" "}
                  <Link href="/privacy" style={{ color: theme.palette.primary.main }}>
                    Privacy Policy
                  </Link>
                </Typography>
              }
            />
            <FormControlLabel
              control={
                <Checkbox
                  checked={formData.agreeToMarketing}
                  onChange={(e) => handleInputChange("agreeToMarketing", e.target.checked)}
                  color="primary"
                />
              }
              label="I want to receive marketing communications and updates"
            />
          </Box>
        )
      case 2:
        return (
          <Box sx={{ textAlign: "center", py: 4 }}>
            <Typography variant="h6" sx={{ mb: 2, color: theme.palette.success.main }}>
              🎉 Almost Done!
            </Typography>
            <Typography variant="body1" sx={{ mb: 3 }}>
              Review your information and create your account
            </Typography>
            <Box sx={{ textAlign: "left", mb: 3 }}>
              <Typography variant="body2" color="text.secondary">
                <strong>Name:</strong> {formData.firstName} {formData.lastName}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                <strong>Email:</strong> {formData.email}
              </Typography>
              <Typography variant="body2" color="text.secondary">
                <strong>Phone:</strong> {formData.phone}
              </Typography>
            </Box>
          </Box>
        )
      default:
        return null
    }
  }

return (
    <Box
      sx={{
        minHeight: "100vh",
        background: `linear-gradient(135deg, ${theme.palette.primary.main}10 0%, ${theme.palette.secondary.main}10 100%)`,
        display: "flex",
        alignItems: "center",
        py: 4,
      }}
    >
      <Container maxWidth="md">
        <Box sx={{ mb: 4 }}>
          <IconButton
            component={Link}
            href="/"
            sx={{
              mb: 2,
              color: theme.palette.primary.main,
              "&:hover": {
                backgroundColor: `${theme.palette.primary.main}10`,
              },
            }}
          >
            <ArrowBack />
          </IconButton>
        </Box>

<Card
          elevation={0}
          sx={{
            borderRadius: 3,
            border: `1px solid ${theme.palette.divider}`,
            backdropFilter: "blur(10px)",
            backgroundColor: theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "rgba(255, 255, 255, 0.8)",
          }}
        >
          <CardContent sx={{ p: 4 }}>
            <Box sx={{ textAlign: "center", mb: 4 }}>
              <Typography
                variant="h4"
                component="h1"
                sx={{
                  fontWeight: 700,
                  background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.secondary.main})`,
                  backgroundClip: "text",
                  WebkitBackgroundClip: "text",
                  WebkitTextFillColor: "transparent",
                  mb: 1,
                }}
              >
                Join FantasyPro
              </Typography>
              <Typography variant="body1" color="text.secondary">
                Create your account and start winning
              </Typography>
            </Box>

<Stepper activeStep={activeStep} sx={{ mb: 4 }}>
              {steps.map((label) => (
                <Step key={label}>
                  <StepLabel>{label}</StepLabel>
                </Step>
              ))}
            </Stepper>

{renderStepContent(activeStep)}

<Box sx={{ display: "flex", justifyContent: "space-between", mt: 4 }}>
              <Button onClick={handleBack} disabled={activeStep === 0} sx={{ borderRadius: 2 }}>
                Back
              </Button>
              <Button
                variant="contained"
                onClick={activeStep === steps.length - 1 ? handleSubmit : handleNext}
                disabled={isLoading}
                sx={{
                  borderRadius: 2,
                  background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
                }}
              >
                {activeStep === steps.length - 1 ? (isLoading ? "Creating Account..." : "Create Account") : "Next"}
              </Button>
            </Box>

{activeStep === 0 && (
              <>
                <Divider sx={{ my: 3 }}>
                  <Typography variant="body2" color="text.secondary">
                    Or sign up with
                  </Typography>
                </Divider>

<Grid container spacing={2} sx={{ mb: 3 }}>
                  <Grid item xs={6}>
                    <Button
                      fullWidth
                      variant="outlined"
                      startIcon={<GoogleIcon />}
                      onClick={() => handleSocialLogin("Google")}
                      sx={{
                        py: 1.5,
                        borderRadius: 2,
                        borderColor: theme.palette.divider,
                        color: theme.palette.text.primary,
                        "&:hover": {
                          borderColor: theme.palette.primary.main,
                          backgroundColor: `${theme.palette.primary.main}05`,
                        },
                      }}
                    >
                      Google
                    </Button>
                  </Grid>
                  <Grid item xs={6}>
                    <Button
                      fullWidth
                      variant="outlined"
                      startIcon={<FacebookIcon />}
                      onClick={() => handleSocialLogin("Facebook")}
                      sx={{
                        py: 1.5,
                        borderRadius: 2,
                        borderColor: theme.palette.divider,
                        color: theme.palette.text.primary,
                        "&:hover": {
                          borderColor: "#1877f2",
                          backgroundColor: "#1877f205",
                        },
                      }}
                    >
                      Facebook
                    </Button>
                  </Grid>
                </Grid>
              </>
            )}

<Box sx={{ textAlign: "center" }}>
              <Typography variant="body2" color="text.secondary">
                Already have an account?{" "}
                <Link href="/login" style={{ textDecoration: "none" }}>
                  <Typography
                    component="span"
                    sx={{
                      color: theme.palette.primary.main,
                      fontWeight: 600,
                      "&:hover": {
                        textDecoration: "underline",
                      },
                    }}
                  >
                    Sign in
                  </Typography>
                </Link>
              </Typography>
            </Box>
          </CardContent>
        </Card>
      </Container>
    </Box>
  )
}
[V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import {
  Box,
  Button,
  Card,
  CardContent,
  Container,
  IconButton,
  Step,
  StepLabel,
  Stepper,
  TextField,
  Typography,
  useTheme,
} from "@mui/material"
import { ArrowBack, Email, Lock, CheckCircle } from "@mui/icons-material"
import { useToast } from "@/hooks/use-toast"

const steps = ["Enter Email", "Check Email", "Reset Password", "Success"]

export default function ForgotPasswordPage() {
  const [activeStep, setActiveStep] = useState(0)
  const [email, setEmail] = useState("")
  const [resetCode, setResetCode] = useState("")
  const [newPassword, setNewPassword] = useState("")
  const [confirmPassword, setConfirmPassword] = useState("")
  const [isLoading, setIsLoading] = useState(false)
  const { toast } = useToast()
  const theme = useTheme()

const handleSendResetEmail = async () => {
    if (!email) {
      toast({
        title: "Email Required",
        description: "Please enter your email address.",
        variant: "error",
      })
      return
    }

setIsLoading(true)
    // Simulate API call
    setTimeout(() => {
      setIsLoading(false)
      setActiveStep(1)
      toast({
        title: "Reset Email Sent",
        description: "Check your email for reset instructions.",
        variant: "success",
      })
    }, 2000)
  }

const handleVerifyCode = () => {
    if (!resetCode) {
      toast({
        title: "Code Required",
        description: "Please enter the reset code.",
        variant: "error",
      })
      return
    }
    setActiveStep(2)
  }

const handleResetPassword = () => {
    if (!newPassword || !confirmPassword) {
      toast({
        title: "Password Required",
        description: "Please fill in both password fields.",
        variant: "error",
      })
      return
    }

if (newPassword !== confirmPassword) {
      toast({
        title: "Password Mismatch",
        description: "Passwords do not match.",
        variant: "error",
      })
      return
    }

setIsLoading(true)
    // Simulate API call
    setTimeout(() => {
      setIsLoading(false)
      setActiveStep(3)
      toast({
        title: "Password Reset",
        description: "Your password has been successfully reset.",
        variant: "success",
      })
    }, 2000)
  }

const renderStepContent = (step: number) => {
    switch (step) {
      case 0:
        return (
          <Box sx={{ textAlign: "center" }}>
            <Email sx={{ fontSize: 64, color: theme.palette.primary.main, mb: 2 }} />
            <Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
              Forgot Your Password?
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
              Enter your email address and we'll send you a link to reset your password.
            </Typography>
            <TextField
              fullWidth
              label="Email Address"
              type="email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              sx={{ mb: 3 }}
            />
            <Button
              fullWidth
              variant="contained"
              size="large"
              onClick={handleSendResetEmail}
              disabled={isLoading}
              sx={{
                py: 1.5,
                borderRadius: 2,
                background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
              }}
            >
              {isLoading ? "Sending..." : "Send Reset Email"}
            </Button>
          </Box>
        )
      case 1:
        return (
          <Box sx={{ textAlign: "center" }}>
            <Email sx={{ fontSize: 64, color: theme.palette.info.main, mb: 2 }} />
            <Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
              Check Your Email
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
              We've sent a password reset code to <strong>{email}</strong>. Enter the code below to continue.
            </Typography>
            <TextField
              fullWidth
              label="Reset Code"
              value={resetCode}
              onChange={(e) => setResetCode(e.target.value)}
              sx={{ mb: 3 }}
              placeholder="Enter 6-digit code"
            />
            <Button
              fullWidth
              variant="contained"
              size="large"
              onClick={handleVerifyCode}
              sx={{
                py: 1.5,
                borderRadius: 2,
                background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
                mb: 2,
              }}
            >
              Verify Code
            </Button>
            <Button variant="text" onClick={() => setActiveStep(0)} sx={{ color: theme.palette.primary.main }}>
              Didn't receive the code? Resend
            </Button>
          </Box>
        )
      case 2:
        return (
          <Box sx={{ textAlign: "center" }}>
            <Lock sx={{ fontSize: 64, color: theme.palette.success.main, mb: 2 }} />
            <Typography variant="h5" sx={{ mb: 2, fontWeight: 600 }}>
              Create New Password
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
              Enter your new password below. Make sure it's strong and secure.
            </Typography>
            <TextField
              fullWidth
              label="New Password"
              type="password"
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              sx={{ mb: 2 }}
            />
            <TextField
              fullWidth
              label="Confirm New Password"
              type="password"
              value={confirmPassword}
              onChange={(e) => setConfirmPassword(e.target.value)}
              sx={{ mb: 3 }}
            />
            <Button
              fullWidth
              variant="contained"
              size="large"
              onClick={handleResetPassword}
              disabled={isLoading}
              sx={{
                py: 1.5,
                borderRadius: 2,
                background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
              }}
            >
              {isLoading ? "Resetting..." : "Reset Password"}
            </Button>
          </Box>
        )
      case 3:
        return (
          <Box sx={{ textAlign: "center" }}>
            <CheckCircle sx={{ fontSize: 64, color: theme.palette.success.main, mb: 2 }} />
            <Typography variant="h5" sx={{ mb: 2, fontWeight: 600, color: theme.palette.success.main }}>
              Password Reset Successful!
            </Typography>
            <Typography variant="body1" color="text.secondary" sx={{ mb: 4 }}>
              Your password has been successfully reset. You can now sign in with your new password.
            </Typography>
            <Button
              fullWidth
              variant="contained"
              size="large"
              component={Link}
              href="/login"
              sx={{
                py: 1.5,
                borderRadius: 2,
                background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
              }}
            >
              Sign In Now
            </Button>
          </Box>
        )
      default:
        return null
    }
  }

return (
    <Box
      sx={{
        minHeight: "100vh",
        background: `linear-gradient(135deg, ${theme.palette.primary.main}10 0%, ${theme.palette.secondary.main}10 100%)`,
        display: "flex",
        alignItems: "center",
        py: 4,
      }}
    >
      <Container maxWidth="sm">
        <Box sx={{ mb: 4 }}>
          <IconButton
            component={Link}
            href="/login"
            sx={{
              mb: 2,
              color: theme.palette.primary.main,
              "&:hover": {
                backgroundColor: `${theme.palette.primary.main}10`,
              },
            }}
          >
            <ArrowBack />
          </IconButton>
        </Box>

{renderStepContent(activeStep)}

<Box sx={{ textAlign: "center", mt: 4 }}>
              <Typography variant="body2" color="text.secondary">
                Remember your password?{" "}
                <Link href="/login" style={{ textDecoration: "none" }}>
                  <Typography
                    component="span"
                    sx={{
                      color: theme.palette.primary.main,
                      fontWeight: 600,
                      "&:hover": {
                        textDecoration: "underline",
                      },
                    }}
                  >
                    Sign in
                  </Typography>
                </Link>
              </Typography>
            </Box>
          </CardContent>
        </Card>
      </Container>
    </Box>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type React from "react"
import "./globals.css"
import type { Metadata } from "next"
import { Inter } from "next/font/google"
import { ReduxProvider } from "@/lib/providers/redux-provider"
import { ThemeProvider } from "@/contexts/theme-context"

const inter = Inter({ subsets: ["latin"] })

export const metadata: Metadata = {
  title: "FantasyPro - Build Your Dream Team",
  description:
    "Join millions of fantasy sports enthusiasts. Create your team, compete in contests, and win real cash prizes!",
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <ReduxProvider>
          <ThemeProvider>{children}</ThemeProvider>
        </ReduxProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="contexts/theme-context.tsx" isEdit="true" isMerged="true"
"use client"

import type React from "react"
import { createContext, useContext, useEffect, useState } from "react"
import { ThemeProvider as MuiThemeProvider, createTheme } from "@mui/material/styles"
import CssBaseline from "@mui/material/CssBaseline"
import { SnackbarProvider } from "notistack"

type Theme = "light" | "dark"

interface ThemeContextType {
  theme: Theme
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState<Theme>("light")

useEffect(() => {
    const savedTheme = localStorage.getItem("theme") as Theme
    if (savedTheme) {
      setTheme(savedTheme)
    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      setTheme("dark")
    }
  }, [])

useEffect(() => {
    localStorage.setItem("theme", theme)
    if (theme === "dark") {
      document.documentElement.classList.add("dark")
    } else {
      document.documentElement.classList.remove("dark")
    }
  }, [theme])

const toggleTheme = () => {
    setTheme(theme === "light" ? "dark" : "light")
  }

const muiTheme = createTheme({
    palette: {
      mode: theme,
      primary: {
        main: "#16a34a",
        light: "#22c55e",
        dark: "#15803d",
      },
      secondary: {
        main: "#3b82f6",
        light: "#60a5fa",
        dark: "#2563eb",
      },
      background: {
        default: theme === "dark" ? "#0f172a" : "#ffffff",
        paper: theme === "dark" ? "#1e293b" : "#ffffff",
      },
      text: {
        primary: theme === "dark" ? "#f8fafc" : "#0f172a",
        secondary: theme === "dark" ? "#94a3b8" : "#64748b",
      },
    },
    typography: {
      fontFamily: "Inter, sans-serif",
    },
    shape: {
      borderRadius: 6,
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: {
            textTransform: "none",
            fontWeight: 500,
            borderRadius: 6,
          },
        },
      },
      MuiCard: {
        styleOverrides: {
          root: {
            borderRadius: 8,
            border: theme === "dark" ? "1px solid #334155" : "1px solid #e2e8f0",
            boxShadow: theme === "dark" ? "0 1px 3px 0 rgba(0, 0, 0, 0.3)" : "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
          },
        },
      },
      MuiTextField: {
        styleOverrides: {
          root: {
            "& .MuiOutlinedInput-root": {
              borderRadius: 6,
            },
          },
        },
      },
    },
  })

return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      <MuiThemeProvider theme={muiTheme}>
        <CssBaseline />
        <SnackbarProvider
          maxSnack={3}
          anchorOrigin={{
            vertical: "top",
            horizontal: "right",
          }}
        >
          {children}
        </SnackbarProvider>
      </MuiThemeProvider>
    </ThemeContext.Provider>
  )
}

export const useTheme = () => {
  const context = useContext(ThemeContext)
  if (context === undefined) {
    throw new Error("useTheme must be used within a ThemeProvider")
  }
  return context
}
[V0_FILE]typescriptreact:file="hooks/use-toast.ts" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

// Inspired by react-hot-toast library
import type * as React from "react"
import { useSnackbar, type VariantType } from "notistack"

interface ToastProps {
  title?: string
  description?: string
  variant?: "default" | "destructive" | "success" | "warning" | "info"
}

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: React.ReactNode
  variant?: "default" | "destructive" | "success" | "warning" | "info"
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,
      // but I'll keep it here for simplicity
      if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t,
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

export function useToast() {
  const { enqueueSnackbar } = useSnackbar()

const toast = ({ title, description, variant = "default" }: ToastProps) => {
    const message = title && description ? `${title}: ${description}` : title || description || ""

let snackbarVariant: VariantType = "default"

switch (variant) {
      case "destructive":
        snackbarVariant = "error"
        break
      case "success":
        snackbarVariant = "success"
        break
      case "warning":
        snackbarVariant = "warning"
        break
      case "info":
        snackbarVariant = "info"
        break
      default:
        snackbarVariant = "default"
    }

enqueueSnackbar(message, {
      variant: snackbarVariant,
      autoHideDuration: 5000,
    })
  }

return { toast }
}
[V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true"
"use client"

import Link from "next/link"
import { Trophy, User, Wallet, Menu, X, Moon, Sun } from "lucide-react"
import { Button } from "@/components/ui/button"
import { useAuthRedux } from "@/hooks/use-auth-redux"
import { useState } from "react"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useTheme } from "@/contexts/theme-context"
import { Box, AppBar, Toolbar, Typography, IconButton, Drawer, List, ListItem, ListItemText, Chip } from "@mui/material"

export default function Header() {
  const { user, logout } = useAuthRedux()
  const { theme, toggleTheme } = useTheme()
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

const getUserInitial = () => {
    if (!user?.name) return "U"
    return user.name.charAt(0).toUpperCase()
  }

const getWalletBalance = () => {
    if (!user?.wallet_balance && user?.wallet_balance !== 0) return 0
    return user.wallet_balance
  }

return (
    <AppBar
      position="sticky"
      elevation={0}
      sx={{
        bgcolor: "background.paper",
        borderBottom: "1px solid",
        borderColor: "divider",
        color: "text.primary",
      }}
    >
      <Toolbar sx={{ maxWidth: "1200px", width: "100%", mx: "auto", px: { xs: 2, sm: 3, lg: 4 } }}>
        {/* Logo */}
        <Link href="/" style={{ textDecoration: "none", color: "inherit" }}>
          <Box sx={{ display: "flex", alignItems: "center", mr: 4 }}>
            <Trophy size={32} color="#16a34a" />
            <Typography variant="h6" component="span" sx={{ ml: 1, fontWeight: "bold", color: "text.primary" }}>
              FantasyPro
            </Typography>
          </Box>
        </Link>

{/* Desktop Navigation */}
        <Box sx={{ display: { xs: "none", md: "flex" }, gap: 4, flexGrow: 1 }}>
          <Link href="/" style={{ textDecoration: "none" }}>
            <Typography sx={{ color: "#16a34a", fontWeight: 500, "&:hover": { color: "#15803d" } }}>Home</Typography>
          </Link>
          <Link href="/matches" style={{ textDecoration: "none" }}>
            <Typography sx={{ color: "text.secondary", "&:hover": { color: "text.primary" } }}>Matches</Typography>
          </Link>
          <Link href="/contests" style={{ textDecoration: "none" }}>
            <Typography sx={{ color: "text.secondary", "&:hover": { color: "text.primary" } }}>Contests</Typography>
          </Link>
          <Link href="/my-teams" style={{ textDecoration: "none" }}>
            <Typography sx={{ color: "text.secondary", "&:hover": { color: "text.primary" } }}>My Teams</Typography>
          </Link>
          <Link href="/leaderboard" style={{ textDecoration: "none" }}>
            <Typography sx={{ color: "text.secondary", "&:hover": { color: "text.primary" } }}>Leaderboard</Typography>
          </Link>
        </Box>

{/* Auth Section */}
        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
          <IconButton onClick={toggleTheme} sx={{ display: { xs: "none", md: "flex" } }}>
            {theme === "light" ? <Moon size={16} /> : <Sun size={16} />}
          </IconButton>

{user ? (
            <>
              <Chip
                icon={<Wallet size={16} />}
                label={`₹${getWalletBalance()}`}
                sx={{
                  display: { xs: "none", sm: "flex" },
                  bgcolor: "#f0fdf4",
                  color: "#16a34a",
                  "& .MuiChip-icon": { color: "#16a34a" },
                }}
              />
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="ghost" size="sm" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <User size={16} />
                    <span style={{ display: window.innerWidth >= 640 ? "block" : "none" }}>{user.name || "User"}</span>
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem asChild>
                    <Link href="/profile">Profile</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/wallet">Wallet</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem asChild>
                    <Link href="/my-contests">My Contests</Link>
                  </DropdownMenuItem>
                  <DropdownMenuItem onClick={logout}>Logout</DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </>
          ) : (
            <>
              <Link href="/login" style={{ textDecoration: "none" }}>
                <Button variant="ghost" size="sm" style={{ display: "flex", alignItems: "center", gap: 8 }}>
                  <User size={16} />
                  <span>Login</span>
                </Button>
              </Link>
              <Link href="/register" style={{ textDecoration: "none" }}>
                <Button size="sm" style={{ backgroundColor: "#16a34a", color: "white" }}>
                  Sign Up
                </Button>
              </Link>
            </>
          )}

{/* Mobile Menu Button */}
          <IconButton sx={{ display: { xs: "flex", md: "none" } }} onClick={() => setMobileMenuOpen(!mobileMenuOpen)}>
            {mobileMenuOpen ? <X size={20} /> : <Menu size={20} />}
          </IconButton>
        </Box>

{/* Mobile Drawer */}
        <Drawer anchor="right" open={mobileMenuOpen} onClose={() => setMobileMenuOpen(false)}>
          <Box sx={{ width: 250, pt: 2 }}>
            <List>
              <ListItem component={Link} href="/" onClick={() => setMobileMenuOpen(false)}>
                <ListItemText primary="Home" sx={{ color: "#16a34a" }} />
              </ListItem>
              <ListItem component={Link} href="/matches" onClick={() => setMobileMenuOpen(false)}>
                <ListItemText primary="Matches" />
              </ListItem>
              <ListItem component={Link} href="/contests" onClick={() => setMobileMenuOpen(false)}>
                <ListItemText primary="Contests" />
              </ListItem>
              <ListItem component={Link} href="/my-teams" onClick={() => setMobileMenuOpen(false)}>
                <ListItemText primary="My Teams" />
              </ListItem>
              <ListItem component={Link} href="/leaderboard" onClick={() => setMobileMenuOpen(false)}>
                <ListItemText primary="Leaderboard" />
              </ListItem>
              {user && (
                <ListItem>
                  <Chip
                    icon={<Wallet size={16} />}
                    label={`₹${getWalletBalance()}`}
                    sx={{
                      bgcolor: "#f0fdf4",
                      color: "#16a34a",
                      "& .MuiChip-icon": { color: "#16a34a" },
                    }}
                  />
                </ListItem>
              )}
            </List>
          </Box>
        </Drawer>
      </Toolbar>
    </AppBar>
  )
}
[V0_FILE]typescriptreact:file="components/hero-section.tsx" isEdit="true" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Play, Users, TrendingUp, Calendar } from "lucide-react"
import Link from "next/link"
import { useAuthRedux } from "@/hooks/use-auth-redux"
import { Box, Container, Typography, Grid } from "@mui/material"

export default function HeroSection() {
  const { user } = useAuthRedux()

return (
    <Box
      sx={{
        background: "linear-gradient(135deg, #16a34a 0%, #3b82f6 50%, #8b5cf6 100%)",
        color: "white",
        py: { xs: 10, lg: 16 },
      }}
    >
      <Container maxWidth="lg">
        <Box sx={{ textAlign: "center" }}>
          {/* Main Heading */}
          <Typography
            variant="h1"
            component="h1"
            sx={{
              fontSize: { xs: "2.5rem", md: "4rem" },
              fontWeight: "bold",
              mb: 3,
            }}
          >
            Build Your Dream Team
          </Typography>

{/* Subtitle */}
          <Typography
            variant="h5"
            component="p"
            sx={{
              mb: 4,
              maxWidth: "800px",
              mx: "auto",
              opacity: 0.9,
              fontSize: { xs: "1.1rem", md: "1.5rem" },
            }}
          >
            Join millions of fantasy sports enthusiasts. Create your team, compete in contests, and win real cash
            prizes!
          </Typography>

{/* CTA Buttons */}
          <Box
            sx={{
              display: "flex",
              flexDirection: { xs: "column", sm: "row" },
              gap: 2,
              justifyContent: "center",
              mb: 8,
            }}
          >
            <Link href={user ? "/matches" : "/register"} style={{ textDecoration: "none" }}>
              <Button
                size="lg"
                style={{
                  backgroundColor: "white",
                  color: "#16a34a",
                  fontWeight: 600,
                  padding: "12px 32px",
                  display: "flex",
                  alignItems: "center",
                  gap: "8px",
                }}
              >
                <Play size={20} />
                Start Playing Now
              </Button>
            </Link>
            <Link href="/how-to-play" style={{ textDecoration: "none" }}>
              <Button
                size="lg"
                variant="outline"
                style={{
                  borderColor: "white",
                  color: "white",
                  fontWeight: 600,
                  padding: "12px 32px",
                }}
              >
                How to Play
              </Button>
            </Link>
          </Box>

{/* Statistics */}
          <Grid container spacing={4} sx={{ maxWidth: "1000px", mx: "auto" }}>
            <Grid item xs={12} md={4}>
              <Box sx={{ textAlign: "center" }}>
                <Box
                  sx={{
                    bgcolor: "rgba(255,255,255,0.1)",
                    borderRadius: "50%",
                    p: 2,
                    width: 64,
                    height: 64,
                    mx: "auto",
                    mb: 2,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <Users size={32} />
                </Box>
                <Typography variant="h3" component="div" sx={{ fontWeight: "bold", mb: 1 }}>
                  10M+ Users
                </Typography>
                <Typography variant="body1" sx={{ opacity: 0.8 }}>
                  Join the largest fantasy sports community
                </Typography>
              </Box>
            </Grid>

<Grid item xs={12} md={4}>
              <Box sx={{ textAlign: "center" }}>
                <Box
                  sx={{
                    bgcolor: "rgba(255,255,255,0.1)",
                    borderRadius: "50%",
                    p: 2,
                    width: 64,
                    height: 64,
                    mx: "auto",
                    mb: 2,
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                  }}
                >
                  <Calendar size={32} />
                </Box>
                <Typography variant="h3" component="div" sx={{ fontWeight: "bold", mb: 1 }}>
                  1000+
                </Typography>
                <Typography variant="body1" sx={{ opacity: 0.8 }}>
                  Daily contests available
                </Typography>
              </Box>
            </Grid>
          </Grid>
        </Box>
      </Container>
    </Box>
  )
}
[V0_FILE]json:file="package.json" isEdit="true"
{
  "name": "fantasy-sports-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.0.1",
    "react-redux": "^9.0.4",
    "next": "14.0.4",
    "react": "^18",
    "react-dom": "^18",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5",
    "lucide-react": "^0.294.0",
    "@mui/material": "^5.15.0",
    "@mui/icons-material": "^5.15.0",
    "@mui/lab": "^5.0.0-alpha.158",
    "@mui/x-date-pickers": "^6.18.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@emotion/cache": "^11.11.0",
    "notistack": "^3.0.1",
    "dayjs": "^1.11.10",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "tailwind-merge": "^2.0.0",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "eslint": "^8",
    "eslint-config-next": "14.0.4"
  }
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true"
"use client"

import * as React from "react"
import { Button as MuiButton, type ButtonProps as MuiButtonProps } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

interface ButtonProps extends Omit<MuiButtonProps, "variant" | "size">, VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const StyledButton = styled(MuiButton)<ButtonProps>(({ theme, variant: customVariant, size }) => {
  const getVariantStyles = () => {
    switch (customVariant) {
      case "destructive":
        return {
          backgroundColor: "#dc2626",
          color: "white",
          "&:hover": {
            backgroundColor: "#b91c1c",
          },
        }
      case "outline":
        return {
          border: `1px solid ${theme.palette.divider}`,
          backgroundColor: "transparent",
          color: theme.palette.text.primary,
          "&:hover": {
            backgroundColor: theme.palette.action.hover,
          },
        }
      case "secondary":
        return {
          backgroundColor: theme.palette.grey[100],
          color: theme.palette.text.primary,
          "&:hover": {
            backgroundColor: theme.palette.grey[200],
          },
        }
      case "ghost":
        return {
          backgroundColor: "transparent",
          color: theme.palette.text.primary,
          "&:hover": {
            backgroundColor: theme.palette.action.hover,
          },
        }
      case "link":
        return {
          backgroundColor: "transparent",
          color: theme.palette.primary.main,
          textDecoration: "underline",
          "&:hover": {
            textDecoration: "none",
          },
        }
      default:
        return {
          backgroundColor: theme.palette.primary.main,
          color: "white",
          "&:hover": {
            backgroundColor: theme.palette.primary.dark,
          },
        }
    }
  }

const getSizeStyles = () => {
    switch (size) {
      case "sm":
        return {
          height: "36px",
          padding: "0 12px",
          fontSize: "14px",
          borderRadius: "6px",
        }
      case "lg":
        return {
          height: "44px",
          padding: "0 32px",
          fontSize: "16px",
          borderRadius: "6px",
        }
      case "icon":
        return {
          height: "40px",
          width: "40px",
          padding: 0,
          borderRadius: "6px",
        }
      default:
        return {
          height: "40px",
          padding: "0 16px",
          fontSize: "14px",
          borderRadius: "6px",
        }
    }
  }

return {
    ...getVariantStyles(),
    ...getSizeStyles(),
    textTransform: "none",
    fontWeight: 500,
    boxShadow: "none",
    "&:focus": {
      boxShadow: `0 0 0 2px ${theme.palette.primary.main}40`,
    },
  }
})

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    return (
      <StyledButton
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        variant={variant === "outline" || variant === "ghost" || variant === "link" ? "text" : "contained"}
        customVariant={variant}
        size={size}
        {...props}
      />
    )
  },
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isEdit="true"
"use client"

import * as React from "react"
import { Card as MuiCard, CardContent as MuiCardContent, CardHeader as MuiCardHeader } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cn } from "@/lib/utils"

const StyledCard = styled(MuiCard)(({ theme }) => ({
  borderRadius: "8px",
  border: `1px solid ${theme.palette.divider}`,
  backgroundColor: theme.palette.background.paper,
  boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
}))

const Card = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof MuiCard>>(({ className, ...props }, ref) => (
  <StyledCard
    ref={ref}
    className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof MuiCardHeader>>(
  ({ className, ...props }, ref) => (
    <MuiCardHeader ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
  ),
)
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
  ),
)
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
  ({ className, ...props }, ref) => (
    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
  ),
)
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<HTMLDivElement, React.ComponentProps<typeof MuiCardContent>>(
  ({ className, ...props }, ref) => <MuiCardContent ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
)
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
  ),
)
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="components/ui/input.tsx" isEdit="true"
"use client"

import * as React from "react"
import { TextField, type TextFieldProps } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cn } from "@/lib/utils"

interface InputProps extends Omit<TextFieldProps, "variant"> {
  variant?: "default" | "outline"
}

const StyledTextField = styled(TextField)(({ theme }) => ({
  "& .MuiOutlinedInput-root": {
    borderRadius: "6px",
    backgroundColor: theme.palette.background.paper,
    fontSize: "14px",
    height: "40px",
    "& fieldset": {
      borderColor: theme.palette.divider,
    },
    "&:hover fieldset": {
      borderColor: theme.palette.action.hover,
    },
    "&.Mui-focused fieldset": {
      borderColor: theme.palette.primary.main,
      borderWidth: "2px",
    },
  },
  "& .MuiInputLabel-root": {
    color: theme.palette.text.secondary,
    fontSize: "14px",
    "&.Mui-focused": {
      color: theme.palette.primary.main,
    },
  },
  "& .MuiOutlinedInput-input": {
    padding: "8px 12px",
  },
}))

const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, variant = "default", ...props }, ref) => {
  return (
    <StyledTextField
      ref={ref}
      variant="outlined"
      fullWidth
      className={cn(
        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    />
  )
})
Input.displayName = "Input"

export { Input }
[V0_FILE]typescriptreact:file="components/ui/label.tsx"
"use client"

import * as React from "react"
import { InputLabel, type InputLabelProps } from "@mui/material"
import { cn } from "@/lib/utils"

const Label = React.forwardRef<HTMLLabelElement, InputLabelProps>(({ className, ...props }, ref) => (
  <InputLabel
    ref={ref}
    className={cn(
      "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
      className,
    )}
    {...props}
  />
))
Label.displayName = "Label"

export { Label }
[V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isEdit="true"
"use client"

import * as React from "react"
import { Avatar as MuiAvatar, type AvatarProps as MuiAvatarProps } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cn } from "@/lib/utils"

const StyledAvatar = styled(MuiAvatar)(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  color: "white",
  fontWeight: 500,
}))

interface AvatarProps extends MuiAvatarProps {}

const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>(({ className, ...props }, ref) => (
  <StyledAvatar
    ref={ref}
    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
    {...props}
  />
))
Avatar.displayName = "Avatar"

const AvatarImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
  ({ className, src, alt, ...props }, ref) => (
    <img
      ref={ref}
      src={src || "/placeholder.svg"}
      alt={alt}
      className={cn("aspect-square h-full w-full", className)}
      style={{ objectFit: "cover" }}
      {...props}
    />
  ),
)
AvatarImage.displayName = "AvatarImage"

const AvatarFallback = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
      {...props}
    />
  ),
)
AvatarFallback.displayName = "AvatarFallback"

export { Avatar, AvatarImage, AvatarFallback }
[V0_FILE]typescriptreact:file="components/ui/dropdown-menu.tsx" isFixed="true" isEdit="true" isQuickEdit="true"
"use client"

import * as React from "react"
import { Menu, MenuItem, type MenuProps, type MenuItemProps, Divider } from "@mui/material"
import { cn } from "@/lib/utils"

interface DropdownMenuProps {
  children: React.ReactNode
}

interface DropdownMenuTriggerProps {
  asChild?: boolean
  children: React.ReactNode
}

interface DropdownMenuContentProps extends Omit<MenuProps, "open" | "onClose"> {
  children: React.ReactNode
  align?: "start" | "center" | "end"
  sideOffset?: number
}

interface DropdownMenuItemProps extends MenuItemProps {
  asChild?: boolean
  inset?: boolean
}

const DropdownMenuContext = React.createContext<{
  open: boolean
  setOpen: (open: boolean) => void
  anchorEl: HTMLElement | null
  setAnchorEl: (el: HTMLElement | null) => void
}>({
  open: false,
  setOpen: () => {},
  anchorEl: null,
  setAnchorEl: () => {},
})

const DropdownMenu: React.FC<DropdownMenuProps> = ({ children }) => {
  const [open, setOpen] = React.useState(false)
  const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null)

return (
    <DropdownMenuContext.Provider value={{ open, setOpen, anchorEl, setAnchorEl }}>
      {children}
    </DropdownMenuContext.Provider>
  )
}

const DropdownMenuTrigger: React.FC<DropdownMenuTriggerProps> = ({ asChild, children }) => {
  const { setOpen, setAnchorEl } = React.useContext(DropdownMenuContext)

const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget)
    setOpen(true)
  }

if (asChild && React.isValidElement(children)) {
    return React.cloneElement(children, {
      onClick: handleClick,
    })
  }

return <div onClick={handleClick}>{children}</div>
}

const DropdownMenuContent: React.FC<DropdownMenuContentProps> = ({
  children,
  align = "start",
  sideOffset = 4,
  className,
  ...props
}) => {
  const { open, setOpen, anchorEl } = React.useContext(DropdownMenuContext)

const handleClose = () => {
    setOpen(false)
    // setAnchorEl is declared in DropdownMenu component
  }

const getAnchorOrigin = () => {
    switch (align) {
      case "end":
        return { vertical: "bottom" as const, horizontal: "right" as const }
      case "center":
        return { vertical: "bottom" as const, horizontal: "center" as const }
      default:
        return { vertical: "bottom" as const, horizontal: "left" as const }
    }
  }

const getTransformOrigin = () => {
    switch (align) {
      case "end":
        return { vertical: "top" as const, horizontal: "right" as const }
      case "center":
        return { vertical: "top" as const, horizontal: "center" as const }
      default:
        return { vertical: "top" as const, horizontal: "left" as const }
    }
  }

return (
    <Menu
      open={open}
      onClose={handleClose}
      anchorEl={anchorEl}
      anchorOrigin={getAnchorOrigin()}
      transformOrigin={getTransformOrigin()}
      className={cn(
        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
        className,
      )}
      {...props}
    >
      {children}
    </Menu>
  )
}

const DropdownMenuItem: React.FC<DropdownMenuItemProps> = ({ asChild, children, className, inset, ...props }) => {
  const { setOpen, setAnchorEl } = React.useContext(DropdownMenuContext)

const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
    setOpen(false)
    // setAnchorEl is declared in DropdownMenu component
    if (props.onClick) {
      props.onClick(event)
    }
  }

if (asChild && React.isValidElement(children)) {
    return React.cloneElement(children, {
      onClick: handleClick,
    })
  }

return (
    <MenuItem
      onClick={handleClick}
      className={cn(
        "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
        inset && "pl-8",
        className,
      )}
      {...props}
    >
      {children}
    </MenuItem>
  )
}

const DropdownMenuSeparator = React.forwardRef<HTMLHRElement, React.ComponentProps<typeof Divider>>(
  ({ className, ...props }, ref) => (
    <Divider ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
  ),
)
DropdownMenuSeparator.displayName = "DropdownMenuSeparator"

const DropdownMenuLabel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { inset?: boolean }>(
  ({ className, inset, ...props }, ref) => (
    <div ref={ref} className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)} {...props} />
  ),
)
DropdownMenuLabel.displayName = "DropdownMenuLabel"

export {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuLabel,
}
[V0_FILE]typescriptreact:file="components/ui/separator.tsx" isEdit="true"
"use client"

import * as React from "react"
import { Divider, type DividerProps } from "@mui/material"
import { cn } from "@/lib/utils"

interface SeparatorProps extends DividerProps {
  orientation?: "horizontal" | "vertical"
  decorative?: boolean
}

const Separator = React.forwardRef<HTMLHRElement, SeparatorProps>(
  ({ className, orientation = "horizontal", decorative, ...props }, ref) => (
    <Divider
      ref={ref}
      orientation={orientation}
      className={cn(
        "shrink-0 bg-border",
        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
        className,
      )}
      {...props}
    />
  ),
)
Separator.displayName = "Separator"

export { Separator }
[V0_FILE]typescriptreact:file="components/ui/badge.tsx"
"use client"
import { Chip, type ChipProps } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const badgeVariants = cva(
  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
  {
    variants: {
      variant: {
        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
        outline: "text-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

interface BadgeProps extends Omit<ChipProps, "variant">, VariantProps<typeof badgeVariants> {}

const StyledChip = styled(Chip)<BadgeProps>(({ theme, variant: customVariant }) => {
  const getVariantStyles = () => {
    switch (customVariant) {
      case "secondary":
        return {
          backgroundColor: theme.palette.grey[100],
          color: theme.palette.text.primary,
          border: "none",
        }
      case "destructive":
        return {
          backgroundColor: "#dc2626",
          color: "white",
          border: "none",
        }
      case "outline":
        return {
          backgroundColor: "transparent",
          color: theme.palette.text.primary,
          border: `1px solid ${theme.palette.divider}`,
        }
      default:
        return {
          backgroundColor: theme.palette.primary.main,
          color: "white",
          border: "none",
        }
    }
  }

return {
    ...getVariantStyles(),
    height: "22px",
    fontSize: "12px",
    fontWeight: 600,
    borderRadius: "9999px",
    "& .MuiChip-label": {
      padding: "0 10px",
    },
  }
})

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <StyledChip className={cn(badgeVariants({ variant }), className)} customVariant={variant} size="small" {...props} />
  )
}

export { Badge, badgeVariants }
[V0_FILE]typescriptreact:file="components/ui/switch.tsx"
"use client"

import * as React from "react"
import { Switch as MuiSwitch, type SwitchProps as MuiSwitchProps } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cn } from "@/lib/utils"

const StyledSwitch = styled(MuiSwitch)(({ theme }) => ({
  width: 44,
  height: 24,
  padding: 0,
  "& .MuiSwitch-switchBase": {
    padding: 0,
    margin: 2,
    transitionDuration: "300ms",
    "&.Mui-checked": {
      transform: "translateX(20px)",
      color: "#fff",
      "& + .MuiSwitch-track": {
        backgroundColor: theme.palette.primary.main,
        opacity: 1,
        border: 0,
      },
      "&.Mui-disabled + .MuiSwitch-track": {
        opacity: 0.5,
      },
    },
    "&.Mui-focusVisible .MuiSwitch-thumb": {
      color: theme.palette.primary.main,
      border: "6px solid #fff",
    },
    "&.Mui-disabled .MuiSwitch-thumb": {
      color: theme.palette.grey[100],
    },
    "&.Mui-disabled + .MuiSwitch-track": {
      opacity: 0.3,
    },
  },
  "& .MuiSwitch-thumb": {
    boxSizing: "border-box",
    width: 20,
    height: 20,
  },
  "& .MuiSwitch-track": {
    borderRadius: 24 / 2,
    backgroundColor: theme.palette.grey[400],
    opacity: 1,
    transition: theme.transitions.create(["background-color"], {
      duration: 500,
    }),
  },
}))

interface SwitchProps extends MuiSwitchProps {}

const Switch = React.forwardRef<HTMLInputElement, SwitchProps>(({ className, ...props }, ref) => (
  <StyledSwitch
    ref={ref}
    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-primary data-[state=unchecked]:bg-input",
      className,
    )}
    {...props}
  />
))
Switch.displayName = "Switch"

export { Switch }
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import { Tabs as MuiTabs, Tab as MuiTab } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cn } from "@/lib/utils"

const StyledTabs = styled(MuiTabs)(({ theme }) => ({
  "& .MuiTabs-indicator": {
    backgroundColor: theme.palette.primary.main,
    height: 2,
  },
}))

const StyledTab = styled(MuiTab)(({ theme }) => ({
  textTransform: "none",
  fontWeight: 500,
  fontSize: "14px",
  color: theme.palette.text.secondary,
  "&.Mui-selected": {
    color: theme.palette.primary.main,
  },
  "&:hover": {
    color: theme.palette.text.primary,
  },
}))

interface TabsContextType {
  value: string
  onValueChange: (value: string) => void
}

const TabsContext = React.createContext<TabsContextType | undefined>(undefined)

interface CustomTabsProps {
  defaultValue?: string
  value?: string
  onValueChange?: (value: string) => void
  className?: string
  children: React.ReactNode
}

const Tabs = React.forwardRef<HTMLDivElement, CustomTabsProps>(
  ({ defaultValue, value, onValueChange, className, children, ...props }, ref) => {
    const [internalValue, setInternalValue] = React.useState(defaultValue || "")
    const currentValue = value !== undefined ? value : internalValue

const handleChange = (newValue: string) => {
      if (value === undefined) {
        setInternalValue(newValue)
      }
      onValueChange?.(newValue)
    }

return (
      <TabsContext.Provider value={{ value: currentValue, onValueChange: handleChange }}>
        <div ref={ref} className={cn("w-full", className)} {...props}>
          {children}
        </div>
      </TabsContext.Provider>
    )
  },
)
Tabs.displayName = "Tabs"

const TabsList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, children, ...props }, ref) => {
    const context = React.useContext(TabsContext)
    if (!context) throw new Error("TabsList must be used within Tabs")

const { value, onValueChange } = context

const handleChange = (_: React.SyntheticEvent, newValue: string) => {
      onValueChange(newValue)
    }

return (
      <StyledTabs
        ref={ref}
        value={value}
        onChange={handleChange}
        className={cn(
          "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
          className,
        )}
        {...props}
      >
        {children}
      </StyledTabs>
    )
  },
)
TabsList.displayName = "TabsList"

const TabsTrigger = React.forwardRef<HTMLButtonElement, { value: string } & React.HTMLAttributes<HTMLButtonElement>>(
  ({ className, value, children, ...props }, ref) => (
    <StyledTab
      ref={ref}
      value={value}
      label={children}
      className={cn(
        "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
        className,
      )}
      {...props}
    />
  ),
)
TabsTrigger.displayName = "TabsTrigger"

const TabsContent = React.forwardRef<HTMLDivElement, { value: string } & React.HTMLAttributes<HTMLDivElement>>(
  ({ className, value, children, ...props }, ref) => {
    const context = React.useContext(TabsContext)
    if (!context) throw new Error("TabsContent must be used within Tabs")

const { value: currentValue } = context

if (value !== currentValue) return null

return (
      <div
        ref={ref}
        className={cn(
          "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
          className,
        )}
        {...props}
      >
        {children}
      </div>
    )
  },
)
TabsContent.displayName = "TabsContent"

export { Tabs, TabsList, TabsTrigger, TabsContent }
[V0_FILE]typescriptreact:file="components/ui/textarea.tsx"
"use client"

import * as React from "react"
import { TextField, type TextFieldProps } from "@mui/material"
import { styled } from "@mui/material/styles"
import { cn } from "@/lib/utils"

interface TextareaProps extends Omit<TextFieldProps, "variant" | "multiline"> {}

const StyledTextField = styled(TextField)(({ theme }) => ({
  "& .MuiOutlinedInput-root": {
    borderRadius: "6px",
    backgroundColor: theme.palette.background.paper,
    fontSize: "14px",
    "& fieldset": {
      borderColor: theme.palette.divider,
    },
    "&:hover fieldset": {
      borderColor: theme.palette.action.hover,
    },
    "&.Mui-focused fieldset": {
      borderColor: theme.palette.primary.main,
      borderWidth: "2px",
    },
  },
  "& .MuiInputLabel-root": {
    color: theme.palette.text.secondary,
    fontSize: "14px",
    "&.Mui-focused": {
      color: theme.palette.primary.main,
    },
  },
  "& .MuiOutlinedInput-input": {
    padding: "8px 12px",
  },
}))

const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
  return (
    <StyledTextField
      ref={ref}
      variant="outlined"
      multiline
      rows={4}
      fullWidth
      className={cn(
        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
        className,
      )}
      {...props}
    />
  )
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isFixed="true" isQuickEdit="true"
"use client"

import * as React from "react"
import { Alert, AlertTitle, type AlertProps } from "@mui/material"
import { styled } from "@mui/material/styles"
import { X } from "lucide-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive: "destructive border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
)

const StyledAlert = styled(Alert)<{ variant?: "default" | "destructive" }>(({ theme, variant }) => ({
  borderRadius: "6px",
  padding: "16px",
  ...(variant === "destructive" && {
    backgroundColor: "#dc2626",
    color: "white",
    border: "1px solid #dc2626",
  }),
}))

interface ToastProps extends Omit<AlertProps, "variant">, VariantProps<typeof toastVariants> {}

const Toast = React.forwardRef<HTMLDivElement, ToastProps>(({ className, variant, ...props }, ref) => {
  return <StyledAlert ref={ref} variant={variant} className={cn(toastVariants({ variant }), className)} {...props} />
})
Toast.displayName = "Toast"

const ToastAction = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
  ({ className, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
        className,
      )}
      {...props}
    />
  ),
)
ToastAction.displayName = "ToastAction"

const ToastClose = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
  ({ className, ...props }, ref) => (
    <button
      ref={ref}
      className={cn(
        "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
        className,
      )}
      toast-close=""
      {...props}
    >
      <X className="h-4 w-4" />
    </button>
  ),
)
ToastClose.displayName = "ToastClose"

const ToastTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <AlertTitle ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
  ),
)
ToastTitle.displayName = "ToastTitle"

const ToastDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => <div ref={ref} className={cn("text-sm opacity-90", className)} {...props} />,
)
ToastDescription.displayName = "ToastDescription"

export { Toast, ToastAction, ToastClose, ToastTitle, ToastDescription }
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
"use client"

import Header from "@/components/header"
import HeroSection from "@/components/hero-section"
import SportsSection from "@/components/sports-section"
import FeaturesSection from "@/components/features-section"
import TestimonialsSection from "@/components/testimonials-section"
import Footer from "@/components/footer"
import { Box } from "@mui/material"

export default function HomePage() {
  return (
    <Box sx={{ minHeight: "100vh", bgcolor: "background.default" }}>
      <Header />
      <main>
        <HeroSection />
        <SportsSection />
        <FeaturesSection />
        <TestimonialsSection />
      </main>
      <Footer />
    </Box>
  )
}
[V0_FILE]typescriptreact:file="components/sports-section.tsx" isEdit="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Trophy, Users, Clock, Star } from "lucide-react"
import Link from "next/link"
import { Box, Container, Typography, Grid } from "@mui/material"

const sports = [
  {
    id: "cricket",
    name: "Cricket",
    icon: "🏏",
    matches: 15,
    contests: 250,
    prize: "₹10 Lakhs",
    featured: true,
  },
  {
    id: "football",
    name: "Football",
    icon: "⚽",
    matches: 8,
    contests: 120,
    prize: "₹5 Lakhs",
    featured: false,
  },
  {
    id: "basketball",
    name: "Basketball",
    icon: "🏀",
    matches: 6,
    contests: 80,
    prize: "₹3 Lakhs",
    featured: false,
  },
  {
    id: "kabaddi",
    name: "Kabaddi",
    icon: "🤼",
    matches: 4,
    contests: 60,
    prize: "₹2 Lakhs",
    featured: false,
  },
]

export default function SportsSection() {
  return (
    <Box sx={{ py: { xs: 8, lg: 12 }, bgcolor: "background.default" }}>
      <Container maxWidth="lg">
        <Box sx={{ textAlign: "center", mb: 8 }}>
          <Typography
            variant="h2"
            component="h2"
            sx={{
              fontSize: { xs: "2rem", md: "3rem" },
              fontWeight: "bold",
              mb: 2,
              color: "text.primary",
            }}
          >
            Choose Your Sport
          </Typography>
          <Typography
            variant="h6"
            component="p"
            sx={{
              color: "text.secondary",
              maxWidth: "600px",
              mx: "auto",
            }}
          >
            Play fantasy sports across multiple games and win exciting prizes
          </Typography>
        </Box>

<Grid container spacing={3}>
          {sports.map((sport) => (
            <Grid item xs={12} sm={6} lg={3} key={sport.id}>
              <Card
                sx={{
                  height: "100%",
                  transition: "all 0.3s ease",
                  "&:hover": {
                    transform: "translateY(-4px)",
                    boxShadow: 3,
                  },
                  position: "relative",
                }}
              >
                {sport.featured && (
                  <Badge
                    variant="default"
                    sx={{
                      position: "absolute",
                      top: 12,
                      right: 12,
                      zIndex: 1,
                      bgcolor: "#16a34a",
                      color: "white",
                    }}
                  >
                    <Star size={12} style={{ marginRight: 4 }} />
                    Featured
                  </Badge>
                )}

<CardHeader sx={{ textAlign: "center", pb: 2 }}>
                  <Box
                    sx={{
                      fontSize: "3rem",
                      mb: 1,
                    }}
                  >
                    {sport.icon}
                  </Box>
                  <CardTitle sx={{ fontSize: "1.5rem", fontWeight: "bold" }}>{sport.name}</CardTitle>
                </CardHeader>

<CardContent sx={{ pt: 0 }}>
                  <Box sx={{ display: "flex", flexDirection: "column", gap: 2, mb: 3 }}>
                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                      <Clock size={16} color="#64748b" />
                      <Typography variant="body2" color="text.secondary">
                        {sport.matches} Live Matches
                      </Typography>
                    </Box>
                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                      <Users size={16} color="#64748b" />
                      <Typography variant="body2" color="text.secondary">
                        {sport.contests} Contests
                      </Typography>
                    </Box>
                    <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
                      <Trophy size={16} color="#16a34a" />
                      <Typography variant="body2" sx={{ color: "#16a34a", fontWeight: 600 }}>
                        Win up to {sport.prize}
                      </Typography>
                    </Box>
                  </Box>

<Box sx={{ textAlign: "center", mt: 8 }}>
          <Link href="/matches" style={{ textDecoration: "none" }}>
            <Button
              variant="outline"
              size="lg"
              sx={{
                borderColor: "#16a34a",
                color: "#16a34a",
                "&:hover": {
                  bgcolor: "#f0fdf4",
                },
              }}
            >
              View All Matches
            </Button>
          </Link>
        </Box>
      </Container>
    </Box>
  )
}
[V0_FILE]typescriptreact:file="components/features-section.tsx" isEdit="true"
"use client"

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Shield, Zap, Trophy, Users, CreditCard, Smartphone } from "lucide-react"
import { Box, Container, Typography, Grid } from "@mui/material"

const features = [
  {
    icon: Shield,
    title: "100% Safe & Secure",
    description: "Your money and personal information are completely safe with bank-level security.",
  },
  {
    icon: Zap,
    title: "Instant Withdrawals",
    description: "Get your winnings transferred to your account instantly without any delays.",
  },
  {
    icon: Trophy,
    title: "Mega Contests",
    description: "Participate in mega contests with prize pools worth crores of rupees.",
  },
  {
    icon: Users,
    title: "10M+ Users",
    description: "Join the largest fantasy sports community in India with millions of active users.",
  },
  {
    icon: CreditCard,
    title: "Easy Payments",
    description: "Multiple payment options including UPI, cards, and net banking for easy deposits.",
  },
  {
    icon: Smartphone,
    title: "Mobile Optimized",
    description: "Seamless experience across all devices with our mobile-first design approach.",
  },
]

export default function FeaturesSection() {
  return (
    <Box sx={{ py: { xs: 8, lg: 12 }, bgcolor: "grey.50" }}>
      <Container maxWidth="lg">
        <Box sx={{ textAlign: "center", mb: 8 }}>
          <Typography
            variant="h2"
            component="h2"
            sx={{
              fontSize: { xs: "2rem", md: "3rem" },
              fontWeight: "bold",
              mb: 2,
              color: "text.primary",
            }}
          >
            Why Choose FantasyPro?
          </Typography>
          <Typography
            variant="h6"
            component="p"
            sx={{
              color: "text.secondary",
              maxWidth: "600px",
              mx: "auto",
            }}
          >
            Experience the best fantasy sports platform with cutting-edge features and unmatched security
          </Typography>
        </Box>

<Grid container spacing={4}>
          {features.map((feature, index) => (
            <Grid item xs={12} md={6} lg={4} key={index}>
              <Card
                sx={{
                  height: "100%",
                  textAlign: "center",
                  transition: "all 0.3s ease",
                  "&:hover": {
                    transform: "translateY(-4px)",
                    boxShadow: 3,
                  },
                }}
              >
                <CardHeader sx={{ pb: 2 }}>
                  <Box
                    sx={{
                      display: "flex",
                      justifyContent: "center",
                      mb: 2,
                    }}
                  >
                    <Box
                      sx={{
                        p: 2,
                        borderRadius: "50%",
                        bgcolor: "#f0fdf4",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <feature.icon size={32} color="#16a34a" />
                    </Box>
                  </Box>
                  <CardTitle sx={{ fontSize: "1.25rem", fontWeight: "bold" }}>{feature.title}</CardTitle>
                </CardHeader>
                <CardContent sx={{ pt: 0 }}>
                  <Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.6 }}>
                    {feature.description}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>
    </Box>
  )
}
[V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isEdit="true"
"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Star } from "lucide-react"
import { Box, Container, Typography, Grid } from "@mui/material"

const testimonials = [
  {
    name: "Rahul Sharma",
    location: "Mumbai",
    avatar: "/placeholder.svg?height=60&width=60",
    rating: 5,
    comment:
      "Amazing platform! I've won over ₹50,000 in the last month playing cricket fantasy. The interface is smooth and withdrawals are instant.",
  },
  {
    name: "Priya Patel",
    location: "Delhi",
    avatar: "/placeholder.svg?height=60&width=60",
    rating: 5,
    comment:
      "Best fantasy app I've used. Great contests, fair play, and excellent customer support. Highly recommended for all fantasy sports lovers.",
  },
  {
    name: "Amit Kumar",
    location: "Bangalore",
    avatar: "/placeholder.svg?height=60&width=60",
    rating: 5,
    comment:
      "Love the variety of contests available. From small entry fees to mega contests, there's something for everyone. Won big in the IPL season!",
  },
  {
    name: "Sneha Reddy",
    location: "Hyderabad",
    avatar: "/placeholder.svg?height=60&width=60",
    rating: 5,
    comment:
      "Safe and secure platform with quick payouts. The app is user-friendly and I love the detailed player statistics provided.",
  },
  {
    name: "Vikash Singh",
    location: "Kolkata",
    avatar: "/placeholder.svg?height=60&width=60",
    rating: 5,
    comment:
      "Fantastic experience! The live match updates and scoring system is very accurate. Made some good money during the World Cup.",
  },
  {
    name: "Anjali Gupta",
    location: "Pune",
    avatar: "/placeholder.svg?height=60&width=60",
    rating: 5,
    comment:
      "Great platform for beginners. The how-to-play guides are very helpful. Started small and now I'm winning regularly in bigger contests.",
  },
]

export default function TestimonialsSection() {
  return (
    <Box sx={{ py: { xs: 8, lg: 12 }, bgcolor: "background.default" }}>
      <Container maxWidth="lg">
        <Box sx={{ textAlign: "center", mb: 8 }}>
          <Typography
            variant="h2"
            component="h2"
            sx={{
              fontSize: { xs: "2rem", md: "3rem" },
              fontWeight: "bold",
              mb: 2,
              color: "text.primary",
            }}
          >
            What Our Users Say
          </Typography>
          <Typography
            variant="h6"
            component="p"
            sx={{
              color: "text.secondary",
              maxWidth: "600px",
              mx: "auto",
            }}
          >
            Join millions of satisfied users who are winning big on FantasyPro
          </Typography>
        </Box>

<Grid container spacing={4}>
          {testimonials.map((testimonial, index) => (
            <Grid item xs={12} md={6} lg={4} key={index}>
              <Card
                sx={{
                  height: "100%",
                  transition: "all 0.3s ease",
                  "&:hover": {
                    transform: "translateY(-2px)",
                    boxShadow: 2,
                  },
                }}
              >
                <CardContent sx={{ p: 3 }}>
                  <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
                    <Avatar sx={{ width: 48, height: 48, mr: 2 }}>
                      <AvatarImage src={testimonial.avatar || "/placeholder.svg"} alt={testimonial.name} />
                      <AvatarFallback>{testimonial.name.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <Box>
                      <Typography variant="subtitle1" fontWeight="bold">
                        {testimonial.name}
                      </Typography>
                      <Typography variant="body2" color="text.secondary">
                        {testimonial.location}
                      </Typography>
                    </Box>
                  </Box>

<Box sx={{ display: "flex", mb: 2 }}>
                    {[...Array(testimonial.rating)].map((_, i) => (
                      <Star key={i} size={16} fill="#fbbf24" color="#fbbf24" />
                    ))}
                  </Box>

<Typography variant="body2" color="text.secondary" sx={{ lineHeight: 1.6 }}>
                    "{testimonial.comment}"
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          ))}
        </Grid>
      </Container>
    </Box>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true"
"use client"

import Link from "next/link"
import { Trophy, Facebook, Twitter, Instagram, Youtube } from "lucide-react"
import { Separator } from "@/components/ui/separator"
import { Box, Container, Typography, Grid } from "@mui/material"

const footerLinks = {
  company: [
    { name: "About Us", href: "/about" },
    { name: "How to Play", href: "/how-to-play" },
    { name: "Contact Us", href: "/contact" },
    { name: "Careers", href: "/careers" },
  ],
  legal: [
    { name: "Terms of Service", href: "/terms" },
    { name: "Privacy Policy", href: "/privacy" },
    { name: "Responsible Gaming", href: "/responsible-gaming" },
    { name: "Legality", href: "/legality" },
  ],
  support: [
    { name: "Help Center", href: "/help" },
    { name: "Download App", href: "/download" },
    { name: "System Status", href: "/status" },
    { name: "Bug Reports", href: "/bugs" },
  ],
}

const socialLinks = [
  { name: "Facebook", icon: Facebook, href: "https://facebook.com" },
  { name: "Twitter", icon: Twitter, href: "https://twitter.com" },
  { name: "Instagram", icon: Instagram, href: "https://instagram.com" },
  { name: "YouTube", icon: Youtube, href: "https://youtube.com" },
]

export default function Footer() {
  return (
    <Box component="footer" sx={{ bgcolor: "grey.900", color: "white", py: 8 }}>
      <Container maxWidth="lg">
        <Grid container spacing={4}>
          {/* Brand Section */}
          <Grid item xs={12} md={4}>
            <Box sx={{ display: "flex", alignItems: "center", mb: 2 }}>
              <Trophy size={32} color="#16a34a" />
              <Typography variant="h5" component="span" sx={{ ml: 1, fontWeight: "bold" }}>
                FantasyPro
              </Typography>
            </Box>
            <Typography variant="body2" sx={{ mb: 3, color: "grey.400", lineHeight: 1.6 }}>
              India's most trusted fantasy sports platform. Join millions of users and win real cash prizes by creating
              your dream team.
            </Typography>
            <Box sx={{ display: "flex", gap: 2 }}>
              {socialLinks.map((social) => (
                <Link key={social.name} href={social.href} style={{ color: "#9ca3af" }}>
                  <Box
                    sx={{
                      p: 1,
                      borderRadius: 1,
                      transition: "all 0.3s ease",
                      "&:hover": {
                        bgcolor: "grey.800",
                        color: "#16a34a",
                      },
                    }}
                  >
                    <social.icon size={20} />
                  </Box>
                </Link>
              ))}
            </Box>
          </Grid>

{/* Links Sections */}
          <Grid item xs={12} md={8}>
            <Grid container spacing={4}>
              <Grid item xs={12} sm={4}>
                <Typography variant="h6" sx={{ fontWeight: "bold", mb: 2 }}>
                  Company
                </Typography>
                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  {footerLinks.company.map((link) => (
                    <Link key={link.name} href={link.href} style={{ textDecoration: "none" }}>
                      <Typography
                        variant="body2"
                        sx={{
                          color: "grey.400",
                          "&:hover": {
                            color: "#16a34a",
                          },
                          transition: "color 0.3s ease",
                        }}
                      >
                        {link.name}
                      </Typography>
                    </Link>
                  ))}
                </Box>
              </Grid>

<Grid item xs={12} sm={4}>
                <Typography variant="h6" sx={{ fontWeight: "bold", mb: 2 }}>
                  Legal
                </Typography>
                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  {footerLinks.legal.map((link) => (
                    <Link key={link.name} href={link.href} style={{ textDecoration: "none" }}>
                      <Typography
                        variant="body2"
                        sx={{
                          color: "grey.400",
                          "&:hover": {
                            color: "#16a34a",
                          },
                          transition: "color 0.3s ease",
                        }}
                      >
                        {link.name}
                      </Typography>
                    </Link>
                  ))}
                </Box>
              </Grid>

<Grid item xs={12} sm={4}>
                <Typography variant="h6" sx={{ fontWeight: "bold", mb: 2 }}>
                  Support
                </Typography>
                <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
                  {footerLinks.support.map((link) => (
                    <Link key={link.name} href={link.href} style={{ textDecoration: "none" }}>
                      <Typography
                        variant="body2"
                        sx={{
                          color: "grey.400",
                          "&:hover": {
                            color: "#16a34a",
                          },
                          transition: "color 0.3s ease",
                        }}
                      >
                        {link.name}
                      </Typography>
                    </Link>
                  ))}
                </Box>
              </Grid>
            </Grid>
          </Grid>
        </Grid>

<Box
          sx={{
            display: "flex",
            flexDirection: { xs: "column", sm: "row" },
            justifyContent: "space-between",
            alignItems: "center",
            gap: 2,
          }}
        >
          <Typography variant="body2" color="grey.400">
            © 2024 FantasyPro. All rights reserved.
          </Typography>
          <Typography variant="body2" color="grey.400">
            Made with ❤️ in India
          </Typography>
        </Box>
      </Container>
    </Box>
  )
}</article></body></html>