import React, { useState, useEffect } from 'react'; import { Search, BookOpen, Users, MessageSquare, Award, Settings, Home, User, ChevronRight, Play, CheckCircle, Code, Globe, PenTool } from 'lucide-react'; const CoachingApp = () => { const [currentView, setCurrentView] = useState('home'); const [selectedBoard, setSelectedBoard] = useState('CBSE'); const [selectedClass, setSelectedClass] = useState('10'); const [selectedSubject, setSelectedSubject] = useState(''); const [selectedLanguage, setSelectedLanguage] = useState('Hindi + English'); const [currentQuestion, setCurrentQuestion] = useState(''); const [chatHistory, setChatHistory] = useState([]); const [isLoading, setIsLoading] = useState(false); const boards = ['CBSE', 'ICSE', 'NCERT', 'State Board']; const classes = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; const languages = ['Hindi + English', 'English Only', 'Hindi Only', 'Tamil', 'Telugu', 'Bengali', 'Marathi', 'Gujarati', 'Punjabi']; const subjects = { 'CBSE': { '1-5': ['Mathematics', 'English', 'Hindi', 'EVS', 'General Knowledge', 'Art & Craft'], '6-8': ['Mathematics', 'Science', 'Social Science', 'English', 'Hindi', 'Sanskrit', 'Computer Science'], '9-10': ['Mathematics', 'Science', 'Social Science', 'English', 'Hindi', 'Sanskrit', 'Computer Applications', 'Information Technology'], '11-12': ['Mathematics', 'Physics', 'Chemistry', 'Biology', 'English', 'Hindi', 'Computer Science', 'Information Practices', 'Economics', 'Business Studies', 'Accountancy'] }, 'ICSE': { '1-5': ['Mathematics', 'English', 'Hindi', 'EVS', 'Computer Studies', 'Art'], '6-8': ['Mathematics', 'Physics', 'Chemistry', 'Biology', 'English', 'Hindi', 'History', 'Geography', 'Computer Applications'], '9-10': ['Mathematics', 'Physics', 'Chemistry', 'Biology', 'English', 'Hindi', 'History & Civics', 'Geography', 'Computer Applications', 'Commercial Studies'], '11-12': ['Mathematics', 'Physics', 'Chemistry', 'Biology', 'English', 'Hindi', 'Computer Science', 'Economics', 'Commerce', 'Accounts'] }, 'NCERT': { '1-5': ['Mathematics', 'English', 'Hindi', 'Environmental Studies', 'Art Education'], '6-8': ['Mathematics', 'Science', 'Social Science', 'English', 'Hindi', 'Sanskrit'], '9-10': ['Mathematics', 'Science', 'Social Science', 'English', 'Hindi', 'Sanskrit', 'Information Technology'], '11-12': ['Mathematics', 'Physics', 'Chemistry', 'Biology', 'English', 'Hindi', 'Political Science', 'Economics', 'History', 'Geography'] }, 'State Board': { '1-5': ['Mathematics', 'English', 'Regional Language', 'Environmental Studies', 'Art'], '6-8': ['Mathematics', 'Science', 'Social Studies', 'English', 'Regional Language'], '9-10': ['Mathematics', 'Science', 'Social Studies', 'English', 'Regional Language', 'Computer Science'], '11-12': ['Mathematics', 'Physics', 'Chemistry', 'Biology', 'English', 'Regional Language', 'Computer Science'] } }; // Coding and blogging subjects const codingSubjects = [ 'Python Programming', 'Java Programming', 'C++ Programming', 'JavaScript', 'HTML/CSS', 'React.js', 'Node.js', 'Data Structures', 'Algorithms', 'Database Management', 'Web Development', 'Mobile App Development' ]; const bloggingSubjects = [ 'Content Writing', 'SEO Writing', 'Technical Writing', 'Creative Writing', 'Social Media Content', 'Email Marketing', 'Copywriting', 'Blog Strategy', 'WordPress', 'Digital Marketing' ]; const getSubjectsForClass = () => { const classNum = parseInt(selectedClass); if (classNum <= 5) return subjects[selectedBoard]['1-5'] || []; if (classNum <= 8) return subjects[selectedBoard]['6-8'] || []; if (classNum <= 10) return subjects[selectedBoard]['9-10'] || []; return subjects[selectedBoard]['11-12'] || []; }; const sampleQuestions = { 'Mathematics': [ "2x + 5 = 15 को हल करें / Solve 2x + 5 = 15", "एक वृत्त का क्षेत्रफल निकालें जिसकी त्रिज्या 7 सेमी है", "Find the area of a triangle with base 10cm and height 8cm" ], 'Science': [ "प्रकाश संश्लेषण क्या है? / What is photosynthesis?", "न्यूटन के गति के नियम समझाएं", "Explain the water cycle in detail" ], 'Python Programming': [ "Write a Python program to find factorial of a number", "Create a function to check if a number is prime", "Explain list comprehension with examples" ], 'Content Writing': [ "How to write engaging blog headlines?", "SEO friendly content कैसे लिखें?", "What are the key elements of good copywriting?" ] }; // Google AI API Configuration const GOOGLE_AI_API_KEY = "AIzaSyCN2UiAr_B2Me3qy3Tce5T-a12EWaLyPA8"; const GOOGLE_AI_API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${GOOGLE_AI_API_KEY}`; const generateStepByStepSolution = async (question, subject, language) => { try { // Create a detailed prompt for Google AI const prompt = ` You are an expert tutor for ${subject} subject. A student from ${selectedBoard} board, Class ${selectedClass} has asked a question in ${language}. Question: ${question} Please provide a detailed step-by-step solution in ${language} format. Requirements: 1. Break down the solution into clear, numbered steps 2. Use simple language appropriate for Class ${selectedClass} level 3. Include mathematical formulas or code examples where relevant 4. Provide a clear explanation at the end 5. If the language includes Hindi, provide bilingual explanations (Hindi + English) 6. For coding questions, include proper code syntax and comments 7. For content writing questions, provide practical examples and tips Format your response as JSON with this structure: { "steps": ["Step 1 explanation", "Step 2 explanation", ...], "explanation": "Overall concept explanation", "difficulty": "Easy/Medium/Hard", "subject_tips": "Additional tips for this subject" } `; const response = await fetch(GOOGLE_AI_API_URL, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ contents: [{ parts: [{ text: prompt }] }], generationConfig: { temperature: 0.7, topK: 40, topP: 0.95, maxOutputTokens: 1024, } }) }); if (!response.ok) { throw new Error(`API Error: ${response.status}`); } const data = await response.json(); const aiResponse = data.candidates[0].content.parts[0].text; // Try to parse JSON response, fallback to text parsing try { const parsedResponse = JSON.parse(aiResponse); return { steps: parsedResponse.steps || ["AI generated detailed solution"], explanation: parsedResponse.explanation || "Comprehensive explanation provided by AI", difficulty: parsedResponse.difficulty || "Medium", subject_tips: parsedResponse.subject_tips || "Keep practicing regularly!" }; } catch (parseError) { // Fallback: Parse the AI response as text and create structure const lines = aiResponse.split('\n').filter(line => line.trim()); const steps = lines.slice(0, Math.min(lines.length - 1, 6)); const explanation = lines[lines.length - 1] || "Solution provided by AI"; return { steps: steps.length > 0 ? steps : ["AI has provided a detailed solution for your question"], explanation: explanation, difficulty: "Medium", subject_tips: "Practice similar problems for better understanding!" }; } } catch (error) { console.error('Google AI API Error:', error); // Fallback to mock responses if API fails const fallbackResponses = { 'Hindi + English': { math: { steps: [ "दिया गया समीकरण को समझें / Understand the given equation", "चर को अलग करने के लिए संक्रियाएं करें / Perform operations to isolate variable", "दोनों तरफ से समान संख्या जोड़ें/घटाएं / Add/subtract same number from both sides", "गुणा/भाग करके उत्तर निकालें / Multiply/divide to get the answer", "उत्तर की जांच करें / Verify the answer" ], explanation: "गणित में हमेशा step-by-step approach अपनाएं। / Always use step-by-step approach in mathematics.", difficulty: "Medium", subject_tips: "नियमित अभ्यास से गणित में सुधार होता है! / Regular practice improves mathematics skills!" }, science: { steps: [ "विषय की परिभाषा समझें / Understand the concept definition", "मुख्य घटकों को पहचानें / Identify key components", "प्रक्रिया के चरणों को समझें / Understand process steps", "उदाहरण के साथ समझाएं / Explain with examples", "वास्तविक जीवन में उपयोग / Real-life applications" ], explanation: "विज्ञान में सिद्धांत और व्यावहारिक ज्ञान दोनों महत्वपूर्ण हैं। / Both theory and practical knowledge are important in science.", difficulty: "Medium", subject_tips: "प्रयोग और अवलोकन से विज्ञान बेहतर समझ आता है! / Science is better understood through experiments and observations!" }, coding: { steps: [ "समस्या का विश्लेषण करें / Analyze the problem", "एल्गोरिदम डिज़ाइन करें / Design the algorithm", "कोड की संरचना बनाएं / Structure the code", "कोड लिखें और टेस्ट करें / Write and test code", "अनुकूलन करें / Optimize the solution" ], explanation: "प्रोग्रामिंग में logical thinking और practice सबसे जरूरी है। / Logical thinking and practice are most important in programming.", difficulty: "Medium", subject_tips: "रोज़ाना coding practice करें और नए concepts सीखें! / Practice coding daily and learn new concepts!" } } }; // Determine response type based on subject let responseType = 'math'; if (subject.includes('Science') || subject.includes('Biology') || subject.includes('Physics') || subject.includes('Chemistry')) { responseType = 'science'; } else if (codingSubjects.some(cs => subject.includes(cs.split(' ')[0]))) { responseType = 'coding'; } return fallbackResponses[language]?.[responseType] || fallbackResponses['Hindi + English']['math']; } }; const handleQuestionSubmit = async () => { if (!currentQuestion.trim()) return; setIsLoading(true); try { const solution = await generateStepByStepSolution(currentQuestion, selectedSubject, selectedLanguage); setChatHistory(prev => [...prev, { question: currentQuestion, solution: solution, subject: selectedSubject, language: selectedLanguage, timestamp: new Date().toLocaleTimeString(), isAiGenerated: true }]); setCurrentQuestion(''); } catch (error) { console.error('Error generating solution:', error); // Show error message to user setChatHistory(prev => [...prev, { question: currentQuestion, solution: { steps: ["Sorry, there was an error generating the solution. Please try again."], explanation: "Technical error occurred. Please check your internet connection.", difficulty: "N/A", subject_tips: "Please try asking your question again." }, subject: selectedSubject, language: selectedLanguage, timestamp: new Date().toLocaleTimeString(), isAiGenerated: false, hasError: true }]); setCurrentQuestion(''); } finally { setIsLoading(false); } }; const renderHome = () => (

Smart Coaching App

सभी भाषाओं में सीखें • Learn in All Languages

{/* Language Selection */}

Choose Language

{/* Board & Class Selection */}

Select Board & Class

{/* Subject Categories */}
{/* Academic Subjects */}

📚 Academic Subjects

{getSubjectsForClass().map(subject => ( ))}
{/* Coding Subjects */}

💻 Programming & Coding

{codingSubjects.slice(0, 6).map(subject => ( ))}
{/* Blogging & Content */}

✍️ Content & Blogging

{bloggingSubjects.slice(0, 6).map(subject => ( ))}
{/* Quick Access Features */}

Daily Challenges

Solve & Earn Points

Study Groups

Learn Together

); const renderDoubtSection = () => (
{codingSubjects.some(cs => selectedSubject.includes(cs.split(' ')[0])) ? ( ) : bloggingSubjects.some(bs => selectedSubject.includes(bs.split(' ')[0])) ? ( ) : ( )}

{selectedSubject}

{selectedBoard} • Class {selectedClass} • {selectedLanguage}

{/* Question Input */}

{selectedLanguage.includes('Hindi') ? 'अपना सवाल पूछें • Ask Your Question' : 'Ask Your Question'}