98:I[903690,["/chat-static/_next/static/chunks/3i9cwkv75ap-1.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3x2qrc8_ae_y8.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0u7q9wyops2xg.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/38howswsjvgon.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0pmkowhwh3_ey.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3pk_lm2pt6hw5.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2htqlxu9398j9.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2yoqavhumda_r.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3kku96d2ka1lz.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/09bjmvlsdgntt.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3i-97b1o6hit-.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/191-4imsl9qwa.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3axpbmdw7c30d.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3g02y25nur6on.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2ajillejy26cs.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1vjbhp9_bmqhk.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0cgnqbec84doz.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2j3btufkbn_zs.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2p-kw2uy5bfez.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0psif7yoew_5d.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/320uvverwlev9.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3ozpl0vnjpsf6.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/29jt0k3ejw_02.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1zyc-zcjkol_b.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV"],"ExplicitChatIdProvider"] 99:I[838238,["/chat-static/_next/static/chunks/3i9cwkv75ap-1.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/393dq-lwgv9wd.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3x2qrc8_ae_y8.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1v3tu-ayeqrg_.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/24itveg68o90k.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0u7q9wyops2xg.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/38howswsjvgon.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3xsve9e9fxw9u.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0pmkowhwh3_ey.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2ir8jf7_bfjoy.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3kl3thuqyhpdu.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3dh9b5rhes-_3.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2lpc1gu9jkwbr.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3pk_lm2pt6hw5.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3qbqqz-30yf_e.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/349enaxmn4q3i.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2oig3hoirmj64.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2htqlxu9398j9.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2yoqavhumda_r.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3kku96d2ka1lz.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/09bjmvlsdgntt.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3i-97b1o6hit-.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/11e80b-y89mrs.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2ffzcp23_gird.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1rz_9ckgsy-eb.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2iu_2gtqlb9fh.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/191-4imsl9qwa.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2nnss2enfb-e6.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3z0af037uy3y2.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3axpbmdw7c30d.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3g02y25nur6on.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3nl30ufs08xyt.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3ahsd2taw-yce.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2ajillejy26cs.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0ite474mxrjfz.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/22hg1dv7sryga.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1vjbhp9_bmqhk.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2usqk7ipgup_t.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0cgnqbec84doz.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3sty0m_bj1zjd.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2j3btufkbn_zs.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3361kc_6h0dgd.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1hqlktk7lfas0.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/2p-kw2uy5bfez.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0psif7yoew_5d.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/320uvverwlev9.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/3ozpl0vnjpsf6.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/29jt0k3ejw_02.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/1zyc-zcjkol_b.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV","/chat-static/_next/static/chunks/0ri2k1_yh_pol.js?dpl=dpl_5bHy4DNAAH4uWes2BZ61QaFYVUkV"],"SWRDataProvider"] 9b:[] 9c:[["b_aTnLEmguzS9",null],["b_pMF64dMNkYm",null],["b_s1kKnzO6IkD",null],["b_uXRavhj6Bbe",null],["b_16wr0lY10Ux",null],["b_0j6H2iYNH9H",null],["b_9D1udwHiQUb",null],["b_Krio4qFInau",null],["b_PzS25YHE3U8",null],["b_OIsTuDqrdDM",null]] 9d:[["b_aTnLEmguzS9",{"templateVersionId":null,"templateCanonId":null}],["b_pMF64dMNkYm",{"templateVersionId":null,"templateCanonId":null}],["b_s1kKnzO6IkD",{"templateVersionId":null,"templateCanonId":null}],["b_uXRavhj6Bbe",{"templateVersionId":null,"templateCanonId":null}],["b_16wr0lY10Ux",{"templateVersionId":null,"templateCanonId":null}],["b_0j6H2iYNH9H",{"templateVersionId":null,"templateCanonId":null}],["b_9D1udwHiQUb",{"templateVersionId":null,"templateCanonId":null}],["b_Krio4qFInau",{"templateVersionId":null,"templateCanonId":null}],["b_PzS25YHE3U8",{"templateVersionId":null,"templateCanonId":null}],["b_OIsTuDqrdDM",{"templateVersionId":null,"templateCanonId":null}]] 9e:[["b_aTnLEmguzS9","$D2026-01-18T03:57:40.911Z"],["b_pMF64dMNkYm","$D2026-01-18T03:57:46.273Z"],["b_s1kKnzO6IkD","$D2026-01-18T03:58:01.250Z"],["b_uXRavhj6Bbe","$D2026-01-18T03:58:13.307Z"],["b_16wr0lY10Ux","$D2026-01-18T03:58:30.101Z"],["b_0j6H2iYNH9H","$D2026-01-18T03:59:57.818Z"],["b_9D1udwHiQUb","$D2026-01-18T04:01:47.134Z"],["b_Krio4qFInau","$D2026-01-18T04:03:51.771Z"],["b_PzS25YHE3U8","$D2026-01-18T04:04:50.030Z"],["b_OIsTuDqrdDM","$D2026-06-01T12:59:02.623Z"]] 9f:[["b_aTnLEmguzS9",false],["b_pMF64dMNkYm",false],["b_s1kKnzO6IkD",false],["b_uXRavhj6Bbe",false],["b_16wr0lY10Ux",false],["b_0j6H2iYNH9H",false],["b_9D1udwHiQUb",false],["b_Krio4qFInau",false],["b_PzS25YHE3U8",false],["b_OIsTuDqrdDM",false]] a0:[["b_aTnLEmguzS9","$undefined"],["b_pMF64dMNkYm","$undefined"],["b_s1kKnzO6IkD","$undefined"],["b_uXRavhj6Bbe","$undefined"],["b_16wr0lY10Ux","$undefined"],["b_0j6H2iYNH9H","$undefined"],["b_9D1udwHiQUb","$undefined"],["b_Krio4qFInau","$undefined"],["b_PzS25YHE3U8","$undefined"],["b_OIsTuDqrdDM","$undefined"]] a1:[["b_aTnLEmguzS9",null],["b_pMF64dMNkYm",null],["b_s1kKnzO6IkD",null],["b_uXRavhj6Bbe",null],["b_16wr0lY10Ux",null],["b_0j6H2iYNH9H",null],["b_9D1udwHiQUb",null],["b_Krio4qFInau",null],["b_PzS25YHE3U8",null],["b_OIsTuDqrdDM",null]] a2:[["b_aTnLEmguzS9",true],["b_pMF64dMNkYm",true],["b_s1kKnzO6IkD",true],["b_uXRavhj6Bbe",true],["b_16wr0lY10Ux",true],["b_0j6H2iYNH9H",true],["b_9D1udwHiQUb",true],["b_Krio4qFInau",true],["b_PzS25YHE3U8",true],["b_OIsTuDqrdDM",true]] a3:[["b_aTnLEmguzS9",true],["b_pMF64dMNkYm",true],["b_s1kKnzO6IkD",true],["b_uXRavhj6Bbe",true],["b_16wr0lY10Ux",true],["b_0j6H2iYNH9H",true],["b_9D1udwHiQUb",true],["b_Krio4qFInau",true],["b_PzS25YHE3U8",true],["b_OIsTuDqrdDM",true]] a4:[] a5:T6fe,The user wants me to build a gamified OVA (Objeto Virtual de Aprendizaje - Virtual Learning Object) for C++ OOP (Object-Oriented Programming). They specified: 1. Primary color should be #0099ff 2. Preferably developed in React and Go This is a complex, multi-system application with many features. Let me analyze what they need: 1. Progressive level system (5 levels for C++ concepts) 2. Interactive lessons with code examples 3. Integrated C++ code editor 4. Parsons problems (drag & drop code blocks) 5. Hybrid exercise system 6. 1v1 code battles 7. Tournaments and competitions 8. Customizable avatar system 9. Complete gamification system (XP, medals, streaks) 10. Global and social rankings 11. Personal progress dashboard 12. C++ Practice Laboratory 13. Intelligent help system 14. Battle waiting room This is a massive project. Since they want React (frontend) and Go (backend), I should: 1. Build the frontend in Next.js/React 2. Note that Go backend would need to be set up separately (v0 focuses on frontend) Let me start by creating a todo list for this complex project and then generate design inspiration based on their specifications. Actually, looking at this more carefully - this is a very comprehensive specification. I should ask the user which specific part they want to start with, since building everything at once would be overwhelming. Or I could create a MVP with the core features. Let me create a structured plan focusing on the main features and build a solid foundation. I'll start with: 1. Design inspiration based on their gaming theme 2. Core layout and navigation 3. Level system and dashboard 4. Code editor integration 5. Parsons problems (drag & drop) 6. Battle system UI Let me start by generating design inspiration and setting up the todo list.a6:T1f430,[V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata, Viewport } from "next"; import { Inter, JetBrains_Mono } from "next/font/google"; import { Analytics } from "@vercel/analytics/next"; import "./globals.css"; const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }); const jetbrainsMono = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains", }); export const metadata: Metadata = { title: "C++ POO Quest - Aprende Programacion Orientada a Objetos", description: "Plataforma gamificada para aprender C++ y Programacion Orientada a Objetos con batallas de codigo, ejercicios interactivos y sistema de niveles", generator: "v0.app", keywords: [ "C++", "POO", "programacion", "gamificacion", "aprendizaje", "codigo", ], }; export const viewport: Viewport = { themeColor: "#0099ff", width: "device-width", initialScale: 1, }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } [V0_FILE]typescript:file="lib/game-data.ts" isMerged="true" // Types for the gamified learning platform export interface User { id: string; username: string; avatar: AvatarConfig; level: number; xp: number; xpToNextLevel: number; currentLearningLevel: number; streak: number; battlesWon: number; battlesLost: number; medals: Medal[]; rank: number; elo: number; } export interface AvatarConfig { head: number; body: number; accessory: number; background: number; effect: number; } export interface Medal { id: string; name: string; description: string; icon: string; rarity: "common" | "rare" | "epic" | "legendary"; unlockedAt?: Date; } export interface LearningLevel { id: number; name: string; description: string; topics: string[]; blocksRatio: number; editorRatio: number; requiredAccuracy: number; unlocked: boolean; completed: boolean; progress: number; } export interface Exercise { id: string; levelId: number; type: "blocks" | "editor"; difficulty: "easy" | "medium" | "hard"; title: string; description: string; codeBlocks?: CodeBlock[]; starterCode?: string; solution: string; testCases: TestCase[]; hints: string[]; xpReward: number; } export interface CodeBlock { id: string; code: string; indentation: number; isDistractor: boolean; } export interface TestCase { input: string; expectedOutput: string; description: string; } export interface Battle { id: string; status: "waiting" | "in_progress" | "completed"; player1: User; player2?: User; problems: Exercise[]; currentProblem: number; timeRemaining: number; scores: { player1: number; player2: number }; } // Mock data export const learningLevels: LearningLevel[] = [ { id: 1, name: "Fundamentos de Clases", description: "Clases, Objetos, Constructores y Destructores", topics: ["Clases", "Objetos", "Constructores", "Destructores", "Encapsulamiento"], blocksRatio: 70, editorRatio: 30, requiredAccuracy: 80, unlocked: true, completed: false, progress: 45, }, { id: 2, name: "Herencia y Punteros", description: "Herencia, Punteros y Referencias en C++", topics: ["Herencia Simple", "Herencia Multiple", "Punteros", "Referencias", "Memoria Dinamica"], blocksRatio: 60, editorRatio: 40, requiredAccuracy: 80, unlocked: false, completed: false, progress: 0, }, { id: 3, name: "Polimorfismo", description: "Polimorfismo y Funciones Virtuales", topics: ["Polimorfismo", "Funciones Virtuales", "Clases Abstractas", "Interfaces", "Override"], blocksRatio: 50, editorRatio: 50, requiredAccuracy: 80, unlocked: false, completed: false, progress: 0, }, { id: 4, name: "Templates y STL", description: "Templates, STL y Sobrecarga de Operadores", topics: ["Templates", "STL Containers", "Iteradores", "Sobrecarga de Operadores", "Algoritmos"], blocksRatio: 30, editorRatio: 70, requiredAccuracy: 80, unlocked: false, completed: false, progress: 0, }, { id: 5, name: "Patrones Avanzados", description: "Patrones de Diseno y Smart Pointers", topics: ["Singleton", "Factory", "Observer", "Smart Pointers", "RAII"], blocksRatio: 20, editorRatio: 80, requiredAccuracy: 80, unlocked: false, completed: false, progress: 0, }, ]; export const medals: Medal[] = [ { id: "first_class", name: "Primera Clase", description: "Crea tu primera clase en C++", icon: "class", rarity: "common" }, { id: "pointer_master", name: "Maestro de Punteros", description: "Domina el uso de punteros", icon: "pointer", rarity: "rare" }, { id: "template_king", name: "Rey de Templates", description: "Completa todos los ejercicios de templates", icon: "template", rarity: "epic" }, { id: "undefeated", name: "Invicto", description: "Gana 5 batallas consecutivas", icon: "trophy", rarity: "legendary" }, { id: "dedicated", name: "Estudiante Dedicado", description: "7 dias consecutivos de estudio", icon: "fire", rarity: "rare" }, { id: "perfect_blocks", name: "Ordenador Perfecto", description: "10 ejercicios de bloques sin errores", icon: "blocks", rarity: "epic" }, ]; export const mockUser: User = { id: "1", username: "CodeWarrior", avatar: { head: 1, body: 1, accessory: 0, background: 1, effect: 0 }, level: 12, xp: 2450, xpToNextLevel: 3000, currentLearningLevel: 1, streak: 5, battlesWon: 15, battlesLost: 8, medals: [medals[0], medals[4]], rank: 127, elo: 1250, }; export const sampleExercise: Exercise = { id: "ex1", levelId: 1, type: "blocks", difficulty: "easy", title: "Crear una Clase Basica", description: "Ordena los bloques para crear una clase 'Persona' con atributos nombre y edad, y un constructor.", codeBlocks: [ { id: "1", code: "class Persona {", indentation: 0, isDistractor: false }, { id: "2", code: "private:", indentation: 0, isDistractor: false }, { id: "3", code: " string nombre;", indentation: 1, isDistractor: false }, { id: "4", code: " int edad;", indentation: 1, isDistractor: false }, { id: "5", code: "public:", indentation: 0, isDistractor: false }, { id: "6", code: " Persona(string n, int e) {", indentation: 1, isDistractor: false }, { id: "7", code: " nombre = n;", indentation: 2, isDistractor: false }, { id: "8", code: " edad = e;", indentation: 2, isDistractor: false }, { id: "9", code: " }", indentation: 1, isDistractor: false }, { id: "10", code: "};", indentation: 0, isDistractor: false }, { id: "d1", code: " float altura;", indentation: 1, isDistractor: true }, { id: "d2", code: "protected:", indentation: 0, isDistractor: true }, ], solution: "1,2,3,4,5,6,7,8,9,10", testCases: [], hints: ["Las clases en C++ comienzan con 'class' y terminan con '};'", "Los atributos privados van despues de 'private:'"], xpReward: 50, }; [V0_FILE]typescriptreact:file="components/game/sidebar.tsx" isMerged="true" "use client"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { mockUser } from "@/lib/game-data"; import { Home, BookOpen, Code2, Swords, Trophy, User, Settings, Flame, Star, ChevronLeft, ChevronRight, } from "lucide-react"; import { useState } from "react"; interface SidebarProps { activeSection: string; onSectionChange: (section: string) => void; } const navItems = [ { id: "dashboard", label: "Dashboard", icon: Home }, { id: "levels", label: "Niveles", icon: BookOpen }, { id: "practice", label: "Practica", icon: Code2 }, { id: "battles", label: "Batallas", icon: Swords }, { id: "ranking", label: "Ranking", icon: Trophy }, { id: "profile", label: "Perfil", icon: User }, ]; export function Sidebar({ activeSection, onSectionChange }: SidebarProps) { const [collapsed, setCollapsed] = useState(false); const xpProgress = (mockUser.xp / mockUser.xpToNextLevel) * 100; return (

