import React, { useState, useEffect, useMemo, useRef } from 'react'; const TRANSLATIONS = { en: { appName: "Planora", tagline: "From Confusion to Clarity", subTagline: "Plan Smart • Be Ready • Grow", getStarted: "Get Started →", navHome: "Home", navExplore: "Explore", navChat: "Chat", navProgress: "Progress", navProfile: "Profile", welcomeTitle: "Not sure what you want to do?", welcomeSubtitle: "You're not alone. Planora helps you find the right path based on your interests, goals and current situation.", next: "Next", skip: "Skip", savePlan: "Save Plan", logout: "Logout", askPlanora: "Ask Planora", searchPlaceholder: "Search courses, careers, skills, mentors...", matchedGoal: "Matched to your career goal", overallProgress: "Overall Progress", skillsProgress: "Skills Progress", roadmapCompletion: "Roadmap Completion", requestGuidance: "Request Guidance", watchVideo: "Watch Video", addToPlan: "Add to My Plan", confirmLogoutMsg: "Are you sure you want to log out of Planora?", logoutSuccess: "You have been logged out successfully.", }, te: { appName: "ప్లానోరా", tagline: "అయోమయం నుండి స్పష్టత వైపు", subTagline: "తెలివిగా ప్రణాళిక వేసుకోండి • సిద్ధంగా ఉండండి • ఎదగండి", getStarted: "ప్రారంభించండి →", navHome: "హోమ్", navExplore: "అన్వేషించండి", navChat: "చాట్", navProgress: "పురోగతి", navProfile: "ప్రొఫైల్", welcomeTitle: "మీరేం చేయాలో అర్థం కావడం లేదా?", welcomeSubtitle: "మీరు ఒక్కరే కాదు. ప్లానోరా మీ ఆసక్తులు, లక్ష్యాలు మరియు ప్రస్తుత పరిస్థితి ఆధారంగా సరైన మార్గాన్ని సూచిస్తుంది.", next: "తరువాత", skip: "స్కిప్ చేయండి", savePlan: "ప్లాన్ సేవ్ చేయండి", logout: "లాగ్ అవుట్", askPlanora: "ప్లానోరాని అడగండి", searchPlaceholder: "కోర్సులు, కెరీర్‌లు, నైపుణ్యాల కోసం వెతకండి...", matchedGoal: "మీ కెరీర్ లక్ష్యానికి తగినది", overallProgress: "మొత్తం పురోగతి", skillsProgress: "నైపుణ్యాల పురోగతి", roadmapCompletion: "రోడ్‌మ్యాప్ పూర్తి శాతం", requestGuidance: "సలహా కోరండి", watchVideo: "వీడియో చూడండి", addToPlan: "నా ప్లాన్‌లో చేర్చు", confirmLogoutMsg: "మీరు ఖచ్చితంగా ప్లానోరా నుండి లాగ్ అవుట్ అవ్వాలనుకుంటున్నారా?", logoutSuccess: "మీరు విజయవంతంగా లాగ్ అవుట్ అయ్యారు.", }, hi: { appName: "प्लानोरा", tagline: "संदेह से स्पष्टता तक", subTagline: "स्मार्ट योजना बनाएं • तैयार रहें • आगे बढ़ें", getStarted: "शुरू करें →", navHome: "होम", navExplore: "एक्सप्लोर", navChat: "चैट", navProgress: "प्रगति", navProfile: "प्रोफ़ाइल", welcomeTitle: "समझ नहीं आ रहा क्या करना है?", welcomeSubtitle: "आप अकेले नहीं हैं। प्लानोरा आपकी रुचियों, लक्ष्यों और वर्तमान स्थिति के आधार पर सही रास्ता चुनने में मदद करता है।", next: "आगे बढ़ें", skip: "छोड़ें", savePlan: "योजना सहेजें", logout: "लॉग आउट", askPlanora: "प्लानोरा से पूछें", searchPlaceholder: "कोर्स, करियर, कौशल खोजें...", matchedGoal: "आपके करियर लक्ष्य से मेल खाता है", overallProgress: "कुल प्रगति", skillsProgress: "कौशल प्रगति", roadmapCompletion: "रोडमैप पूर्णता", requestGuidance: "मार्गदर्शन का अनुरोध करें", watchVideo: "वीडियो देखें", addToPlan: "मेरी योजना में जोड़ें", confirmLogoutMsg: "क्या आप निश्चित रूप से प्लानोरा से लॉग आउट करना चाहते हैं?", logoutSuccess: "आप सफलतापूर्वक लॉग आउट हो गए हैं।", }, ur: { appName: "پلانورا", tagline: "الجھن سے وضاحت تک", subTagline: "سمارٹ منصوبہ بنائیں • تیار رہیں • آگے بڑھیں", getStarted: "شروع کریں ←", navHome: "ہوم", navExplore: "تلاش کریں", navChat: "چیٹ", navProgress: "پیش رفت", navProfile: "پروفائل", welcomeTitle: "سمجھ نہیں آ رہا کیا کریں؟", welcomeSubtitle: "آپ اکیلے نہیں ہیں۔ پلانورا آپ کی دلچسپیوں اور مقاصد کی بنیاد پر صحیح راستہ دکھاتا ہے۔", next: "آگے", skip: "چھوڑیں", savePlan: "منصوبہ محفوظ کریں", logout: "لاگ آؤٹ", askPlanora: "پلانورا سے پوچھیں", searchPlaceholder: "کورسز، کیریئر، مہارتیں تلاش کریں...", matchedGoal: "آپ کے کیریئر کے ہدف کے مطابق", overallProgress: "مجموعی پیش رفت", skillsProgress: "مہارتوں کی پیش رفت", roadmapCompletion: "روڈ میپ کی تکمیل", requestGuidance: "رہنمائی کی درخواست کریں", watchVideo: "ویڈیو دیکھیں", addToPlan: "میرے پلان میں شامل کریں", confirmLogoutMsg: "کیا آپ واقعی پلانورا سے لاگ آؤٹ ہونا چاہتے ہیں؟", logoutSuccess: "آپ کامیابی کے ساتھ لاگ آؤٹ ہو چکے ہیں۔", } }; const Icon = ({ name, className = "w-5 h-5", color }) => { const props = { className, style: color ? { color } : undefined, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case 'compass': return ; case 'home': return ; case 'chat': return ; case 'progress': return ; case 'user': return ; case 'book': return ; case 'briefcase': return ; case 'target': return ; case 'map-pin': return ; case 'award': return ; case 'video': return ; case 'users': return ; case 'check-circle': return ; case 'search': return ; case 'chevron-right': return ; case 'arrow-right': return ; case 'star': return ; case 'log-out': return ; case 'sparkles': return ; case 'send': return ; case 'globe': return ; case 'bell': return ; case 'play': return ; case 'filter': return ; default: return ; } }; const CAREER_DATABASE = [ { id: "software-dev", title: "Software Developer", category: "Software Development", matchScore: 94, description: "Design, build, and maintain modern scalable web & software applications.", whyMatch: "Matches your programming interests, problem solving aptitude and web development experience.", requiredSkills: ["Programming", "Web Development", "Database", "Problem Solving", "Git/GitHub", "APIs"], prereqs: ["Programming"], recommendedCourses: [ { id: "c1", title: "Modern Full Stack Web Architecture", level: "Intermediate", duration: "6 Weeks", platform: "Planora Academy", category: "Software Development" }, { id: "c2", title: "Data Structures & Algorithmic Thinking", level: "Beginner", duration: "8 Weeks", platform: "Planora Prep", category: "Programming" }, { id: "c3", title: "REST APIs & Backend Microservices", level: "Intermediate", duration: "4 Weeks", platform: "Planora Cloud", category: "Web Development" } ], projects: ["Task Management Dashboard", "E-Commerce Microservice", "Real-Time Collaborative Code Editor"] }, { id: "data-analyst", title: "Data Analyst", category: "Data Analytics", matchScore: 88, description: "Transform raw structured and unstructured data into meaningful actionable business insights.", whyMatch: "Matches your analytical curiosity, data analysis preferences, and structured reasoning.", requiredSkills: ["Data Analysis", "Database", "Problem Solving", "Python", "SQL", "Statistics", "Power BI"], prereqs: ["Data Analysis"], recommendedCourses: [ { id: "c4", title: "Mastering SQL for Business Analytics", level: "Beginner", duration: "4 Weeks", platform: "Planora Analytics", category: "Data Analytics" }, { id: "c5", title: "Python for Data Wrangling & Pandas", level: "Intermediate", duration: "5 Weeks", platform: "Planora Labs", category: "Data Analytics" }, { id: "c6", title: "Interactive BI Dashboarding with Power BI", level: "Beginner", duration: "3 Weeks", platform: "Planora Design", category: "Data Analytics" } ], projects: ["Customer Churn Prediction Model", "Interactive Retail Sales Analytics", "Financial Trend Forecasting Dashboard"] }, { id: "ai-engineer", title: "AI / Machine Learning Engineer", category: "Artificial Intelligence", matchScore: 85, description: "Develop, train and deploy intelligent artificial intelligence algorithms and deep learning models.", whyMatch: "Matches your high interest in AI, predictive algorithms, and core programming skills.", requiredSkills: ["AI / Machine Learning", "Programming", "Data Analysis", "Python", "Mathematics", "Deep Learning"], prereqs: ["Programming", "AI / Machine Learning"], recommendedCourses: [ { id: "c7", title: "Applied Machine Learning Foundations", level: "Intermediate", duration: "8 Weeks", platform: "Planora AI Lab", category: "Artificial Intelligence" }, { id: "c8", title: "Prompt Engineering & LLM Integrations", level: "Advanced", duration: "4 Weeks", platform: "Planora AI", category: "Artificial Intelligence" }, { id: "c9", title: "Deep Neural Networks with PyTorch", level: "Advanced", duration: "6 Weeks", platform: "Planora DeepLab", category: "Artificial Intelligence" } ], projects: ["AI Resume Keyword Matcher", "Autonomous Vision Classifier", "RAG Document Assistant"] }, { id: "uiux-designer", title: "UI/UX Product Designer", category: "Design", matchScore: 82, description: "Craft intuitive user experiences, wireframes, visually compelling modern web interfaces and design systems.", whyMatch: "Matches your visual design sensibilities, empathy, and product-building passion.", requiredSkills: ["Design", "Communication", "Problem Solving", "Figma", "User Research", "Prototyping"], prereqs: ["Design"], recommendedCourses: [ { id: "c10", title: "Figma UI/UX Masterclass", level: "Beginner", duration: "4 Weeks", platform: "Planora Studio", category: "Design" }, { id: "c11", title: "Design Systems & Accessibility", level: "Intermediate", duration: "3 Weeks", platform: "Planora UX", category: "Design" } ], projects: ["Redesigning Student Portal App", "Design System for EdTech Platform"] } ]; const MENTOR_DATABASE = [ { id: "m1", name: "Rajesh Kumar", title: "Senior Data Scientist", company: "Tech Analytics Corp", experience: "7+ Years", industry: "Data Analytics", category: "Data Analytics", languages: ["English", "Telugu", "Hindi"], skills: ["Python", "SQL", "Machine Learning", "Data Visualization"], rating: 4.9, bio: "Passionate about helping computer science students break into Data Analytics & Machine Learning.", avatar: "https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=150&auto=format&fit=crop&q=80" }, { id: "m2", name: "Priya Sharma", title: "Lead Full-Stack Developer", company: "CloudScale Systems", experience: "6 Years", industry: "Software Development", category: "Software Development", languages: ["English", "Hindi"], skills: ["React", "Node.js", "System Design", "Cloud Architecture"], rating: 5.0, bio: "Guided over 200+ engineering graduates into high-growth software engineering roles.", avatar: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=150&auto=format&fit=crop&q=80" }, { id: "m3", name: "Srinivas Rao", title: "AI Engineer & Researcher", company: "Innovate AI Labs", experience: "5 Years", industry: "Artificial Intelligence", category: "Artificial Intelligence", languages: ["Telugu", "English"], skills: ["PyTorch", "NLP", "LLMs", "Computer Vision"], rating: 4.8, bio: "Specializes in mentoring beginners transitioning from simple coding to advanced AI projects.", avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&auto=format&fit=crop&q=80" }, { id: "m4", name: "Ayesha Khan", title: "Product Designer & UI Specialist", company: "Designify", experience: "4 Years", industry: "UI/UX Design", category: "Design", languages: ["English", "Urdu", "Hindi"], skills: ["Figma", "User Research", "Wireframing", "Interaction Design"], rating: 4.9, bio: "Helping students turn creative ideas into recruiter-approved design portfolios.", avatar: "https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&auto=format&fit=crop&q=80" }, { id: "m5", name: "Vikram Reddy", title: "Principal Cloud & DevOps Architect", company: "Nexus Cloud Solutions", experience: "9+ Years", industry: "Cloud & DevOps", category: "Software Development", languages: ["English", "Telugu"], skills: ["AWS", "Kubernetes", "Docker", "CI/CD Pipelines", "Terraform"], rating: 4.9, bio: "Helping students master cloud deployment, infrastructure automation, and enterprise DevOps pipelines.", avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=150&auto=format&fit=crop&q=80" }, { id: "m6", name: "Dr. Ananya Chatterjee", title: "Senior AI Researcher", company: "Cognitive AI Systems", experience: "8 Years", industry: "Artificial Intelligence", category: "Artificial Intelligence", languages: ["English", "Bengali", "Hindi"], skills: ["Deep Learning", "Generative AI", "TensorFlow", "Research Writing"], rating: 5.0, bio: "Mentors aspiring researchers and engineers looking to publish papers or build frontier AI tools.", avatar: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=150&auto=format&fit=crop&q=80" }, { id: "m7", name: "Karthik Varma", title: "Staff Backend Engineer", company: "FinTech Global", experience: "7 Years", industry: "Software Development", category: "Software Development", languages: ["English", "Telugu", "Hindi"], skills: ["Go", "Java", "Microservices", "Distributed Systems", "PostgreSQL"], rating: 4.8, bio: "Ex-MNC tech lead guiding students on system architecture, database optimization, and high-concurrency coding.", avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&auto=format&fit=crop&q=80" }, { id: "m8", name: "Kavita Verma", title: "Cybersecurity Specialist", company: "SecureNet Defense", experience: "6+ Years", industry: "Cybersecurity", category: "Cybersecurity", languages: ["English", "Hindi"], skills: ["Ethical Hacking", "Network Security", "Penetration Testing", "SOC Analyst"], rating: 4.9, bio: "Passionate about training students in ethical hacking, threat hunting, and securing cloud infrastructure.", avatar: "https://images.unsplash.com/photo-1567532939604-b6b5b0db2604?w=150&auto=format&fit=crop&q=80" }, { id: "m9", name: "Meera Iyer", title: "Business Intelligence Lead", company: "DataMetrics Labs", experience: "5 Years", industry: "Data Analytics", category: "Data Analytics", languages: ["English", "Tamil", "Hindi"], skills: ["Tableau", "Power BI", "SQL", "Business Analytics", "Data Storytelling"], rating: 4.8, bio: "Specializes in helping non-tech or beginner students present data effectively and win corporate analytics roles.", avatar: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=150&auto=format&fit=crop&q=80" }, { id: "m10", name: "Rohan Gupta", title: "Senior Frontend Lead", company: "Pixel Craft Studios", experience: "6 Years", industry: "Software Development", category: "Software Development", languages: ["English", "Hindi"], skills: ["React", "Next.js", "TypeScript", "Tailwind CSS", "Web Performance"], rating: 4.9, bio: "Loves conducting mock technical interviews and refining frontend developer portfolios to impress recruiters.", avatar: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7?w=150&auto=format&fit=crop&q=80" } ]; const VIDEO_DATABASE = [ { id: "v1", title: "Complete SQL Crash Course for Beginners 2026", category: "Data Analytics", skillFocus: "Database", difficulty: "Beginner", duration: "42 min", language: "Telugu", url: "https://www.youtube.com/watch?v=HXV3zeQKqGY", description: "Learn SELECT queries, JOINs, Grouping, and aggregate functions step-by-step." }, { id: "v2", title: "Full Stack Web Development Roadmap & Core Basics", category: "Software Development", skillFocus: "Web Development", difficulty: "Beginner", duration: "35 min", language: "English", url: "https://www.youtube.com/watch?v=nu_pCVPKzTk", description: "Understand HTML5, CSS3, Modern JavaScript, APIs and how frontend connects to backend." }, { id: "v3", title: "Python for Data Analysis - Pandas & NumPy Quickstart", category: "Data Analytics", skillFocus: "Data Analysis", difficulty: "Intermediate", duration: "50 min", language: "Hindi", url: "https://www.youtube.com/watch?v=r-uOLxNrNk8", description: "Hands-on data cleaning, filtering, and numerical processing with Python." }, { id: "v4", title: "Machine Learning Concepts Explained Simply", category: "Artificial Intelligence", skillFocus: "AI / Machine Learning", difficulty: "Intermediate", duration: "48 min", language: "English", url: "https://www.youtube.com/watch?v=ukzFI9rgwfU", description: "Supervised vs Unsupervised learning, evaluation metrics, and practical python implementation." } ]; export default function App() { // Load state from local storage or defaults const [user, setUser] = useState(() => { const saved = localStorage.getItem('planora_user'); return saved ? JSON.parse(saved) : null; }); const [currentPage, setCurrentPage] = useState(() => { const savedUser = localStorage.getItem('planora_user'); return savedUser ? 'dashboard' : 'splash'; }); const [selectedLanguage, setSelectedLanguage] = useState(() => { return localStorage.getItem('planora_lang') || 'en'; }); // Student profile & selection state const [profile, setProfile] = useState(() => { const saved = localStorage.getItem('planora_profile'); return saved ? JSON.parse(saved) : { name: "Sandeep Varma", email: "sandeep@example.com", degree: "B.Tech", year: "3rd Year", branch: "CSE", techSkills: ["Programming", "Web Development"], softSkills: ["Problem Solving", "Teamwork"], interests: ["Software Development", "Artificial Intelligence"], skillLevel: "Intermediate", goals: ["Get a job", "Build projects"], selectedCareerId: "software-dev", roadmapTasks: { "m1-1": true, "m1-2": true, "m2-1": false, "m2-2": false, "m3-1": false, "m4-1": false, "m5-1": false, "m6-1": false }, savedCourses: ["c1"], requestedMentors: [] }; }); const [searchQuery, setSearchQuery] = useState(''); const [logoutModalOpen, setLogoutModalOpen] = useState(false); const [toastMessage, setToastMessage] = useState(''); // Save changes to localStorage useEffect(() => { localStorage.setItem('planora_user', JSON.stringify(user)); }, [user]); useEffect(() => { localStorage.setItem('planora_profile', JSON.stringify(profile)); }, [profile]); useEffect(() => { localStorage.setItem('planora_lang', selectedLanguage); }, [selectedLanguage]); const showToast = (msg) => { setToastMessage(msg); setTimeout(() => setToastMessage(''), 3500); }; const currentLang = TRANSLATIONS[selectedLanguage] || TRANSLATIONS.en; // Selected Career calculation const selectedCareer = useMemo(() => { return CAREER_DATABASE.find(c => c.id === profile.selectedCareerId) || CAREER_DATABASE[0]; }, [profile.selectedCareerId]); // Overall progress calculation const progressStats = useMemo(() => { const tasks = profile.roadmapTasks || {}; const keys = Object.keys(tasks); const completedTasks = keys.filter(k => tasks[k]).length; const roadmapPercent = keys.length ? Math.round((completedTasks / keys.length) * 100) : 0; const skillCount = (profile.techSkills?.length || 0) + (profile.softSkills?.length || 0); const skillPercent = Math.min(100, Math.round((skillCount / 12) * 100)); const overall = Math.round((roadmapPercent * 0.6) + (skillPercent * 0.4)); return { overall, roadmapPercent, skillPercent, completedTasks, totalTasks: keys.length }; }, [profile]); const handleLogout = () => { setUser(null); setLogoutModalOpen(false); setCurrentPage('login'); showToast(currentLang.logoutSuccess); }; return (
{/* Toast Notification */} {toastMessage && (
{toastMessage}
)} {/* Logout Confirmation Modal */} {logoutModalOpen && (

{currentLang.logout}

{currentLang.confirmLogoutMsg}

)} {/* Main Top Header (For logged in views) */} {user && currentPage !== 'splash' && currentPage !== 'login' && (
setCurrentPage('dashboard')}>
{currentLang.appName} {currentLang.tagline}
{/* Language Switcher */}
{/* Profile Avatar & Quick Action */}
)} {/* Dynamic Content View Router */}
{currentPage === 'splash' && setCurrentPage(user ? 'dashboard' : 'login')} lang={currentLang} />} {currentPage === 'login' && { setUser(userData); setCurrentPage('welcome'); }} lang={currentLang} />} {currentPage === 'welcome' && setCurrentPage('guidance')} lang={currentLang} />} {currentPage === 'guidance' && setCurrentPage('plan-future')} onSkip={() => setCurrentPage('dashboard')} lang={currentLang} />} {currentPage === 'plan-future' && setCurrentPage('dashboard')} lang={currentLang} />} {currentPage === 'dashboard' && } {currentPage === 'interests-goals' && setCurrentPage('personalized-plan')} lang={currentLang} />} {currentPage === 'personalized-plan' && } {currentPage === 'career-details' && } {currentPage === 'roadmap' && } {currentPage === 'explore' && } {currentPage === 'progress' && } {currentPage === 'chat' && } {currentPage === 'profile' && setLogoutModalOpen(true)} setCurrentPage={setCurrentPage} selectedLanguage={selectedLanguage} setSelectedLanguage={setSelectedLanguage} lang={currentLang} />}
{/* Main Bottom Navigation (Responsive Desktop Bar & Mobile Fixed Nav) */} {user && currentPage !== 'splash' && currentPage !== 'login' && ( )}
); } function NavItem({ icon, label, active, onClick }) { return ( ); } /* ==================================================================== PAGE 1 — SPLASH SCREEN ==================================================================== */ function SplashScreen({ onGetStarted, lang }) { return (
{/* Background ambient lighting effects */}
{lang.appName}
{lang.subTagline}

Your Future, Planned.

"{lang.tagline}"

{/* Dynamic Graphic */}
Skills Career Roadmap
Powered by AI & Contextual Student Career Guidance Engine
); } /* ==================================================================== PAGE 2 — LOGIN / SIGN UP ==================================================================== */ function AuthScreen({ onLogin, lang }) { const [isSignUp, setIsSignUp] = useState(true); const [fullName, setFullName] = useState("Sandeep Varma"); const [email, setEmail] = useState("sandeep@example.com"); const [password, setPassword] = useState("password123"); const handleSubmit = (e) => { e.preventDefault(); onLogin({ name: fullName || "Student", email }); }; return (

{isSignUp ? "Create your account" : "Welcome back"}

Let's build your future together

{/* Google Mock Btn */}
Or email
{isSignUp && (
setFullName(e.target.value)} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-sm" placeholder="Enter your name" />
)}
setEmail(e.target.value)} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-sm" placeholder="student@university.edu" />
setPassword(e.target.value)} className="w-full px-4 py-3 rounded-xl border border-slate-200 focus:outline-none focus:ring-2 focus:ring-purple-500/50 text-sm" placeholder="••••••••" />
{isSignUp ? "Already have an account?" : "Don't have an account?"}{" "}
); } /* ==================================================================== PAGE 3 — WELCOME / MAIN OPTIONS ==================================================================== */ function WelcomeScreen({ onNext, lang }) { const [selectedTopic, setSelectedTopic] = useState('Career?'); return (

{lang.welcomeTitle}

{lang.welcomeSubtitle}

{['Career?', 'College?', 'Skills?', 'Future?'].map((topic) => ( ))}
); } /* ==================================================================== PAGE 4 — PERSONAL GUIDANCE ==================================================================== */ function GuidanceScreen({ onNext, onSkip, lang }) { return (

Your Personal Guidance System

Answer a few simple questions and get personalized career, education and skill recommendations.

{[ { label: "Education", icon: "book", desc: "Find right courses" }, { label: "Career", icon: "briefcase", desc: "Explore paths" }, { label: "Skills", icon: "award", desc: "Bridge gaps" }, { label: "Goals", icon: "target", desc: "Achieve targets" } ].map((item) => (

{item.label}

{item.desc}

))}
); } /* ==================================================================== PAGE 5 — PLAN YOUR FUTURE ==================================================================== */ function PlanFutureScreen({ onStart, lang }) { const steps = [ { num: "1", title: "Know Yourself", desc: "Interests, strengths and goals" }, { num: "2", title: "Explore Options", desc: "Courses, careers and skills" }, { num: "3", title: "Get a Personalized Plan", desc: "Roadmap and learning resources" } ]; return (

Plan Your Future

Step by Step

{steps.map((s) => (
{s.num}

{s.title}

{s.desc}

))}
); } /* ==================================================================== PAGE 6 — MAIN DASHBOARD / HOME ==================================================================== */ function DashboardScreen({ profile, setCurrentPage, searchQuery, setSearchQuery, lang }) { return (
{/* Welcome Banner */}

Hello, {profile.name || "Student"} 👋

Small steps today, big dreams tomorrow!

{/* Search bar */}
setSearchQuery(e.target.value)} placeholder={lang.searchPlaceholder} className="w-full pl-12 pr-4 py-3 rounded-2xl bg-white/95 text-slate-900 placeholder:text-slate-400 font-medium focus:outline-none focus:ring-4 focus:ring-purple-400/40 text-sm shadow-md" />
{/* Ask Planora Card */}

Not sure what's next?

Let Planora AI analyze your profile and guide you instantly.

{/* Main Options Grid */}

Explore Guidance Areas

setCurrentPage('explore')} /> setCurrentPage('personalized-plan')} /> setCurrentPage('explore')} /> {/* CRITICAL MANDATORY NAVIGATION RULE */} setCurrentPage('interests-goals')} /> setCurrentPage('roadmap')} />
); } function DashboardCard({ icon, title, subtitle, badge, onClick, highlight = false }) { return (
{badge}

{title}

{subtitle}

Explore details
); } /* ==================================================================== PAGE 7 — INTERESTS & GOALS / SKILLS SELECTION ==================================================================== */ function InterestsSkillsScreen({ profile, setProfile, onNext, lang }) { const [techSkills, setTechSkills] = useState(profile.techSkills || []); const [softSkills, setSoftSkills] = useState(profile.softSkills || []); const [interests, setInterests] = useState(profile.interests || []); const [skillLevel, setSkillLevel] = useState(profile.skillLevel || "Intermediate"); const [goals, setGoals] = useState(profile.goals || []); const toggleArray = (arr, setArr, item) => { if (arr.includes(item)) setArr(arr.filter(i => i !== item)); else setArr([...arr, item]); }; const handleSave = () => { setProfile({ ...profile, techSkills, softSkills, interests, skillLevel, goals }); onNext(); }; return (

Let's understand your interests & skills

Select all that apply to personalize your career engine.

{/* Technical Skills */}

Technical Skills

{[ "Programming", "Data Analysis", "Web Development", "AI / Machine Learning", "Database", "Cloud", "Cybersecurity", "Design" ].map(skill => ( ))}
{/* Soft Skills */}

Soft Skills

{["Communication", "Leadership", "Problem Solving", "Teamwork"].map(skill => ( ))}
{/* Interest Areas */}

Interest Areas

{[ "Artificial Intelligence", "Software Development", "Data", "Cybersecurity", "Design", "Business", "Research" ].map(area => ( ))}
{/* Skill Level Selector */}

Current Skill Level

{["Beginner", "Intermediate", "Advanced"].map(lvl => ( ))}
{/* Goals */}

Primary Goals

{[ "Get a job", "Get internship", "Build projects", "Higher studies", "Competitive exams", "Explore careers" ].map(goal => ( ))}
); } /* ==================================================================== PAGE 8 — PERSONALIZED CAREER PLAN ==================================================================== */ function PersonalizedPlanScreen({ profile, setProfile, setCurrentPage, lang }) { return (

Your Personalized Plan

Based on your profile, here are the best options for you.

{CAREER_DATABASE.map((career) => { const isSelected = profile.selectedCareerId === career.id; return (
{career.matchScore}% Match {career.category}

{career.title}

{career.whyMatch}

Required Skills: {career.requiredSkills.join(', ')}
); })}
); } /* ==================================================================== PAGE 9 — CAREER / COURSE DETAILS ==================================================================== */ function CareerDetailsScreen({ career, profile, setCurrentPage, showToast, lang }) { const missingSkills = career.requiredSkills.filter(s => !profile.techSkills.includes(s)); return (
{/* Header */}
{career.matchScore}% Match

{career.title}

{career.description}

Why this matches: {career.whyMatch}
{/* Skills Analysis */}

Current Strengths

{profile.techSkills.map(s => ( {s} ))}

Skill Gaps to Bridge

{missingSkills.map(s => ( {s} ))}
{/* Recommended Courses */}

Recommended Courses

{career.recommendedCourses.map(course => (
{course.level} • {course.duration}

{course.title}

))}
); } /* ==================================================================== PAGE 10 — 6-MONTH ROADMAP ==================================================================== */ function RoadmapScreen({ profile, setProfile, showToast, lang }) { const roadmapData = [ { id: "m1-1", month: "Month 1", title: "Programming Fundamentals", tasks: ["Master Data Types & Control Structures", "Solve 20 Basic Logic Problems"] }, { id: "m2-1", month: "Month 2", title: "Frontend Development", tasks: ["HTML5, CSS Grid/Flexbox Layouts", "JavaScript DOM & Fetch APIs"] }, { id: "m3-1", month: "Month 3", title: "Backend Development", tasks: ["RESTful Server Setup", "Authentication & JWT Security"] }, { id: "m4-1", month: "Month 4", title: "Databases & APIs", tasks: ["SQL Queries & Database Schema Design", "API Integration & Testing"] }, { id: "m5-1", month: "Month 5", title: "Build Real Projects", tasks: ["Deploy Full-Stack Portfolio App", "GitHub Code Documentation"] }, { id: "m6-1", month: "Month 6", title: "Resume + Interview Preparation", tasks: ["Mock Technical Interviews", "Resume Optimization & LinkedIn Prep"] } ]; const toggleTask = (id) => { const updated = { ...profile.roadmapTasks, [id]: !profile.roadmapTasks[id] }; setProfile({ ...profile, roadmapTasks: updated }); }; return (

Your 6-Month Roadmap

Structured step-by-step career progress tracker.

{/* Vertical Timeline */}
{roadmapData.map((item) => { const isDone = profile.roadmapTasks[item.id]; return (
{/* Dot */}
toggleTask(item.id)} className={`absolute -left-[31px] top-1 w-6 h-6 rounded-full border-2 cursor-pointer flex items-center justify-center transition ${ isDone ? 'bg-purple-600 border-purple-600 text-white' : 'bg-white border-slate-300' }`} > {isDone && }
{item.month}

{item.title}

    {item.tasks.map((task, idx) => (
  • {task}
    • ))}
); })}
); } /* ==================================================================== PAGE 11 — LEARNING RESOURCES, VIDEOS & MENTORS (EXPLORE SCREEN) ==================================================================== */ function ExploreScreen({ profile, setProfile, setCurrentPage, showToast, lang }) { const [activeTab, setActiveTab] = useState('mentors'); const [mentorCategoryFilter, setMentorCategoryFilter] = useState('All'); const categories = useMemo(() => { const set = new Set(MENTOR_DATABASE.map(m => m.category)); return ['All', 'Matched to Me', ...Array.from(set)]; }, []); const filteredMentors = useMemo(() => { if (mentorCategoryFilter === 'All') return MENTOR_DATABASE; if (mentorCategoryFilter === 'Matched to Me') { const primaryInterest = profile.interests[0] || "Software Development"; return MENTOR_DATABASE.filter(m => m.category === primaryInterest || m.category === "Software Development"); } return MENTOR_DATABASE.filter(m => m.category === mentorCategoryFilter); }, [mentorCategoryFilter, profile.interests]); return (

Learning & Mentor Hub

Courses, video lessons, and verified industry mentors.

{/* Tabs */}
{[ { id: 'mentors', label: `Mentors (${MENTOR_DATABASE.length})` }, { id: 'courses', label: 'Courses' }, { id: 'videos', label: 'Videos' } ].map(tab => ( ))}
{/* Mentors Tab */} {activeTab === 'mentors' && (
{/* Category Filter Pills */}
Filter: {categories.map(cat => ( ))}
{filteredMentors.map(mentor => { const requested = profile.requestedMentors?.includes(mentor.id); return (
{mentor.name}
{mentor.category}
{mentor.rating}

{mentor.name}

{mentor.title} • {mentor.company}

{mentor.experience} Exp • {mentor.languages.join(', ')}

"{mentor.bio}"

{mentor.skills.map(s => ( {s} ))}
); })}
)} {/* Courses Tab */} {activeTab === 'courses' && (
{CAREER_DATABASE.flatMap(c => c.recommendedCourses).map(course => (
{course.category}

{course.title}

Platform: {course.platform} • Duration: {course.duration}

))}
)} {/* Videos Tab */} {activeTab === 'videos' && (
{VIDEO_DATABASE.map(video => (
{video.category} {video.language}

{video.title}

{video.description}

⏱ {video.duration} {lang.watchVideo}
))}
)}
); } /* ==================================================================== PAGE 12 — PROGRESS (THE ONLY PROGRESS PAGE) ==================================================================== */ function ProgressScreen({ profile, stats, lang }) { return (

Your Progress

Real-time stats of your career growth and learning roadmap.

{/* Overall Circle Stat */}
{lang.overallProgress}

{stats.overall}% Completed

Roadmap Tasks Done: {stats.completedTasks} of {stats.totalTasks}

{stats.overall}%
{/* Skills Bars */}

{lang.skillsProgress}

{[ { name: "Programming", val: 45 }, { name: "Web Development", val: 60 }, { name: "Database", val: 40 }, { name: "Communication", val: 70 }, { name: "Soft Skills", val: 55 } ].map((item) => (
{item.name} {item.val}%
))}
); } /* ==================================================================== PAGE 13 — AI CAREER CHAT ==================================================================== */ function AIChatScreen({ profile, setProfile, lang }) { const [messages, setMessages] = useState([ { sender: 'ai', text: `Hello ${profile.name}! I'm Planora AI. I see your goal is ${profile.goals[0] || 'career advancement'}. How can I assist you with your roadmap today?` } ]); const [input, setInput] = useState(''); const [loading, setLoading] = useState(false); const chatEndRef = useRef(null); useEffect(() => { chatEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]); const handleSend = async (customQuery) => { const queryText = customQuery || input; if (!queryText.trim()) return; const newMessages = [...messages, { sender: 'user', text: queryText }]; setMessages(newMessages); if (!customQuery) setInput(''); setLoading(true); try { const apiKey = ""; const systemInstruction = `You are Planora AI, a friendly, accurate student career counselor. Context: Student Name: ${profile.name} Technical Skills: ${profile.techSkills.join(', ')} Interests: ${profile.interests.join(', ')} Selected Career Goal: ${profile.selectedCareerId} Skill Level: ${profile.skillLevel} Language: ${lang}`; const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-3-flash-preview:generateContent?key=${apiKey}`; const payload = { contents: [{ parts: [{ text: queryText }] }], systemInstruction: { parts: [{ text: systemInstruction }] } }; const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const data = await response.json(); const reply = data.candidates?.[0]?.content?.parts?.[0]?.text || getFallbackReply(queryText, profile); setMessages([...newMessages, { sender: 'ai', text: reply }]); } catch (err) { setMessages([...newMessages, { sender: 'ai', text: getFallbackReply(queryText, profile) }]); } finally { setLoading(false); } }; const getFallbackReply = (query, prof) => { const q = query.toLowerCase(); if (q.includes('next') || q.includes('learn')) { return `Based on your profile, you already know ${prof.techSkills.join(', ')}. Next, focus on SQL Database design and REST API fundamentals for your ${prof.selectedCareerId} roadmap.`; } if (q.includes('missing') || q.includes('gap')) { return `You currently need to strengthen SQL, Git version control, and cloud deployment basics to become interview ready!`; } return `Planora recommends continuing with Month 3 of your personalized roadmap for optimal career growth!`; }; return (

Planora AI Career Assistant

Context-aware guidance • Active profile linked

{/* Messages */}
{messages.map((m, idx) => (
{m.text}
))} {loading && (
Planora AI is thinking...
)}
{/* Suggested Prompts */}
{["What should I learn next?", "What skills am I missing?", "Suggest a project"].map((prompt) => ( ))}
{/* Input Form */}
setInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && handleSend()} placeholder="Ask Planora anything about your career path..." className="flex-1 px-4 py-2.5 rounded-xl border border-slate-200 text-xs sm:text-sm focus:outline-none focus:ring-2 focus:ring-purple-500/50" />
); } /* ==================================================================== PAGE 14 — PROFILE / SETTINGS & LOGOUT ==================================================================== */ function ProfileScreen({ profile, setProfile, onLogoutClick, setCurrentPage, selectedLanguage, setSelectedLanguage, lang }) { return (
{/* User Header */}
{profile.name ? profile.name.charAt(0) : 'S'}

{profile.name}

{profile.degree} • {profile.year} • {profile.branch}

{profile.email}

{/* Navigation List */}
{/* MANDATORY RULE: Return to Skills Selection */}
setCurrentPage('interests-goals')} className="p-4 flex items-center justify-between cursor-pointer hover:bg-slate-50 transition" >
My Interests & Goals
What I Have Covered
{/* Language Selection */}
Language Preference
{/* Logout Option */}
{lang.logout}
); }