BADGE UNLOCKED!

\n \n \n \n

{badge.title}

{badge.description}

\n \n

\n +{badge.tokens} $O Reward!\n

\n\n

\n \n \n

;\n};\nconst BadgesTab = ({\n unlockedBadges,\n userProgress,\n tokenBalance,\n learningData\n}) => {\n const [selectedCategory, setSelectedCategory] = useState('all');\n const getProgress = badge => {\n if (unlockedBadges.has(badge.id)) return 100;\n const trigger = badge.trigger;\n switch (trigger.type) {\n case 'streak':\n return userProgress.streak / trigger.value * 100;\n case 'module_complete':\n const completedModules = Object.values(learningData).flatMap(c => c.modules).filter(m => m.lessons.length > 0 && m.lessons.every(l => userProgress.completedLessons.has(l.id))).length;\n return completedModules / trigger.value * 100;\n case 'integration_step':\n return userProgress.completedSteps.size / trigger.value * 100;\n case 'token_accumulation':\n return tokenBalance / trigger.value * 100;\n default:\n return 0;\n }\n };\n const filteredBadges = Object.entries(allBadges).filter(([key]) => selectedCategory === 'all' || key === selectedCategory);\n return

\n \n {Object.entries(allBadges).map(([key, cat]) => )}\n

\n\n

\n {filteredBadges.map(([key, category]) =>

{category.title}

\n {category.badges.map(badge => {\n const isUnlocked = unlockedBadges.has(badge.id);\n const progress = getProgress(badge);\n const tierInfo = badgeTiers[badge.tier];\n const TierIcon = tierInfo.icon;\n return

\n {isUnlocked &&

}\n

\n \n

{badge.title}

{badge.description}

\n {!isUnlocked ?

{Math.floor(progress)}%

Unlocked!

}\n

;\n })}\n

)}\n

;\n};\nconst communityUsers = {\n 'user-1': {\n id: 'user-1',\n name: 'Jamal',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=jamal`,\n country: 'SY',\n reputation: 120\n },\n 'user-2': {\n id: 'user-2',\n name: 'Anna',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=anna`,\n country: 'DE',\n reputation: 85\n },\n 'user-3': {\n id: 'user-3',\n name: 'David',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=david`,\n country: 'US',\n reputation: 210\n },\n 'user-4': {\n id: 'user-4',\n name: 'Fatima',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=fatima`,\n country: 'AF',\n reputation: 155\n },\n 'user-5': {\n id: 'user-5',\n name: 'Omar',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=omar`,\n country: 'IQ',\n reputation: 95\n },\n 'user-6': {\n id: 'user-6',\n name: 'Lena',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=lena`,\n country: 'UA',\n reputation: 180\n }\n};\nconst generateAIContent = count => {\n const categories = ['question', 'story', 'event', 'resource', 'meetup', 'housing', 'job'];\n const cities = ['Berlin', 'Hamburg', 'Munich', 'Cologne', 'Frankfurt'];\n const languages = ['en', 'de', 'ar'];\n const sampleQuestions = {\n en: ['How do I apply for a residence permit?', 'Best places to learn German for free?', 'Tips for finding a job in my field?', 'Where can I find affordable housing?', 'Any community events happening this week?'],\n de: ['Wie beantrage ich eine Aufenthaltserlaubnis?', 'Beste Orte, um kostenlos Deutsch zu lernen?', 'Tipps zur Jobsuche in meinem Bereich?', 'Wo finde ich bezahlbaren Wohnraum?', 'Gibt es diese Woche Community-Veranstaltungen?'],\n ar: ['كيف أقدم طلب الحصول على تصريح الإقامة؟', 'أفضل الأماكن لتعلم اللغة الألمانية مجانًا؟', 'نصائح للعثور على وظيفة في مجالي؟', 'أين يمكنني العثور على سكن بأسعار معقولة؟', 'هل هناك أي فعاليات مجتمعية هذا الأسبوع؟']\n };\n const sampleStories = {\n en: ['My first week in Germany was challenging but exciting!', 'Finally got my degree recognized!', 'Found a great language tandem partner here.', 'Overcame my fear of bureaucracy!', 'Small steps lead to big changes.'],\n de: ['Meine erste Woche in Deutschland war herausfordernd, aber aufregend!', 'Endlich wurde mein Abschluss anerkannt!', 'Habe hier einen tollen Sprachtandem-Partner gefunden.', 'Habe meine Angst vor Bürokratie überwunden!', 'Kleine Schritte führen zu großen Veränderungen.'],\n ar: ['كان أسبوعي الأول في ألمانيا مليئًا بالتحديات ولكنه كان مثيرًا!', 'أخيرًا تم الاعتراف بشهادتي!', 'وجدت شريكًا رائعًا لتبادل اللغات هنا.', 'تغلبت على خوفي من البيروقراطية!', 'الخطوات الصغيرة تؤدي إلى تغييرات كبيرة.']\n };\n const sampleEvents = {\n en: ['Intercultural cooking class next Friday.', 'Free German conversation group every Tuesday.', 'Workshop on writing applications.', 'Welcome party for newcomers.', 'Guided tour of the city center.'],\n de: ['Interkultureller Kochkurs nächsten Freitag.', 'Kostenlose deutsche Konversationsgruppe jeden Dienstag.', 'Workshop zum Thema Bewerbungen schreiben.', 'Willkommensparty für Neuankömmlinge.', 'Stadtführung durch das Zentrum.'],\n ar: ['درس طبخ بين الثقافات يوم الجمعة القادم.', 'مجموعة محادثة ألمانية مجانية كل ثلاثاء.', 'ورشة عمل حول كتابة الطلبات.', 'حفلة ترحيب بالقادمين الجدد.', 'جولة إرشادية في وسط المدينة.']\n };\n const sampleResources = {\n en: ['Useful website for finding doctors.', 'App for learning German vocabulary.', 'Guide to public transport.', 'Information about job centers.', 'Tips for saving money.'],\n de: ['Nützliche Webseite zur Arztsuche.', 'App zum Lernen deutscher Vokabeln.', 'Leitfaden für öffentliche Verkehrsmittel.', 'Informationen zu Jobcentern.', 'Tipps zum Geldsparen.'],\n ar: ['موقع مفيد للعثور على الأطباء.', 'تطبيق لتعلم مفردات اللغة الألمانية.', 'دليل النقل العام.', 'معلومات عن مراكز التوظيف.', 'نصائح لتوفير المال.']\n };\n const sampleMeetups = {\n en: ['Hiking trip this weekend.', 'Board game night on Thursday.', 'Coffee chat on Sunday morning.', 'Visit to a museum.', 'Sports activity in the park.'],\n de: ['Wanderung dieses Wochenende.', 'Spieleabend am Donnerstag.', 'Kaffee-Treff am Sonntagmorgen.', 'Besuch eines Museums.', 'Sportaktivität im Park.'],\n ar: ['رحلة مشي لمسافات طويلة في نهاية هذا الأسبوع.', 'ليلة ألعاب لوحية يوم الخميس.', 'دردشة قهوة صباح الأحد.', 'زيارة متحف.', 'نشاط رياضي في الحديقة.']\n };\n const sampleHousing = {\n en: ['Looking for a room in a shared apartment.', 'Offering a spare room for rent.', 'Tips for dealing with landlords.', 'Experiences with finding temporary housing.', 'Advice on rental contracts.'],\n de: ['Suche ein Zimmer in einer WG.', 'Biete ein freies Zimmer zur Miete an.', 'Tipps im Umgang mit Vermietern.', 'Erfahrungen bei der Suche nach temporärem Wohnraum.', 'Ratschläge zu Mietverträgen.'],\n ar: ['أبحث عن غرفة في شقة مشتركة.', 'أعرض غرفة إضافية للإيجار.', 'نصائح للتعامل مع أصحاب العقارات.', 'تجارب في العثور على سكن مؤقت.', 'نصائح حول عقود الإيجار.']\n };\n const sampleJobs = {\n en: ['Entry-level positions available.', 'Looking for volunteers.', 'Advice on writing cover letters.', 'Experiences with job interviews.', 'Where to find job listings.'],\n de: ['Einstiegspositionen verfügbar.', 'Suche Freiwillige.', 'Ratschläge zum Verfassen von Anschreiben.', 'Erfahrungen mit Vorstellungsgesprächen.', 'Wo finde ich Stellenangebote.'],\n ar: ['وظائف للمبتدئين متاحة.', 'أبحث عن متطوعين.', 'نصائح حول كتابة خطابات التقديم.', 'تجارب مع مقابلات العمل.', 'أين أجد قوائم الوظائف.']\n };\n const generatedPosts = [];\n const generatedUsers = {\n ...communityUsers\n };\n const userIds = Object.keys(communityUsers);\n for (let i = 0; i < count; i++) {\n const category = categories[Math.floor(Math.random() * categories.length)];\n const userId = userIds[Math.floor(Math.random() * userIds.length)];\n const city = cities[Math.floor(Math.random() * cities.length)];\n const timestamp = `${Math.floor(Math.random() * 24) + 1} hours ago`;\n let content = {};\n let tags = [category, city.toLowerCase()];\n let eventDetails = null;\n let resourceLink = null;\n let image = null;\n switch (category) {\n case 'question':\n content = {\n en: sampleQuestions.en[Math.floor(Math.random() * sampleQuestions.en.length)],\n de: sampleQuestions.de[Math.floor(Math.random() * sampleQuestions.de.length)],\n ar: sampleQuestions.ar[Math.floor(Math.random() * sampleQuestions.ar.length)]\n };\n tags.push('help');\n break;\n case 'story':\n content = {\n en: sampleStories.en[Math.floor(Math.random() * sampleStories.en.length)],\n de: sampleStories.de[Math.floor(Math.random() * sampleStories.de.length)],\n ar: sampleStories.ar[Math.floor(Math.random() * sampleStories.ar.length)]\n };\n if (Math.random() > 0.5) {\n image = `https://images.unsplash.com/photo-15${Math.floor(Math.random() * 9000) + 1000}-a${Math.floor(Math.random() * 900) + 100}?q=80&w=800&auto=format&fit=crop`;\n }\n tags.push('inspiration');\n break;\n case 'event':\n content = {\n en: sampleEvents.en[Math.floor(Math.random() * sampleEvents.en.length)],\n de: sampleEvents.de[Math.floor(Math.random() * sampleEvents.de.length)],\n ar: sampleEvents.ar[Math.floor(Math.random() * sampleEvents.ar.length)]\n };\n eventDetails = {\n date: 'Upcoming',\n location: `${city}, various locations`\n };\n tags.push('social');\n break;\n case 'resource':\n content = {\n en: sampleResources.en[Math.floor(Math.random() * sampleResources.en.length)],\n de: sampleResources.de[Math.floor(Math.random() * sampleResources.de.length)],\n ar: sampleResources.ar[Math.floor(Math.random() * sampleResources.ar.length)]\n };\n resourceLink = '#';\n tags.push('useful');\n break;\n case 'meetup':\n content = {\n en: sampleMeetups.en[Math.floor(Math.random() * sampleMeetups.en.length)],\n de: sampleMeetups.de[Math.floor(Math.random() * sampleMeetups.de.length)],\n ar: sampleMeetups.ar[Math.floor(Math.random() * sampleMeetups.ar.length)]\n };\n tags.push('social');\n break;\n case 'housing':\n content = {\n en: sampleHousing.en[Math.floor(Math.random() * sampleHousing.en.length)],\n de: sampleHousing.de[Math.floor(Math.random() * sampleHousing.de.length)],\n ar: sampleHousing.ar[Math.floor(Math.random() * sampleHousing.ar.length)]\n };\n tags.push('accommodation');\n break;\n case 'job':\n content = {\n en: sampleJobs.en[Math.floor(Math.random() * sampleJobs.en.length)],\n de: sampleJobs.de[Math.floor(Math.random() * sampleJobs.de.length)],\n ar: sampleJobs.ar[Math.floor(Math.random() * sampleJobs.ar.length)]\n };\n tags.push('career');\n break;\n }\n const newPost = {\n id: `post-${Date.now()}-${i}`,\n userId: userId,\n category: category,\n content: content,\n tags: tags,\n likes: Math.floor(Math.random() * 100),\n comments: [],\n isSolved: category === 'question' ? Math.random() > 0.8 : false,\n timestamp: timestamp,\n eventDetails: eventDetails,\n resourceLink: resourceLink,\n image: image\n };\n const numComments = Math.floor(Math.random() * 5);\n for (let j = 0; j < numComments; j++) {\n const commenterId = userIds[Math.floor(Math.random() * userIds.length)];\n const sampleComments = {\n en: ['Great post!', 'Very helpful, thank you!', 'I agree!', 'Good luck!', 'Thanks for sharing!'],\n de: ['Toller Beitrag!', 'Sehr hilfreich, danke!', 'Ich stimme zu!', 'Viel Glück!', 'Danke fürs Teilen!'],\n ar: ['منشور رائع!', 'مفيد جدا، شكرا لك!', 'أتفق معك!', 'حظا سعيدا!', 'شكرا للمشاركة!']\n };\n newPost.comments.push({\n id: `c${newPost.id}-${j}`,\n userId: commenterId,\n content: sampleComments[languages[Math.floor(Math.random() * languages.length)]][Math.floor(Math.random() * sampleComments.en.length)],\n timestamp: `${Math.floor(Math.random() * 60) + 1} minutes ago`\n });\n }\n generatedPosts.push(newPost);\n }\n return {\n posts: generatedPosts,\n users: generatedUsers\n };\n};\nconst {\n posts: generatedCommunityPosts,\n users: generatedCommunityUsers\n} = generateAIContent(20);\nconst initialCommunityPosts = generatedCommunityPosts;\nconst allCommunityUsers = {\n ...communityUsers,\n ...generatedCommunityUsers\n};\nconst CountryFlag = ({\n countryCode,\n className\n}) => {\n if (!countryCode) return null;\n const codePoints = countryCode.toUpperCase().split('').map(char => 127397 + char.charCodeAt());\n return {String.fromCodePoint(...codePoints)};\n};\nconst PostCard = ({\n post,\n users,\n language,\n onLike,\n onComment,\n onMarkAsSolved\n}) => {\n const user = users[post.userId];\n const [showComments, setShowComments] = useState(false);\n const [newComment, setNewComment] = useState('');\n const handleCommentSubmit = e => {\n e.preventDefault();\n if (newComment.trim()) {\n onComment(post.id, newComment);\n setNewComment('');\n }\n };\n const categoryInfo = {\n question: {\n icon: HelpCircle,\n color: 'text-blue-500',\n bgColor: 'bg-blue-50'\n },\n story: {\n icon: Lightbulb,\n color: 'text-amber-500',\n bgColor: 'bg-amber-50'\n },\n event: {\n icon: Calendar,\n color: 'text-purple-500',\n bgColor: 'bg-purple-50'\n },\n resource: {\n icon: BookOpen,\n color: 'text-green-500',\n bgColor: 'bg-green-50'\n },\n meetup: {\n icon: Handshake,\n color: 'text-pink-500',\n bgColor: 'bg-pink-50'\n },\n housing: {\n icon: Building,\n color: 'text-teal-500',\n bgColor: 'bg-teal-50'\n },\n job: {\n icon: BriefcaseIcon,\n color: 'text-gray-500',\n bgColor: 'bg-gray-100'\n }\n };\n const CatIcon = categoryInfo[post.category]?.icon || HelpCircle;\n return

{user.name}

\n \n

{post.timestamp} • {user.reputation} rep

\n \n {post.category}\n

\n \n

{post.content[language]}

\n {post.category === 'story' && post.image && $\"Success$ }\n {post.category === 'event' && post.eventDetails &&

\n \n {post.eventDetails.date}\n \n {post.eventDetails.location}\n

}\n {post.category === 'resource' && post.resourceLink &&

\n \n {post.resourceLink}\n

}\n

\n {post.tags.map(tag => #{tag})}\n

\n \n \n

\n \n

\n \n {showComments && \n

\n {post.comments.map(comment =>

{users[comment.userId]?.name}

\n {post.category === 'question' && }\n

{comment.content}

)}\n

\n \n }\n \n

;\n};\nconst CommunityPlatform = () => {\n const [language, setLanguage] = useState('en');\n const [posts, setPosts] = useState(initialCommunityPosts);\n const [users] = useState(allCommunityUsers);\n const [activeCategory, setActiveCategory] = useState('all');\n const [searchTerm, setSearchTerm] = useState('');\n const handleLike = postId => {\n setPosts(posts.map(p => p.id === postId ? {\n ...p,\n likes: p.liked ? p.likes - 1 : p.likes + 1,\n liked: !p.liked\n } : p));\n };\n const handleComment = (postId, commentText) => {\n setPosts(posts.map(p => p.id === postId ? {\n ...p,\n comments: [...p.comments, {\n id: `c${Date.now()}`,\n userId: 'user-1',\n content: commentText,\n timestamp: 'Just now'\n }]\n } : p));\n };\n const handleMarkAsSolved = (postId, commentId) => {\n setPosts(posts.map(p => p.id === postId ? {\n ...p,\n isSolved: true,\n solvedCommentId: commentId\n } : p));\n };\n const filteredPosts = posts.filter(post => (activeCategory === 'all' || post.category === activeCategory) && (post.content[language]?.toLowerCase().includes(searchTerm.toLowerCase()) || post.tags.some(t => t.includes(searchTerm.toLowerCase()))));\n const categories = [{\n id: 'all',\n name: 'All',\n icon: Megaphone\n }, {\n id: 'question',\n name: 'Questions',\n icon: HelpCircle\n }, {\n id: 'story',\n name: 'Stories',\n icon: Lightbulb\n }, {\n id: 'event',\n name: 'Events',\n icon: Calendar\n }, {\n id: 'resource',\n name: 'Resources',\n icon: BookOpen\n }, {\n id: 'meetup',\n name: 'Meetups',\n icon: Handshake\n }, {\n id: 'housing',\n name: 'Housing',\n icon: Building\n }, {\n id: 'job',\n name: 'Jobs',\n icon: BriefcaseIcon\n }];\n return

\n \n

\n setSearchTerm(e.target.value)} className=\"w-full py-2 ps-10 pe-4 border border-gray-300 rounded-full text-sm focus:ring-indigo-500 focus:border-indigo-500\" />\n \n

\n \n

Community Feed

\n {['en', 'de', 'ar'].map(lang => )}\n

\n \n

Moderator Announcement

Welcome to the new community platform! Please be respectful and supportive.

\n {filteredPosts.map(post => )}\n

\n \n

;\n};\nconst initialLearningData = {\n language: {\n id: 'language',\n title: 'Language',\n icon: Languages,\n color: 'blue',\n modules: [{\n id: 'lang-de-1',\n title: 'German Basics 1',\n description: 'Greetings and introductions.',\n difficulty: 'Beginner',\n tokens: 50,\n lessons: [{\n id: 'l1-1',\n type: 'multiple-choice',\n xp: 10,\n time: 2,\n tokens: 5,\n content: {\n question: 'Which one is \"Hello\"?',\n options: ['Hallo', 'Tschüss', 'Danke', 'Bitte'],\n answer: 'Hallo'\n }\n }, {\n id: 'l1-2',\n type: 'translation',\n xp: 15,\n time: 3,\n tokens: 10,\n content: {\n prompt: 'Translate this sentence:',\n from: 'Good morning',\n answer: 'Guten Morgen'\n }\n }, {\n id: 'l1-3',\n type: 'multiple-choice',\n xp: 10,\n time: 2,\n tokens: 5,\n content: {\n question: 'What is \"Goodbye\"?',\n options: ['Auf Wiedersehen', 'Guten Tag', 'Ja', 'Nein'],\n answer: 'Auf Wiedersehen'\n }\n }]\n }, {\n id: 'lang-de-2',\n title: 'German Basics 2',\n description: 'Numbers and basic shopping.',\n difficulty: 'Beginner',\n tokens: 60,\n lessons: [{\n id: 'l2-1',\n type: 'translation',\n xp: 10,\n time: 2,\n tokens: 5,\n content: {\n prompt: 'Translate \"one, two, three\"',\n from: 'one, two, three',\n answer: 'eins, zwei, drei'\n }\n }, {\n id: 'l2-2',\n type: 'multiple-choice',\n xp: 10,\n time: 2,\n tokens: 5,\n content: {\n question: 'How do you say \"How much does it cost?\"',\n options: ['Wie viel kostet das?', 'Wo ist der Bahnhof?', 'Ich heiße...', 'Wie geht es Ihnen?'],\n answer: 'Wie viel kostet das?'\n }\n }]\n }, {\n id: 'lang-de-3',\n title: 'Everyday Conversations',\n description: 'Ordering food and asking for directions.',\n difficulty: 'Beginner',\n tokens: 75,\n lessons: [{\n id: 'l3-1',\n type: 'translation',\n xp: 15,\n time: 3,\n tokens: 8,\n content: {\n prompt: 'Translate: \"I would like a coffee, please.\"',\n from: 'I would like a coffee, please.',\n answer: 'Ich hätte gern einen Kaffee, bitte.'\n }\n }]\n }]\n },\n culture: {\n id: 'culture',\n title: 'Culture',\n icon: Smile,\n color: 'green',\n modules: [{\n id: 'cult-de-1',\n title: 'German Holidays',\n description: 'Learn about public holidays.',\n difficulty: 'Beginner',\n tokens: 40,\n lessons: [{\n id: 'c1-1',\n type: 'multiple-choice',\n xp: 10,\n time: 2,\n tokens: 5,\n content: {\n question: 'When is the \"Tag der Deutschen Einheit\" (Day of German Unity)?',\n options: ['October 3rd', 'May 1st', 'December 25th', 'January 1st'],\n answer: 'October 3rd'\n }\n }]\n }, {\n id: 'cult-de-2',\n title: 'Social Etiquette',\n description: 'Punctuality, greetings, and recycling.',\n difficulty: 'Beginner',\n tokens: 50,\n lessons: [{\n id: 'c2-1',\n type: 'multiple-choice',\n xp: 10,\n time: 2,\n tokens: 5,\n content: {\n question: 'In Germany, being on time for an appointment is considered:',\n options: ['Very important', 'Not important', 'Optional', 'Rude'],\n answer: 'Very important'\n }\n }]\n }]\n },\n professional: {\n id: 'professional',\n title: 'Professional Skills',\n icon: Briefcase,\n color: 'purple',\n modules: [{\n id: 'prof-1',\n title: 'Writing a CV',\n description: 'How to write a German-style CV.',\n difficulty: 'Intermediate',\n tokens: 80,\n lessons: [{\n id: 'p1-1',\n type: 'multiple-choice',\n xp: 20,\n time: 4,\n tokens: 10,\n content: {\n question: 'What is a \"Lebenslauf\"?',\n options: ['A resume/CV', 'A cover letter', 'A work contract', 'A reference letter'],\n answer: 'A resume/CV'\n }\n }]\n }, {\n id: 'prof-2',\n title: 'Job Interviews',\n description: 'Prepare for job interviews in Germany.',\n difficulty: 'Intermediate',\n tokens: 90,\n lessons: [{\n id: 'p2-1',\n type: 'multiple-choice',\n xp: 20,\n time: 4,\n tokens: 10,\n content: {\n question: 'A common question in German interviews is about your \"Gehaltsvorstellung\". What does it mean?',\n options: ['Salary expectation', 'Previous experience', 'Strengths and weaknesses', 'Notice period'],\n answer: 'Salary expectation'\n }\n }]\n }]\n },\n digital: {\n id: 'digital',\n title: 'Digital Skills',\n icon: Laptop,\n color: 'amber',\n modules: [{\n id: 'digi-1',\n title: 'Online Banking',\n description: 'Navigating German online banking.',\n difficulty: 'Intermediate',\n tokens: 70,\n lessons: [{\n id: 'd1-1',\n type: 'translation',\n xp: 15,\n time: 3,\n tokens: 8,\n content: {\n prompt: 'Translate \"bank transfer\"',\n from: 'bank transfer',\n answer: 'Überweisung'\n }\n }]\n }]\n },\n legal: {\n id: 'legal',\n title: 'Legal & Bureaucracy',\n icon: Scale,\n color: 'red',\n modules: [{\n id: 'legal-1',\n title: 'Registering your Address',\n description: 'The \"Anmeldung\" process.',\n difficulty: 'Beginner',\n tokens: 100,\n lessons: [{\n id: 'lg1-1',\n type: 'multiple-choice',\n xp: 25,\n time: 5,\n tokens: 15,\n content: {\n question: 'Which document is essential for the \"Anmeldung\"?',\n options: ['Passport and rental agreement', 'Driver\\'s license', 'Birth certificate', 'Health insurance card'],\n answer: 'Passport and rental agreement'\n }\n }]\n }, {\n id: 'legal-2',\n title: 'Health Insurance',\n description: 'Understanding the health insurance system.',\n difficulty: 'Intermediate',\n tokens: 120,\n lessons: [{\n id: 'lg2-1',\n type: 'multiple-choice',\n xp: 20,\n time: 4,\n tokens: 10,\n content: {\n question: 'What does \"Krankenkasse\" mean?',\n options: ['Health insurance company', 'Hospital', 'Pharmacy', 'Doctor\\'s office'],\n answer: 'Health insurance company'\n }\n }]\n }]\n }\n};\nconst integrationJourneyData = {\n 'legal-admin': {\n id: 'legal-admin',\n title: 'Legal & Admin',\n icon: Scale,\n steps: [{\n id: 'reg-1',\n title: {\n en: 'Register Your Address',\n de: 'Anmeldung des Wohnsitzes'\n },\n description: {\n en: 'Officially register your place of residence at the local citizens\\' office (Bürgeramt). This is a mandatory first step for almost everything else.',\n de: 'Melden Sie Ihren Wohnsitz offiziell beim örtlichen Bürgeramt an. Dies ist ein obligatorischer erster Schritt für fast alles Weitere.'\n },\n isOfficial: true,\n difficulty: 'easy',\n time: '2-4 hours',\n prerequisites: [],\n resources: [{\n type: 'link',\n url: '#',\n name: 'Find your local Bürgeramt'\n }, {\n type: 'pdf',\n url: '#',\n name: 'Sample Registration Form'\n }],\n subTasks: ['Book an appointment online', 'Prepare required documents (passport, rental agreement)', 'Attend the appointment', 'Receive registration confirmation (Anmeldebestätigung)'],\n locationInfo: 'Bürgeramt (Citizens\\' Office) in your city.',\n tokens: 50\n }, {\n id: 'tax-id-1',\n title: {\n en: 'Receive Tax ID',\n de: 'Steuer-ID erhalten'\n },\n description: {\n en: 'Your personal tax identification number will be sent to you by mail automatically after you register your address.',\n de: 'Ihre persönliche Steuer-Identifikationsnummer wird Ihnen nach der Anmeldung Ihres Wohnsitzes automatisch per Post zugesandt.'\n },\n isOfficial: true,\n difficulty: 'easy',\n time: '1-2 weeks (waiting)',\n prerequisites: ['reg-1'],\n resources: [],\n subTasks: ['Check your mailbox regularly', 'Keep the Tax ID letter in a safe place'],\n locationInfo: 'Delivered to your registered address.',\n tokens: 25\n }]\n },\n housing: {\n id: 'housing',\n title: 'Housing',\n icon: Home,\n steps: [{\n id: 'house-1',\n title: {\n en: 'Find an Apartment',\n de: 'Wohnungssuche'\n },\n description: {\n en: 'Search for an apartment using online portals and local networks. This can be a challenging process.',\n de: 'Suchen Sie über Online-Portale und lokale Netzwerke nach einer Wohnung. Dies kann ein herausfordernder Prozess sein.'\n },\n isOfficial: false,\n difficulty: 'hard',\n time: '2-8 weeks',\n prerequisites: ['reg-1'],\n resources: [{\n type: 'link',\n url: '#',\n name: 'ImmoScout24'\n }, {\n type: 'link',\n url: '#',\n name: 'WG-Gesucht'\n }],\n subTasks: ['Prepare a folder with your documents (Schufa, income proof, ID)', 'Write a compelling application message', 'Attend viewings', 'Sign the rental contract'],\n locationInfo: 'Online portals, local newspapers, social media groups.',\n tokens: 100\n }]\n },\n health: {\n id: 'health',\n title: 'Health & Wellbeing',\n icon: Heart,\n steps: []\n }\n};\nconst LessonContent = ({\n currentLesson,\n inputValue,\n setInputValue,\n answerStatus,\n selectedOption,\n setSelectedOption\n}) => {\n switch (currentLesson.type) {\n case 'multiple-choice':\n return

{currentLesson.content.question}

\n {currentLesson.content.options.map(option => {\n const isSelected = selectedOption === option;\n let buttonClass = 'border-gray-200 bg-white hover:bg-gray-50';\n if (answerStatus && isSelected) {\n buttonClass = answerStatus === 'correct' ? 'border-green-500 bg-green-100' : 'border-red-500 bg-red-100';\n } else if (answerStatus && option === currentLesson.content.answer) {\n buttonClass = 'border-green-500 bg-green-100';\n }\n return ;\n })}\n

;\n case 'translation':\n return

{currentLesson.content.prompt}

{currentLesson.content.from}

\n setInputValue(e.target.value)} placeholder=\"Type in German...\" disabled={!!answerStatus} className=\"w-full p-4 border-2 border-gray-300 rounded-lg text-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500\" />\n

;\n default:\n return

Unsupported lesson type.

;\n }\n};\nconst FeedbackFooter = ({\n answerStatus,\n handleContinue,\n currentLesson\n}) => {\n if (!answerStatus) return null;\n const isCorrect = answerStatus === 'correct';\n return \n

\n \n

{isCorrect ? 'Great job!' : 'Incorrect'}

\n {!isCorrect && currentLesson.type === 'translation' &&

Correct answer: {currentLesson.content.answer}

}\n

\n \n

\n ;\n};\nconst ModuleFailureScreen = ({\n onRetry,\n onExit\n}) => {\n return

\n \n

Not Quite Yet!

You didn't pass the module this time, but practice makes perfect.

\n \n \n

\n \n

;\n};\nconst LessonPlayer = ({\n module,\n onLessonReward,\n onModuleComplete,\n onExit,\n userProgress\n}) => {\n if (!module || !module.lessons || module.lessons.length === 0) {\n onExit();\n return null;\n }\n const firstUncompletedLessonIndex = module.lessons.findIndex(l => !userProgress.completedLessons.has(l.id));\n const [currentLessonIndex, setCurrentLessonIndex] = useState(firstUncompletedLessonIndex !== -1 ? firstUncompletedLessonIndex : 0);\n const [answerStatus, setAnswerStatus] = useState(null);\n const [selectedOption, setSelectedOption] = useState(null);\n const [inputValue, setInputValue] = useState('');\n const [showCelebration, setShowCelebration] = useState(false);\n const [showFailure, setShowFailure] = useState(false);\n const [correctCount, setCorrectCount] = useState(0);\n const currentLesson = module.lessons[currentLessonIndex];\n const lessonProgress = currentLessonIndex / module.lessons.length * 100;\n useEffect(() => {\n setInputValue('');\n setSelectedOption(null);\n setAnswerStatus(null);\n }, [currentLessonIndex]);\n const handleCheckAnswer = () => {\n if (answerStatus) return;\n let isCorrect = false;\n if (currentLesson.type === 'multiple-choice') {\n isCorrect = selectedOption === currentLesson.content.answer;\n } else if (currentLesson.type === 'translation') {\n isCorrect = inputValue.trim().toLowerCase() === currentLesson.content.answer.toLowerCase();\n }\n if (isCorrect) {\n setCorrectCount(prev => prev + 1);\n }\n setAnswerStatus(isCorrect ? 'correct' : 'incorrect');\n };\n const handleContinue = () => {\n if (!answerStatus) return;\n if (answerStatus === 'correct') {\n onLessonReward(currentLesson.id, currentLesson.tokens, currentLesson.xp);\n }\n if (currentLessonIndex + 1 < module.lessons.length) {\n setCurrentLessonIndex(currentLessonIndex + 1);\n } else {\n const isModulePassed = correctCount === module.lessons.length;\n if (isModulePassed) {\n setShowCelebration(true);\n setTimeout(() => {\n onModuleComplete(module.id, module.tokens);\n onExit();\n }, 2000);\n } else {\n setShowFailure(true);\n }\n }\n };\n const handleRetry = () => {\n setCurrentLessonIndex(0);\n setCorrectCount(0);\n setAnswerStatus(null);\n setSelectedOption(null);\n setInputValue('');\n setShowFailure(false);\n setShowCelebration(false);\n };\n return \n \n {showCelebration ?

\n \n \n

Module Complete!

You've earned a bonus of {module.tokens} $O!

\n \n

: showFailure ? : <>\n

\n \n

\n \n \n \n \n \n

\n \n \n {answerStatus && }\n \n }\n \n ;\n};\nconst StepDetailView = ({\n step,\n onClose,\n onCompleteStep,\n completedSteps\n}) => {\n const [completedSubTasks, setCompletedSubTasks] = useState(new Set());\n const handleSubTaskToggle = subTask => {\n const newSet = new Set(completedSubTasks);\n if (newSet.has(subTask)) {\n newSet.delete(subTask);\n } else {\n newSet.add(subTask);\n }\n setCompletedSubTasks(newSet);\n };\n const allSubTasksCompleted = step.subTasks.length === 0 || completedSubTasks.size === step.subTasks.length;\n const handleComplete = () => {\n onCompleteStep(step.id, step.tokens);\n onClose();\n };\n const difficultyColors = {\n easy: 'bg-green-100 text-green-800',\n medium: 'bg-amber-100 text-amber-800',\n hard: 'bg-red-100 text-red-800'\n };\n return

\n \n

{step.title.en}

{step.title.de}

\n \n

\n {step.difficulty}\n {step.time}\n {step.isOfficial ? 'Official Step' : 'Unofficial Guide'}\n

{step.description.en}

{step.description.de}

\n\n {step.prerequisites.length > 0 &&

Prerequisites

\n {step.prerequisites.map(prereqId => {\n const isComplete = completedSteps.has(prereqId);\n return \n {isComplete ? : }\n Step {prereqId}\n ;\n })}\n

}\n\n {step.subTasks.length > 0 &&

Checklist

\n {step.subTasks.map((task, index) => \n handleSubTaskToggle(task)} />\n {task}\n )}\n

}\n\n {step.resources.length > 0 &&

Resources

\n {step.resources.map((resource, index) => \n {resource.type === 'pdf' ? : }\n {resource.name}\n \n )}\n

}\n\n {step.locationInfo &&

Location Info

{step.locationInfo}

}\n

\n \n \n

;\n};\nconst RewardsDashboard = ({\n tokenBalance,\n transactionHistory,\n unlockedBadges,\n userProgress,\n learningData,\n user\n}) => {\n const [activeTab, setActiveTab] = useState('leaderboard');\n const [historyFilter, setHistoryFilter] = useState('all');\n const leaderboardData = [{\n id: 'user-3',\n name: 'David',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=david`,\n country: 'US',\n tokens: 5420\n }, {\n id: 'user-1',\n name: 'Jamal',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=jamal`,\n country: 'SY',\n tokens: 4890\n }, {\n id: 'user-current',\n name: 'You',\n avatar: user.avatar,\n country: 'DE',\n tokens: tokenBalance,\n isCurrentUser: true\n }, {\n id: 'user-2',\n name: 'Anna',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=anna`,\n country: 'DE',\n tokens: 3105\n }, {\n id: 'user-4',\n name: 'Fatima',\n avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=fatima`,\n country: 'AF',\n tokens: 2890\n }].sort((a, b) => b.tokens - a.tokens);\n const filteredHistory = transactionHistory.filter(tx => historyFilter === 'all' || tx.type === historyFilter);\n const totalEarned = transactionHistory.filter(tx => tx.type === 'earn').reduce((sum, tx) => sum + tx.amount, 0);\n const totalSpent = transactionHistory.filter(tx => tx.type === 'spend').reduce((sum, tx) => sum + tx.amount, 0);\n const TabButton = ({\n tabName,\n label\n }) => ;\n return

Rewards Hub

Track your earnings, climb the leaderboard, and unlock achievements.

Total Earned

{totalEarned} $O

Total Spent

{totalSpent} $O

Net Balance

{tokenBalance} $O

\n \n \n \n

\n \n \n {activeTab === 'leaderboard' &&

\n {leaderboardData.map((player, index) =>

\n {index + 1}\n

{player.name}

\n \n

{player.tokens} $O

)}\n

}\n {activeTab === 'badges' && }\n {activeTab === 'history' &&

\n \n \n \n

\n {filteredHistory.map(tx =>

{tx.reason}

{tx.timestamp.toLocaleString()}

\n {tx.type === 'earn' ? '+' : '-'}{tx.amount} $O\n

)}\n

}\n \n \n

;\n};\nconst JourneyGuide = ({\n onStepSelect,\n completedSteps\n}) => {\n return

Your Integration Journey

A step-by-step guide to help you settle in. Complete steps to earn tokens.

\n {}\n

\n {Object.values(integrationJourneyData).map(category => )}\n

;\n};\nconst JourneyCategorySection = ({\n category,\n onStepSelect,\n completedSteps\n}) => {\n const [isOpen, setIsOpen] = useState(true);\n const difficultyColors = {\n easy: 'bg-green-500',\n medium: 'bg-amber-500',\n hard: 'bg-red-500'\n };\n return

\n \n \n {isOpen && \n

\n {category.steps.length > 0 ?

\n {category.steps.map(step => {\n const isCompleted = completedSteps.has(step.id);\n const isLocked = step.prerequisites.some(prereqId => !completedSteps.has(prereqId));\n return \n \n ;\n })}\n

Steps for this category are coming soon.

}\n

\n }\n \n

;\n};\nconst CategorySection = ({\n category,\n userProgress,\n onStartLesson\n}) => {\n const [isOpen, setIsOpen] = useState(true);\n const categoryColors = {\n blue: 'border-blue-500',\n green: 'border-green-500',\n purple: 'border-purple-500',\n amber: 'border-amber-500',\n red: 'border-red-500'\n };\n const categoryBg = {\n blue: 'bg-blue-50',\n green: 'bg-green-50',\n purple: 'bg-purple-50',\n amber: 'bg-amber-50',\n red: 'bg-red-50'\n };\n const categoryText = {\n blue: 'text-blue-600',\n green: 'text-green-600',\n purple: 'text-purple-600',\n amber: 'text-amber-600',\n red: 'text-red-600'\n };\n return

\n \n \n {isOpen && \n

\n {category.modules.map(module => {\n const hasLessons = module.lessons && module.lessons.length > 0;\n const completedLessons = hasLessons ? module.lessons.filter(l => userProgress.completedLessons.has(l.id)).length : 0;\n const progress = hasLessons ? completedLessons / module.lessons.length * 100 : 0;\n const isCompleted = hasLessons && progress === 100;\n return

{module.title}

{module.description}

\n {Math.round(progress)}% Complete\n \n

;\n })}\n

\n }\n \n

;\n};\nconst JobCard = ({\n job\n}) => {\n return

\n \n

{job.title}

{job.company}

{job.location}

{job.type} • {job.posted}

\n \n

;\n};\nconst JobFeed = ({\n jobs\n}) => {\n const [searchTerm, setSearchTerm] = useState('');\n const [locationFilter, setLocationFilter] = useState('');\n const filteredJobs = jobs.filter(job => (job.title.toLowerCase().includes(searchTerm.toLowerCase()) || job.company.toLowerCase().includes(searchTerm.toLowerCase())) && job.location.toLowerCase().includes(locationFilter.toLowerCase()));\n return

\n \n setSearchTerm(e.target.value)} className=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500\" />\n

\n \n setLocationFilter(e.target.value)} className=\"w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500\" />\n

\n {filteredJobs.length > 0 ? filteredJobs.map(job => ) :

No jobs found matching your criteria.

}\n

;\n};\nconst UserProfile = ({\n profile,\n setProfile,\n unlockedBadges,\n allBadges,\n badgeTiers\n}) => {\n const [isEditing, setIsEditing] = useState(false);\n const [editableProfile, setEditableProfile] = useState(JSON.parse(JSON.stringify(profile)));\n const handleSave = () => {\n setProfile(editableProfile);\n setIsEditing(false);\n };\n const handleCancel = () => {\n setEditableProfile(JSON.parse(JSON.stringify(profile)));\n setIsEditing(false);\n };\n const handleInputChange = (e, section, index, field) => {\n const {\n value\n } = e.target;\n const newProfile = JSON.parse(JSON.stringify(editableProfile));\n if (section) {\n newProfile[section][index][field] = value;\n } else {\n newProfile[e.target.name] = value;\n }\n setEditableProfile(newProfile);\n };\n const unlockedBadgesDetails = [...unlockedBadges].map(badgeId => Object.values(allBadges).flatMap(c => c.badges).find(b => b.id === badgeId)).filter(Boolean);\n return

\n {!isEditing ? :

\n \n \n

}\n

\n \n

\n {isEditing ? :

{profile.name}

}\n {isEditing ? :

{profile.title}

}\n {isEditing ? :

{profile.location}

}\n

\n\n

About

\n {isEditing ? :

{profile.bio}

}\n

\n\n

Incentigrate Achievements

\n {unlockedBadgesDetails.map(badge => {\n const tierInfo = badgeTiers[badge.tier];\n const TierIcon = tierInfo.icon;\n return

\n \n

{badge.title}

{badge.tier}

;\n })}\n

\n\n

Experience

\n {editableProfile.experience.map((exp, index) =>

\n {isEditing ?

\n handleInputChange(e, 'experience', index, 'title')} placeholder=\"Title\" className=\"w-full bg-white rounded p-1 border\" />\n handleInputChange(e, 'experience', index, 'company')} placeholder=\"Company\" className=\"w-full bg-white rounded p-1 border\" />\n handleInputChange(e, 'experience', index, 'period')} placeholder=\"Period\" className=\"w-full bg-white rounded p-1 border\" />\n \n

{exp.title}

{exp.company}

{exp.period}

{exp.description}

}\n

)}\n

\n\n

Education

\n {editableProfile.education.map((edu, index) =>

\n {isEditing ?

\n handleInputChange(e, 'education', index, 'school')} placeholder=\"School\" className=\"w-full bg-white rounded p-1 border\" />\n handleInputChange(e, 'education', index, 'degree')} placeholder=\"Degree\" className=\"w-full bg-white rounded p-1 border\" />\n handleInputChange(e, 'education', index, 'period')} placeholder=\"Period\" className=\"w-full bg-white rounded p-1 border\" />\n

{edu.school}

{edu.degree}

{edu.period}

}\n

)}\n

\n\n

Skills

\n {isEditing ?

setEditableProfile(prev => ({\n        ...prev,\n        skills: e.target.value.split(',').map(s => s.trim())\n      }))} placeholder=\"Skills (comma separated)\" className=\"w-full text-gray-600 bg-gray-100 rounded p-2 h-24 border\" /> : <div className=\"flex flex-wrap gap-2\">\n                    {profile.skills.map(skill => <span key={skill} className=\"bg-indigo-100 text-indigo-800 text-sm font-medium px-3 py-1 rounded-full\">{skill}</span>)}\n                </div>}\n        </div>\n    </div>;\n};\nconst JobPlatform = ({\n  userProfile,\n  setUserProfile,\n  jobListings,\n  unlockedBadges,\n  allBadges,\n  badgeTiers\n}) => {\n  const [activeSubTab, setActiveSubTab] = useState('profile');\n  return <div className=\"grid grid-cols-12 gap-8\">\n      <aside className=\"col-span-12 md:col-span-3\">\n        <div className=\"bg-white p-4 rounded-xl shadow-md sticky top-24\">\n          <nav className=\"space-y-1\">\n            <button onClick={() => setActiveSubTab('profile')} className={`w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${activeSubTab === 'profile' ? 'bg-indigo-100 text-indigo-700' : 'text-gray-600 hover:bg-gray-100'}`}>\n              <Users size={18} className=\"mr-3\" /> My Profile\n            </button>\n            <button onClick={() => setActiveSubTab('listings')} className={`w-full flex items-center px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${activeSubTab === 'listings' ? 'bg-indigo-100 text-indigo-700' : 'text-gray-600 hover:bg-gray-100'}`}>\n              <Search size={18} className=\"mr-3\" /> Job Listings\n            </button>\n          </nav>\n        </div>\n      </aside>\n      <main className=\"col-span-12 md:col-span-9\">\n        <AnimatePresence mode=\"wait\">\n          <motion.div key={activeSubTab} initial={{\n          opacity: 0,\n          y: 10\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} exit={{\n          opacity: 0,\n          y: -10\n        }}>\n            {activeSubTab === 'profile' && <UserProfile profile={userProfile} setProfile={setUserProfile} unlockedBadges={unlockedBadges} allBadges={allBadges} badgeTiers={badgeTiers} />}\n            {activeSubTab === 'listings' && <JobFeed jobs={jobListings} />}\n          </motion.div>\n        </AnimatePresence>\n      </main>\n    </div>;\n};\nconst VerifyOnIrysButton = ({\n  transactionId,\n  size = \"sm\"\n}) => {\n  if (!transactionId) return null;\n  const baseClass = \"flex items-center gap-1 transition-colors\";\n  const sizeClass = size === \"sm\" ? \"text-xs px-2 py-0.5 rounded\" : \"text-sm px-3 py-1.5 rounded-lg\";\n  const className = `${baseClass} ${sizeClass} bg-teal-100 text-teal-700 hover:bg-teal-200`;\n  const isDemo = transactionId.startsWith('demo-tx');\n  const href = isDemo ? `#/preview/${transactionId}` : `https://devnet.irys.xyz/${transactionId}`;\n  return <a href={href} target={isDemo ? \"_self\" : \"_blank\"} rel=\"noopener noreferrer\" className={className}>\n      <Database size={size === \"sm\" ? 12 : 16} />\n      {size === \"sm\" ? \"Verify\" : `Verify on Irys ${isDemo ? \"(Demo)\" : \"(Devnet)\"}`}\n    </a>;\n};\nconst IrysStorageBadge = ({\n  transactionId,\n  label = \"Stored on Irys\"\n}) => {\n  if (!transactionId) return null;\n  return <div className=\"flex items-center gap-1.5 text-xs bg-teal-50 text-teal-700 px-2 py-0.5 rounded-full\">\n      <Database size={10} className=\"text-teal-500\" />\n      <span>{label}</span>\n      <span className=\"bg-teal-100 px-1 rounded font-mono text-teal-800 text-[10px]\">\n        {transactionId.substring(0, 6)}...{transactionId.substring(transactionId.length - 4)}\n      </span>\n    </div>;\n};\nconst TransactionPreview = ({\n  transactionId,\n  onClose\n}) => {\n  const [data, setData] = useState(null);\n  const [loading, setLoading] = useState(true);\n  useEffect(() => {\n    const loadData = () => {\n      try {\n        const backup = JSON.parse(localStorage.getItem(STORAGE_KEYS.BACKUP) || '{}');\n        if (backup[transactionId]) {\n          setData(backup[transactionId]);\n        }\n      } catch (e) {\n        console.error('Failed to load transaction data', e);\n      }\n      setLoading(false);\n    };\n    loadData();\n  }, [transactionId]);\n  return <div className=\"fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4\">\n      <div className=\"bg-white rounded-xl shadow-xl max-w-3xl w-full max-h-[90vh] overflow-auto\">\n        <div className=\"p-6 border-b border-gray-200 flex justify-between items-center\">\n          <div className=\"flex items-center\">\n            <Database className=\"w-6 h-6 text-teal-500 mr-3\" />\n            <h2 className=\"text-xl font-bold text-gray-800\">Transaction Preview (Demo)</h2>\n          </div>\n          <button onClick={onClose} className=\"text-gray-400 hover:text-gray-600\">\n            <X size={24} />\n          </button>\n        </div>\n        \n        <div className=\"p-6\">\n          {loading ? <div className=\"flex justify-center items-center py-12\">\n              <Loader className=\"w-8 h-8 text-indigo-500 animate-spin\" />\n            </div> : data ? <>\n              <div className=\"bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6\">\n                <div className=\"flex\">\n                  <div className=\"flex-shrink-0\">\n                    <Lightbulb className=\"h-5 w-5 text-yellow-400\" />\n                  </div>\n                  <div className=\"ml-3\">\n                    <p className=\"text-sm text-yellow-700\">\n                      This is a <strong>demo transaction</strong> created for testing purposes. In a real environment, this would link to the actual Irys devnet gateway where your data is permanently stored.\n                    </p>\n                  </div>\n                </div>\n              </div>\n              \n              <div className=\"mb-6\">\n                <h3 className=\"text-lg font-medium text-gray-800 mb-2\">Transaction Details</h3>\n                <div className=\"bg-gray-50 p-4 rounded-lg\">\n                  <div className=\"grid grid-cols-3 gap-4\">\n                    <div>\n                      <p className=\"text-sm font-medium text-gray-500\">Transaction ID</p>\n                      <p className=\"font-mono text-sm break-all\">{transactionId}</p>\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-gray-500\">Timestamp</p>\n                      <p className=\"text-sm\">{new Date(data.timestamp).toLocaleString()}</p>\n                    </div>\n                    <div>\n                      <p className=\"text-sm font-medium text-gray-500\">Size</p>\n                      <p className=\"text-sm\">{data.data ? (data.data.length / 1024).toFixed(2) : 0} KB</p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              \n              {data.tags && <div className=\"mb-6\">\n                  <h3 className=\"text-lg font-medium text-gray-800 mb-2\">Tags</h3>\n                  <div className=\"bg-gray-50 p-4 rounded-lg\">\n                    <div className=\"flex flex-wrap gap-2\">\n                      {data.tags.map((tag, index) => <div key={index} className=\"bg-teal-100 text-teal-800 px-2 py-1 rounded-md text-xs\">\n                          {tag.name}: {tag.value}\n                        </div>)}\n                    </div>\n                  </div>\n                </div>}\n              \n              <div>\n                <h3 className=\"text-lg font-medium text-gray-800 mb-2\">Data Preview</h3>\n                <div className=\"bg-gray-50 p-4 rounded-lg\">\n                  <pre className=\"text-xs overflow-auto max-h-60 font-mono whitespace-pre-wrap\">{data.data}</pre>\n                </div>\n              </div>\n            </> : <div className=\"text-center py-12\">\n              <div className=\"bg-red-100 text-red-800 p-4 rounded-lg inline-block\">\n                <p className=\"font-medium\">Transaction not found</p>\n                <p className=\"text-sm mt-1\">The transaction data could not be located.</p>\n              </div>\n            </div>}\n        </div>\n        \n        <div className=\"p-6 bg-gray-50 border-t border-gray-200\">\n          <div className=\"flex justify-between items-center\">\n            <p className=\"text-sm text-gray-500\">\n              In a production environment, this data would be permanently stored on the Irys mainnet.\n            </p>\n            <button onClick={onClose} className=\"bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors\">\n              Close\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>;\n};\nconst AuthButton = () => {\n  const {\n    connected,\n    connect,\n    disconnect,\n    userWallet\n  } = useDevapp();\n  const [isOpen, setIsOpen] = useState(false);\n  const [isLoggingIn, setIsLoggingIn] = useState(false);\n  const [loginError, setLoginError] = useState(null);\n  const handleLogin = async () => {\n    if (!connect) {\n      console.error(\"Connect function not available\");\n      setLoginError(\"Connection not available\");\n      return;\n    }\n    setIsLoggingIn(true);\n    setLoginError(null);\n    try {\n      console.log(\"Attempting to connect wallet...\");\n      await connect();\n      console.log(\"Wallet connection successful\");\n    } catch (error) {\n      console.error(\"Wallet connection error:\", error);\n      let message = \"Failed to connect. Please try again.\";\n      if (typeof error === 'object' && error !== null && error.message) {\n        message = String(error.message);\n      } else if (typeof error === 'string') {\n        message = error;\n      }\n      setLoginError(message);\n    } finally {\n      setIsLoggingIn(false);\n    }\n  };\n  if (!connected) {\n    return <div>\n        <button onClick={handleLogin} disabled={isLoggingIn} className={`\n            bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-medium \n            hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:outline-none\n            ${isLoggingIn ? 'opacity-75 cursor-not-allowed' : ''}\n          `}>\n          {isLoggingIn ? 'Connecting...' : 'Connect Wallet'}\n        </button>\n        {loginError && <p className=\"text-red-500 text-xs mt-1 absolute\">{loginError}</p>}\n      </div>;\n  }\n  const displayName = userWallet ? `${userWallet.substring(0, 4)}...${userWallet.substring(userWallet.length - 4)}` : 'User';\n  const avatarSrc = `https://api.dicebear.com/8.x/adventurer/svg?seed=${userWallet || 'user'}`;\n  return <div className=\"relative\">\n      <button onClick={() => setIsOpen(!isOpen)} className=\"flex items-center gap-2\">\n        <img src={avatarSrc} alt=\"avatar\" className=\"w-8 h-8 rounded-full\" />\n      </button>\n      <AnimatePresence>\n        {isOpen && <motion.div initial={{\n        opacity: 0,\n        y: -10\n      }} animate={{\n        opacity: 1,\n        y: 0\n      }} exit={{\n        opacity: 0,\n        y: -10\n      }} className=\"absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg border z-50\">\n            <div className=\"p-4 border-b\">\n              <p className=\"font-medium text-gray-800 truncate\">{displayName}</p>\n              {userWallet && <p className=\"text-xs text-gray-500 font-mono truncate\">{userWallet}</p>}\n            </div>\n            <div className=\"p-2\">\n              <button onClick={disconnect} className=\"w-full text-left px-3 py-2 text-sm text-red-600 hover:bg-red-50 rounded-md flex items-center gap-2\">\n                <X size={16} /> Disconnect\n              </button>\n            </div>\n          </motion.div>}\n      </AnimatePresence>\n    </div>;\n};\nconst LoginScreen = () => {\n  const {\n    connect\n  } = useDevapp();\n  const [isLoggingIn, setIsLoggingIn] = useState(false);\n  const [loginError, setLoginError] = useState(null);\n  const handleLogin = async () => {\n    if (!connect) {\n      console.error(\"Connect function not available in LoginScreen\");\n      setLoginError(\"Connect not available\");\n      return;\n    }\n    setIsLoggingIn(true);\n    setLoginError(null);\n    try {\n      console.log(\"Attempting to connect from LoginScreen...\");\n      await connect();\n      console.log(\"Connection successful from LoginScreen\");\n    } catch (error) {\n      console.error(\"Wallet connection error in LoginScreen:\", error);\n      let message = \"Failed to connect. Please try again.\";\n      if (typeof error === 'object' && error !== null && error.message) {\n        message = String(error.message);\n      } else if (typeof error === 'string') {\n        message = error;\n      }\n      setLoginError(message);\n    } finally {\n      setIsLoggingIn(false);\n    }\n  };\n  return <div className=\"text-center py-20 bg-white rounded-xl shadow-md\">\n      <h2 className=\"text-3xl font-bold text-gray-800 mb-4\">Join Incentigrate</h2>\n      <p className=\"text-gray-600 mb-8 max-w-md mx-auto\">\n        Connect with your social account or wallet to begin your rewarding integration journey.\n      </p>\n      <button onClick={handleLogin} disabled={isLoggingIn} className={`\n          bg-indigo-600 text-white font-bold py-3 px-8 rounded-lg \n          hover:bg-indigo-700 transition-colors text-lg\n          focus:outline-none focus:ring-2 focus:ring-indigo-500\n          ${isLoggingIn ? 'opacity-75 cursor-not-allowed' : ''}\n        `}>\n        {isLoggingIn ? 'Connecting...' : 'Login or Sign Up'}\n      </button>\n      {loginError && <p className=\"text-red-500 text-sm mt-4 max-w-md mx-auto\">{loginError}</p>}\n    </div>;\n};\nfunction IncentigrateApp() {\n  const {\n    ready,\n    authenticated,\n    user\n  } = useDevapp();\n  const {\n    sendTransaction: devappSendTransaction,\n    signMessage: devappSignMessage,\n    userWallet\n  } = useDevapp();\n  const wallet = useMemo(() => {\n    return {\n      connected: authenticated && !!userWallet,\n      publicKey: userWallet ? {\n        toBase58: () => userWallet\n      } : null,\n      sendTransaction: devappSendTransaction,\n      signMessage: devappSignMessage\n    };\n  }, [authenticated, userWallet, devappSendTransaction, devappSignMessage]);\n  const [activeTab, setActiveTab] = useState('dashboard');\n  const [previewTransactionId, setPreviewTransactionId] = useState(null);\n  useEffect(() => {\n    const checkHash = () => {\n      const hash = window.location.hash;\n      if (hash.startsWith('#/preview/')) {\n        const txId = hash.replace('#/preview/', '');\n        setPreviewTransactionId(txId);\n      }\n    };\n    checkHash();\n    window.addEventListener('hashchange', checkHash);\n    return () => window.removeEventListener('hashchange', checkHash);\n  }, []);\n  const [tokenBalance, setTokenBalance] = useState(1250);\n  const [hasProcessedConnection, setHasProcessedConnection] = useState(false);\n  const [queueStatus, setQueueStatus] = useState({\n    uploadQueue: 0,\n    offlineSyncQueue: 0,\n    online: true\n  });\n  const [progress, setProgress] = useState({\n    language: 38,\n    citizenship: 15,\n    community: 62,\n    certificates: 2\n  });\n  const [certificates, setCertificates] = useState([{\n    id: 1,\n    name: 'Basic German A1',\n    date: '2025-03-15',\n    verified: true\n  }, {\n    id: 2,\n    name: 'Digital Skills',\n    date: '2025-04-20',\n    verified: true\n  }]);\n  const [unlockedBadges, setUnlockedBadges] = useState(new Set(['spec-early']));\n  const [newlyUnlockedBadge, setNewlyUnlockedBadge] = useState(null);\n  const [showIrysToast, setShowIrysToast] = useState(false);\n  const [irysToastData, setIrysToastData] = useState({\n    type: 'success',\n    message: '',\n    transactionId: null\n  });\n  const [marketplaceItems] = useState([{\n    id: 1,\n    name: 'Public Transport Pass',\n    icon: <Bus size={24} />,\n    tokens: 75,\n    available: true,\n    irysTransactionId: 'irys-1654879123-538762'\n  }, {\n    id: 2,\n    title: 'Coffee Shop Voucher',\n    icon: <Coffee size={24} />,\n    tokens: 20,\n    available: true,\n    irysTransactionId: 'irys-1654879456-129485'\n  }, {\n    id: 3,\n    title: 'Professional Resume Review',\n    icon: <Briefcase size={24} />,\n    tokens: 50,\n    available: true\n  }, {\n    id: 4,\n    title: 'Language Tutor Session',\n    icon: <BookOpen size={24} />,\n    tokens: 100,\n    available: true\n  }, {\n    id: 5,\n    title: 'Welcome Gift Box',\n    icon: <Gift size={24} />,\n    tokens: 60,\n    available: true\n  }]);\n  const [userProgress, setUserProgress] = useState({\n    xp: 1250,\n    streak: 5,\n    completedLessons: new Set(['l1-1', 'l1-2'])\n  });\n  const [userProfile, setUserProfile] = useState({\n    name: 'Jamal K.',\n    title: 'Aspiring Web Developer',\n    location: 'Berlin, Germany',\n    avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=jamal`,\n    bio: 'Passionate about creating beautiful and functional web applications. Eager to apply my skills in a professional environment. I have a background in graphic design and have recently completed several coding bootcamps focusing on React, Node.js, and Solana development. I am a quick learner, a collaborative team player, and I am excited about leveraging technology to solve real-world problems.',\n    experience: [{\n      id: 1,\n      title: 'Freelance Graphic Designer',\n      company: 'Self-employed',\n      period: '2020 - 2022',\n      description: 'Worked with various clients on branding and web design projects.'\n    }],\n    education: [{\n      id: 1,\n      school: 'Digital Career Institute',\n      degree: 'Full-Stack Web Development',\n      period: '2023 - 2024'\n    }],\n    skills: ['React', 'JavaScript', 'HTML/CSS', 'Node.js', 'Solana', 'Figma', 'German (B1)']\n  });\n  const [jobListings] = useState([{\n    id: 1,\n    title: 'Junior Frontend Developer',\n    company: 'Tech Solutions GmbH',\n    location: 'Berlin, Germany',\n    type: 'Full-time',\n    posted: '2 days ago'\n  }, {\n    id: 2,\n    title: 'React Developer (Working Student)',\n    company: 'Innovate Startup',\n    location: 'Munich, Germany',\n    type: 'Part-time',\n    posted: '5 days ago'\n  }, {\n    id: 3,\n    title: 'Full-Stack Developer',\n    company: 'Digital Agency',\n    location: 'Hamburg, Germany',\n    type: 'Full-time',\n    posted: 'Full-time'\n  }, {\n    id: 4,\n    title: 'Web3 Community Manager',\n    company: 'CryptoConnect',\n    location: 'Remote',\n    type: 'Full-time',\n    posted: '3 days ago'\n  }, {\n    id: 5,\n    title: 'Backend Engineer (Node.js)',\n    company: 'Fintech Corp',\n    location: 'Frankfurt, Germany',\n    type: 'Full-time',\n    posted: '1 week ago'\n  }]);\n  const [learningData] = useState(initialLearningData);\n  const [activeLessonModule, setActiveLessonModule] = useState(null);\n  const [completedSteps, setCompletedSteps] = useState(new Set());\n  const [activeJourneyStep, setActiveJourneyStep] = useState(null);\n  const [transactionHistory, setTransactionHistory] = useState([{\n    id: 1,\n    type: 'earn',\n    reason: 'Daily Login Bonus',\n    amount: 25,\n    timestamp: new Date(Date.now() - 86400000),\n    irysTransactionId: null\n  }, {\n    id: 2,\n    type: 'spend',\n    reason: 'Coffee Shop Voucher',\n    amount: 20,\n    timestamp: new Date(Date.now() - 172800000),\n    irysTransactionId: null\n  }, {\n    id: 3,\n    type: 'earn',\n    reason: 'Language Module 1',\n    amount: 150,\n    timestamp: new Date(Date.now() - 259200000),\n    irysTransactionId: null\n  }]);\n  const [, setRewardNotifications] = useState([]);\n  const [lastRemoteUpdate, setLastRemoteUpdate] = useState(null);\n  const addTokens = useCallback(async (amount, reason, userAddress) => {\n    if (amount <= 0) return;\n    setTokenBalance(prev => prev + amount);\n    const newTx = {\n      id: Date.now(),\n      type: 'earn',\n      reason,\n      amount,\n      timestamp: new Date(),\n      irysTransactionId: null\n    };\n    setTransactionHistory(prev => [newTx, ...prev]);\n    setRewardNotifications(prev => [...prev, {\n      ...newTx\n    }]);\n    try {\n      const result = await IrysManager.uploadTransaction({\n        ...newTx,\n        userAddress\n      });\n      setTransactionHistory(prev => prev.map(tx => tx.id === newTx.id ? {\n        ...tx,\n        irysTransactionId: result.id\n      } : tx));\n    } catch (error) {\n      console.error('Failed to upload transaction to Irys:', error);\n    }\n  }, []);\n  useEffect(() => {\n    if (ready && authenticated && !hasProcessedConnection) {\n      setHasProcessedConnection(true);\n      const walletAddress = userWallet;\n      const randomSeed = Math.random().toString(36).substring(2, 10);\n      const profileName = 'New User';\n      const profileAvatar = `https://api.dicebear.com/8.x/adventurer/svg?seed=${randomSeed}`;\n      const updatedProfile = {\n        ...userProfile,\n        name: profileName,\n        avatar: profileAvatar,\n        walletAddress: walletAddress\n      };\n      setUserProfile(updatedProfile);\n      const uniqueId = walletAddress || randomSeed;\n      IrysManager.uploadUserProfile({\n        userAddress: uniqueId,\n        ...updatedProfile\n      }).then(result => {\n        setIrysToastData({\n          type: 'success',\n          message: 'Profile stored on Irys Devnet',\n          transactionId: result.id\n        });\n        setShowIrysToast(true);\n        setTimeout(() => setShowIrysToast(false), 8000);\n      }).catch(error => {\n        setIrysToastData({\n          type: 'error',\n          message: 'Failed to store profile: ' + error.message,\n          transactionId: null\n        });\n        setShowIrysToast(true);\n        setTimeout(() => setShowIrysToast(false), 5000);\n      });\n      addTokens(25, 'Login Bonus', uniqueId);\n    } else if (ready && !authenticated && hasProcessedConnection) {\n      setHasProcessedConnection(false);\n    }\n  }, [ready, authenticated, user, privyWallet, hasProcessedConnection, addTokens]);\n  useEffect(() => {\n    if (!lastRemoteUpdate) return;\n    const {\n      dataType,\n      key\n    } = lastRemoteUpdate;\n    const refetchAndSet = async (fetchKey, currentData, setter) => {\n      if (key !== fetchKey) return;\n      const result = await IrysManager.fetchData(dataType, key);\n      if (result && result.data) {\n        const localTimestamp = new Date(currentData.client_last_modified || 0);\n        const remoteTimestamp = new Date(result.data.client_last_modified || 0);\n        if (remoteTimestamp > localTimestamp) {\n          console.log(`Syncing ${dataType} for ${key}`);\n          setter(result.data);\n        }\n      }\n    };\n    if (dataType === 'UserProfile') {\n      refetchAndSet(userProfile.walletAddress, userProfile, setUserProfile);\n    }\n  }, [lastRemoteUpdate, userProfile]);\n  useEffect(() => {\n    const loadStoredData = () => {\n      try {\n        const storedProfile = localStorage.getItem(STORAGE_KEYS.USER_PROFILE);\n        if (storedProfile) setUserProfile(JSON.parse(storedProfile));\n        const storedBalance = localStorage.getItem(STORAGE_KEYS.TOKEN_BALANCE);\n        if (storedBalance) setTokenBalance(parseInt(storedBalance, 10));\n        const storedProgress = localStorage.getItem(STORAGE_KEYS.PROGRESS);\n        if (storedProgress) setProgress(JSON.parse(storedProgress));\n        const storedCertificates = localStorage.getItem(STORAGE_KEYS.CERTIFICATES);\n        if (storedCertificates) setCertificates(JSON.parse(storedCertificates));\n        const storedBadges = localStorage.getItem(STORAGE_KEYS.UNLOCKED_BADGES);\n        if (storedBadges) setUnlockedBadges(new Set(JSON.parse(storedBadges)));\n        const storedUserProgress = localStorage.getItem(STORAGE_KEYS.USER_PROGRESS);\n        if (storedUserProgress) {\n          const parsed = JSON.parse(storedUserProgress);\n          setUserProgress({\n            ...parsed,\n            completedLessons: new Set(parsed.completedLessons)\n          });\n        }\n        const storedSteps = localStorage.getItem(STORAGE_KEYS.COMPLETED_STEPS);\n        if (storedSteps) setCompletedSteps(new Set(JSON.parse(storedSteps)));\n        const storedHistory = localStorage.getItem(STORAGE_KEYS.TRANSACTION_HISTORY);\n        if (storedHistory) {\n          const parsed = JSON.parse(storedHistory);\n          setTransactionHistory(parsed.map(tx => ({\n            ...tx,\n            timestamp: new Date(tx.timestamp)\n          })));\n        }\n      } catch (error) {\n        console.error('Error loading data from localStorage:', error);\n      }\n    };\n    loadStoredData();\n  }, []);\n  useEffect(() => {\n    IrysManager.init(setQueueStatus, update => setLastRemoteUpdate(update), wallet);\n    return () => {\n      IrysManager.cleanup();\n    };\n  }, [wallet]);\n  useEffect(() => {\n    const saveToStorage = async () => {\n      try {\n        localStorage.setItem(STORAGE_KEYS.USER_PROFILE, JSON.stringify(userProfile));\n        localStorage.setItem(STORAGE_KEYS.TOKEN_BALANCE, tokenBalance.toString());\n        localStorage.setItem(STORAGE_KEYS.PROGRESS, JSON.stringify(progress));\n        localStorage.setItem(STORAGE_KEYS.CERTIFICATES, JSON.stringify(certificates));\n        localStorage.setItem(STORAGE_KEYS.UNLOCKED_BADGES, JSON.stringify([...unlockedBadges]));\n        localStorage.setItem(STORAGE_KEYS.USER_PROGRESS, JSON.stringify({\n          ...userProgress,\n          completedLessons: [...userProgress.completedLessons]\n        }));\n        localStorage.setItem(STORAGE_KEYS.COMPLETED_STEPS, JSON.stringify([...completedSteps]));\n        localStorage.setItem(STORAGE_KEYS.TRANSACTION_HISTORY, JSON.stringify(transactionHistory));\n      } catch (error) {\n        console.error('Error saving data to localStorage:', error);\n      }\n    };\n    saveToStorage();\n  }, [userProfile, tokenBalance, progress, certificates, unlockedBadges, userProgress, completedSteps, transactionHistory]);\n  useEffect(() => {\n    const checkBadges = () => {\n      const allBadgesFlat = Object.values(allBadges).flatMap(cat => cat.badges);\n      for (const badge of allBadgesFlat) {\n        if (unlockedBadges.has(badge.id)) continue;\n        let unlocked = false;\n        const trigger = badge.trigger;\n        const currentUserProgress = {\n          ...userProgress,\n          completedSteps,\n          tokenBalance\n        };\n        const completedModules = Object.values(learningData).flatMap(c => c.modules).filter(m => m.lessons.length > 0 && m.lessons.every(l => currentUserProgress.completedLessons.has(l.id))).length;\n        switch (trigger.type) {\n          case 'streak':\n            if (currentUserProgress.streak >= trigger.value) unlocked = true;\n            break;\n          case 'module_complete':\n            if (completedModules >= trigger.value) unlocked = true;\n            break;\n          case 'integration_step':\n            if (currentUserProgress.completedSteps.size >= trigger.value) unlocked = true;\n            break;\n          case 'token_accumulation':\n            if (currentUserProgress.tokenBalance >= trigger.value) unlocked = true;\n            break;\n        }\n        if (unlocked) {\n          setUnlockedBadges(prev => new Set(prev).add(badge.id));\n          addTokens(badge.tokens, `Badge: ${badge.title}`, userProfile.walletAddress);\n          setNewlyUnlockedBadge(badge);\n          return;\n        }\n      }\n    };\n    if (!newlyUnlockedBadge) {\n      checkBadges();\n    }\n  }, [userProgress, completedSteps, tokenBalance, unlockedBadges, newlyUnlockedBadge, addTokens, userProfile.walletAddress]);\n  const spendTokens = useCallback((amount, reason) => {\n    if (tokenBalance >= amount) {\n      setTokenBalance(prev => prev - amount);\n      const newTx = {\n        id: Date.now(),\n        type: 'spend',\n        reason,\n        amount,\n        timestamp: new Date(),\n        irysTransactionId: null\n      };\n      setTransactionHistory(prev => [newTx, ...prev]);\n      IrysManager.uploadTransaction({\n        ...newTx,\n        userAddress: userProfile.walletAddress\n      }).then(result => {\n        setTransactionHistory(prev => prev.map(tx => tx.id === newTx.id ? {\n          ...tx,\n          irysTransactionId: result.id\n        } : tx));\n      }).catch(error => console.error('Failed to upload transaction to Irys:', error));\n      return true;\n    } else {\n      alert('Not enough tokens!');\n      return false;\n    }\n  }, [tokenBalance, userProfile.walletAddress]);\n  const handleLessonReward = (lessonId, tokens, xp) => {\n    const updatedProgress = {\n      ...userProgress,\n      xp: userProgress.xp + xp,\n      completedLessons: new Set([...userProgress.completedLessons, lessonId])\n    };\n    setUserProgress(updatedProgress);\n    IrysManager.uploadAppState({\n      lessonId,\n      xp,\n      tokens,\n      userId: userProfile.walletAddress,\n      completedAt: new Date().toISOString()\n    }, `lesson-${lessonId}`).then(result => {\n      setIrysToastData({\n        type: 'success',\n        message: 'Lesson progress stored permanently',\n        transactionId: result.id\n      });\n      setShowIrysToast(true);\n      setTimeout(() => setShowIrysToast(false), 4000);\n    }).catch(error => {\n      setIrysToastData({\n        type: 'error',\n        message: 'Failed to store progress: ' + error.message,\n        transactionId: null\n      });\n      setShowIrysToast(true);\n      setTimeout(() => setShowIrysToast(false), 4000);\n    });\n    addTokens(tokens, 'Lesson Reward', userProfile.walletAddress);\n  };\n  const handleModuleComplete = (moduleId, bonusTokens) => {\n    addTokens(bonusTokens, 'Module Completion Bonus', userProfile.walletAddress);\n    const module = Object.values(learningData).flatMap(c => c.modules).find(m => m.id === moduleId);\n    if (module) {\n      const updatedProgress = prevProgress => {\n        const newCompleted = new Set(prevProgress.completedLessons);\n        module.lessons.forEach(l => newCompleted.add(l.id));\n        return {\n          ...prevProgress,\n          completedLessons: newCompleted\n        };\n      };\n      setUserProgress(updatedProgress);\n      IrysManager.uploadAppState({\n        moduleId,\n        bonusTokens,\n        userId: userProfile.walletAddress,\n        completedAt: new Date().toISOString()\n      }, `module-${moduleId}`).catch(error => {\n        console.error('Failed to upload module completion to Irys:', error);\n      });\n    }\n  };\n  const handleCompleteStep = (stepId, tokensGained) => {\n    setCompletedSteps(prev => new Set(prev).add(stepId));\n    IrysManager.uploadAppState({\n      stepId,\n      tokensGained,\n      userId: userProfile.walletAddress,\n      completedAt: new Date().toISOString()\n    }, `step-${stepId}`).catch(error => {\n      console.error('Failed to upload step completion to Irys:', error);\n    });\n    addTokens(tokensGained, 'Integration Step Completed', userProfile.walletAddress);\n  };\n  const handleUploadCertificate = () => {\n    const newCertificate = {\n      id: certificates.length + 1,\n      name: 'Uploaded Certificate',\n      date: new Date().toISOString().split('T')[0],\n      verified: false,\n      irysTransactionId: null\n    };\n    setIrysToastData({\n      type: 'info',\n      message: 'Certificate upload queued...',\n      transactionId: null\n    });\n    setShowIrysToast(true);\n    setTimeout(() => setShowIrysToast(false), 3000);\n    IrysManager.uploadCertificates({\n      ...newCertificate,\n      userId: userProfile.walletAddress\n    }, userProfile.walletAddress).then(result => {\n      newCertificate.irysTransactionId = result.id;\n      setCertificates(prev => [...prev.filter(c => c.id !== newCertificate.id), newCertificate]);\n      setIrysToastData({\n        type: 'success',\n        message: 'Certificate stored permanently',\n        transactionId: result.id\n      });\n      setShowIrysToast(true);\n      setTimeout(() => setShowIrysToast(false), 4000);\n    }).catch(error => {\n      setIrysToastData({\n        type: 'error',\n        message: 'Failed to store certificate: ' + error.message,\n        transactionId: null\n      });\n      setShowIrysToast(true);\n      setTimeout(() => setShowIrysToast(false), 4000);\n    });\n    setCertificates([...certificates, newCertificate]);\n    setProgress(prev => ({\n      ...prev,\n      certificates: prev.certificates + 1\n    }));\n    addTokens(25, 'Certificate Upload', userProfile.walletAddress);\n  };\n  const handleVerifyCertificate = certificateId => {\n    const certificate = certificates.find(cert => cert.id === certificateId);\n    if (!certificate) return;\n    const updatedCertificate = {\n      ...certificate,\n      verified: true\n    };\n    IrysManager.uploadCertificates({\n      ...updatedCertificate,\n      userId: userProfile.walletAddress,\n      verifiedAt: new Date().toISOString()\n    }, userProfile.walletAddress).then(result => {\n      updatedCertificate.irysTransactionId = result.id;\n      const updatedCerts = certificates.map(cert => cert.id === certificateId ? updatedCertificate : cert);\n      setCertificates(updatedCerts);\n    }).catch(error => {\n      console.error('Failed to upload verified certificate to Irys:', error);\n    });\n    addTokens(100, 'Certificate Verification', userProfile.walletAddress);\n  };\n  const handlePurchaseItem = itemId => {\n    const item = marketplaceItems.find(item => item.id === itemId);\n    if (spendTokens(item.tokens, item.name || item.title)) {\n      alert(`Successfully purchased ${item.name || item.title}!`);\n    }\n  };\n  return <div className=\"min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 text-gray-800 font-sans\">\n      <AnimatePresence>\n        {newlyUnlockedBadge && <BadgeUnlockCelebration badge={newlyUnlockedBadge} onClose={() => setNewlyUnlockedBadge(null)} />}\n        {activeLessonModule && <LessonPlayer module={activeLessonModule} onLessonReward={handleLessonReward} onModuleComplete={handleModuleComplete} onExit={() => setActiveLessonModule(null)} userProgress={userProgress} />}\n        {activeJourneyStep && <StepDetailView step={activeJourneyStep} onClose={() => setActiveJourneyStep(null)} onCompleteStep={handleCompleteStep} completedSteps={completedSteps} />}\n        {previewTransactionId && <TransactionPreview transactionId={previewTransactionId} onClose={() => {\n        setPreviewTransactionId(null);\n        window.history.pushState(null, '', window.location.pathname);\n      }} />}\n      </AnimatePresence>\n      \n      <AnimatePresence>\n        {(queueStatus.uploadQueue > 0 || queueStatus.offlineSyncQueue > 0) && <motion.div initial={{\n        y: 100,\n        opacity: 0\n      }} animate={{\n        y: 0,\n        opacity: 1\n      }} exit={{\n        y: 100,\n        opacity: 0\n      }} className=\"fixed bottom-4 right-4 z-50\">\n            <div className=\"bg-white rounded-lg shadow-lg border border-gray-200 px-4 py-3 flex items-center gap-3\">\n              {queueStatus.online ? <>\n                  <Loader className=\"w-5 h-5 text-indigo-500 animate-spin\" />\n                  <div>\n                    <p className=\"text-sm font-medium text-gray-800\">{queueStatus.uploadQueue} items uploading...</p>\n                    <p className=\"text-xs text-gray-500\">Your data is being synced to Irys</p>\n                  </div>\n                </> : <>\n                  <CloudOff className=\"w-5 h-5 text-red-500\" />\n                  <div>\n                    <p className=\"text-sm font-medium text-gray-800\">You are offline</p>\n                    <p className=\"text-xs text-gray-500\">{queueStatus.offlineSyncQueue} items waiting to sync</p>\n                  </div>\n                </>}\n            </div>\n          </motion.div>}\n      </AnimatePresence>\n      \n      <AnimatePresence>\n        {showIrysToast && <motion.div initial={{\n        x: 100,\n        opacity: 0\n      }} animate={{\n        x: 0,\n        opacity: 1\n      }} exit={{\n        x: 100,\n        opacity: 0\n      }} className=\"fixed top-24 right-4 z-50\">\n            <div className={`flex items-start p-3 rounded-lg shadow-lg max-w-md ${irysToastData.type === 'success' ? 'bg-teal-50 border border-teal-200' : irysToastData.type === 'info' ? 'bg-blue-50 border border-blue-200' : 'bg-red-50 border border-red-200'}`}>\n              <div className={`p-2 rounded-full mr-3 ${irysToastData.type === 'success' ? 'bg-teal-100' : irysToastData.type === 'info' ? 'bg-blue-100' : 'bg-red-100'}`}>\n                {irysToastData.type === 'success' ? <Database className=\"w-5 h-5 text-teal-600\" /> : irysToastData.type === 'info' ? <Lightbulb className=\"w-5 h-5 text-blue-600\" /> : <CloudOff className=\"w-5 h-5 text-red-600\" />}\n              </div>\n              <div className=\"flex-1\">\n                <p className={`text-sm font-medium ${irysToastData.type === 'success' ? 'text-teal-800' : irysToastData.type === 'info' ? 'text-blue-800' : 'text-red-800'}`}>\n                  {irysToastData.message}\n                </p>\n                {irysToastData.transactionId && <div className=\"mt-1 flex items-center\">\n                    <div className=\"text-xs font-mono bg-white px-2 py-0.5 rounded mr-2 text-gray-700\">\n                      {irysToastData.transactionId.substring(0, 12)}...\n                    </div>\n                    <VerifyOnIrysButton transactionId={irysToastData.transactionId} />\n                  </div>}\n              </div>\n              <button onClick={() => setShowIrysToast(false)} className=\"ml-2 text-gray-400 hover:text-gray-600\">\n                <X size={16} />\n              </button>\n            </div>\n          </motion.div>}\n      </AnimatePresence>\n      <header className=\"bg-white shadow-md sticky top-0 z-40\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center\">\n          <div className=\"flex items-center space-x-2\">\n            <Globe className=\"h-8 w-8 text-indigo-600\" />\n            <h1 className=\"text-2xl font-bold text-indigo-600\">Incentigrate</h1>\n          </div>\n          \n        <div className=\"flex items-center space-x-4\">\n              <div className=\"flex items-center\">\n                <div className=\"bg-teal-100 text-teal-800 px-2 py-1 rounded-full text-xs font-medium flex items-center mr-3\">\n                  <Database className=\"h-3 w-3 mr-1\" />\n                  Decentralized\n                </div>\n                <div className=\"bg-indigo-100 px-3 py-1 rounded-full flex items-center space-x-1\">\n                  <Wallet className=\"h-4 w-4 text-indigo-600\" />\n                  <AnimatePresence mode=\"popLayout\">\n                    <motion.span key={tokenBalance} initial={{\n                  y: -10,\n                  opacity: 0\n                }} animate={{\n                  y: 0,\n                  opacity: 1\n                }} exit={{\n                  y: 10,\n                  opacity: 0\n                }} transition={{\n                  duration: 0.2\n                }} className=\"font-medium tabular-nums\">\n                      {tokenBalance}\n                    </motion.span>\n                  </AnimatePresence>\n                  <span className=\"font-medium\">$O</span>\n                </div>\n              </div>\n              <AuthButton />\n            </div>\n        </div>\n      </header>\n\n      {}\n      <nav className=\"bg-white shadow-sm mb-6\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"flex space-x-8 overflow-x-auto\">\n            {[{\n            id: 'dashboard',\n            name: 'Dashboard',\n            icon: <BarChart className=\"h-5 w-5\" />\n          }, {\n            id: 'learn',\n            name: 'Learning',\n            icon: <Languages className=\"h-5 w-5\" />\n          }, {\n            id: 'journey',\n            name: 'Journey',\n            icon: <Map className=\"h-5 w-5\" />\n          }, {\n            id: 'jobs',\n            name: 'Jobs',\n            icon: <BriefcaseIcon className=\"h-5 w-5\" />\n          }, {\n            id: 'certificates',\n            name: 'Certificates',\n            icon: <Star className=\"h-5 w-5\" />\n          }, {\n            id: 'community',\n            name: 'Community',\n            icon: <Users className=\"h-5 w-5\" />\n          }, {\n            id: 'marketplace',\n            name: 'Marketplace',\n            icon: <ShoppingBag className=\"h-5 w-5\" />\n          }, {\n            id: 'rewards',\n            name: 'Rewards',\n            icon: <Trophy className=\"h-5 w-5\" />\n          }].map(item => <button key={item.id} onClick={() => setActiveTab(item.id)} className={`flex items-center space-x-2 px-3 py-4 text-sm font-medium border-b-2 ${activeTab === item.id ? 'border-indigo-500 text-indigo-600' : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'} relative`}>\n                {item.icon}\n                <span>{item.name}</span>\n                {item.badge && <span className=\"absolute -top-1 -right-1 bg-teal-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-[10px]\">\n                  <span>!</span>\n                </span>}\n              </button>)}\n          </div>\n        </div>\n      </nav>\n\n      {}\n      <main className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12\">\n        {activeTab === 'dashboard' && authenticated && <div className=\"space-y-6\">\n            <motion.div initial={{\n          opacity: 0,\n          y: 20\n        }} animate={{\n          opacity: 1,\n          y: 0\n        }} transition={{\n          duration: 0.5\n        }} className=\"bg-white rounded-xl shadow-md overflow-hidden\">\n              <div className=\"p-6\">\n                <h2 className=\"text-2xl font-bold text-gray-800 mb-4\">Welcome to Incentigrate!</h2>\n                <p className=\"text-gray-600 mb-6\">\n                  Your integration journey is now rewarding! Complete tasks, earn tokens, and build your new life.\n                </p>\n                \n                <div className=\"grid grid-cols-1 md:grid-cols-4 gap-4 mb-6\">\n                  <div className=\"bg-blue-50 p-4 rounded-lg\">\n                    <div className=\"flex justify-between items-start mb-2\">\n                      <div className=\"bg-blue-100 p-2 rounded-lg\">\n                        <Languages className=\"h-6 w-6 text-blue-600\" />\n                      </div>\n                      <span className=\"text-sm font-medium text-blue-600\">{progress.language}%</span>\n                    </div>\n                    <h3 className=\"font-medium\">Language</h3>\n                    <div className=\"w-full bg-blue-200 rounded-full h-2 mt-2\">\n                      <div className=\"bg-blue-600 h-2 rounded-full\" style={{\n                    width: `${progress.language}%`\n                  }}></div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"bg-purple-50 p-4 rounded-lg\">\n                    <div className=\"flex justify-between items-start mb-2\">\n                      <div className=\"bg-purple-100 p-2 rounded-lg\">\n                        <Globe className=\"h-6 w-6 text-purple-600\" />\n                      </div>\n                      <span className=\"text-sm font-medium text-purple-600\">{progress.citizenship}%</span>\n                    </div>\n                    <h3 className=\"font-medium\">Citizenship</h3>\n                    <div className=\"w-full bg-purple-200 rounded-full h-2 mt-2\">\n                      <div className=\"bg-purple-600 h-2 rounded-full\" style={{\n                    width: `${progress.citizenship}%`\n                  }}></div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"bg-green-50 p-4 rounded-lg\">\n                    <div className=\"flex justify-between items-start mb-2\">\n                      <div className=\"bg-green-100 p-2 rounded-lg\">\n                        <Users className=\"h-6 w-6 text-green-600\" />\n                      </div>\n                      <span className=\"text-sm font-medium text-green-600\">{progress.community}%</span>\n                    </div>\n                    <h3 className=\"font-medium\">Community</h3>\n                    <div className=\"w-full bg-green-200 rounded-full h-2 mt-2\">\n                      <div className=\"bg-green-600 h-2 rounded-full\" style={{\n                    width: `${progress.community}%`\n                  }}></div>\n                    </div>\n                  </div>\n                  \n                  <div className=\"bg-amber-50 p-4 rounded-lg\">\n                    <div className=\"flex justify-between items-start mb-2\">\n                      <div className=\"bg-amber-100 p-2 rounded-lg\">\n                        <Star className=\"h-6 w-6 text-amber-600\" />\n                      </div>\n                      <span className=\"text-sm font-medium text-amber-600\">{certificates.length}</span>\n                    </div>\n                    <h3 className=\"font-medium\">Certificates</h3>\n                    <p className=\"text-xs text-amber-600 mt-2\">{certificates.filter(c => c.verified).length} verified</p>\n                  </div>\n                </div>\n              </div>\n            </motion.div>\n            \n            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n              <motion.div initial={{\n            opacity: 0,\n            x: -20\n          }} animate={{\n            opacity: 1,\n            x: 0\n          }} transition={{\n            duration: 0.5,\n            delay: 0.2\n          }} className=\"bg-white rounded-xl shadow-md overflow-hidden\">\n                <div className=\"border-b border-gray-200 px-6 py-4\">\n                  <h3 className=\"text-lg font-medium\">Latest Badges</h3>\n                </div>\n                <div className=\"p-6 space-y-4\">\n                  {[...unlockedBadges].slice(-3).reverse().map(badgeId => {\n                const badge = Object.values(allBadges).flatMap(c => c.badges).find(b => b.id === badgeId);\n                if (!badge) return null;\n                const tierInfo = badgeTiers[badge.tier];\n                const TierIcon = tierInfo.icon;\n                return <div key={badge.id} className=\"flex items-center\">\n                        <div className={`p-2 rounded-full mr-4 ${tierInfo.bgColor}`}>\n                          <TierIcon className={`h-5 w-5 ${tierInfo.color}`} />\n                        </div>\n                        <div className=\"flex-1\">\n                          <h4 className=\"font-medium\">{badge.title}</h4>\n                          <p className=\"text-sm text-gray-500\">{badge.tier} Badge</p>\n                        </div>\n                        <div className=\"bg-indigo-100 px-3 py-1 rounded-full text-indigo-600 text-sm\">\n                          +{badge.tokens} $O\n                        </div>\n                      </div>;\n              })}\n                  \n                  <button onClick={() => setActiveTab('rewards')} className=\"w-full mt-4 py-2 bg-gradient-to-r from-indigo-500 to-indigo-600 text-white rounded-lg flex items-center justify-center hover:from-indigo-600 hover:to-indigo-700 transition-all duration-200\">\n                    <span>View All Badges</span>\n                    <ChevronRight className=\"h-4 w-4 ml-2\" />\n                  </button>\n                </div>\n              </motion.div>\n              \n              <motion.div initial={{\n            opacity: 0,\n            x: 20\n          }} animate={{\n            opacity: 1,\n            x: 0\n          }} transition={{\n            duration: 0.5,\n            delay: 0.2\n          }} className=\"bg-white rounded-xl shadow-md overflow-hidden\">\n                <div className=\"border-b border-gray-200 px-6 py-4\">\n                  <h3 className=\"text-lg font-medium\">Community Hub</h3>\n                </div>\n                <div className=\"p-6 flex flex-col items-center text-center\">\n                  <Users className=\"h-12 w-12 text-indigo-500 mb-4\" />\n                  <h4 className=\"font-medium mb-2\">Connect with others</h4>\n                  <p className=\"text-sm text-gray-500 mb-4\">Ask questions, share stories, and find local events in the community hub.</p>\n                  <button onClick={() => setActiveTab('community')} className=\"w-full mt-2 py-2 bg-white border border-indigo-500 text-indigo-600 rounded-lg flex items-center justify-center hover:bg-indigo-50 transition-all duration-200\">\n                    <span>Go to Community</span>\n                    <ChevronRight className=\"h-4 w-4 ml-2\" />\n                  </button>\n                </div>\n              </motion.div>\n            </div>\n          </div>}\n\n        {activeTab === 'dashboard' && ready && !authenticated && <LoginScreen />}\n\n        {activeTab === 'learn' && <div className=\"space-y-6\">\n            <div className=\"bg-white rounded-xl shadow-md p-6\">\n              <div className=\"flex justify-between items-center mb-6\">\n                <h2 className=\"text-2xl font-bold text-gray-800\">Learning Path</h2>\n                <div className=\"flex items-center space-x-4\">\n                  <div className=\"flex items-center space-x-1 text-amber-500\">\n                    <Flame className=\"w-5 h-5\" />\n                    <span className=\"font-bold text-lg\">{userProgress.streak}</span>\n                  </div>\n                  <div className=\"flex items-center space-x-1 text-blue-500\">\n                    <Zap className=\"w-5 h-5\" />\n                    <span className=\"font-bold text-lg\">{userProgress.xp} XP</span>\n                  </div>\n                </div>\n              </div>\n              {Object.values(learningData).map(category => <CategorySection key={category.id} category={category} userProgress={userProgress} onStartLesson={module => setActiveLessonModule(module)} />)}\n            </div>\n          </div>}\n\n        {activeTab === 'journey' && <JourneyGuide onStepSelect={step => setActiveJourneyStep(step)} completedSteps={completedSteps} />}\n\n        {activeTab === 'jobs' && <JobPlatform userProfile={userProfile} setUserProfile={setUserProfile} jobListings={jobListings} unlockedBadges={unlockedBadges} allBadges={allBadges} badgeTiers={badgeTiers} />}\n\n        {activeTab === 'rewards' && <RewardsDashboard tokenBalance={tokenBalance} transactionHistory={transactionHistory} unlockedBadges={unlockedBadges} userProgress={userProgress} learningData={learningData} user={{\n        name: 'Current User',\n        avatar: `https://api.dicebear.com/8.x/adventurer/svg?seed=currentuser`\n      }} />}\n\n        {activeTab === 'certificates' && <div className=\"space-y-6\">\n            <div className=\"bg-white rounded-xl shadow-md overflow-hidden\">\n              <div className=\"p-6\">\n                <div className=\"flex justify-between items-center mb-6\">\n                  <h2 className=\"text-2xl font-bold text-gray-800\">My Certificates</h2>\n                  \n                  <button onClick={handleUploadCertificate} className=\"bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg transition-colors duration-200 flex items-center\">\n                    <Upload className=\"h-4 w-4 mr-2\" />\n                    Upload Certificate\n                  </button>\n                </div>\n                \n                <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n                  {certificates.map(certificate => <div key={certificate.id} className=\"border border-gray-200 rounded-xl overflow-hidden shadow-sm bg-white hover:shadow-md transition-shadow\">\n                      <div className=\"p-6\">\n                        <div className=\"flex justify-between items-start\">\n                          <div className=\"bg-amber-100 p-2 rounded-lg\">\n                            <Star className=\"h-6 w-6 text-amber-600\" />\n                          </div>\n                          {certificate.verified ? <div className=\"bg-green-100 px-2 py-1 rounded-full text-xs text-green-700 flex items-center\">\n                              <CheckCircle className=\"h-3 w-3 mr-1\" />\n                              Verified\n                            </div> : <div className=\"bg-gray-100 px-2 py-1 rounded-full text-xs text-gray-500\">\n                              Pending\n                            </div>}\n                        </div>\n                        \n                        <h3 className=\"font-medium mt-4 mb-1\">{certificate.name}</h3>\n                        <p className=\"text-xs text-gray-500\">Uploaded on {certificate.date}</p>\n                        \n                        {certificate.irysTransactionId && <div className=\"mt-2 mb-3\">\n                            <IrysStorageBadge transactionId={certificate.irysTransactionId} />\n                          </div>}\n                        \n                        <div className=\"flex mt-3 gap-2\">\n                          {!certificate.verified && <button onClick={() => handleVerifyCertificate(certificate.id)} className=\"flex-1 py-2 bg-amber-50 border border-amber-200 text-amber-700 rounded-lg flex items-center justify-center hover:bg-amber-100 transition-colors\">\n                              Submit for Verification\n                            </button>}\n                          \n                          {certificate.irysTransactionId && <VerifyOnIrysButton transactionId={certificate.irysTransactionId} size=\"md\" />}\n                        </div>\n                      </div>\n                    </div>)}\n                  \n                  <div className=\"border border-dashed border-gray-300 rounded-xl flex items-center justify-center p-6 text-center\">\n                    <div>\n                      <div className=\"bg-gray-100 h-16 w-16 rounded-full flex items-center justify-center mx-auto mb-4\">\n                        <Upload className=\"h-8 w-8 text-gray-400\" />\n                      </div>\n                      <h3 className=\"font-medium text-gray-800 mb-1\">Upload More Certificates</h3>\n                      <p className=\"text-sm text-gray-500 mb-4\">Each verified certificate earns $O tokens</p>\n                      <button onClick={handleUploadCertificate} className=\"text-indigo-600 text-sm font-medium hover:text-indigo-800\">\n                        Upload Now\n                      </button>\n                    </div>\n                  </div>\n                </div>\n                \n                <div className=\"mt-8 bg-blue-50 rounded-lg p-6\">\n                  <h3 className=\"font-medium text-blue-800 mb-2\">Certificate Verification Process</h3>\n                  <p className=\"text-sm text-blue-700 mb-4\">\n                    Submit your certificates for verification to earn tokens and make them available to potential employers.\n                  </p>\n                  \n                  <div className=\"flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0\">\n                    <div className=\"flex-1 bg-white rounded-lg p-4 shadow-sm\">\n                      <div className=\"flex items-center mb-2\">\n                        <div className=\"bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center mr-3\">\n                          <span className=\"font-medium text-blue-600\">1</span>\n                        </div>\n                        <h4 className=\"font-medium\">Upload</h4>\n                      </div>\n                      <p className=\"text-sm text-gray-600 pl-11\">\n                        Upload your certificate or qualification document\n                      </p>\n                    </div>\n                    \n                    <div className=\"flex-1 bg-white rounded-lg p-4 shadow-sm\">\n                      <div className=\"flex items-center mb-2\">\n                        <div className=\"bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center mr-3\">\n                          <span className=\"font-medium text-blue-600\">2</span>\n                        </div>\n                        <h4 className=\"font-medium\">Verify</h4>\n                      </div>\n                      <p className=\"text-sm text-gray-600 pl-11\">\n                        Our team verifies your certificate with the issuing organization\n                      </p>\n                    </div>\n                    \n                    <div className=\"flex-1 bg-white rounded-lg p-4 shadow-sm\">\n                      <div className=\"flex items-center mb-2\">\n                        <div className=\"bg-blue-100 w-8 h-8 rounded-full flex items-center justify-center mr-3\">\n                          <span className=\"font-medium text-blue-600\">3</span>\n                        </div>\n                        <h4 className=\"font-medium\">Earn</h4>\n                      </div>\n                      <p className=\"text-sm text-gray-600 pl-11\">\n                        Earn $O tokens and showcase your verified skills on your profile\n                      </p>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>}\n\n        {activeTab === 'community' && <CommunityPlatform />}\n\n        {activeTab === 'marketplace' && <div className=\"space-y-6\">\n            <div className=\"bg-white rounded-xl shadow-md overflow-hidden\">\n              <div className=\"p-6\">\n                <div className=\"flex justify-between items-center mb-6\">\n                  <h2 className=\"text-2xl font-bold text-gray-800\">Marketplace</h2>\n                  \n                  <div className=\"bg-indigo-100 px-4 py-2 rounded-lg flex items-center\">\n                    <Wallet className=\"h-5 w-5 text-indigo-600 mr-2\" />\n                    <span className=\"font-medium text-indigo-600\">{tokenBalance} $O</span>\n                  </div>\n                </div>\n                \n                <div className=\"mb-8\">\n                  <div className=\"bg-gradient-to-r from-amber-500 to-orange-500 text-white rounded-xl overflow-hidden mb-8\">\n                    <div className=\"p-6\">\n                      <h3 className=\"text-xl font-medium mb-2\">Redeem Your Tokens</h3>\n                      <p className=\"text-sm opacity-90 mb-4\">\n                        Use your earned tokens to access valuable resources and services that help with your integration journey.\n                      </p>\n                      <div className=\"flex space-x-4\">\n                        <div className=\"bg-white bg-opacity-20 p-3 rounded-lg flex items-center flex-1\">\n                          <Star className=\"h-6 w-6 text-amber-200 mr-3\" />\n                          <div>\n                            <p className=\"text-sm font-medium\">Valuable Rewards</p>\n                            <p className=\"text-xs opacity-80\">Transport, Food, Services</p>\n                          </div>\n                        </div>\n                        <div className=\"bg-white bg-opacity-20 p-3 rounded-lg flex items-center flex-1\">\n                          <Star className=\"h-6 w-6 text-amber-200 mr-3\" />\n                          <div>\n                            <p className=\"text-sm font-medium\">Premium Courses</p>\n                            <p className=\"text-xs opacity-80\">Career & Skills Training</p>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                  \n                  <h3 className=\"text-lg font-medium mb-4\">Available Rewards</h3>\n                  <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n                    {marketplaceItems.map(item => <div key={item.id} className=\"bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow\">\n                        <div className=\"p-6\">\n                          <div className=\"flex justify-between items-start mb-4\">\n                            <div className=\"bg-indigo-100 p-3 rounded-lg\">\n                              {item.icon}\n                            </div>\n                            <div className=\"bg-indigo-100 px-3 py-1 rounded-full text-indigo-600 text-sm font-medium\">\n                              {item.tokens} $O\n                            </div>\n                          </div>\n                          \n                          <h4 className=\"font-medium mb-2\">{item.name || item.title}</h4>\n                          <div className=\"flex justify-between items-center\">\n                            <span className={`text-xs px-2 py-1 rounded-full ${item.available ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500'}`}>\n                              {item.available ? 'Available' : 'Sold Out'}\n                            </span>\n                            <button onClick={() => handlePurchaseItem(item.id)} disabled={!item.available || tokenBalance < item.tokens} className={`px-3 py-1 rounded-lg text-sm ${!item.available || tokenBalance < item.tokens ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-indigo-600 text-white hover:bg-indigo-700'}`}>\n                              Redeem\n                            </button>\n                          </div>\n                        </div>\n                      </div>)}\n                  </div>\n                </div>\n                \n                <div>\n                  <h3 className=\"text-lg font-medium mb-4\">Premium Services</h3>\n                  <div className=\"grid grid-cols-1 md:grid-cols-2 gap-6\">\n                    <div className=\"bg-gradient-to-br from-indigo-50 to-blue-100 rounded-xl p-6 shadow-sm\">\n                      <div className=\"bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm mb-4\">\n                        <Users className=\"h-6 w-6 text-indigo-600\" />\n                      </div>\n                      <h4 className=\"font-medium text-lg mb-2\">Career Mentorship</h4>\n                      <p className=\"text-sm text-gray-700 mb-4\">\n                        1-on-1 mentorship sessions with professionals in your field.\n                      </p>\n                      <div className=\"flex justify-between items-center\">\n                        <div className=\"bg-indigo-100 px-3 py-1 rounded-full text-indigo-600 text-sm\">\n                          200 $O / session\n                        </div>\n                        <button className=\"bg-indigo-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-indigo-700 transition-colors\">\n                          Book Session\n                        </button>\n                      </div>\n                    </div>\n                    \n                    <div className=\"bg-gradient-to-br from-purple-50 to-violet-100 rounded-xl p-6 shadow-sm\">\n                      <div className=\"bg-white w-12 h-12 rounded-full flex items-center justify-center shadow-sm mb-4\">\n                        <Star className=\"h-6 w-6 text-purple-600\" />\n                      </div>\n                      <h4 className=\"font-medium text-lg mb-2\">Professional Certification</h4>\n                      <p className=\"text-sm text-gray-700 mb-4\">\n                        Accredited courses with recognized certifications in various fields.\n                      </p>\n                      <div className=\"flex justify-between items-center\">\n                        <div className=\"bg-purple-100 px-3 py-1 rounded-full text-purple-600 text-sm\">\n                          From 500 $O\n                        </div>\n                        <button className=\"bg-purple-600 text-white px-3 py-1 rounded-lg text-sm hover:bg-purple-700 transition-colors\">\n                          Browse Courses\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>}\n      </main>\n\n      {}\n      <footer className=\"bg-gray-800 text-white py-8\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"flex flex-col md:flex-row justify-between items-center\">\n            <div className=\"flex items-center mb-4 md:mb-0\">\n              <Globe className=\"h-8 w-8 text-indigo-400 mr-2\" />\n              <span className=\"text-xl font-bold\">Incentigrate</span>\n            </div>\n            \n            <div className=\"flex flex-wrap justify-center space-x-8\">\n              <a href=\"#\" className=\"text-gray-300 hover:text-white mb-2\">About</a>\n              <a href=\"#\" className=\"text-gray-300 hover:text-white mb-2\">Help Center</a>\n              <a href=\"#\" className=\"text-gray-300 hover:text-white mb-2\">Community Guidelines</a>\n              <a href=\"#\" className=\"text-gray-300 hover:text-white mb-2\">Privacy Policy</a>\n            </div>\n          </div>\n          \n          <div className=\"mt-8 pt-8 border-t border-gray-700 text-center text-sm text-gray-400\">\n            <p>© 2025 Incentigrate. Empowering integration journeys through blockchain rewards.</p>\n            <div className=\"flex items-center justify-center mt-4 text-teal-400\">\n              <Database className=\"h-4 w-4 mr-2\" />\n              <span>Powered by Irys Decentralized Storage</span>\n              <a href=\"https://irys.xyz\" target=\"_blank\" rel=\"noopener noreferrer\" className=\"ml-2 text-teal-300 underline hover:text-teal-200\">\n                Learn more\n              </a>\n            </div>\n          </div>\n        </div>\n      </footer>\n    </div>;\n}\nexport default function App() {\n  const handleWalletError = useCallback(error => {\n    if (error.name === 'WalletConnectionError' && error.message.includes('User rejected the request')) {\n      console.log('Wallet connection cancelled by user.');\n    } else {\n      console.error(\"Unhandled wallet error:\", error);\n    }\n  }, []);\n  return <DevappProvider rpcEndpoint=\"https://rpc.dev.fun/e3846a42cd68159d30b3\" devbaseEndpoint=\"https://devbase.dev.fun\" appId=\"e3846a42cd68159d30b3\" onError={handleWalletError}>\n      <IncentigrateApp />\n    </DevappProvider>;\n}","packageJson","{\"dependencies\":{\"react\":\"18.2.0\",\"framer-motion\":\"10.16.4\",\"lucide-react\":\"0.441.0\",\"@solana/wallet-adapter-base\":\"0.9.23\",\"@solana/wallet-adapter-react\":\"0.15.35\",\"@solana/wallet-adapter-react-ui\":\"0.9.43\",\"@solana/wallet-adapter-wallets\":\"0.19.32\",\"@solana/web3.js\":\"1.91.1\",\"zod\":\"3.22.4\",\"recharts\":\"2.8.0\",\"react-router-dom\":\"6.18.0\",\"@devfunlabs/web-sdk\":\"0.5.5\",\"socket.io-client\":\"4.7.4\",\"react-dom\":\"18.2.0\"}}","appFunctions",[],"token",{"_18":19,"_82":83,"_84":85,"_86":87,"_88":89,"_90":-5,"_91":92,"_93":39,"_94":39,"_72":73},"symbol","Inc","price",0.00000341,"marketcap",3866.94858319,"image","https://pump.mypinata.cloud/ipfs/bafkreighsbbdq5ljfzjduzip66y57wvxbdil77rht4jr2jy57vj2h7zhpq?img-width=256&img-dpr=2","website","twitter","https://x.com/Incentigrate","devCount","appCount","upstreamApp","isLordOfDev","analytics",[99,103,105,107,109,111,113,115,117,119,121,123,125,127],{"_100":101,"_102":56},"day","2025-07-12","runCount",{"_100":104,"_102":56},"2025-07-13",{"_100":106,"_102":56},"2025-07-14",{"_100":108,"_102":56},"2025-07-15",{"_100":110,"_102":56},"2025-07-16",{"_100":112,"_102":56},"2025-07-17",{"_100":114,"_102":56},"2025-07-18",{"_100":116,"_102":56},"2025-07-19",{"_100":118,"_102":56},"2025-07-20",{"_100":120,"_102":56},"2025-07-21",{"_100":122,"_102":56},"2025-07-22",{"_100":124,"_102":56},"2025-07-23",{"_100":126,"_102":56},"2025-07-24",{"_100":128,"_102":56},"2025-07-25","snapshot","ogImage","https://cdn.dev.fun/og/image/e3846a42cd68159d30b3/a5606312.webp","isDevbase","commitDetail","livestream","actionData","errors"]
</article></body></html>