import { useState, useRef } from "react"; const COLORS = { royalBlue: "#1a3a8f", royalBlueLight: "#2451c7", royalBlueDark: "#0f2260", gold: "#d4a017", goldLight: "#f0c040", goldDark: "#a07810", white: "#ffffff", black: "#0a0a0a", gray: "#1e1e2e", grayLight: "#2a2a3e", grayMid: "#3a3a54", textMuted: "#8888aa", }; // ─── CONTEST DATA ───────────────────────────────────────────────────────────── const initialContests = [ { id: 1, type: "testimonial", title: "Best Testimonial Video — Q2 2026", description: "Share your TAG Markets success story in a 2-minute video. Most inspiring story wins!", prize: "₹50,000 + Thailand Trip", deadline: "2026-06-30", status: "active", submissions: 48, coverGradient: "linear-gradient(135deg, #1a3a8f 0%, #2451c7 50%, #d4a017 100%)" }, { id: 2, type: "success_story", title: "Best Success Story — June", description: "Write your journey from Day 1 to your biggest achievement with TAG Markets.", prize: "₹25,000 Cash + Badge", deadline: "2026-06-25", status: "active", submissions: 31, coverGradient: "linear-gradient(135deg, #0f2260 0%, #1a3a8f 60%, #a07810 100%)" }, { id: 3, type: "transformation", title: "Best Transformation Story — June", description: "Show your Before & After journey with TAG Markets. Photos + written story required.", prize: "₹30,000 + Platinum Badge", deadline: "2026-06-28", status: "active", submissions: 24, coverGradient: "linear-gradient(135deg, #6b21a8 0%, #1a3a8f 60%, #d4a017 100%)" }, { id: 4, type: "team_builder", title: "Best Team Builder — June", description: "Auto-ranked by team growth, activity score, and training completion. Keep building!", prize: "₹75,000 + Dubai Trip", deadline: "2026-06-30", status: "active", submissions: 89, coverGradient: "linear-gradient(135deg, #d4a017 0%, #f0c040 40%, #1a3a8f 100%)" }, { id: 5, type: "social_influencer", title: "Best Social Media Influencer — June", description: "Points based on content posted, engagement, and reach across all platforms.", prize: "₹20,000 + Crown Badge", deadline: "2026-06-30", status: "active", submissions: 55, coverGradient: "linear-gradient(135deg, #e11d48 0%, #1a3a8f 60%, #d4a017 100%)" }, { id: 6, type: "fastest_qualifier", title: "Fastest Qualifier Contest", description: "Real-time rankings. First to hit qualifier targets wins. Clock is ticking!", prize: "₹40,000 + Special Badge", deadline: "2026-06-30", status: "active", submissions: 112, coverGradient: "linear-gradient(135deg, #047857 0%, #1a3a8f 60%, #d4a017 100%)" }, { id: 7, type: "top_recruiter", title: "Top Recruiter Contest — June", description: "Most affiliates added this month wins. Rankings update in real-time.", prize: "Dubai Trip + ₹1,00,000", deadline: "2026-06-30", status: "active", submissions: 112, coverGradient: "linear-gradient(135deg, #0f2260 0%, #2451c7 50%, #f0c040 100%)" }, { id: 8, type: "top_presenter", title: "Top Presenter Contest — June", description: "Most Zoom & one-to-one presentations conducted wins the crown.", prize: "₹30,000 + Crown Badge", deadline: "2026-06-30", status: "active", submissions: 77, coverGradient: "linear-gradient(135deg, #2451c7 0%, #0f2260 60%, #d4a017 100%)" }, ]; const leaderboardData = { testimonial: [ { rank: 1, name: "Priya Sharma", city: "Mumbai", score: 9.4, teamVotes: 142, publicVotes: 134, adminScore: 9.2, avatar: "PS", approved: true, winner: false }, { rank: 2, name: "Rahul Verma", city: "Delhi", score: 8.9, teamVotes: 110, publicVotes: 120, adminScore: 8.7, avatar: "RV", approved: true, winner: false }, { rank: 3, name: "Anita Patel", city: "Ahmedabad", score: 8.6, teamVotes: 98, publicVotes: 107, adminScore: 8.4, avatar: "AP", approved: true, winner: false }, { rank: 4, name: "Suresh Kumar", city: "Bangalore", score: 8.1, teamVotes: 80, publicVotes: 90, adminScore: 7.9, avatar: "SK", approved: true, winner: false }, { rank: 5, name: "Meera Nair", city: "Kochi", score: 7.8, teamVotes: 70, publicVotes: 78, adminScore: 7.6, avatar: "MN", approved: false, winner: false }, ], success_story: [ { rank: 1, name: "Arjun Singh", city: "Jaipur", score: 9.7, teamVotes: 180, publicVotes: 160, adminScore: 9.5, avatar: "AS", approved: true, winner: false }, { rank: 2, name: "Kavya Reddy", city: "Hyderabad", score: 9.1, teamVotes: 150, publicVotes: 145, adminScore: 8.9, avatar: "KR", approved: true, winner: false }, { rank: 3, name: "Deepak Joshi", city: "Pune", score: 8.8, teamVotes: 130, publicVotes: 120, adminScore: 8.6, avatar: "DJ", approved: true, winner: false }, { rank: 4, name: "Sneha Gupta", city: "Chennai", score: 8.3, teamVotes: 100, publicVotes: 110, adminScore: 8.0, avatar: "SG", approved: true, winner: false }, { rank: 5, name: "Vijay Malhotra", city: "Lucknow", score: 7.9, teamVotes: 85, publicVotes: 92, adminScore: 7.7, avatar: "VM", approved: false, winner: false }, ], transformation: [ { rank: 1, name: "Rekha Bose", city: "Kolkata", score: 9.5, teamVotes: 165, publicVotes: 148, adminScore: 9.3, avatar: "RB", approved: true, winner: false }, { rank: 2, name: "Karan Mehta", city: "Surat", score: 9.0, teamVotes: 140, publicVotes: 132, adminScore: 8.8, avatar: "KM", approved: true, winner: false }, { rank: 3, name: "Pooja Desai", city: "Vadodara", score: 8.5, teamVotes: 115, publicVotes: 108, adminScore: 8.2, avatar: "PD", approved: true, winner: false }, { rank: 4, name: "Arun Nair", city: "Trivandrum", score: 8.0, teamVotes: 90, publicVotes: 95, adminScore: 7.8, avatar: "AN", approved: false, winner: false }, { rank: 5, name: "Sonal Jain", city: "Indore", score: 7.6, teamVotes: 72, publicVotes: 80, adminScore: 7.4, avatar: "SJ", approved: false, winner: false }, ], team_builder: [ { rank: 1, name: "Rajesh Pandey", city: "Varanasi", avatar: "RP", teamGrowth: 47, activityScore: 980, trainingPct: 95, totalScore: 2210, winner: false, approved: true }, { rank: 2, name: "Sunita Yadav", city: "Patna", avatar: "SY", teamGrowth: 39, activityScore: 870, trainingPct: 88, totalScore: 1930, winner: false, approved: true }, { rank: 3, name: "Anil Bhatt", city: "Surat", avatar: "AB", teamGrowth: 34, activityScore: 810, trainingPct: 82, totalScore: 1740, winner: false, approved: true }, { rank: 4, name: "Pooja Tiwari", city: "Indore", avatar: "PT", teamGrowth: 28, activityScore: 720, trainingPct: 78, totalScore: 1480, winner: false, approved: true }, { rank: 5, name: "Manoj Saxena", city: "Bhopal", avatar: "MS", teamGrowth: 22, activityScore: 640, trainingPct: 70, totalScore: 1220, winner: false, approved: true }, ], social_influencer: [ { rank: 1, name: "Nisha Kapoor", city: "Mumbai", avatar: "NK", postsCount: 48, engagement: "12.4%", reach: "1.2L", totalScore: 9420, winner: false, approved: true }, { rank: 2, name: "Rohan Das", city: "Bangalore", avatar: "RD", postsCount: 41, engagement: "10.8%", reach: "98K", totalScore: 8100, winner: false, approved: true }, { rank: 3, name: "Preethi Raj", city: "Chennai", avatar: "PR", postsCount: 36, engagement: "9.1%", reach: "74K", totalScore: 6800, winner: false, approved: true }, { rank: 4, name: "Vikram Rao", city: "Hyderabad", avatar: "VR", postsCount: 30, engagement: "8.4%", reach: "61K", totalScore: 5500, winner: false, approved: true }, { rank: 5, name: "Asha Singh", city: "Jaipur", avatar: "AS2", postsCount: 24, engagement: "7.2%", reach: "48K", totalScore: 4200, winner: false, approved: true }, ], fastest_qualifier: [ { rank: 1, name: "Neha Kapoor", city: "Chandigarh", avatar: "NK2", daysToQualify: 4, qualifiedOn: "Jun 2", totalScore: 9800, winner: false, approved: true }, { rank: 2, name: "Sanjay Dubey", city: "Nagpur", avatar: "SD", daysToQualify: 6, qualifiedOn: "Jun 4", totalScore: 9400, winner: false, approved: true }, { rank: 3, name: "Rekha Mishra", city: "Agra", avatar: "RM", daysToQualify: 8, qualifiedOn: "Jun 6", totalScore: 8900, winner: false, approved: true }, { rank: 4, name: "Harish Tomar", city: "Jodhpur", avatar: "HT", daysToQualify: 10, qualifiedOn: "Jun 8", totalScore: 8300, winner: false, approved: true }, { rank: 5, name: "Usha Chandra", city: "Mysore", avatar: "UC", daysToQualify: 12, qualifiedOn: "Jun 10", totalScore: 7700, winner: false, approved: true }, ], top_recruiter: [ { rank: 1, name: "Rajesh Pandey", city: "Varanasi", avatar: "RP", affiliates: 47, winner: false, approved: true }, { rank: 2, name: "Sunita Yadav", city: "Patna", avatar: "SY", affiliates: 39, winner: false, approved: true }, { rank: 3, name: "Anil Bhatt", city: "Surat", avatar: "AB", affiliates: 34, winner: false, approved: true }, { rank: 4, name: "Pooja Tiwari", city: "Indore", avatar: "PT", affiliates: 28, winner: false, approved: true }, { rank: 5, name: "Manoj Saxena", city: "Bhopal", avatar: "MS", affiliates: 22, winner: false, approved: true }, ], top_presenter: [ { rank: 1, name: "Neha Kapoor", city: "Chandigarh", avatar: "NK", presentations: 89, winner: false, approved: true }, { rank: 2, name: "Sanjay Dubey", city: "Nagpur", avatar: "SD", presentations: 74, winner: false, approved: true }, { rank: 3, name: "Rekha Mishra", city: "Agra", avatar: "RM", presentations: 68, winner: false, approved: true }, { rank: 4, name: "Harish Tomar", city: "Jodhpur", avatar: "HT", presentations: 55, winner: false, approved: true }, { rank: 5, name: "Usha Chandra", city: "Mysore", avatar: "UC", presentations: 49, winner: false, approved: true }, ], }; // Video Testimonial Center entries const testimonialVideos = [ { id: 1, name: "Priya Sharma", city: "Mumbai", avatar: "PS", title: "From Housewife to Diamond Leader", duration: "2:14", likes: 342, comments: 28, rating: 4.8, shares: 56, approved: true, views: 1240 }, { id: 2, name: "Rahul Verma", city: "Delhi", avatar: "RV", title: "₹0 to ₹1.2L/Month in 9 Months", duration: "1:58", likes: 287, comments: 19, rating: 4.6, shares: 41, approved: true, views: 980 }, { id: 3, name: "Anita Patel", city: "Ahmedabad", avatar: "AP", title: "My TAG Markets Journey — Real Results", duration: "2:31", likes: 251, comments: 15, rating: 4.5, shares: 33, approved: true, views: 840 }, { id: 4, name: "Suresh Kumar", city: "Bangalore", avatar: "SK", title: "How I Built a Team of 200+", duration: "2:02", likes: 198, comments: 12, rating: 4.3, shares: 27, approved: false, views: 0 }, ]; const typeConfig = { testimonial: { label: "Testimonial Video", icon: "🎬", color: "#2451c7", autoRanked: false }, success_story: { label: "Success Story", icon: "✍️", color: "#1a3a8f", autoRanked: false }, transformation: { label: "Transformation Story", icon: "🔄", color: "#6b21a8", autoRanked: false }, team_builder: { label: "Best Team Builder", icon: "🏗️", color: "#d4a017", autoRanked: true }, social_influencer: { label: "Social Media Influencer",icon: "📱", color: "#e11d48", autoRanked: true }, fastest_qualifier: { label: "Fastest Qualifier", icon: "⚡", color: "#047857", autoRanked: true }, top_recruiter: { label: "Top Recruiter", icon: "🏆", color: "#d4a017", autoRanked: true }, top_presenter: { label: "Top Presenter", icon: "🎤", color: "#2451c7", autoRanked: true }, }; const rankColors = ["#d4a017","#9e9e9e","#cd7f32","#8888aa","#8888aa"]; const rankIcons = ["👑","🥈","🥉","",""]; const PERIODS = ["daily","weekly","monthly","quarterly"]; // ─── SHARED UI COMPONENTS ──────────────────────────────────────────────────── function GlowButton({ children, onClick, variant="primary", style={}, small=false }) { return ( ); } function Avatar({ initials, size=44, rank }) { const bg = rank ? rankColors[rank-1] : COLORS.royalBlue; return (
{initials}
); } function StarRating({ value, onChange, size=16 }) { const [hover, setHover] = useState(0); return (
{[1,2,3,4,5].map(s => ( onChange&&onChange(s)} onMouseEnter={()=>onChange&&setHover(s)} onMouseLeave={()=>onChange&&setHover(0)} style={{ fontSize:size, cursor:onChange?"pointer":"default", color:(hover||value)>=s ? COLORS.gold : "#444466", transition:"color 0.15s" }}>★ ))}
); } function ApprovalBadge({ approved }) { return ( {approved ? "✓ Approved" : "⏳ Pending"} ); } function WinnerBadge() { return ( 👑 WINNER ); } // ─── LEADERBOARD ROW ──────────────────────────────────────────────────────── function LeaderboardRow({ entry, type, isAdmin, onSelectWinner }) { const isTop3 = entry.rank <= 3; const isAutoRanked = typeConfig[type]?.autoRanked; const subLabel = () => { if (type==="team_builder") return `${entry.teamGrowth} members · Score ${entry.totalScore}`; if (type==="social_influencer") return `${entry.postsCount} posts · ${entry.engagement} eng · ${entry.reach} reach`; if (type==="fastest_qualifier") return `Qualified in ${entry.daysToQualify} days (${entry.qualifiedOn})`; if (type==="top_recruiter") return `${entry.affiliates} affiliates`; if (type==="top_presenter") return `${entry.presentations} presentations`; if (entry.score) return `Score ${entry.score}`; return ""; }; const voteBreakdown = (!isAutoRanked && entry.teamVotes) ? (
👥 Team {entry.teamVotes} 🌍 Public {entry.publicVotes} ⭐ Admin {entry.adminScore}
) : null; return (
{rankIcons[entry.rank-1]||entry.rank}
{entry.name} {entry.winner && } {!isAutoRanked && }
{entry.city}
{subLabel()}
{voteBreakdown}
{isAdmin && !entry.winner && ( onSelectWinner(entry.rank)}> 🏆 Select Winner )}
); } // ─── SUBMISSION MODAL ──────────────────────────────────────────────────────── function SubmissionModal({ contest, onClose }) { const [form, setForm] = useState({ title:"", description:"", videoFile:"", imageFile:"", beforeFile:"", afterFile:"" }); const [rating, setRating] = useState(0); const [submitted, setSubmitted] = useState(false); const [loading, setLoading] = useState(false); const videoRef = useRef(); const imgRef = useRef(); const beforeRef = useRef(); const afterRef = useRef(); if (!contest) return null; const cfg = typeConfig[contest.type]; const isAuto = cfg?.autoRanked; const handleSubmit = () => { setLoading(true); setTimeout(()=>{ setLoading(false); setSubmitted(true); }, 1800); }; return (
e.target===e.currentTarget&&onClose()}>
{/* Header */}
{cfg.icon} SUBMIT ENTRY
{contest.title}
{submitted ? (
🎉
Entry Submitted!
Your submission is pending admin approval.
You'll be notified once it's live on the leaderboard.
Close
) : isAuto ? (
{cfg.icon}
Auto-Tracked Contest
{contest.type==="team_builder" && "Rankings auto-calculated from: Team Growth, Activity Score, and Training Completion %."} {contest.type==="social_influencer" && "Points auto-tracked from: Content Posted, Engagement Rate, and Platform Reach."} {contest.type==="fastest_qualifier" && "Rankings update in real-time as members hit qualifier targets. Keep logging your daily activity!"} {contest.type==="top_recruiter" && "Ranked by total affiliates added this month from your daily reports."} {contest.type==="top_presenter" && "Ranked by total presentations conducted this month from your daily activity tracker."}
YOUR CURRENT RANKING
#14
Keep going — top 3 wins!
View Leaderboard
) : ( <> {/* Title */} setForm(f=>({...f,title:v}))} placeholder={contest.type==="testimonial"?"E.g., My Journey to Diamond Leader": contest.type==="transformation"?"E.g., 6 Months — Before & After":"E.g., From Zero to ₹1L/month"} /> {/* Description / Story */} setForm(f=>({...f,description:v}))} placeholder={contest.type==="success_story"?"Write your complete journey here — be specific and inspiring...": contest.type==="transformation"?"Describe your transformation in detail. What changed? How did TAG Markets help?":"Brief description..."} rows={contest.type==="success_story"?8:4} /> {/* Video Upload for testimonial */} {contest.type==="testimonial" && ( videoRef.current.click()} accept="video/*" onFile={name=>setForm(f=>({...f,videoFile:name}))} /> )} {/* Before / After Images for transformation */} {contest.type==="transformation" && (
beforeRef.current.click()} accept="image/*" onFile={name=>setForm(f=>({...f,beforeFile:name}))} compact /> afterRef.current.click()} accept="image/*" onFile={name=>setForm(f=>({...f,afterFile:name}))} compact />
)} {/* Optional image for success story */} {contest.type==="success_story" && ( imgRef.current.click()} accept="image/*" onFile={name=>setForm(f=>({...f,imageFile:name}))} /> )} {/* Customer Rating (testimonial) */} {contest.type==="testimonial" && (
)} {loading ? "Submitting..." : "🚀 Submit My Entry"}
Submissions are reviewed by admin before going live on the leaderboard
)}
); } function FieldInput({ label, value, onChange, placeholder }) { return (
onChange(e.target.value)} placeholder={placeholder} style={{ width:"100%",background:COLORS.grayLight,border:`1px solid #ffffff22`, borderRadius:10,padding:"12px 16px",color:COLORS.white,fontSize:14, fontFamily:"inherit",boxSizing:"border-box",outline:"none" }} />
); } function FieldTextarea({ label, value, onChange, placeholder, rows=4 }) { return (