{/* Logo */}

{!collapsed && (

C++ Quest

POO Gamificado

)} {collapsed && (

)}

{/* User Stats */} {!collapsed && (

{mockUser.username[0]}

{mockUser.level}

{mockUser.username}

{mockUser.streak} dias

XP {mockUser.xp} / {mockUser.xpToNextLevel}

)} {/* Navigation */} {/* Quick Stats */} {!collapsed && (

Batallas {mockUser.battlesWon}W {" / "} {mockUser.battlesLost}L

ELO {mockUser.elo}

)} {/* Collapse Toggle */} {collapsed && (

)} {/* Settings */}

); } [V0_FILE]typescriptreact:file="components/game/dashboard.tsx" isMerged="true" "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { Badge } from "@/components/ui/badge"; import { mockUser, learningLevels, medals } from "@/lib/game-data"; import { Trophy, Flame, Target, Swords, BookOpen, Code2, Lock, CheckCircle2, Play, Star, TrendingUp, Clock, Zap, } from "lucide-react"; interface DashboardProps { onNavigate: (section: string) => void; } export function Dashboard({ onNavigate }: DashboardProps) { const currentLevel = learningLevels.find( (l) => l.id === mockUser.currentLearningLevel ); return (

{/* Welcome Header */}

Bienvenido, {mockUser.username}

Continua tu viaje en la Programacion Orientada a Objetos

{/* Stats Grid */}

Nivel Jugador

{mockUser.level}

Racha Activa

{mockUser.streak} dias

Batallas Ganadas

{mockUser.battlesWon}

Ranking Global

#{mockUser.rank}

{/* Main Content Grid */}

{/* Current Level Progress */} Progreso Actual - Nivel {currentLevel?.id}

{currentLevel?.name}

{currentLevel?.description}

En Progreso

Progreso del Nivel {currentLevel?.progress}%

{currentLevel?.topics.map((topic) => ( {topic} ))}

{/* Exercise Type Distribution */}

Bloques

{currentLevel?.blocksRatio}%

de ejercicios

Editor

{currentLevel?.editorRatio}%

de ejercicios

{/* Quick Actions & Medals */}

{/* Quick Battle */}

Batalla 1vs1

12 jugadores en linea

{/* Recent Medals */} Medallas Recientes {mockUser.medals.slice(0, 3).map((medal) => (

{medal.name}

{medal.description}

))}

{/* Learning Levels Overview */} Niveles de Aprendizaje C++

{learningLevels.map((level) => (

level.unlocked && onNavigate("levels")} > {!level.unlocked && (

)}

{level.id} {level.completed && ( )}

{level.name}

{level.description}

{level.unlocked && !level.completed && (

)}

))}

); } [V0_FILE]typescriptreact:file="components/game/levels-section.tsx" isMerged="true" "use client"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; import { Badge } from "@/components/ui/badge"; import { learningLevels } from "@/lib/game-data"; import { Lock, CheckCircle2, Play, BookOpen, Code2, Target, ChevronRight, } from "lucide-react"; interface LevelsSectionProps { onStartLesson: (levelId: number) => void; } export function LevelsSection({ onStartLesson }: LevelsSectionProps) { return (

Niveles de Aprendizaje

Domina C++ POO paso a paso, desbloqueando nuevos conceptos

{/* Level Path */}

{/* Connection Line */}

{learningLevels.map((level, index) => ( {/* Level Number Badge */}

{level.completed ? ( ) : level.unlocked ? ( level.id ) : ( )}

{/* Level Info */}

Nivel {level.id}: {level.name}

{level.completed && ( Completado )} {level.unlocked && !level.completed && level.progress > 0 && ( En Progreso )}

{level.description}

{/* Topics */}

{level.topics.map((topic) => ( {topic} ))}

{/* Progress Bar */} {level.unlocked && (

Progreso {level.progress}%

)}

{/* Exercise Distribution & Actions */}

{/* Exercise Ratio */}

{level.blocksRatio}%

Bloques

{level.editorRatio}%

Editor

{/* Action Button */} {level.unlocked ? ( ) : (

Completa el Nivel {level.id - 1} con {level.requiredAccuracy}%

)}

))}

); } [V0_FILE]typescriptreact:file="components/game/code-editor.tsx" isMerged="true" "use client"; import { useState, useRef, useEffect } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Badge } from "@/components/ui/badge"; import { Play, Check, X, Terminal, Loader2, AlertCircle, CheckCircle2, Code2, RotateCcw, } from "lucide-react"; import { cn } from "@/lib/utils"; interface CodeEditorProps { initialCode?: string; title?: string; description?: string; testCases?: Array<{ input: string; expectedOutput: string; description: string; }>; xpReward?: number; onComplete?: (success: boolean) => void; } export function CodeEditor({ initialCode = `#include using namespace std; class Persona { private: string nombre; int edad; public: // Tu codigo aqui }; int main() { // Crea una instancia de Persona return 0; }`, title = "Implementar Clase Persona", description = "Completa la clase Persona con un constructor que inicialice nombre y edad, y metodos getNombre() y getEdad().", testCases = [ { input: 'Persona p("Juan", 25)', expectedOutput: "Juan, 25", description: "Constructor basico" }, { input: "p.getNombre()", expectedOutput: "Juan", description: "Getter nombre" }, { input: "p.getEdad()", expectedOutput: "25", description: "Getter edad" }, ], xpReward = 75, onComplete, }: CodeEditorProps) { const [code, setCode] = useState(initialCode); const [output, setOutput] = useState(""); const [isCompiling, setIsCompiling] = useState(false); const [compileError, setCompileError] = useState(null); const [testResults, setTestResults] = useState< Array<{ passed: boolean; description: string }> >([]); const textareaRef = useRef(null); const lineNumbersRef = useRef(null); const lineCount = code.split("\n").length; // Sync scroll between textarea and line numbers const handleScroll = () => { if (textareaRef.current && lineNumbersRef.current) { lineNumbersRef.current.scrollTop = textareaRef.current.scrollTop; } }; // Simulate compilation const handleCompile = async () => { setIsCompiling(true); setCompileError(null); setOutput(""); setTestResults([]); // Simulate compilation delay await new Promise((resolve) => setTimeout(resolve, 1500)); // Simple error detection (for demo purposes) if (!code.includes("class") || !code.includes("public:")) { setCompileError( "Error: Se esperaba una definicion de clase con seccion publica" ); setIsCompiling(false); return; } // Simulate successful compilation setOutput("Compilacion exitosa!\n\n> Ejecutando programa...\n\nHola, soy Juan y tengo 25 anos."); // Simulate test results const results = testCases.map((test, index) => ({ passed: Math.random() > 0.3 || index === 0, // Demo: mostly pass description: test.description, })); setTestResults(results); const allPassed = results.every((r) => r.passed); if (allPassed && onComplete) { setTimeout(() => onComplete(true), 1000); } setIsCompiling(false); }; const handleReset = () => { setCode(initialCode); setOutput(""); setCompileError(null); setTestResults([]); }; // Simple syntax highlighting by wrapping keywords const highlightCode = (text: string) => { const keywords = [ "class", "public", "private", "protected", "int", "string", "void", "return", "include", "using", "namespace", "std", "cout", "cin", "endl", ]; let highlighted = text; keywords.forEach((keyword) => { const regex = new RegExp(`\\b${keyword}\\b`, "g"); highlighted = highlighted.replace( regex, `${keyword}` ); }); return highlighted; }; return (

{/* Header */}

Editor +{xpReward} XP

{title}

{description}

{/* Editor */}

main.cpp

{/* Line Numbers */}

{Array.from({ length: lineCount }, (_, i) => (

{i + 1}

))}

{/* Code Area */}

setCode(e.target.value)}
                onScroll={handleScroll}
                className="absolute inset-0 w-full h-full p-4 font-mono text-sm bg-transparent text-foreground resize-none focus:outline-none leading-6"
                spellCheck={false}
                style={{ caretColor: "#0099ff" }}
              />
            </div>
          </div>
        </CardContent>
      </Card>

