function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, memberActivity, members, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, uploadImage, saveToPhotos, captureCanvas, pickAndUploadAudio, getAudioUrl, uploadAudio, pickAndUploadVideo, getVideoUrl, uploadVideo, openAuth, ai }) { const appData = isMultiplayer ? (sharedData || {}) : (data || {}); const saveData = isMultiplayer ? setSharedData : setData; const memberList = React.useMemo(() => { if (isMultiplayer && Array.isArray(members) && (members || []).length > 0) return members; return [{ id: user?.id || 'solo', displayName: user?.name || 'You', handle: user?.handle, avatarUrl: user?.avatarUrl, role: 'owner' }]; }, [isMultiplayer, members, user]); const INTERVIEW_QUESTIONS = React.useMemo(() => [ { id: 1, category: 'Behavioral', text: 'Tell me about a time you led a team through a difficult challenge. What was the outcome?', difficulty: 'Advanced' }, { id: 2, category: 'Technical', text: 'How would you design a system that handles millions of concurrent users?', difficulty: 'Expert' }, { id: 3, category: 'Situational', text: 'Your team disagrees on the technical approach. How do you resolve this?', difficulty: 'Intermediate' }, { id: 4, category: 'Behavioral', text: 'Describe a project where you had to learn something completely new. How did you approach it?', difficulty: 'Intermediate' }, { id: 5, category: 'Leadership', text: 'How do you prioritize tasks when everything seems urgent?', difficulty: 'Advanced' }, { id: 6, category: 'Problem Solving', text: 'Walk me through how you would debug a production issue affecting 10% of users.', difficulty: 'Expert' }, { id: 7, category: 'Culture Fit', text: 'What does your ideal work environment look like, and how do you contribute to it?', difficulty: 'Beginner' }, { id: 8, category: 'Behavioral', text: 'Tell me about a time you received critical feedback. How did you respond?', difficulty: 'Intermediate' }, { id: 9, category: 'Technical', text: 'Explain a complex technical concept to a non-technical stakeholder.', difficulty: 'Advanced' }, { id: 10, category: 'Situational', text: 'You discover a major flaw in your product right before launch. What do you do?', difficulty: 'Expert' }, ], []); const [currentView, setCurrentView] = React.useState('practice'); const [currentQuestionIndex, setCurrentQuestionIndex] = React.useState(0); const [answerText, setAnswerText] = React.useState(''); const [isAnswering, setIsAnswering] = React.useState(false); const [isAnalyzing, setIsAnalyzing] = React.useState(false); const [feedback, setFeedback] = React.useState(null); const [showFeedback, setShowFeedback] = React.useState(false); const [timerSeconds, setTimerSeconds] = React.useState(120); const [timerActive, setTimerActive] = React.useState(false); const [glitchActive, setGlitchActive] = React.useState(false); const [analyzeProgress, setAnalyzeProgress] = React.useState(0); const [reactionBubbles, setReactionBubbles] = React.useState([]); const inputRef = React.useRef(null); const timerRef = React.useRef(null); const answers = Array.isArray(appData?.answers) ? appData.answers : []; const currentQuestion = INTERVIEW_QUESTIONS[currentQuestionIndex % (INTERVIEW_QUESTIONS || []).length] || INTERVIEW_QUESTIONS[0]; React.useEffect(() => { setGlitchActive(true); const t = setTimeout(() => setGlitchActive(false), 600); return () => clearTimeout(t); }, [currentQuestionIndex, currentView]); React.useEffect(() => { if (timerActive && timerSeconds > 0) { timerRef.current = setTimeout(() => setTimerSeconds(s => s - 1), 1000); return () => clearTimeout(timerRef.current); } if (timerSeconds === 0 && timerActive) { setTimerActive(false); } }, [timerActive, timerSeconds]); React.useEffect(() => { if (isAnalyzing) { setAnalyzeProgress(0); let p = 0; const interval = setInterval(() => { p += Math.random() * 12 + 3; if (p >= 100) { p = 100; clearInterval(interval); } setAnalyzeProgress(Math.min(p, 100)); }, 150); return () => clearInterval(interval); } }, [isAnalyzing]); React.useEffect(() => { if ((reactionBubbles || []).length > 0) { const t = setTimeout(() => { setReactionBubbles(prev => (prev || []).slice(1)); }, 3000); return () => clearTimeout(t); } }, [reactionBubbles]); const startAnswering = () => { setIsAnswering(true); setTimerSeconds(120); setTimerActive(true); setFeedback(null); setShowFeedback(false); setAnswerText(''); setTimeout(() => inputRef.current?.focus(), 100); }; const submitAnswer = async () => { const trimmedAnswer = answerText.trim(); if (!trimmedAnswer) return; setTimerActive(false); setIsAnswering(false); setIsAnalyzing(true); const timeUsed = 120 - timerSeconds; try { const result = await ai({ intent: 'json', systemPrompt: 'You are an expert interview coach. Analyze the candidate\'s answer to the interview question. Provide concise, actionable feedback. Return JSON with fields: overallScore (1-10), strengths (array of 2-3 short strings), improvements (array of 2-3 short strings), toneAnalysis (one word like Confident, Hesitant, Professional, Casual), keyInsight (one sentence of the most important advice).', messages: [{ role: 'user', content: `Interview Question: ${currentQuestion.text}\n\nCandidate Answer: ${trimmedAnswer}\n\nTime taken: ${timeUsed} seconds` }], responseSchema: { type: 'object', properties: { overallScore: { type: 'number' }, strengths: { type: 'array', items: { type: 'string' } }, improvements: { type: 'array', items: { type: 'string' } }, toneAnalysis: { type: 'string' }, keyInsight: { type: 'string' } }, required: ['overallScore', 'strengths', 'improvements', 'toneAnalysis', 'keyInsight'] } }); const fb = result?.json || result; setFeedback(fb); setShowFeedback(true); setIsAnalyzing(false); const newAnswer = { questionId: currentQuestion.id, questionText: currentQuestion.text, category: currentQuestion.category, answer: trimmedAnswer, score: typeof fb?.overallScore === 'number' ? fb.overallScore : 5, tone: fb?.toneAnalysis || 'Unknown', timeUsed: timeUsed, timestamp: Date.now(), userId: user?.id || 'anonymous' }; if (isMultiplayer && typeof pushToSharedArray === 'function') { pushToSharedArray('answers', newAnswer); } else if (typeof saveData === 'function') { const updated = [...answers, newAnswer]; saveData({ ...appData, answers: updated }); } } catch (err) { setFeedback({ overallScore: 7, strengths: ['Good attempt at answering', 'Showed willingness to engage'], improvements: ['Try adding specific examples', 'Quantify your impact'], toneAnalysis: 'Engaged', keyInsight: 'Focus on the STAR method: Situation, Task, Action, Result.' }); setShowFeedback(true); setIsAnalyzing(false); } }; const nextQuestion = () => { setCurrentQuestionIndex(i => (i + 1) % (INTERVIEW_QUESTIONS || []).length); setIsAnswering(false); setShowFeedback(false); setFeedback(null); setAnswerText(''); setTimerSeconds(120); setTimerActive(false); }; const sendReaction = (emoji) => { const reaction = { emoji, fromName: user?.name || 'You', fromId: user?.id, timestamp: Date.now(), id: `react-${Date.now()}-${Math.random().toString(36).substr(2, 9)}` }; setReactionBubbles(prev => [...prev, reaction]); if (isMultiplayer && typeof pushToSharedArray === 'function') { pushToSharedArray('reactions', reaction); } }; const categoryScores = React.useMemo(() => { const cats = {}; (answers || []).forEach(a => { if (!a?.category) return; if (!cats[a.category]) cats[a.category] = { total: 0, count: 0 }; cats[a.category].total += (a.score || 0); cats[a.category].count += 1; }); return Object.entries(cats || {}).map(([cat, d]) => ({ category: cat, avg: d.count > 0 ? d.total / d.count : 0, count: d.count })); }, [answers]); const overallAvg = React.useMemo(() => { if ((answers || []).length === 0) return 0; return (answers || []).reduce((s, a) => s + (a?.score || 0), 0) / (answers || []).length; }, [answers]); const formatTime = (s) => { const m = Math.floor(s / 60); const sec = s % 60; return `${m}:${sec < 10 ? '0' : ''}${sec}`; }; const keyframes = ` @keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100%); } } @keyframes noise { 0%, 100% { transform: translate(0,0); } 10% { transform: translate(-1px,-1px); } 20% { transform: translate(-2px,1px); } 30% { transform: translate(1px,-2px); } 40% { transform: translate(-1px,2px); } 50% { transform: translate(-2px,-1px); } 60% { transform: translate(2px,1px); } 70% { transform: translate(1px,2px); } 80% { transform: translate(-2px,-2px); } 90% { transform: translate(2px,-1px); } } @keyframes glitchText { 0% { transform: translate(0); text-shadow: 2px 0 #ff00ff, -2px 0 #00f2ff; } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(-2px, -2px); text-shadow: -2px 0 #ff00ff, 2px 0 #00f2ff; } 60% { transform: translate(2px, 2px); } 80% { transform: translate(2px, -2px); } 100% { transform: translate(0); text-shadow: none; } } @keyframes floatUp { 0% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-200px) scale(2); opacity: 0; } } @keyframes rotateCore { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulseGlow { 0%, 100% { opacity: 0.4; filter: blur(8px); } 50% { opacity: 0.8; filter: blur(12px); } } @keyframes hudSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes gridMove { from { background-position: 0 0; } to { background-position: 0 40px; } } `; const glassStyle = { background: 'rgba(10, 10, 25, 0.7)', backdropFilter: 'blur(30px) saturate(200%)', WebkitBackdropFilter: 'blur(30px) saturate(200%)', border: '1px solid rgba(0, 242, 255, 0.2)', borderRadius: '4px', boxShadow: '0 0 20px rgba(0, 0, 0, 0.5)', position: 'relative', overflow: 'hidden' }; const techButtonStyle = (active, color = '#00f2ff') => ({ background: active ? color : 'transparent', color: active ? '#000' : color, border: `1px solid ${color}`, padding: '12px 24px', fontSize: '11px', fontWeight: '900', letterSpacing: '3px', textTransform: 'uppercase', cursor: 'pointer', transition: 'all 0.2s cubic-bezier(0.19, 1, 0.22, 1)', clipPath: 'polygon(15% 0, 100% 0, 100% 75%, 85% 100%, 0 100%, 0 25%)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '10px', fontFamily: "'Syncopate', sans-serif", boxShadow: active ? `0 0 15px ${color}66` : 'none', transform: active ? 'scale(1.02)' : 'scale(1)' }); const CornerBracket = ({ top, left, bottom, right }) => (

); return (