{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'}
        
        
           setCurrentQuestion(e.target.value)}
            placeholder={`${selectedLanguage.includes('Hindi') ? 'यहाँ अपना सवाल लिखें... • ' : ''}Type your question here... (${selectedLanguage} supported)`}
            className="w-full p-3 border border-gray-300 rounded-lg resize-none h-24 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
          />
          <button
            onClick={handleQuestionSubmit}
            disabled={isLoading || !currentQuestion.trim()}
            className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-3 rounded-lg font-semibold hover:from-blue-600 hover:to-purple-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
          >
            {isLoading ? (
              selectedLanguage.includes('Hindi') ? 'AI समाधान तैयार कर रहा है... • AI Solving...' : 'AI Solving...'
            ) : (
              selectedLanguage.includes('Hindi') ? 'चरणबद्ध समाधान पाएं • Get Step-by-Step Solution' : 'Get Step-by-Step Solution'
            )}
          </button>
        </div>
      </div>

      {/* Sample Questions */}
      <div className="bg-gray-50 rounded-lg p-4">
        <h4 className="font-semibold mb-3">
          {selectedLanguage.includes('Hindi') ? 'नमूना प्रश्न • Sample Questions:' : 'Sample Questions:'}
        </h4>
        <div className="space-y-2">
          {(sampleQuestions[selectedSubject] || sampleQuestions['Mathematics']).map((q, index) => (
            <button
              key={index}
              onClick={() => setCurrentQuestion(q)}
              className="w-full text-left p-3 bg-white rounded-lg border hover:border-blue-300 hover:shadow-sm transition-all text-sm"
            >
              {q}
            </button>
          ))}
        </div>
      </div>

      {/* Chat History */}
      {chatHistory.length > 0 && (
        <div className="space-y-4">
          <h3 className="font-semibold">
            {selectedLanguage.includes('Hindi') ? 'आपके प्रश्न और समाधान • Your Questions & Solutions' : 'Your Questions & Solutions'}
          </h3>
          {chatHistory.map((chat, index) => (
            <div key={index} className="bg-white rounded-lg shadow-md p-4">
              <div className="mb-3">
                <div className="flex items-center gap-2 mb-2">
                  <MessageSquare size={16} className="text-blue-500" />
                  <span className="font-medium">
                    {selectedLanguage.includes('Hindi') ? 'आपका प्रश्न • Your Question:' : 'Your Question:'}
                  </span>
                  <span className="text-sm text-gray-500">{chat.timestamp}</span>
                  <span className="text-xs bg-gray-100 px-2 py-1 rounded">{chat.subject}</span>
                </div>
                <p className="bg-blue-50 p-3 rounded-lg">{chat.question}</p>
              </div>
              
              <div>
                <div className="flex items-center gap-2 mb-2">
                  <CheckCircle size={16} className="text-green-500" />
                  <span className="font-medium">
                    {selectedLanguage.includes('Hindi') ? 'चरणबद्ध समाधान • Step-by-Step Solution:' : 'Step-by-Step Solution:'}
                  </span>
                </div>
                <div className="space-y-2">
                  {chat.solution.steps.map((step, stepIndex) => (
                    <div key={stepIndex} className="flex items-start gap-3 p-3 bg-green-50 rounded-lg">
                      <span className="bg-green-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center flex-shrink-0 font-bold">
                        {stepIndex + 1}
                      </span>
                      <span className="text-sm leading-relaxed">{step}</span>
                    </div>
                  ))}
                  <div className="mt-3 p-3 bg-yellow-50 rounded-lg border-l-4 border-yellow-400">
                    <p className="text-sm">
                      <strong>
                        {selectedLanguage.includes('Hindi') ? 'व्याख्या • Explanation:' : 'Explanation:'}
                      </strong> {chat.solution.explanation}
                    </p>
                    {chat.solution.difficulty && (
                      <p className="text-sm mt-2">
                        <strong>Difficulty:</strong> 
                        <span className={`ml-2 px-2 py-1 rounded text-xs ${
                          chat.solution.difficulty === 'Easy' ? 'bg-green-100 text-green-800' :
                          chat.solution.difficulty === 'Medium' ? 'bg-yellow-100 text-yellow-800' :
                          'bg-red-100 text-red-800'
                        }`}>
                          {chat.solution.difficulty}
                        </span>
                      </p>
                    )}
                    {chat.solution.subject_tips && (
                      <p className="text-sm mt-2 text-blue-700">
                        <strong>💡 Tip:</strong> {chat.solution.subject_tips}
                      </p>
                    )}
                    {chat.isAiGenerated && (
                      <div className="flex items-center gap-1 mt-2">
                        <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                        <span className="text-xs text-green-600">Powered by Google AI</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );

  const renderProfile = () => (
    <div className="p-6 space-y-6">
      <div className="text-center">
        <div className="w-20 h-20 bg-gradient-to-br from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
          <User size={32} className="text-white" />
        </div>
        <h2 className="text-xl font-bold">Student Name</h2>
        <p className="text-gray-600">Class {selectedClass} • {selectedBoard} • {selectedLanguage}</p>
      </div>

      <div className="bg-white rounded-lg shadow-md p-4">
        <h3 className="font-semibold mb-4">
          {selectedLanguage.includes('Hindi') ? 'सीखने की जानकारी • Learning Stats' : 'Learning Stats'}
        </h3>
        <div className="grid grid-cols-3 gap-4">
          <div className="text-center p-3 bg-blue-50 rounded-lg">
            <div className="text-2xl font-bold text-blue-600">{chatHistory.length}</div>
            <div className="text-xs text-gray-600">Questions Solved</div>
          </div>
          <div className="text-center p-3 bg-green-50 rounded-lg">
            <div className="text-2xl font-bold text-green-600">85%</div>
            <div className="text-xs text-gray-600">Success Rate</div>
          </div>
          <div className="text-center p-3 bg-purple-50 rounded-lg">
            <div className="text-2xl font-bold text-purple-600">12</div>
            <div className="text-xs text-gray-600">Subjects</div>
          </div>
        </div>
      </div>

      <div className="bg-white rounded-lg shadow-md p-4">
        <h3 className="font-semibold mb-4">Settings</h3>
        <div className="space-y-4">
          <div className="flex items-center justify-between">
            <span>Preferred Language</span>
            <select 
              value={selectedLanguage}
              onChange={(e) => setSelectedLanguage(e.target.value)}
              className="border rounded px-3 py-1 text-sm"
            >
              {languages.map(lang => (
                <option key={lang} value={lang}>{lang}</option>
              ))}
            </select>
          </div>
          <div className="flex items-center justify-between">
            <span>Push Notifications</span>
            <input type="checkbox" defaultChecked className="toggle" />
          </div>
          <div className="flex items-center justify-between">
            <span>Dark Mode</span>
            <input type="checkbox" className="toggle" />
          </div>
        </div>
      </div>

      <div className="bg-gradient-to-r from-green-50 to-blue-50 rounded-lg p-4">
        <h4 className="font-semibold text-green-800 mb-2">🎯 Subject Expertise</h4>
        <div className="flex flex-wrap gap-2">
          {['Mathematics', 'Python', 'Content Writing', 'Physics'].map(subject => (
            <span key={subject} className="bg-white px-3 py-1 rounded-full text-sm font-medium">
              {subject}
            </span>
          ))}
        </div>
      </div>
    </div>
  );

  return (
    <div className="max-w-md mx-auto bg-gray-100 min-h-screen">
      {/* Header */}
      <div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white shadow-lg p-4 flex items-center justify-between">
        <h1 className="text-lg font-bold">Smart Coach</h1>
        <div className="flex items-center gap-2">
          <Globe size={18} />
          <Settings size={18} />
        </div>
      </div>

      {/* Main Content */}
      <div className="pb-20">
        {currentView === 'home' && renderHome()}
        {currentView === 'doubt' && renderDoubtSection()}
        {currentView === 'profile' && renderProfile()}
      </div>

      {/* Bottom Navigation */}
      <div className="fixed bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-md bg-white border-t shadow-lg">
        <div className="flex justify-around py-2">
          <button
            onClick={() => setCurrentView('home')}
            className={`flex flex-col items-center p-2 ${
              currentView === 'home' ? 'text-blue-500' : 'text-gray-500'
            }`}
          >
            <Home size={20} />
            <span className="text-xs">Home</span>
          </button>
          <button
            onClick={() => setCurrentView('doubt')}
            className={`flex flex-col items-center p-2 ${
              currentView === 'doubt' ? 'text-blue-500' : 'text-gray-500'
            }`}
          >
            <MessageSquare size={20} />
            <span className="text-xs">Doubts</span>
          </button>
          <button
            onClick={() => setCurrentView('profile')}
            className={`flex flex-col items-center p-2 ${
              currentView === 'profile' ? 'text-blue-500' : 'text-gray-500'
            }`}
          >
            <User size={20} />
            <span className="text-xs">Profile</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default CoachingApp;</body></html>

Smart Coaching App

Choose Language

Select Board & Class

📚 Academic Subjects

💻 Programming & Coding

✍️ Content & Blogging

Daily Challenges

Study Groups

{selectedSubject}

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