{/* Actions */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          {testResults.length > 0 && (
            <div className="flex items-center gap-2">
              {testResults.map((result, index) => (
                <div
                  key={index}
                  className={cn(
                    "w-8 h-8 rounded-lg flex items-center justify-center",
                    result.passed
                      ? "bg-success/20 text-success"
                      : "bg-destructive/20 text-destructive"
                  )}
                  title={result.description}
                >
                  {result.passed ? (
                    <CheckCircle2 className="w-4 h-4" />
                  ) : (
                    <X className="w-4 h-4" />
                  )}
                </div>
              ))}
              <span className="text-sm text-muted-foreground">
                {testResults.filter((r) => r.passed).length}/{testResults.length}{" "}
                tests pasados
              </span>
            </div>
          )}
        </div>
        <Button
          onClick={handleCompile}
          disabled={isCompiling}
          className="bg-success hover:bg-success/90 text-success-foreground"
        >
          {isCompiling ? (
            <>
              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
              Compilando...
            </>
          ) : (
            <>
              <Play className="w-4 h-4 mr-2" />
              Compilar y Ejecutar
            </>
          )}
        </Button>
      </div>

{/* Output */}
      {(output || compileError) && (
        <Card className="bg-editor-bg border-border">
          <CardHeader className="py-2 px-4 border-b border-border">
            <div className="flex items-center gap-2">
              <Terminal className="w-4 h-4 text-muted-foreground" />
              <span className="text-sm text-muted-foreground">
                Terminal de Salida
              </span>
            </div>
          </CardHeader>
          <CardContent className="p-4">
            {compileError ? (
              <div className="flex items-start gap-2 text-destructive">
                <AlertCircle className="w-5 h-5 flex-shrink-0 mt-0.5" />
                <pre className="font-mono text-sm whitespace-pre-wrap">
                  {compileError}
                </pre>
              </div>
            ) : (
              <pre className="font-mono text-sm text-success whitespace-pre-wrap">
                {output}
              </pre>
            )}
          </CardContent>
        </Card>
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/game/parsons-exercise.tsx" isMerged="true"
"use client";

import React from "react"

import { useState, useCallback } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { sampleExercise, type CodeBlock } from "@/lib/game-data";
import {
  GripVertical,
  Check,
  X,
  Lightbulb,
  RotateCcw,
  Eye,
  Trophy,
  Zap,
  AlertTriangle,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface ParsonsExerciseProps {
  onComplete: (perfect: boolean, moves: number) => void;
}

export function ParsonsExercise({ onComplete }: ParsonsExerciseProps) {
  const exercise = sampleExercise;
  const initialBlocks = [...(exercise.codeBlocks || [])].sort(
    () => Math.random() - 0.5
  );

const [availableBlocks, setAvailableBlocks] = useState<CodeBlock[]>(
    initialBlocks
  );
  const [placedBlocks, setPlacedBlocks] = useState<CodeBlock[]>([]);
  const [draggedBlock, setDraggedBlock] = useState<CodeBlock | null>(null);
  const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
  const [moveCount, setMoveCount] = useState(0);
  const [attempts, setAttempts] = useState(0);
  const [showHint, setShowHint] = useState(false);
  const [currentHint, setCurrentHint] = useState(0);
  const [validationResult, setValidationResult] = useState<
    "correct" | "incorrect" | null
  >(null);
  const [showSolution, setShowSolution] = useState(false);

const handleDragStart = (block: CodeBlock, source: "available" | "placed") => {
    setDraggedBlock(block);
  };

const handleDragEnd = () => {
    setDraggedBlock(null);
    setDragOverIndex(null);
  };

const handleDragOver = (e: React.DragEvent, index: number) => {
    e.preventDefault();
    setDragOverIndex(index);
  };

const handleDropOnPlaced = (e: React.DragEvent, dropIndex: number) => {
    e.preventDefault();
    if (!draggedBlock) return;

setMoveCount((prev) => prev + 1);

// Remove from available if it was there
    setAvailableBlocks((prev) =>
      prev.filter((b) => b.id !== draggedBlock.id)
    );

// Remove from placed if it was there (for reordering)
    const newPlaced = placedBlocks.filter((b) => b.id !== draggedBlock.id);

// Insert at the drop position
    newPlaced.splice(dropIndex, 0, draggedBlock);
    setPlacedBlocks(newPlaced);

handleDragEnd();
  };

const handleDropOnAvailable = (e: React.DragEvent) => {
    e.preventDefault();
    if (!draggedBlock) return;

// Remove from placed
    setPlacedBlocks((prev) => prev.filter((b) => b.id !== draggedBlock.id));

// Add back to available if not already there
    if (!availableBlocks.find((b) => b.id === draggedBlock.id)) {
      setAvailableBlocks((prev) => [...prev, draggedBlock]);
    }

handleDragEnd();
  };

const handleValidate = () => {
    const placedIds = placedBlocks.map((b) => b.id).join(",");
    const isCorrect = placedIds === exercise.solution;

setValidationResult(isCorrect ? "correct" : "incorrect");
    setAttempts((prev) => prev + 1);

if (isCorrect) {
      const isPerfect = moveCount <= placedBlocks.length + 2;
      setTimeout(() => onComplete(isPerfect, moveCount), 1500);
    }
  };

const handleReset = () => {
    setAvailableBlocks(
      [...(exercise.codeBlocks || [])].sort(() => Math.random() - 0.5)
    );
    setPlacedBlocks([]);
    setMoveCount(0);
    setValidationResult(null);
    setShowHint(false);
    setCurrentHint(0);
  };

const handleShowHint = () => {
    if (!showHint) {
      setShowHint(true);
    } else if (currentHint < exercise.hints.length - 1) {
      setCurrentHint((prev) => prev + 1);
    }
  };

const handleShowSolution = () => {
    if (attempts >= 5) {
      setShowSolution(true);
      const correctOrder = exercise.solution.split(",");
      const correctBlocks = correctOrder
        .map((id) => exercise.codeBlocks?.find((b) => b.id === id))
        .filter(Boolean) as CodeBlock[];
      setPlacedBlocks(correctBlocks);
      setAvailableBlocks([]);
    }
  };

return (
    <div className="space-y-6">
      {/* Exercise Header */}
      <Card className="bg-card border-border">
        <CardHeader className="pb-3">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <Badge
                  variant="outline"
                  className="border-primary text-primary"
                >
                  Bloques
                </Badge>
                <Badge
                  variant="outline"
                  className={cn(
                    exercise.difficulty === "easy" &&
                      "border-success text-success",
                    exercise.difficulty === "medium" &&
                      "border-warning text-warning",
                    exercise.difficulty === "hard" &&
                      "border-destructive text-destructive"
                  )}
                >
                  {exercise.difficulty === "easy"
                    ? "Facil"
                    : exercise.difficulty === "medium"
                    ? "Medio"
                    : "Dificil"}
                </Badge>
                <Badge variant="secondary" className="bg-gold/20 text-gold">
                  +{exercise.xpReward} XP
                </Badge>
              </div>
              <CardTitle className="text-xl">{exercise.title}</CardTitle>
              <p className="text-muted-foreground mt-1">
                {exercise.description}
              </p>
            </div>
            <div className="flex items-center gap-4 text-sm">
              <div className="text-center">
                <p className="text-muted-foreground">Movimientos</p>
                <p className="text-2xl font-bold text-primary">{moveCount}</p>
              </div>
              <div className="text-center">
                <p className="text-muted-foreground">Intentos</p>
                <p className="text-2xl font-bold text-accent">{attempts}</p>
              </div>
            </div>
          </div>
        </CardHeader>
      </Card>

{/* Hint Display */}
      {showHint && (
        <Card className="bg-warning/10 border-warning/30">
          <CardContent className="p-4 flex items-start gap-3">
            <Lightbulb className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
            <div>
              <p className="font-medium text-foreground">
                Pista {currentHint + 1}
              </p>
              <p className="text-sm text-muted-foreground">
                {exercise.hints[currentHint]}
              </p>
            </div>
          </CardContent>
        </Card>
      )}

{/* Main Exercise Area */}
      <div className="grid lg:grid-cols-2 gap-6">
        {/* Available Blocks */}
        <Card className="bg-card border-border">
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <Zap className="w-5 h-5 text-warning" />
              Bloques Disponibles
            </CardTitle>
          </CardHeader>
          <CardContent
            className="min-h-[300px] p-4 bg-secondary/30 rounded-lg"
            onDragOver={(e) => e.preventDefault()}
            onDrop={handleDropOnAvailable}
          >
            <div className="space-y-2">
              {availableBlocks.map((block) => (
                <div
                  key={block.id}
                  draggable
                  onDragStart={() => handleDragStart(block, "available")}
                  onDragEnd={handleDragEnd}
                  className={cn(
                    "flex items-center gap-2 p-3 rounded-lg cursor-grab active:cursor-grabbing transition-all",
                    "bg-editor-bg border hover:border-primary/50",
                    block.isDistractor
                      ? "border-destructive/30 hover:border-destructive"
                      : "border-border",
                    draggedBlock?.id === block.id && "opacity-50 scale-95"
                  )}
                >
                  <GripVertical className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                  {block.isDistractor && (
                    <AlertTriangle className="w-4 h-4 text-destructive flex-shrink-0" />
                  )}
                  <code
                    className="font-mono text-sm flex-1"
                    style={{ paddingLeft: `${block.indentation * 16}px` }}
                  >
                    <span
                      className={cn(
                        block.code.includes("class") && "syntax-keyword",
                        block.code.includes("private") && "syntax-keyword",
                        block.code.includes("public") && "syntax-keyword",
                        block.code.includes("string") && "syntax-type",
                        block.code.includes("int") && "syntax-type",
                        block.code.includes("float") && "syntax-type"
                      )}
                    >
                      {block.code}
                    </span>
                  </code>
                </div>
              ))}
              {availableBlocks.length === 0 && (
                <div className="text-center py-8 text-muted-foreground">
                  Todos los bloques han sido colocados
                </div>
              )}
            </div>
          </CardContent>
        </Card>

{/* Solution Area */}
        <Card
          className={cn(
            "bg-card border-2 transition-all",
            validationResult === "correct" && "border-success bg-success/5",
            validationResult === "incorrect" &&
              "border-destructive bg-destructive/5 animate-shake",
            !validationResult && "border-border"
          )}
        >
          <CardHeader className="pb-3">
            <CardTitle className="text-lg flex items-center gap-2">
              <Trophy
                className={cn(
                  "w-5 h-5",
                  validationResult === "correct"
                    ? "text-success"
                    : "text-primary"
                )}
              />
              Tu Solucion
              {validationResult === "correct" && (
                <Badge className="bg-success text-success-foreground ml-2">
                  Correcto!
                </Badge>
              )}
              {validationResult === "incorrect" && (
                <Badge className="bg-destructive text-destructive-foreground ml-2">
                  Intenta de nuevo
                </Badge>
              )}
            </CardTitle>
          </CardHeader>
          <CardContent className="min-h-[300px] p-4 bg-editor-bg rounded-lg">
            <div className="space-y-1">
              {placedBlocks.length === 0 && (
                <div
                  className="border-2 border-dashed border-primary/30 rounded-lg p-8 text-center"
                  onDragOver={(e) => handleDragOver(e, 0)}
                  onDrop={(e) => handleDropOnPlaced(e, 0)}
                >
                  <p className="text-muted-foreground">
                    Arrastra los bloques aqui para construir tu codigo
                  </p>
                </div>
              )}
              {placedBlocks.map((block, index) => (
                <div key={block.id}>
                  {/* Drop zone above */}
                  <div
                    className={cn(
                      "h-1 rounded transition-all",
                      dragOverIndex === index && "h-8 bg-primary/20 border-2 border-dashed border-primary"
                    )}
                    onDragOver={(e) => handleDragOver(e, index)}
                    onDrop={(e) => handleDropOnPlaced(e, index)}
                  />
                  <div
                    draggable
                    onDragStart={() => handleDragStart(block, "placed")}
                    onDragEnd={handleDragEnd}
                    className={cn(
                      "flex items-center gap-2 p-3 rounded-lg cursor-grab active:cursor-grabbing transition-all",
                      "bg-secondary/50 border border-primary/30 hover:border-primary",
                      draggedBlock?.id === block.id && "opacity-50 scale-95",
                      validationResult === "correct" && "border-success/50",
                      validationResult === "incorrect" && "border-destructive/50"
                    )}
                  >
                    <GripVertical className="w-4 h-4 text-muted-foreground flex-shrink-0" />
                    <span className="text-xs text-muted-foreground w-4">
                      {index + 1}
                    </span>
                    <code
                      className="font-mono text-sm flex-1"
                      style={{ paddingLeft: `${block.indentation * 16}px` }}
                    >
                      <span
                        className={cn(
                          block.code.includes("class") && "syntax-keyword",
                          block.code.includes("private") && "syntax-keyword",
                          block.code.includes("public") && "syntax-keyword",
                          block.code.includes("string") && "syntax-type",
                          block.code.includes("int") && "syntax-type"
                        )}
                      >
                        {block.code}
                      </span>
                    </code>
                  </div>
                </div>
              ))}
              {/* Final drop zone */}
              {placedBlocks.length > 0 && (
                <div
                  className={cn(
                    "h-1 rounded transition-all",
                    dragOverIndex === placedBlocks.length &&
                      "h-8 bg-primary/20 border-2 border-dashed border-primary"
                  )}
                  onDragOver={(e) => handleDragOver(e, placedBlocks.length)}
                  onDrop={(e) => handleDropOnPlaced(e, placedBlocks.length)}
                />
              )}
            </div>
          </CardContent>
        </Card>
      </div>

{/* Action Buttons */}
      <div className="flex flex-wrap items-center justify-between gap-4">
        <div className="flex gap-2">
          <Button
            variant="outline"
            onClick={handleReset}
            className="border-border text-foreground hover:bg-secondary bg-transparent"
          >
            <RotateCcw className="w-4 h-4 mr-2" />
            Reiniciar
          </Button>
          <Button
            variant="outline"
            onClick={handleShowHint}
            className="border-warning text-warning hover:bg-warning/10 bg-transparent"
          >
            <Lightbulb className="w-4 h-4 mr-2" />
            Pista ({currentHint + 1}/{exercise.hints.length})
          </Button>
          {attempts >= 5 && !showSolution && (
            <Button
              variant="outline"
              onClick={handleShowSolution}
              className="border-accent text-accent hover:bg-accent/10 bg-transparent"
            >
              <Eye className="w-4 h-4 mr-2" />
              Ver Solucion
            </Button>
          )}
        </div>
        <Button
          onClick={handleValidate}
          disabled={placedBlocks.length === 0 || validationResult === "correct"}
          className="bg-primary hover:bg-primary/90 text-primary-foreground px-8"
        >
          {validationResult === "correct" ? (
            <>
              <Check className="w-4 h-4 mr-2" />
              Completado!
            </>
          ) : (
            <>
              <Check className="w-4 h-4 mr-2" />
              Validar Solucion
            </>
          )}
        </Button>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/game/practice-section.tsx" isMerged="true"
"use client";

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ParsonsExercise } from "./parsons-exercise";
import { CodeEditor } from "./code-editor";
import {
  Code2,
  Blocks,
  Trophy,
  Sparkles,
  ArrowLeft,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface PracticeSectionProps {
  onBack?: () => void;
}

export function PracticeSection({ onBack }: PracticeSectionProps) {
  const [activeTab, setActiveTab] = useState<"blocks" | "editor">("blocks");
  const [showCelebration, setShowCelebration] = useState(false);
  const [earnedXP, setEarnedXP] = useState(0);

const handleExerciseComplete = (perfect: boolean, moves: number) => {
    const baseXP = 50;
    const bonusXP = perfect ? 25 : 0;
    setEarnedXP(baseXP + bonusXP);
    setShowCelebration(true);
    setTimeout(() => setShowCelebration(false), 3000);
  };

const handleEditorComplete = (success: boolean) => {
    if (success) {
      setEarnedXP(75);
      setShowCelebration(true);
      setTimeout(() => setShowCelebration(false), 3000);
    }
  };

return (
    <div className="space-y-6 relative">
      {/* Celebration Overlay */}
      {showCelebration && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm">
          <Card className="bg-card border-success/50 p-8 text-center animate-float">
            <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-success/20 flex items-center justify-center">
              <Trophy className="w-10 h-10 text-success" />
            </div>
            <h2 className="text-2xl font-bold text-foreground mb-2">
              Excelente Trabajo!
            </h2>
            <p className="text-muted-foreground mb-4">
              Has completado el ejercicio correctamente
            </p>
            <div className="flex items-center justify-center gap-2 text-gold">
              <Sparkles className="w-5 h-5" />
              <span className="text-3xl font-bold">+{earnedXP} XP</span>
              <Sparkles className="w-5 h-5" />
            </div>
          </Card>
        </div>
      )}

{/* Header */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          {onBack && (
            <Button
              variant="ghost"
              size="icon"
              onClick={onBack}
              className="text-muted-foreground hover:text-foreground"
            >
              <ArrowLeft className="w-5 h-5" />
            </Button>
          )}
          <div>
            <h1 className="text-3xl font-bold text-foreground">
              Zona de <span className="gradient-text">Practica</span>
            </h1>
            <p className="text-muted-foreground mt-1">
              Elige tu tipo de ejercicio y mejora tus habilidades en C++
            </p>
          </div>
        </div>
      </div>

{/* Exercise Type Tabs */}
      <Tabs
        value={activeTab}
        onValueChange={(v) => setActiveTab(v as "blocks" | "editor")}
        className="w-full"
      >
        <TabsList className="grid w-full max-w-md grid-cols-2 bg-secondary/50">
          <TabsTrigger
            value="blocks"
            className={cn(
              "flex items-center gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
            )}
          >
            <Blocks className="w-4 h-4" />
            Ejercicios de Bloques
          </TabsTrigger>
          <TabsTrigger
            value="editor"
            className={cn(
              "flex items-center gap-2 data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
            )}
          >
            <Code2 className="w-4 h-4" />
            Editor de Codigo
          </TabsTrigger>
        </TabsList>

<TabsContent value="editor" className="mt-6">
          <CodeEditor onComplete={handleEditorComplete} />
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/game/ranking-section.tsx" isMerged="true"
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { mockUser } from "@/lib/game-data";
import {
  Trophy,
  Star,
  Swords,
  Flame,
  TrendingUp,
  Medal,
  Crown,
} from "lucide-react";
import { cn } from "@/lib/utils";

// Mock ranking data
const xpRanking = [
  { rank: 1, username: "CodeLegend", level: 45, xp: 125000, streak: 42 },
  { rank: 2, username: "ByteMaster", level: 42, xp: 118500, streak: 30 },
  { rank: 3, username: "PointerGod", level: 40, xp: 112000, streak: 25 },
  { rank: 4, username: "TemplateWizard", level: 38, xp: 105000, streak: 18 },
  { rank: 5, username: "ClassHero", level: 35, xp: 98000, streak: 15 },
  { rank: 6, username: "STLSamurai", level: 33, xp: 92000, streak: 12 },
  { rank: 7, username: "VirtualVictor", level: 31, xp: 87000, streak: 10 },
  { rank: 8, username: "ObjectOracle", level: 29, xp: 82000, streak: 8 },
  { rank: 9, username: "InheritanceKing", level: 27, xp: 78000, streak: 7 },
  { rank: 10, username: "PolyPro", level: 25, xp: 74000, streak: 5 },
];

const battleRanking = [
  { rank: 1, username: "BattleBoss", elo: 2150, wins: 245, losses: 32 },
  { rank: 2, username: "CodeCrusher", elo: 2080, wins: 198, losses: 41 },
  { rank: 3, username: "WarriorCoder", elo: 1980, wins: 167, losses: 52 },
  { rank: 4, username: "FightMaster", elo: 1920, wins: 145, losses: 48 },
  { rank: 5, username: "ChampionDev", elo: 1850, wins: 132, losses: 55 },
  { rank: 6, username: "BattleNinja", elo: 1780, wins: 120, losses: 62 },
  { rank: 7, username: "CodeKnight", elo: 1720, wins: 108, losses: 58 },
  { rank: 8, username: "DuelMaster", elo: 1680, wins: 95, losses: 52 },
  { rank: 9, username: "ArenaKing", elo: 1640, wins: 88, losses: 48 },
  { rank: 10, username: "FightCoder", elo: 1600, wins: 82, losses: 45 },
];

const getRankIcon = (rank: number) => {
  if (rank === 1)
    return <Crown className="w-5 h-5 text-gold" />;
  if (rank === 2)
    return <Medal className="w-5 h-5 text-gray-300" />;
  if (rank === 3)
    return <Medal className="w-5 h-5 text-amber-600" />;
  return null;
};

const getRankBg = (rank: number) => {
  if (rank === 1) return "bg-gold/10 border-gold/30";
  if (rank === 2) return "bg-gray-300/10 border-gray-300/30";
  if (rank === 3) return "bg-amber-600/10 border-amber-600/30";
  return "bg-secondary/50 border-border";
};

export function RankingSection() {
  return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-foreground">
          Ranking <span className="gradient-text">Global</span>
        </h1>
        <p className="text-muted-foreground mt-1">
          Compite con jugadores de todo el mundo
        </p>
      </div>

{/* Your Position */}
      <Card className="bg-gradient-to-r from-primary/20 to-accent/20 border-primary/30">
        <CardContent className="p-6">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="relative">
                <Avatar className="w-16 h-16 border-4 border-primary">
                  <AvatarFallback className="bg-primary text-primary-foreground text-2xl">
                    {mockUser.username[0]}
                  </AvatarFallback>
                </Avatar>
                <div className="absolute -bottom-1 -right-1 bg-gold text-gold-foreground text-xs font-bold px-2 py-0.5 rounded-full">
                  #{mockUser.rank}
                </div>
              </div>
              <div>
                <p className="text-xl font-bold text-foreground">
                  {mockUser.username}
                </p>
                <p className="text-muted-foreground">Tu Posicion Actual</p>
              </div>
            </div>
            <div className="flex gap-8">
              <div className="text-center">
                <p className="text-3xl font-bold text-primary">{mockUser.xp}</p>
                <p className="text-sm text-muted-foreground">XP Total</p>
              </div>
              <div className="text-center">
                <p className="text-3xl font-bold text-gold">{mockUser.elo}</p>
                <p className="text-sm text-muted-foreground">ELO</p>
              </div>
              <div className="text-center">
                <p className="text-3xl font-bold text-success">
                  {mockUser.battlesWon}
                </p>
                <p className="text-sm text-muted-foreground">Victorias</p>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>

{/* Rankings Tabs */}
      <Tabs defaultValue="xp" className="w-full">
        <TabsList className="grid w-full max-w-md grid-cols-2 bg-secondary/50">
          <TabsTrigger
            value="xp"
            className="flex items-center gap-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
          >
            <Star className="w-4 h-4" />
            Ranking XP
          </TabsTrigger>
          <TabsTrigger
            value="battles"
            className="flex items-center gap-2 data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
          >
            <Swords className="w-4 h-4" />
            Ranking Batallas
          </TabsTrigger>
        </TabsList>

{/* XP Ranking */}
        <TabsContent value="xp" className="mt-6">
          <Card className="bg-card border-border">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Trophy className="w-5 h-5 text-gold" />
                Top 10 - Experiencia Total
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {xpRanking.map((player) => (
                <div
                  key={player.rank}
                  className={cn(
                    "flex items-center gap-4 p-4 rounded-xl border transition-all hover:scale-[1.01]",
                    getRankBg(player.rank)
                  )}
                >
                  {/* Rank */}
                  <div className="w-12 flex items-center justify-center">
                    {getRankIcon(player.rank) || (
                      <span className="text-xl font-bold text-muted-foreground">
                        {player.rank}
                      </span>
                    )}
                  </div>

{/* Avatar & Name */}
                  <Avatar className="w-12 h-12">
                    <AvatarFallback
                      className={cn(
                        "text-lg",
                        player.rank === 1 && "bg-gold/20 text-gold",
                        player.rank === 2 && "bg-gray-300/20 text-gray-300",
                        player.rank === 3 && "bg-amber-600/20 text-amber-600",
                        player.rank > 3 && "bg-primary/20 text-primary"
                      )}
                    >
                      {player.username[0]}
                    </AvatarFallback>
                  </Avatar>

<div className="flex-1">
                    <p className="font-bold text-foreground">{player.username}</p>
                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
                      <span>Nivel {player.level}</span>
                      <span>|</span>
                      <span className="flex items-center gap-1 text-warning">
                        <Flame className="w-3 h-3" />
                        {player.streak} dias
                      </span>
                    </div>
                  </div>

{/* XP */}
                  <div className="text-right">
                    <p className="text-xl font-bold text-primary">
                      {player.xp.toLocaleString()}
                    </p>
                    <p className="text-xs text-muted-foreground">XP</p>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>

{/* Battle Ranking */}
        <TabsContent value="battles" className="mt-6">
          <Card className="bg-card border-border">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Swords className="w-5 h-5 text-accent" />
                Top 10 - Ranking ELO
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {battleRanking.map((player) => (
                <div
                  key={player.rank}
                  className={cn(
                    "flex items-center gap-4 p-4 rounded-xl border transition-all hover:scale-[1.01]",
                    getRankBg(player.rank)
                  )}
                >
                  {/* Rank */}
                  <div className="w-12 flex items-center justify-center">
                    {getRankIcon(player.rank) || (
                      <span className="text-xl font-bold text-muted-foreground">
                        {player.rank}
                      </span>
                    )}
                  </div>

{/* Avatar & Name */}
                  <Avatar className="w-12 h-12">
                    <AvatarFallback
                      className={cn(
                        "text-lg",
                        player.rank === 1 && "bg-gold/20 text-gold",
                        player.rank === 2 && "bg-gray-300/20 text-gray-300",
                        player.rank === 3 && "bg-amber-600/20 text-amber-600",
                        player.rank > 3 && "bg-accent/20 text-accent"
                      )}
                    >
                      {player.username[0]}
                    </AvatarFallback>
                  </Avatar>

<div className="flex-1">
                    <p className="font-bold text-foreground">{player.username}</p>
                    <div className="flex items-center gap-2 text-sm">
                      <span className="text-success">{player.wins}W</span>
                      <span className="text-muted-foreground">/</span>
                      <span className="text-destructive">{player.losses}L</span>
                      <span className="text-muted-foreground">|</span>
                      <span className="text-muted-foreground">
                        {Math.round(
                          (player.wins / (player.wins + player.losses)) * 100
                        )}
                        % WR
                      </span>
                    </div>
                  </div>

{/* ELO */}
                  <div className="text-right">
                    <p className="text-xl font-bold text-accent">{player.elo}</p>
                    <p className="text-xs text-muted-foreground">ELO</p>
                  </div>
                </div>
              ))}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/game/battle-section.tsx" isMerged="true"
"use client";

import { useState, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
import { mockUser } from "@/lib/game-data";
import {
  Swords,
  Clock,
  Users,
  Trophy,
  Zap,
  MessageSquare,
  Play,
  X,
  Star,
  Flame,
  Target,
  Loader2,
} from "lucide-react";
import { cn } from "@/lib/utils";

type BattleStatus = "lobby" | "searching" | "found" | "battle" | "results";

interface Opponent {
  username: string;
  level: number;
  elo: number;
  battlesWon: number;
}

export function BattleSection() {
  const [status, setStatus] = useState<BattleStatus>("lobby");
  const [searchTime, setSearchTime] = useState(0);
  const [opponent, setOpponent] = useState<Opponent | null>(null);
  const [battleTime, setBattleTime] = useState(900); // 15 minutes
  const [scores, setScores] = useState({ player: 0, opponent: 0 });
  const [currentProblem, setCurrentProblem] = useState(1);

// Online players (mock data)
  const onlinePlayers = [
    { username: "CodeMaster", level: 15, elo: 1350, status: "online" },
    { username: "ByteWarrior", level: 8, elo: 1100, status: "in_battle" },
    { username: "PointerPro", level: 22, elo: 1520, status: "online" },
    { username: "TemplateKing", level: 18, elo: 1400, status: "online" },
    { username: "ClassBuilder", level: 10, elo: 1180, status: "searching" },
  ];

// Search timer
  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (status === "searching") {
      interval = setInterval(() => {
        setSearchTime((prev) => prev + 1);
      }, 1000);

// Simulate finding opponent after 3-8 seconds
      const timeout = setTimeout(() => {
        setOpponent({
          username: "AlgorithmAce",
          level: 14,
          elo: 1280,
          battlesWon: 42,
        });
        setStatus("found");
        setTimeout(() => setStatus("battle"), 3000);
      }, 3000 + Math.random() * 5000);

return () => {
        clearInterval(interval);
        clearTimeout(timeout);
      };
    }
    return () => clearInterval(interval);
  }, [status]);

// Battle timer
  useEffect(() => {
    let interval: NodeJS.Timeout;
    if (status === "battle") {
      interval = setInterval(() => {
        setBattleTime((prev) => {
          if (prev <= 0) {
            setStatus("results");
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [status]);

const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60);
    const secs = seconds % 60;
    return `${mins}:${secs.toString().padStart(2, "0")}`;
  };

const handleStartSearch = () => {
    setStatus("searching");
    setSearchTime(0);
  };

const handleCancelSearch = () => {
    setStatus("lobby");
    setSearchTime(0);
  };

return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">
            Batallas <span className="gradient-text">1vs1</span>
          </h1>
          <p className="text-muted-foreground mt-1">
            Compite en tiempo real contra otros estudiantes
          </p>
        </div>
        <div className="flex items-center gap-2 px-4 py-2 bg-secondary rounded-lg">
          <Users className="w-5 h-5 text-success" />
          <span className="font-medium text-foreground">
            {onlinePlayers.length} en linea
          </span>
        </div>
      </div>

{/* Lobby View */}
      {status === "lobby" && (
        <div className="grid lg:grid-cols-3 gap-6">
          {/* Quick Battle Card */}
          <Card className="lg:col-span-2 bg-gradient-to-br from-primary/20 to-accent/20 border-primary/30">
            <CardContent className="p-8">
              <div className="flex flex-col items-center text-center">
                <div className="w-24 h-24 rounded-full bg-primary/20 flex items-center justify-center mb-4 animate-glow">
                  <Swords className="w-12 h-12 text-primary" />
                </div>
                <h2 className="text-2xl font-bold text-foreground mb-2">
                  Batalla Rapida
                </h2>
                <p className="text-muted-foreground mb-6 max-w-md">
                  Enfrentate a un oponente de tu nivel. 3 problemas, 15 minutos,
                  gana puntos por velocidad y precision.
                </p>
                <div className="grid grid-cols-3 gap-6 mb-6 w-full max-w-sm">
                  <div className="text-center">
                    <div className="w-12 h-12 rounded-lg bg-primary/20 flex items-center justify-center mx-auto mb-2">
                      <Target className="w-6 h-6 text-primary" />
                    </div>
                    <p className="text-xs text-muted-foreground">3 Problemas</p>
                  </div>
                  <div className="text-center">
                    <div className="w-12 h-12 rounded-lg bg-warning/20 flex items-center justify-center mx-auto mb-2">
                      <Clock className="w-6 h-6 text-warning" />
                    </div>
                    <p className="text-xs text-muted-foreground">15 Minutos</p>
                  </div>
                  <div className="text-center">
                    <div className="w-12 h-12 rounded-lg bg-gold/20 flex items-center justify-center mx-auto mb-2">
                      <Star className="w-6 h-6 text-gold" />
                    </div>
                    <p className="text-xs text-muted-foreground">+50 ELO</p>
                  </div>
                </div>
                <Button
                  size="lg"
                  onClick={handleStartSearch}
                  className="bg-primary hover:bg-primary/90 text-primary-foreground px-12"
                >
                  <Zap className="w-5 h-5 mr-2" />
                  Buscar Oponente
                </Button>
              </div>
            </CardContent>
          </Card>

{/* Your Stats */}
          <Card className="bg-card border-border">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Trophy className="w-5 h-5 text-gold" />
                Tus Estadisticas
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-4">
                <Avatar className="w-16 h-16 border-2 border-primary">
                  <AvatarFallback className="bg-primary text-primary-foreground text-xl">
                    {mockUser.username[0]}
                  </AvatarFallback>
                </Avatar>
                <div>
                  <p className="font-bold text-foreground">
                    {mockUser.username}
                  </p>
                  <div className="flex items-center gap-2 text-sm">
                    <span className="text-gold">ELO: {mockUser.elo}</span>
                    <span className="text-muted-foreground">|</span>
                    <span className="text-muted-foreground">
                      Lvl {mockUser.level}
                    </span>
                  </div>
                </div>
              </div>
              <div className="grid grid-cols-2 gap-3">
                <div className="p-3 rounded-lg bg-success/10 border border-success/30 text-center">
                  <p className="text-2xl font-bold text-success">
                    {mockUser.battlesWon}
                  </p>
                  <p className="text-xs text-muted-foreground">Victorias</p>
                </div>
                <div className="p-3 rounded-lg bg-destructive/10 border border-destructive/30 text-center">
                  <p className="text-2xl font-bold text-destructive">
                    {mockUser.battlesLost}
                  </p>
                  <p className="text-xs text-muted-foreground">Derrotas</p>
                </div>
              </div>
              <div className="p-3 rounded-lg bg-secondary/50">
                <div className="flex justify-between text-sm mb-1">
                  <span className="text-muted-foreground">Ratio de Victoria</span>
                  <span className="font-medium text-foreground">
                    {Math.round(
                      (mockUser.battlesWon /
                        (mockUser.battlesWon + mockUser.battlesLost)) *
                        100
                    )}
                    %
                  </span>
                </div>
                <Progress
                  value={
                    (mockUser.battlesWon /
                      (mockUser.battlesWon + mockUser.battlesLost)) *
                    100
                  }
                  className="h-2"
                />
              </div>
            </CardContent>
          </Card>

{/* Online Players */}
          <Card className="lg:col-span-3 bg-card border-border">
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Users className="w-5 h-5 text-primary" />
                Jugadores en Linea
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-3">
                {onlinePlayers.map((player) => (
                  <div
                    key={player.username}
                    className="flex items-center gap-3 p-3 rounded-lg bg-secondary/50 border border-border hover:border-primary/50 transition-colors cursor-pointer"
                  >
                    <div className="relative">
                      <Avatar className="w-10 h-10">
                        <AvatarFallback className="bg-primary/20 text-primary">
                          {player.username[0]}
                        </AvatarFallback>
                      </Avatar>
                      <div
                        className={cn(
                          "absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-card",
                          player.status === "online" && "bg-success",
                          player.status === "searching" && "bg-warning",
                          player.status === "in_battle" && "bg-destructive"
                        )}
                      />
                    </div>
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-sm text-foreground truncate">
                        {player.username}
                      </p>
                      <p className="text-xs text-muted-foreground">
                        ELO: {player.elo}
                      </p>
                    </div>
                    {player.status === "online" && (
                      <Button size="sm" variant="ghost" className="text-primary">
                        <Swords className="w-4 h-4" />
                      </Button>
                    )}
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      )}

{/* Searching View */}
      {status === "searching" && (
        <Card className="bg-card border-primary/30">
          <CardContent className="p-12">
            <div className="flex flex-col items-center text-center">
              <div className="w-32 h-32 rounded-full bg-primary/20 flex items-center justify-center mb-6 animate-glow">
                <Loader2 className="w-16 h-16 text-primary animate-spin" />
              </div>
              <h2 className="text-2xl font-bold text-foreground mb-2">
                Buscando Oponente...
              </h2>
              <p className="text-muted-foreground mb-4">
                Buscando un jugador de nivel similar
              </p>
              <p className="text-4xl font-mono font-bold text-primary mb-6">
                {formatTime(searchTime)}
              </p>
              <Button
                variant="outline"
                onClick={handleCancelSearch}
                className="border-destructive text-destructive hover:bg-destructive/10 bg-transparent"
              >
                <X className="w-4 h-4 mr-2" />
                Cancelar Busqueda
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

{/* Opponent Found View */}
      {status === "found" && opponent && (
        <Card className="bg-card border-success/30">
          <CardContent className="p-12">
            <div className="flex flex-col items-center text-center">
              <h2 className="text-2xl font-bold text-success mb-8">
                Oponente Encontrado!
              </h2>
              <div className="flex items-center justify-center gap-12">
                {/* You */}
                <div className="text-center">
                  <Avatar className="w-24 h-24 border-4 border-primary mx-auto mb-3">
                    <AvatarFallback className="bg-primary text-primary-foreground text-3xl">
                      {mockUser.username[0]}
                    </AvatarFallback>
                  </Avatar>
                  <p className="font-bold text-foreground">
                    {mockUser.username}
                  </p>
                  <p className="text-sm text-muted-foreground">
                    ELO: {mockUser.elo}
                  </p>
                </div>

{/* VS */}
                <div className="text-4xl font-bold text-accent">VS</div>

{/* Opponent */}
                <div className="text-center">
                  <Avatar className="w-24 h-24 border-4 border-accent mx-auto mb-3">
                    <AvatarFallback className="bg-accent text-accent-foreground text-3xl">
                      {opponent.username[0]}
                    </AvatarFallback>
                  </Avatar>
                  <p className="font-bold text-foreground">
                    {opponent.username}
                  </p>
                  <p className="text-sm text-muted-foreground">
                    ELO: {opponent.elo}
                  </p>
                </div>
              </div>
              <p className="text-muted-foreground mt-8">
                La batalla comenzara en unos segundos...
              </p>
            </div>
          </CardContent>
        </Card>
      )}

{/* Battle View */}
      {status === "battle" && opponent && (
        <div className="space-y-4">
          {/* Battle Header */}
          <Card className="bg-card border-border">
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                {/* You */}
                <div className="flex items-center gap-3">
                  <Avatar className="w-12 h-12 border-2 border-primary">
                    <AvatarFallback className="bg-primary text-primary-foreground">
                      {mockUser.username[0]}
                    </AvatarFallback>
                  </Avatar>
                  <div>
                    <p className="font-bold text-foreground">
                      {mockUser.username}
                    </p>
                    <p className="text-2xl font-bold text-primary">
                      {scores.player}
                    </p>
                  </div>
                </div>

{/* Timer */}
                <div className="text-center">
                  <div
                    className={cn(
                      "text-4xl font-mono font-bold",
                      battleTime <= 60 ? "text-destructive" : "text-foreground"
                    )}
                  >
                    {formatTime(battleTime)}
                  </div>
                  <p className="text-sm text-muted-foreground">
                    Problema {currentProblem}/3
                  </p>
                </div>

{/* Opponent */}
                <div className="flex items-center gap-3 flex-row-reverse">
                  <Avatar className="w-12 h-12 border-2 border-accent">
                    <AvatarFallback className="bg-accent text-accent-foreground">
                      {opponent.username[0]}
                    </AvatarFallback>
                  </Avatar>
                  <div className="text-right">
                    <p className="font-bold text-foreground">
                      {opponent.username}
                    </p>
                    <p className="text-2xl font-bold text-accent">
                      {scores.opponent}
                    </p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>

{/* Problem Area (Simplified for demo) */}
          <Card className="bg-card border-border min-h-[400px]">
            <CardHeader>
              <CardTitle>Problema {currentProblem}: Implementar Clase</CardTitle>
            </CardHeader>
            <CardContent>
              <p className="text-muted-foreground mb-4">
                Crea una clase "Rectangulo" con atributos ancho y alto, y un
                metodo calcularArea() que retorne el area.
              </p>
              <div className="bg-editor-bg rounded-lg p-4 font-mono text-sm h-[200px] flex items-center justify-center text-muted-foreground">
                [Editor de codigo aqui - simplificado para demo]
              </div>
              <div className="mt-4 flex justify-end">
                <Button
                  onClick={handleSimulateSolve}
                  className="bg-success hover:bg-success/90 text-success-foreground"
                >
                  <Play className="w-4 h-4 mr-2" />
                  Enviar Solucion
                </Button>
              </div>
            </CardContent>
          </Card>

{/* Chat */}
          <Card className="bg-card border-border">
            <CardContent className="p-3 flex items-center gap-2">
              <MessageSquare className="w-4 h-4 text-muted-foreground" />
              <input
                type="text"
                placeholder="Escribe un mensaje..."
                className="flex-1 bg-transparent text-sm focus:outline-none"
              />
              <Button size="sm" variant="ghost">
                Enviar
              </Button>
            </CardContent>
          </Card>
        </div>
      )}

{/* Results View */}
      {status === "results" && opponent && (
        <Card className="bg-card border-border">
          <CardContent className="p-12">
            <div className="flex flex-col items-center text-center">
              {scores.player > scores.opponent ? (
                <>
                  <div className="w-24 h-24 rounded-full bg-gold/20 flex items-center justify-center mb-4">
                    <Trophy className="w-12 h-12 text-gold" />
                  </div>
                  <h2 className="text-3xl font-bold text-gold mb-2">
                    Victoria!
                  </h2>
                </>
              ) : (
                <>
                  <div className="w-24 h-24 rounded-full bg-destructive/20 flex items-center justify-center mb-4">
                    <X className="w-12 h-12 text-destructive" />
                  </div>
                  <h2 className="text-3xl font-bold text-destructive mb-2">
                    Derrota
                  </h2>
                </>
              )}

<div className="flex items-center gap-8 my-6">
                <div className="text-center">
                  <p className="text-4xl font-bold text-primary">
                    {scores.player}
                  </p>
                  <p className="text-muted-foreground">{mockUser.username}</p>
                </div>
                <div className="text-2xl text-muted-foreground">-</div>
                <div className="text-center">
                  <p className="text-4xl font-bold text-accent">
                    {scores.opponent}
                  </p>
                  <p className="text-muted-foreground">{opponent.username}</p>
                </div>
              </div>

<div className="flex items-center gap-4 mb-6">
                <Badge
                  className={cn(
                    "text-lg py-1 px-3",
                    scores.player > scores.opponent
                      ? "bg-success/20 text-success"
                      : "bg-destructive/20 text-destructive"
                  )}
                >
                  {scores.player > scores.opponent ? "+25" : "-15"} ELO
                </Badge>
                <Badge className="bg-gold/20 text-gold text-lg py-1 px-3">
                  +75 XP
                </Badge>
              </div>

<Button
                onClick={() => setStatus("lobby")}
                className="bg-primary hover:bg-primary/90 text-primary-foreground"
              >
                Volver al Lobby
              </Button>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/game/profile-section.tsx" isMerged="true"
"use client";

import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Progress } from "@/components/ui/progress";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { mockUser, medals, learningLevels } from "@/lib/game-data";
import {
  User,
  Trophy,
  Star,
  Flame,
  Swords,
  TrendingUp,
  Clock,
  Target,
  Award,
  Palette,
  Lock,
  CheckCircle2,
} from "lucide-react";
import { cn } from "@/lib/utils";

// Avatar customization options
const avatarOptions = {
  heads: [
    { id: 1, name: "Clasico", unlocked: true },
    { id: 2, name: "Ninja", unlocked: true },
    { id: 3, name: "Robot", unlocked: false, requirement: "Nivel 10" },
    { id: 4, name: "Hacker", unlocked: false, requirement: "20 victorias" },
  ],
  bodies: [
    { id: 1, name: "Casual", unlocked: true },
    { id: 2, name: "Formal", unlocked: true },
    { id: 3, name: "Armadura", unlocked: false, requirement: "Nivel 15" },
  ],
  backgrounds: [
    { id: 1, name: "Codigo", color: "from-primary/30 to-accent/30", unlocked: true },
    { id: 2, name: "Fuego", color: "from-warning/30 to-destructive/30", unlocked: true },
    { id: 3, name: "Oro", color: "from-gold/30 to-warning/30", unlocked: false, requirement: "Top 100" },
  ],
};

export function ProfileSection() {
  const [selectedHead, setSelectedHead] = useState(mockUser.avatar.head);
  const [selectedBody, setSelectedBody] = useState(mockUser.avatar.body);
  const [selectedBg, setSelectedBg] = useState(mockUser.avatar.background);

const xpProgress = (mockUser.xp / mockUser.xpToNextLevel) * 100;
  const winRate = Math.round(
    (mockUser.battlesWon / (mockUser.battlesWon + mockUser.battlesLost)) * 100
  );

return (
    <div className="space-y-6">
      {/* Header */}
      <div>
        <h1 className="text-3xl font-bold text-foreground">
          Tu <span className="gradient-text">Perfil</span>
        </h1>
        <p className="text-muted-foreground mt-1">
          Personaliza tu avatar y revisa tus estadisticas
        </p>
      </div>

<div className="grid lg:grid-cols-3 gap-6">
        {/* Profile Card */}
        <Card className="lg:col-span-1 bg-card border-border">
          <CardContent className="p-6">
            {/* Avatar Preview */}
            <div
              className={cn(
                "w-full aspect-square rounded-2xl mb-6 flex items-center justify-center bg-gradient-to-br",
                avatarOptions.backgrounds.find((b) => b.id === selectedBg)
                  ?.color || "from-primary/30 to-accent/30"
              )}
            >
              <div className="w-32 h-32 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center text-6xl font-bold text-white border-4 border-white/20">
                {mockUser.username[0]}
              </div>
            </div>

{/* User Info */}
            <div className="text-center mb-6">
              <h2 className="text-2xl font-bold text-foreground">
                {mockUser.username}
              </h2>
              <div className="flex items-center justify-center gap-2 mt-2">
                <Badge className="bg-gold/20 text-gold">
                  Nivel {mockUser.level}
                </Badge>
                <Badge className="bg-primary/20 text-primary">
                  ELO {mockUser.elo}
                </Badge>
              </div>
            </div>

{/* XP Progress */}
            <div className="space-y-2 mb-6">
              <div className="flex justify-between text-sm">
                <span className="text-muted-foreground">Experiencia</span>
                <span className="font-medium text-primary">
                  {mockUser.xp} / {mockUser.xpToNextLevel} XP
                </span>
              </div>
              <Progress value={xpProgress} className="h-3" />
              <p className="text-xs text-muted-foreground text-center">
                {mockUser.xpToNextLevel - mockUser.xp} XP para nivel{" "}
                {mockUser.level + 1}
              </p>
            </div>

{/* Quick Stats */}
            <div className="grid grid-cols-2 gap-3">
              <div className="p-3 rounded-lg bg-warning/10 text-center">
                <Flame className="w-5 h-5 text-warning mx-auto mb-1" />
                <p className="text-lg font-bold text-foreground">
                  {mockUser.streak}
                </p>
                <p className="text-xs text-muted-foreground">Dias de Racha</p>
              </div>
              <div className="p-3 rounded-lg bg-primary/10 text-center">
                <TrendingUp className="w-5 h-5 text-primary mx-auto mb-1" />
                <p className="text-lg font-bold text-foreground">
                  #{mockUser.rank}
                </p>
                <p className="text-xs text-muted-foreground">Ranking</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Stats & Customization */}
        <div className="lg:col-span-2 space-y-6">
          <Tabs defaultValue="stats" className="w-full">
            <TabsList className="grid w-full grid-cols-3 bg-secondary/50">
              <TabsTrigger
                value="stats"
                className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
              >
                <Target className="w-4 h-4 mr-2" />
                Estadisticas
              </TabsTrigger>
              <TabsTrigger
                value="medals"
                className="data-[state=active]:bg-gold data-[state=active]:text-gold-foreground"
              >
                <Trophy className="w-4 h-4 mr-2" />
                Medallas
              </TabsTrigger>
              <TabsTrigger
                value="avatar"
                className="data-[state=active]:bg-accent data-[state=active]:text-accent-foreground"
              >
                <Palette className="w-4 h-4 mr-2" />
                Avatar
              </TabsTrigger>
            </TabsList>

{/* Stats Tab */}
            <TabsContent value="stats" className="mt-6 space-y-4">
              {/* Battle Stats */}
              <Card className="bg-card border-border">
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Swords className="w-5 h-5 text-accent" />
                    Estadisticas de Batalla
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-4 gap-4">
                    <div className="p-4 rounded-lg bg-success/10 text-center">
                      <p className="text-3xl font-bold text-success">
                        {mockUser.battlesWon}
                      </p>
                      <p className="text-sm text-muted-foreground">Victorias</p>
                    </div>
                    <div className="p-4 rounded-lg bg-destructive/10 text-center">
                      <p className="text-3xl font-bold text-destructive">
                        {mockUser.battlesLost}
                      </p>
                      <p className="text-sm text-muted-foreground">Derrotas</p>
                    </div>
                    <div className="p-4 rounded-lg bg-primary/10 text-center">
                      <p className="text-3xl font-bold text-primary">
                        {winRate}%
                      </p>
                      <p className="text-sm text-muted-foreground">Win Rate</p>
                    </div>
                    <div className="p-4 rounded-lg bg-gold/10 text-center">
                      <p className="text-3xl font-bold text-gold">
                        {mockUser.elo}
                      </p>
                      <p className="text-sm text-muted-foreground">ELO</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

{/* Learning Progress */}
              <Card className="bg-card border-border">
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg flex items-center gap-2">
                    <Star className="w-5 h-5 text-gold" />
                    Progreso de Aprendizaje
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {learningLevels.map((level) => (
                      <div key={level.id} className="flex items-center gap-3">
                        <div
                          className={cn(
                            "w-8 h-8 rounded-lg flex items-center justify-center text-sm font-bold",
                            level.completed
                              ? "bg-success text-success-foreground"
                              : level.unlocked
                              ? "bg-primary text-primary-foreground"
                              : "bg-muted text-muted-foreground"
                          )}
                        >
                          {level.completed ? (
                            <CheckCircle2 className="w-4 h-4" />
                          ) : level.unlocked ? (
                            level.id
                          ) : (
                            <Lock className="w-3 h-3" />
                          )}
                        </div>
                        <div className="flex-1">
                          <div className="flex justify-between text-sm mb-1">
                            <span className="font-medium text-foreground">
                              {level.name}
                            </span>
                            <span
                              className={cn(
                                level.completed
                                  ? "text-success"
                                  : level.unlocked
                                  ? "text-primary"
                                  : "text-muted-foreground"
                              )}
                            >
                              {level.progress}%
                            </span>
                          </div>
                          <Progress value={level.progress} className="h-1.5" />
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

{/* Medals Tab */}
            <TabsContent value="medals" className="mt-6">
              <Card className="bg-card border-border">
                <CardHeader>
                  <CardTitle className="flex items-center gap-2">
                    <Award className="w-5 h-5 text-gold" />
                    Coleccion de Medallas
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
                    {medals.map((medal) => {
                      const isUnlocked = mockUser.medals.some(
                        (m) => m.id === medal.id
                      );
                      return (
                        <div
                          key={medal.id}
                          className={cn(
                            "p-4 rounded-xl border text-center transition-all",
                            isUnlocked
                              ? medal.rarity === "legendary"
                                ? "bg-gold/10 border-gold/30"
                                : medal.rarity === "epic"
                                ? "bg-accent/10 border-accent/30"
                                : medal.rarity === "rare"
                                ? "bg-primary/10 border-primary/30"
                                : "bg-success/10 border-success/30"
                              : "bg-muted/30 border-border opacity-50"
                          )}
                        >
                          <div
                            className={cn(
                              "w-16 h-16 rounded-full mx-auto mb-3 flex items-center justify-center",
                              isUnlocked
                                ? medal.rarity === "legendary"
                                  ? "bg-gold/20"
                                  : medal.rarity === "epic"
                                  ? "bg-accent/20"
                                  : medal.rarity === "rare"
                                  ? "bg-primary/20"
                                  : "bg-success/20"
                                : "bg-muted"
                            )}
                          >
                            {isUnlocked ? (
                              <Trophy
                                className={cn(
                                  "w-8 h-8",
                                  medal.rarity === "legendary"
                                    ? "text-gold"
                                    : medal.rarity === "epic"
                                    ? "text-accent"
                                    : medal.rarity === "rare"
                                    ? "text-primary"
                                    : "text-success"
                                )}
                              />
                            ) : (
                              <Lock className="w-6 h-6 text-muted-foreground" />
                            )}
                          </div>
                          <h4 className="font-bold text-foreground mb-1">
                            {medal.name}
                          </h4>
                          <p className="text-xs text-muted-foreground mb-2">
                            {medal.description}
                          </p>
                          <Badge
                            variant="outline"
                            className={cn(
                              "capitalize",
                              medal.rarity === "legendary" &&
                                "border-gold text-gold",
                              medal.rarity === "epic" &&
                                "border-accent text-accent",
                              medal.rarity === "rare" &&
                                "border-primary text-primary",
                              medal.rarity === "common" &&
                                "border-success text-success"
                            )}
                          >
                            {medal.rarity}
                          </Badge>
                        </div>
                      );
                    })}
                  </div>
                </CardContent>
              </Card>
            </TabsContent>

{/* Avatar Tab */}
            <TabsContent value="avatar" className="mt-6 space-y-4">
              {/* Backgrounds */}
              <Card className="bg-card border-border">
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg">Fondo</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-3 gap-3">
                    {avatarOptions.backgrounds.map((bg) => (
                      <button
                        key={bg.id}
                        onClick={() => bg.unlocked && setSelectedBg(bg.id)}
                        className={cn(
                          "relative aspect-square rounded-xl transition-all",
                          `bg-gradient-to-br ${bg.color}`,
                          selectedBg === bg.id &&
                            "ring-2 ring-primary ring-offset-2 ring-offset-background",
                          !bg.unlocked && "opacity-50 cursor-not-allowed"
                        )}
                      >
                        {!bg.unlocked && (
                          <div className="absolute inset-0 flex flex-col items-center justify-center bg-background/60 rounded-xl">
                            <Lock className="w-5 h-5 text-muted-foreground mb-1" />
                            <span className="text-xs text-muted-foreground">
                              {bg.requirement}
                            </span>
                          </div>
                        )}
                        <span className="absolute bottom-2 left-2 text-xs font-medium text-foreground">
                          {bg.name}
                        </span>
                      </button>
                    ))}
                  </div>
                </CardContent>
              </Card>

{/* Heads */}
              <Card className="bg-card border-border">
                <CardHeader className="pb-2">
                  <CardTitle className="text-lg">Estilo de Cabeza</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-4 gap-3">
                    {avatarOptions.heads.map((head) => (
                      <button
                        key={head.id}
                        onClick={() => head.unlocked && setSelectedHead(head.id)}
                        className={cn(
                          "relative p-4 rounded-xl border transition-all text-center",
                          selectedHead === head.id
                            ? "bg-primary/20 border-primary"
                            : "bg-secondary/50 border-border hover:border-primary/50",
                          !head.unlocked && "opacity-50 cursor-not-allowed"
                        )}
                      >
                        {!head.unlocked && (
                          <Lock className="w-4 h-4 text-muted-foreground absolute top-2 right-2" />
                        )}
                        <div className="w-12 h-12 rounded-full bg-primary/20 mx-auto mb-2 flex items-center justify-center">
                          <User className="w-6 h-6 text-primary" />
                        </div>
                        <span className="text-sm font-medium text-foreground">
                          {head.name}
                        </span>
                        {!head.unlocked && (
                          <p className="text-xs text-muted-foreground mt-1">
                            {head.requirement}
                          </p>
                        )}
                      </button>
                    ))}
                  </div>
                </CardContent>
              </Card>

<Button className="w-full bg-primary hover:bg-primary/90 text-primary-foreground">
                Guardar Cambios
              </Button>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
"use client";

import { useState } from "react";
import { Sidebar } from "@/components/game/sidebar";
import { Dashboard } from "@/components/game/dashboard";
import { LevelsSection } from "@/components/game/levels-section";
import { PracticeSection } from "@/components/game/practice-section";
import { BattleSection } from "@/components/game/battle-section";
import { RankingSection } from "@/components/game/ranking-section";
import { ProfileSection } from "@/components/game/profile-section";
import { cn } from "@/lib/utils";

export default function Home() {
  const [activeSection, setActiveSection] = useState("dashboard");

return (
    <div className="min-h-screen bg-background">
      <Sidebar
        activeSection={activeSection}
        onSectionChange={setActiveSection}
      />
      <main
        className={cn(
          "transition-all duration-300 min-h-screen",
          "ml-64 p-6 lg:p-8"
        )}
      >
        {renderSection()}
      </main>
    </div>
  );
}
[V0_FILE]css:file="app/globals.css"
@import 'tailwindcss';
@import 'tw-animate-css';

@custom-variant dark (&:is(.dark *));

:root {
  /* Gaming Dark Theme - Default */
  --background: #0a0a0f;
  --foreground: #f0f0f5;
  --card: #14141f;
  --card-foreground: #f0f0f5;
  --popover: #1a1a2e;
  --popover-foreground: #f0f0f5;
  --primary: #0099ff;
  --primary-foreground: #ffffff;
  --secondary: #1e1e2e;
  --secondary-foreground: #f0f0f5;
  --muted: #252538;
  --muted-foreground: #a0a0b0;
  --accent: #9933ff;
  --accent-foreground: #ffffff;
  --destructive: #ff4444;
  --destructive-foreground: #ffffff;
  --border: #2a2a3e;
  --input: #1e1e2e;
  --ring: #0099ff;
  --radius: 0.75rem;
  
  /* Gaming Colors */
  --success: #00ff88;
  --success-foreground: #0a0a0f;
  --warning: #ffcc00;
  --warning-foreground: #0a0a0f;
  --gold: #ffd700;
  --gold-foreground: #0a0a0f;
  --premium: #9933ff;
  --premium-foreground: #ffffff;
  --editor-bg: #1a1a2e;
  
  /* Chart Colors */
  --chart-1: #0099ff;
  --chart-2: #00ff88;
  --chart-3: #ffcc00;
  --chart-4: #ff4444;
  --chart-5: #9933ff;
  
  /* Sidebar */
  --sidebar: #0f0f18;
  --sidebar-foreground: #f0f0f5;
  --sidebar-primary: #0099ff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #1e1e2e;
  --sidebar-accent-foreground: #f0f0f5;
  --sidebar-border: #2a2a3e;
  --sidebar-ring: #0099ff;
}

.dark {
  --background: #0a0a0f;
  --foreground: #f0f0f5;
  --card: #14141f;
  --card-foreground: #f0f0f5;
  --popover: #1a1a2e;
  --popover-foreground: #f0f0f5;
  --primary: #0099ff;
  --primary-foreground: #ffffff;
  --secondary: #1e1e2e;
  --secondary-foreground: #f0f0f5;
  --muted: #252538;
  --muted-foreground: #a0a0b0;
  --accent: #9933ff;
  --accent-foreground: #ffffff;
  --destructive: #ff4444;
  --destructive-foreground: #ffffff;
  --border: #2a2a3e;
  --input: #1e1e2e;
  --ring: #0099ff;
}

@theme inline {
  --font-sans: 'Inter', 'Inter Fallback', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  
  /* Gaming specific colors */
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-gold: var(--gold);
  --color-gold-foreground: var(--gold-foreground);
  --color-premium: var(--premium);
  --color-premium-foreground: var(--premium-foreground);
  --color-editor-bg: var(--editor-bg);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* Gaming Animations */
  @keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary); }
    50% { box-shadow: 0 0 20px var(--primary), 0 0 30px var(--primary); }
  }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }

@keyframes confetti {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
  }

.animate-glow {
    animation: glow-pulse 2s ease-in-out infinite;
  }

.animate-float {
    animation: float 3s ease-in-out infinite;
  }

.animate-shake {
    animation: shake 0.5s ease-in-out;
  }

/* Glass Effect */
  .glass {
    @apply bg-secondary/80 backdrop-blur-md border border-white/10 rounded-lg;
  }

/* Gradient Text */
  .gradient-text {
    @apply bg-gradient-to-r from-primary to-success bg-clip-text text-transparent;
  }

/* Code Editor Syntax Highlighting */
  .syntax-keyword {
    @apply text-primary;
  }

.syntax-string {
    @apply text-success;
  }

.syntax-number {
    @apply text-warning;
  }

.syntax-comment {
    @apply text-muted-foreground/60;
  }

.syntax-function {
    @apply text-accent;
  }

.syntax-type {
    @apply text-destructive;
  }

/* Scrollbar Gaming Style */
  ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

::-webkit-scrollbar-track {
    @apply bg-secondary rounded;
  }

::-webkit-scrollbar-thumb {
    @apply bg-primary rounded;
  }

::-webkit-scrollbar-thumb:hover {
    @apply bg-primary/90;
  }
}a7:T1f430,[V0_FILE]json:file="package.json" isMerged="true"
{
  "name": "my-v0-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.10.0",
    "@radix-ui/react-accordion": "1.2.2",
    "@radix-ui/react-alert-dialog": "1.1.4",
    "@radix-ui/react-aspect-ratio": "1.1.1",
    "@radix-ui/react-avatar": "1.1.2",
    "@radix-ui/react-checkbox": "1.1.3",
    "@radix-ui/react-collapsible": "1.1.2",
    "@radix-ui/react-context-menu": "2.2.4",
    "@radix-ui/react-dialog": "1.1.4",
    "@radix-ui/react-dropdown-menu": "2.1.4",
    "@radix-ui/react-hover-card": "1.1.4",
    "@radix-ui/react-label": "2.1.1",
    "@radix-ui/react-menubar": "1.1.4",
    "@radix-ui/react-navigation-menu": "1.2.3",
    "@radix-ui/react-popover": "1.1.4",
    "@radix-ui/react-progress": "1.1.1",
    "@radix-ui/react-radio-group": "1.2.2",
    "@radix-ui/react-scroll-area": "1.2.2",
    "@radix-ui/react-select": "2.1.4",
    "@radix-ui/react-separator": "1.1.1",
    "@radix-ui/react-slider": "1.2.2",
    "@radix-ui/react-slot": "1.1.1",
    "@radix-ui/react-switch": "1.1.2",
    "@radix-ui/react-tabs": "1.1.2",
    "@radix-ui/react-toast": "1.2.4",
    "@radix-ui/react-toggle": "1.1.1",
    "@radix-ui/react-toggle-group": "1.1.1",
    "@radix-ui/react-tooltip": "1.1.6",
    "@vercel/analytics": "1.3.1",
    "autoprefixer": "^10.4.20",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "1.0.4",
    "date-fns": "4.1.0",
    "embla-carousel-react": "8.5.1",
    "input-otp": "1.4.1",
    "lucide-react": "^0.454.0",
    "next": "16.0.10",
    "next-themes": "^0.4.6",
    "react": "19.2.0",
    "react-day-picker": "9.8.0",
    "react-dom": "19.2.0",
    "react-hook-form": "^7.60.0",
    "react-resizable-panels": "^2.1.7",
    "recharts": "2.15.4",
    "sonner": "^1.7.4",
    "tailwind-merge": "^3.3.1",
    "tailwindcss-animate": "^1.0.7",
    "vaul": "^1.1.2",
    "zod": "3.25.76"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4.1.9",
    "@types/node": "^22",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "postcss": "^8.5",
    "tailwindcss": "^4.1.9",
    "tw-animate-css": "1.3.3",
    "typescript": "^5"
  }
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true"
import React from "react"
import type { Metadata, Viewport } from "next";
import { Inter, JetBrains_Mono } from "next/font/google";
import { Analytics } from "@vercel/analytics/next";
import "./globals.css";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
  variable: "--font-jetbrains",
});

export const metadata: Metadata = {
  title: "C++ POO Quest - Aprende Programacion Orientada a Objetos",
  description:
    "Plataforma gamificada para aprender C++ y Programacion Orientada a Objetos con batallas de codigo, ejercicios interactivos y sistema de niveles",
  generator: "v0.app",
  keywords: [
    "C++",
    "POO",
    "programacion",
    "gamificacion",
    "aprendizaje",
    "codigo",
  ],
};

export const viewport: Viewport = {
  themeColor: "#0099ff",
  width: "device-width",
  initialScale: 1,
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="es" className="dark">
      <body
        className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
      >
        {children}
        <Analytics />
      </body>
    </html>
  );
}
[V0_FILE]typescript:file="lib/game-data.ts" isMerged="true"
// Types for the gamified learning platform
export interface User {
  id: string;
  username: string;
  avatar: AvatarConfig;
  level: number;
  xp: number;
  xpToNextLevel: number;
  currentLearningLevel: number;
  streak: number;
  battlesWon: number;
  battlesLost: number;
  medals: Medal[];
  rank: number;
  elo: number;
}

export interface AvatarConfig {
  head: number;
  body: number;
  accessory: number;
  background: number;
  effect: number;
}

export interface Medal {
  id: string;
  name: string;
  description: string;
  icon: string;
  rarity: "common" | "rare" | "epic" | "legendary";
  unlockedAt?: Date;
}

export interface LearningLevel {
  id: number;
  name: string;
  description: string;
  topics: string[];
  blocksRatio: number;
  editorRatio: number;
  requiredAccuracy: number;
  unlocked: boolean;
  completed: boolean;
  progress: number;
}

export interface Exercise {
  id: string;
  levelId: number;
  type: "blocks" | "editor";
  difficulty: "easy" | "medium" | "hard";
  title: string;
  description: string;
  codeBlocks?: CodeBlock[];
  starterCode?: string;
  solution: string;
  testCases: TestCase[];
  hints: string[];
  xpReward: number;
}

export interface CodeBlock {
  id: string;
  code: string;
  indentation: number;
  isDistractor: boolean;
}

export interface TestCase {
  input: string;
  expectedOutput: string;
  description: string;
}

export interface Battle {
  id: string;
  status: "waiting" | "in_progress" | "completed";
  player1: User;
  player2?: User;
  problems: Exercise[];
  currentProblem: number;
  timeRemaining: number;
  scores: { player1: number; player2: number };
}

// Mock data
export const learningLevels: LearningLevel[] = [
  {
    id: 1,
    name: "Fundamentos de Clases",
    description: "Clases, Objetos, Constructores y Destructores",
    topics: ["Clases", "Objetos", "Constructores", "Destructores", "Encapsulamiento"],
    blocksRatio: 70,
    editorRatio: 30,
    requiredAccuracy: 80,
    unlocked: true,
    completed: false,
    progress: 45,
  },
  {
    id: 2,
    name: "Herencia y Punteros",
    description: "Herencia, Punteros y Referencias en C++",
    topics: ["Herencia Simple", "Herencia Multiple", "Punteros", "Referencias", "Memoria Dinamica"],
    blocksRatio: 60,
    editorRatio: 40,
    requiredAccuracy: 80,
    unlocked: false,
    completed: false,
    progress: 0,
  },
  {
    id: 3,
    name: "Polimorfismo",
    description: "Polimorfismo y Funciones Virtuales",
    topics: ["Polimorfismo", "Funciones Virtuales", "Clases Abstractas", "Interfaces", "Override"],
    blocksRatio: 50,
    editorRatio: 50,
    requiredAccuracy: 80,
    unlocked: false,
    completed: false,
    progress: 0,
  },
  {
    id: 4,
    name: "Templates y STL",
    description: "Templates, STL y Sobrecarga de Operadores",
    topics: ["Templates", "STL Containers", "Iteradores", "Sobrecarga de Operadores", "Algoritmos"],
    blocksRatio: 30,
    editorRatio: 70,
    requiredAccuracy: 80,
    unlocked: false,
    completed: false,
    progress: 0,
  },
  {
    id: 5,
    name: "Patrones Avanzados",
    description: "Patrones de Diseno y Smart Pointers",
    topics: ["Singleton", "Factory", "Observer", "Smart Pointers", "RAII"],
    blocksRatio: 20,
    editorRatio: 80,
    requiredAccuracy: 80,
    unlocked: false,
    completed: false,
    progress: 0,
  },
];

export const medals: Medal[] = [
  { id: "first_class", name: "Primera Clase", description: "Crea tu primera clase en C++", icon: "class", rarity: "common" },
  { id: "pointer_master", name: "Maestro de Punteros", description: "Domina el uso de punteros", icon: "pointer", rarity: "rare" },
  { id: "template_king", name: "Rey de Templates", description: "Completa todos los ejercicios de templates", icon: "template", rarity: "epic" },
  { id: "undefeated", name: "Invicto", description: "Gana 5 batallas consecutivas", icon: "trophy", rarity: "legendary" },
  { id: "dedicated", name: "Estudiante Dedicado", description: "7 dias consecutivos de estudio", icon: "fire", rarity: "rare" },
  { id: "perfect_blocks", name: "Ordenador Perfecto", description: "10 ejercicios de bloques sin errores", icon: "blocks", rarity: "epic" },
];

export const mockUser: User = {
  id: "1",
  username: "CodeWarrior",
  avatar: { head: 1, body: 1, accessory: 0, background: 1, effect: 0 },
  level: 12,
  xp: 2450,
  xpToNextLevel: 3000,
  currentLearningLevel: 1,
  streak: 5,
  battlesWon: 15,
  battlesLost: 8,
  medals: [medals[0], medals[4]],
  rank: 127,
  elo: 1250,
};

export const sampleExercise: Exercise = {
  id: "ex1",
  levelId: 1,
  type: "blocks",
  difficulty: "easy",
  title: "Crear una Clase Basica",
  description: "Ordena los bloques para crear una clase 'Persona' con atributos nombre y edad, y un constructor.",
  codeBlocks: [
    { id: "1", code: "class Persona {", indentation: 0, isDistractor: false },
    { id: "2", code: "private:", indentation: 0, isDistractor: false },
    { id: "3", code: "    string nombre;", indentation: 1, isDistractor: false },
    { id: "4", code: "    int edad;", indentation: 1, isDistractor: false },
    { id: "5", code: "public:", indentation: 0, isDistractor: false },
    { id: "6", code: "    Persona(string n, int e) {", indentation: 1, isDistractor: false },
    { id: "7", code: "        nombre = n;", indentation: 2, isDistractor: false },
    { id: "8", code: "        edad = e;", indentation: 2, isDistractor: false },
    { id: "9", code: "    }", indentation: 1, isDistractor: false },
    { id: "10", code: "};", indentation: 0, isDistractor: false },
    { id: "d1", code: "    float altura;", indentation: 1, isDistractor: true },
    { id: "d2", code: "protected:", indentation: 0, isDistractor: true },
  ],
  solution: "1,2,3,4,5,6,7,8,9,10",
  testCases: [],
  hints: ["Las clases en C++ comienzan con 'class' y terminan con '};'", "Los atributos privados van despues de 'private:'"],
  xpReward: 50,
};
[V0_FILE]typescriptreact:file="components/game/sidebar.tsx" isMerged="true"
"use client";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { mockUser } from "@/lib/game-data";
import {
  Home,
  BookOpen,
  Code2,
  Swords,
  Trophy,
  User,
  Settings,
  Flame,
  Star,
  ChevronLeft,
  ChevronRight,
} from "lucide-react";
import { useState } from "react";

interface SidebarProps {
  activeSection: string;
  onSectionChange: (section: string) => void;
}

const navItems = [
  { id: "dashboard", label: "Dashboard", icon: Home },
  { id: "levels", label: "Niveles", icon: BookOpen },
  { id: "practice", label: "Practica", icon: Code2 },
  { id: "battles", label: "Batallas", icon: Swords },
  { id: "ranking", label: "Ranking", icon: Trophy },
  { id: "profile", label: "Perfil", icon: User },
];

export function Sidebar({ activeSection, onSectionChange }: SidebarProps) {
  const [collapsed, setCollapsed] = useState(false);
  const xpProgress = (mockUser.xp / mockUser.xpToNextLevel) * 100;

return (
    <aside
      className={cn(
        "fixed left-0 top-0 z-40 h-screen bg-sidebar border-r border-sidebar-border transition-all duration-300 flex flex-col",
        collapsed ? "w-20" : "w-64"
      )}
    >
      {/* Logo */}
      <div className="flex items-center justify-between p-4 border-b border-sidebar-border">
        {!collapsed && (
          <div className="flex items-center gap-2">
            <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
              <Code2 className="w-6 h-6 text-primary-foreground" />
            </div>
            <div>
              <h1 className="font-bold text-lg text-sidebar-foreground">
                C++ Quest
              </h1>
              <p className="text-xs text-muted-foreground">POO Gamificado</p>
            </div>
          </div>
        )}
        {collapsed && (
          <div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center mx-auto">
            <Code2 className="w-6 h-6 text-primary-foreground" />
          </div>
        )}
        <Button
          variant="ghost"
          size="icon"
          className={cn("text-muted-foreground", collapsed && "hidden")}
          onClick={() => setCollapsed(!collapsed)}
        >
          <ChevronLeft className="w-4 h-4" />
        </Button>
      </div>

{/* User Stats */}
      {!collapsed && (
        <div className="p-4 border-b border-sidebar-border">
          <div className="flex items-center gap-3 mb-3">
            <div className="relative">
              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white font-bold text-lg">
                {mockUser.username[0]}
              </div>
              <div className="absolute -bottom-1 -right-1 bg-gold text-gold-foreground text-xs font-bold px-1.5 py-0.5 rounded-full">
                {mockUser.level}
              </div>
            </div>
            <div className="flex-1">
              <p className="font-semibold text-sidebar-foreground">
                {mockUser.username}
              </p>
              <div className="flex items-center gap-1 text-xs text-warning">
                <Flame className="w-3 h-3" />
                <span>{mockUser.streak} dias</span>
              </div>
            </div>
          </div>
          <div className="space-y-1">
            <div className="flex justify-between text-xs">
              <span className="text-muted-foreground">XP</span>
              <span className="text-primary font-medium">
                {mockUser.xp} / {mockUser.xpToNextLevel}
              </span>
            </div>
            <Progress value={xpProgress} className="h-2" />
          </div>
        </div>
      )}

{/* Navigation */}
      <nav className="flex-1 p-2 space-y-1">
        {navItems.map((item) => {
          const Icon = item.icon;
          const isActive = activeSection === item.id;
          return (
            <Button
              key={item.id}
              variant={isActive ? "secondary" : "ghost"}
              className={cn(
                "w-full justify-start gap-3 h-11 transition-all",
                isActive &&
                  "bg-primary/10 text-primary border border-primary/30",
                collapsed && "justify-center px-2"
              )}
              onClick={() => onSectionChange(item.id)}
            >
              <Icon className={cn("w-5 h-5", isActive && "text-primary")} />
              {!collapsed && <span>{item.label}</span>}
            </Button>
          );
        })}
      </nav>

{/* Quick Stats */}
      {!collapsed && (
        <div className="p-4 border-t border-sidebar-border space-y-2">
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground flex items-center gap-2">
              <Swords className="w-4 h-4" />
              Batallas
            </span>
            <span className="font-medium text-sidebar-foreground">
              <span className="text-success">{mockUser.battlesWon}W</span>
              {" / "}
              <span className="text-destructive">{mockUser.battlesLost}L</span>
            </span>
          </div>
          <div className="flex items-center justify-between text-sm">
            <span className="text-muted-foreground flex items-center gap-2">
              <Star className="w-4 h-4" />
              ELO
            </span>
            <span className="font-medium text-gold">{mockUser.elo}</span>
          </div>
        </div>
      )}

{/* Collapse Toggle */}
      {collapsed && (
        <div className="p-2 border-t border-sidebar-border">
          <Button
            variant="ghost"
            size="icon"
            className="w-full text-muted-foreground"
            onClick={() => setCollapsed(false)}
          >
            <ChevronRight className="w-4 h-4" />
          </Button>
        </div>
      )}

{/* Settings */}
      <div className="p-2 border-t border-sidebar-border">
        <Button
          variant="ghost"
          className={cn(
            "w-full justify-start gap-3 text-muted-foreground",
            collapsed && "justify-center px-2"
          )}
        >
          <Settings className="w-5 h-5" />
          {!collapsed && <span>Configuracion</span>}
        </Button>
      </div>
    </aside>
  );
}
[V0_FILE]typescriptreact:file="components/game/dashboard.tsx" isMerged="true"
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { mockUser, learningLevels, medals } from "@/lib/game-data";
import {
  Trophy,
  Flame,
  Target,
  Swords,
  BookOpen,
  Code2,
  Lock,
  CheckCircle2,
  Play,
  Star,
  TrendingUp,
  Clock,
  Zap,
} from "lucide-react";

interface DashboardProps {
  onNavigate: (section: string) => void;
}

export function Dashboard({ onNavigate }: DashboardProps) {
  const currentLevel = learningLevels.find(
    (l) => l.id === mockUser.currentLearningLevel
  );

return (
    <div className="space-y-6">
      {/* Welcome Header */}
      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
          <h1 className="text-3xl font-bold text-foreground">
            Bienvenido, <span className="gradient-text">{mockUser.username}</span>
          </h1>
          <p className="text-muted-foreground mt-1">
            Continua tu viaje en la Programacion Orientada a Objetos
          </p>
        </div>
        <div className="flex gap-3">
          <Button
            onClick={() => onNavigate("practice")}
            className="bg-primary hover:bg-primary/90 text-primary-foreground"
          >
            <Play className="w-4 h-4 mr-2" />
            Continuar Aprendiendo
          </Button>
          <Button
            variant="outline"
            onClick={() => onNavigate("battles")}
            className="border-accent text-accent hover:bg-accent/10"
          >
            <Swords className="w-4 h-4 mr-2" />
            Batalla Rapida
          </Button>
        </div>
      </div>

{/* Stats Grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
        <Card className="bg-card border-border hover:border-primary/50 transition-colors">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-muted-foreground">Nivel Jugador</p>
                <p className="text-2xl font-bold text-gold">{mockUser.level}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-gold/20 flex items-center justify-center">
                <Star className="w-5 h-5 text-gold" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="bg-card border-border hover:border-warning/50 transition-colors">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-muted-foreground">Racha Activa</p>
                <p className="text-2xl font-bold text-warning">
                  {mockUser.streak} dias
                </p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-warning/20 flex items-center justify-center">
                <Flame className="w-5 h-5 text-warning" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="bg-card border-border hover:border-success/50 transition-colors">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-muted-foreground">Batallas Ganadas</p>
                <p className="text-2xl font-bold text-success">
                  {mockUser.battlesWon}
                </p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-success/20 flex items-center justify-center">
                <Trophy className="w-5 h-5 text-success" />
              </div>
            </div>
          </CardContent>
        </Card>

<Card className="bg-card border-border hover:border-primary/50 transition-colors">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs text-muted-foreground">Ranking Global</p>
                <p className="text-2xl font-bold text-primary">#{mockUser.rank}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-primary/20 flex items-center justify-center">
                <TrendingUp className="w-5 h-5 text-primary" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

{/* Main Content Grid */}
      <div className="grid lg:grid-cols-3 gap-6">
        {/* Current Level Progress */}
        <Card className="lg:col-span-2 bg-card border-border">
          <CardHeader className="pb-3">
            <CardTitle className="flex items-center gap-2 text-lg">
              <BookOpen className="w-5 h-5 text-primary" />
              Progreso Actual - Nivel {currentLevel?.id}
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="p-4 rounded-xl bg-secondary/50 border border-border">
              <div className="flex items-start justify-between mb-3">
                <div>
                  <h3 className="font-semibold text-foreground">
                    {currentLevel?.name}
                  </h3>
                  <p className="text-sm text-muted-foreground">
                    {currentLevel?.description}
                  </p>
                </div>
                <Badge
                  variant="outline"
                  className="border-primary text-primary"
                >
                  En Progreso
                </Badge>
              </div>
              <div className="space-y-2">
                <div className="flex justify-between text-sm">
                  <span className="text-muted-foreground">
                    Progreso del Nivel
                  </span>
                  <span className="font-medium text-primary">
                    {currentLevel?.progress}%
                  </span>
                </div>
                <Progress value={currentLevel?.progress} className="h-3" />
              </div>
              <div className="flex flex-wrap gap-2 mt-4">
                {currentLevel?.topics.map((topic) => (
                  <Badge
                    key={topic}
                    variant="secondary"
                    className="bg-muted text-muted-foreground"
                  >
                    {topic}
                  </Badge>
                ))}
              </div>
            </div>

{/* Exercise Type Distribution */}
            <div className="grid grid-cols-2 gap-3">
              <div className="p-3 rounded-lg bg-primary/10 border border-primary/30">
                <div className="flex items-center gap-2 mb-2">
                  <Code2 className="w-4 h-4 text-primary" />
                  <span className="text-sm font-medium text-foreground">
                    Bloques
                  </span>
                </div>
                <p className="text-2xl font-bold text-primary">
                  {currentLevel?.blocksRatio}%
                </p>
                <p className="text-xs text-muted-foreground">de ejercicios</p>
              </div>
              <div className="p-3 rounded-lg bg-accent/10 border border-accent/30">
                <div className="flex items-center gap-2 mb-2">
                  <Code2 className="w-4 h-4 text-accent" />
                  <span className="text-sm font-medium text-foreground">
                    Editor
                  </span>
                </div>
                <p className="text-2xl font-bold text-accent">
                  {currentLevel?.editorRatio}%
                </p>
                <p className="text-xs text-muted-foreground">de ejercicios</p>
              </div>
            </div>
          </CardContent>
        </Card>

{/* Quick Actions & Medals */}
        <div className="space-y-6">
          {/* Quick Battle */}
          <Card className="bg-gradient-to-br from-accent/20 to-primary/20 border-accent/30">
            <CardContent className="p-4">
              <div className="flex items-center gap-3 mb-3">
                <div className="w-12 h-12 rounded-xl bg-accent flex items-center justify-center">
                  <Swords className="w-6 h-6 text-accent-foreground" />
                </div>
                <div>
                  <h3 className="font-semibold text-foreground">
                    Batalla 1vs1
                  </h3>
                  <p className="text-xs text-muted-foreground">
                    12 jugadores en linea
                  </p>
                </div>
              </div>
              <Button
                className="w-full bg-accent hover:bg-accent/90 text-accent-foreground"
                onClick={() => onNavigate("battles")}
              >
                <Zap className="w-4 h-4 mr-2" />
                Buscar Oponente
              </Button>
            </CardContent>
          </Card>

{/* Recent Medals */}
          <Card className="bg-card border-border">
            <CardHeader className="pb-3">
              <CardTitle className="flex items-center gap-2 text-lg">
                <Trophy className="w-5 h-5 text-gold" />
                Medallas Recientes
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {mockUser.medals.slice(0, 3).map((medal) => (
                <div
                  key={medal.id}
                  className="flex items-center gap-3 p-2 rounded-lg bg-secondary/50"
                >
                  <div
                    className={`w-10 h-10 rounded-lg flex items-center justify-center ${
                      medal.rarity === "legendary"
                        ? "bg-gold/20"
                        : medal.rarity === "epic"
                        ? "bg-accent/20"
                        : medal.rarity === "rare"
                        ? "bg-primary/20"
                        : "bg-muted"
                    }`}
                  >
                    <Trophy
                      className={`w-5 h-5 ${
                        medal.rarity === "legendary"
                          ? "text-gold"
                          : medal.rarity === "epic"
                          ? "text-accent"
                          : medal.rarity === "rare"
                          ? "text-primary"
                          : "text-muted-foreground"
                      }`}
                    />
                  </div>
                  <div className="flex-1">
                    <p className="font-medium text-sm text-foreground">
                      {medal.name}
                    </p>
                    <p className="text-xs text-muted-foreground">
                      {medal.description}
                    </p>
                  </div>
                </div>
              ))}
              <Button
                variant="ghost"
                className="w-full text-muted-foreground hover:text-foreground"
                onClick={() => onNavigate("profile")}
              >
                Ver Todas las Medallas
              </Button>
            </CardContent>
          </Card>
        </div>
      </div>

{/* Learning Levels Overview */}
      <Card className="bg-card border-border">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Target className="w-5 h-5 text-primary" />
            Niveles de Aprendizaje C++
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-5 gap-4">
            {learningLevels.map((level) => (
              <div
                key={level.id}
                className={`relative p-4 rounded-xl border transition-all cursor-pointer ${
                  level.unlocked
                    ? level.completed
                      ? "bg-success/10 border-success/30 hover:border-success"
                      : "bg-primary/10 border-primary/30 hover:border-primary"
                    : "bg-muted/50 border-border opacity-60"
                }`}
                onClick={() => level.unlocked && onNavigate("levels")}
              >
                {!level.unlocked && (
                  <div className="absolute inset-0 flex items-center justify-center bg-background/80 rounded-xl">
                    <Lock className="w-6 h-6 text-muted-foreground" />
                  </div>
                )}
                <div className="flex items-center justify-between mb-2">
                  <span
                    className={`text-2xl font-bold ${
                      level.completed
                        ? "text-success"
                        : level.unlocked
                        ? "text-primary"
                        : "text-muted-foreground"
                    }`}
                  >
                    {level.id}
                  </span>
                  {level.completed && (
                    <CheckCircle2 className="w-5 h-5 text-success" />
                  )}
                </div>
                <h4 className="font-medium text-sm text-foreground mb-1">
                  {level.name}
                </h4>
                <p className="text-xs text-muted-foreground line-clamp-2">
                  {level.description}
                </p>
                {level.unlocked && !level.completed && (
                  <div className="mt-2">
                    <Progress value={level.progress} className="h-1" />
                  </div>
                )}
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/game/levels-section.tsx" isMerged="true"
"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Badge } from "@/components/ui/badge";
import { learningLevels } from "@/lib/game-data";
import {
  Lock,
  CheckCircle2,
  Play,
  BookOpen,
  Code2,
  Target,
  ChevronRight,
} from "lucide-react";

interface LevelsSectionProps {
  onStartLesson: (levelId: number) => void;
}

export function LevelsSection({ onStartLesson }: LevelsSectionProps) {
  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">
            Niveles de <span className="gradient-text">Aprendizaje</span>
          </h1>
          <p className="text-muted-foreground mt-1">
            Domina C++ POO paso a paso, desbloqueando nuevos conceptos
          </p>
        </div>
      </div>

{/* Level Path */}
      <div className="relative">
        {/* Connection Line */}
        <div className="absolute left-8 top-0 bottom-0 w-1 bg-gradient-to-b from-primary via-accent to-muted hidden lg:block" />

<div className="space-y-6">
          {learningLevels.map((level, index) => (
            <Card
              key={level.id}
              className={`relative overflow-hidden transition-all ${
                level.unlocked
                  ? level.completed
                    ? "bg-success/5 border-success/30 hover:border-success"
                    : "bg-card border-primary/30 hover:border-primary"
                  : "bg-muted/30 border-border opacity-70"
              }`}
            >
              {/* Level Number Badge */}
              <div
                className={`absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 rounded-full flex items-center justify-center text-xl font-bold z-10 ${
                  level.completed
                    ? "bg-success text-success-foreground"
                    : level.unlocked
                    ? "bg-primary text-primary-foreground"
                    : "bg-muted text-muted-foreground"
                }`}
              >
                {level.completed ? (
                  <CheckCircle2 className="w-6 h-6" />
                ) : level.unlocked ? (
                  level.id
                ) : (
                  <Lock className="w-5 h-5" />
                )}
              </div>

<CardContent className="p-6 pl-20">
                <div className="flex flex-col lg:flex-row lg:items-center gap-4">
                  {/* Level Info */}
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-xl font-bold text-foreground">
                        Nivel {level.id}: {level.name}
                      </h3>
                      {level.completed && (
                        <Badge className="bg-success/20 text-success border-success/30">
                          Completado
                        </Badge>
                      )}
                      {level.unlocked && !level.completed && level.progress > 0 && (
                        <Badge className="bg-primary/20 text-primary border-primary/30">
                          En Progreso
                        </Badge>
                      )}
                    </div>
                    <p className="text-muted-foreground mb-3">
                      {level.description}
                    </p>

{/* Topics */}
                    <div className="flex flex-wrap gap-2 mb-4">
                      {level.topics.map((topic) => (
                        <Badge
                          key={topic}
                          variant="outline"
                          className="bg-secondary/50 border-border text-foreground"
                        >
                          {topic}
                        </Badge>
                      ))}
                    </div>

{/* Progress Bar */}
                    {level.unlocked && (
                      <div className="space-y-2">
                        <div className="flex justify-between text-sm">
                          <span className="text-muted-foreground">
                            Progreso
                          </span>
                          <span
                            className={`font-medium ${
                              level.completed ? "text-success" : "text-primary"
                            }`}
                          >
                            {level.progress}%
                          </span>
                        </div>
                        <Progress
                          value={level.progress}
                          className="h-2"
                        />
                      </div>
                    )}
                  </div>

{/* Exercise Distribution & Actions */}
                  <div className="flex flex-col gap-3 lg:w-64">
                    {/* Exercise Ratio */}
                    <div className="grid grid-cols-2 gap-2">
                      <div className="p-3 rounded-lg bg-primary/10 border border-primary/20 text-center">
                        <Code2 className="w-4 h-4 text-primary mx-auto mb-1" />
                        <p className="text-lg font-bold text-primary">
                          {level.blocksRatio}%
                        </p>
                        <p className="text-xs text-muted-foreground">Bloques</p>
                      </div>
                      <div className="p-3 rounded-lg bg-accent/10 border border-accent/20 text-center">
                        <Code2 className="w-4 h-4 text-accent mx-auto mb-1" />
                        <p className="text-lg font-bold text-accent">
                          {level.editorRatio}%
                        </p>
                        <p className="text-xs text-muted-foreground">Editor</p>
                      </div>
                    </div>

{/* Action Button */}
                    {level.unlocked ? (
                      <Button
                        className={`w-full ${
                          level.completed
                            ? "bg-success hover:bg-success/90 text-success-foreground"
                            : "bg-primary hover:bg-primary/90 text-primary-foreground"
                        }`}
                        onClick={() => onStartLesson(level.id)}
                      >
                        {level.completed ? (
                          <>
                            Repasar Nivel
                            <ChevronRight className="w-4 h-4 ml-2" />
                          </>
                        ) : level.progress > 0 ? (
                          <>
                            Continuar
                            <Play className="w-4 h-4 ml-2" />
                          </>
                        ) : (
                          <>
                            Comenzar
                            <Play className="w-4 h-4 ml-2" />
                          </>
                        )}
                      </Button>
                    ) : (
                      <div className="text-center p-3 rounded-lg bg-muted/50 border border-border">
                        <Lock className="w-5 h-5 text-muted-foreground mx-auto mb-1" />
                        <p className="text-xs text-muted-foreground">
                          Completa el Nivel {level.id - 1} con {level.requiredAccuracy}%
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}
[V0_FILE]typescriptreact:file="components/game/code-editor.tsx" isMerged="true"
"use client";

import { useState, useRef, useEffect } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import {
  Play,
  Check,
  X,
  Terminal,
  Loader2,
  AlertCircle,
  CheckCircle2,
  Code2,
  RotateCcw,
} from "lucide-react";
import { cn } from "@/lib/utils";

interface CodeEditorProps {
  initialCode?: string;
  title?: string;
  description?: string;
  testCases?: Array<{
    input: string;
    expectedOutput: string;
    description: string;
  }>;
  xpReward?: number;
  onComplete?: (success: boolean) => void;
}

export function CodeEditor({
  initialCode = `#include <iostream>
using namespace std;

class Persona {
private:
    string nombre;
    int edad;

public:
    // Tu codigo aqui
    
};

int main() {
    // Crea una instancia de Persona
    
    return 0;
}`,
  title = "Implementar Clase Persona",
  description = "Completa la clase Persona con un constructor que inicialice nombre y edad, y metodos getNombre() y getEdad().",
  testCases = [
    { input: 'Persona p("Juan", 25)', expectedOutput: "Juan, 25", description: "Constructor basico" },
    { input: "p.getNombre()", expectedOutput: "Juan", description: "Getter nombre" },
    { input: "p.getEdad()", expectedOutput: "25", description: "Getter edad" },
  ],
  xpReward = 75,
  onComplete,
}: CodeEditorProps) {
  const [code, setCode] = useState(initialCode);
  const [output, setOutput] = useState<string>("");
  const [isCompiling, setIsCompiling] = useState(false);
  const [compileError, setCompileError] = useState<string | null>(null);
  const [testResults, setTestResults] = useState<
    Array<{ passed: boolean; description: string }>
  >([]);
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const lineNumbersRef = useRef<HTMLDivElement>(null);

const lineCount = code.split("\n").length;

// Sync scroll between textarea and line numbers
  const handleScroll = () => {
    if (textareaRef.current && lineNumbersRef.current) {
      lineNumbersRef.current.scrollTop = textareaRef.current.scrollTop;
    }
  };

// Simulate compilation
  const handleCompile = async () => {
    setIsCompiling(true);
    setCompileError(null);
    setOutput("");
    setTestResults([]);

// Simulate compilation delay
    await new Promise((resolve) => setTimeout(resolve, 1500));

// Simple error detection (for demo purposes)
    if (!code.includes("class") || !code.includes("public:")) {
      setCompileError(
        "Error: Se esperaba una definicion de clase con seccion publica"
      );
      setIsCompiling(false);
      return;
    }

// Simulate successful compilation
    setOutput("Compilacion exitosa!\n\n> Ejecutando programa...\n\nHola, soy Juan y tengo 25 anos.");
    
    // Simulate test results
    const results = testCases.map((test, index) => ({
      passed: Math.random() > 0.3 || index === 0, // Demo: mostly pass
      description: test.description,
    }));
    setTestResults(results);

const allPassed = results.every((r) => r.passed);
    if (allPassed && onComplete) {
      setTimeout(() => onComplete(true), 1000);
    }

setIsCompiling(false);
  };

const handleReset = () => {
    setCode(initialCode);
    setOutput("");
    setCompileError(null);
    setTestResults([]);
  };

// Simple syntax highlighting by wrapping keywords
  const highlightCode = (text: string) => {
    const keywords = [
      "class",
      "public",
      "private",
      "protected",
      "int",
      "string",
      "void",
      "return",
      "include",
      "using",
      "namespace",
      "std",
      "cout",
      "cin",
      "endl",
    ];
    let highlighted = text;
    keywords.forEach((keyword) => {
      const regex = new RegExp(`\\b${keyword}\\b`, "g");
      highlighted = highlighted.replace(
        regex,
        `<span class="syntax-keyword">${keyword}</span>`
      );
    });
    return highlighted;
  };

return (
    <div className="space-y-4">
      {/* Header */}
      <Card className="bg-card border-border">
        <CardHeader className="pb-3">
          <div className="flex items-start justify-between">
            <div>
              <div className="flex items-center gap-2 mb-2">
                <Badge variant="outline" className="border-accent text-accent">
                  Editor
                </Badge>
                <Badge variant="secondary" className="bg-gold/20 text-gold">
                  +{xpReward} XP
                </Badge>
              </div>
              <CardTitle className="text-xl">{title}</CardTitle>
              <p className="text-muted-foreground mt-1">{description}</p>
            </div>
          </div>
        </CardHeader>
      </Card>

{/* Editor */}
      <Card className="bg-editor-bg border-border overflow-hidden">
        <CardHeader className="py-2 px-4 bg-secondary/30 border-b border-border">
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <div className="flex gap-1.5">
                <div className="w-3 h-3 rounded-full bg-destructive" />
                <div className="w-3 h-3 rounded-full bg-warning" />
                <div className="w-3 h-3 rounded-full bg-success" />
              </div>
              <span className="text-sm text-muted-foreground ml-2">
                main.cpp
              </span>
            </div>
            <div className="flex items-center gap-2">
              <Button
                variant="ghost"
                size="sm"
                onClick={handleReset}
                className="text-muted-foreground hover:text-foreground"
              >
                <RotateCcw className="w-4 h-4 mr-1" />
                Reset
              </Button>
            </div>
          </div>
        </CardHeader>
        <CardContent className="p-0">
          <div className="flex h-[400px]">
            {/* Line Numbers */}
            <div
              ref={lineNumbersRef}
              className="w-12 bg-secondary/20 border-r border-border overflow-hidden select-none"
            >
              <div className="p-4 font-mono text-sm text-muted-foreground">
                {Array.from({ length: lineCount }, (_, i) => (
                  <div key={i} className="h-6 leading-6 text-right pr-2">
                    {i + 1}
                  </div>
                ))}
              </div>
            </div>

{/* Code Area */}
            <div className="flex-1 relative">
              <textarea
                ref={textareaRef}
                value={code}
                onChange={(e) => setCode(e.target.value)}
                onScroll={handleScroll}
                className="absolute inset-0 w-full h-full p-4 font-mono text-sm bg-transparent text-foreground resize-none focus:outline-none leading-6"
                spellCheck={false}
                style={{ caretColor: "#0099ff" }}
              />
            </div>
          </div>
        </CardContent>
      </Card>