test-repo/docs/.vitepress/theme/components/HomeFeatures.vue

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRouter, withBase, useData } from 'vitepress'
import GitHubStars from './GitHubStars.vue'

const router = useRouter()
const { site, page, lang } = useData()
const activeTab = ref('home')
const showLangMenu = ref(false)

// Appendix Scroll Logic
const appendixWrapper = ref(null)
const totalPages = ref(1)
const currentPage = ref(0)

const updatePagination = () => {
  if (appendixWrapper.value) {
    const { scrollLeft, clientWidth, scrollWidth } = appendixWrapper.value
    // If scrollWidth is close to clientWidth, only 1 page
    if (scrollWidth <= clientWidth + 5) {
      totalPages.value = 1
      currentPage.value = 0
    } else {
      totalPages.value = Math.ceil(scrollWidth / clientWidth)
      currentPage.value = Math.round(scrollLeft / clientWidth)
    }
  }
}

const onAppendixScroll = () => {
  if (!appendixWrapper.value) return
  const { scrollLeft, clientWidth } = appendixWrapper.value
  const newPage = Math.round(scrollLeft / clientWidth)
  if (currentPage.value !== newPage) {
    currentPage.value = newPage
  }
}

const scrollToPage = (pageIndex) => {
  if (appendixWrapper.value) {
    const width = appendixWrapper.value.clientWidth
    appendixWrapper.value.scrollTo({
      left: pageIndex * width,
      behavior: 'smooth'
    })
  }
}

const autoScroll = () => {
  if (appendixWrapper.value) {
    const { scrollLeft, clientWidth, scrollWidth } = appendixWrapper.value
    const maxScroll = scrollWidth - clientWidth
    if (scrollLeft >= maxScroll - 20) {
      appendixWrapper.value.scrollTo({ left: 0, behavior: 'smooth' })
    } else {
      appendixWrapper.value.scrollBy({ left: clientWidth, behavior: 'smooth' })
    }
  }
}

const i18n = {
  'zh-cn': {
    nav: {
      title: 'Easy-Vibe 教程',
      home: '首页',
      pm: '零基础入门',
      junior: '初中级开发',
      senior: '高级开发',
      appendix: '附录',
      start: '开始学习'
    },
    stage1: {
      cat: 'Stage 1 · 零基础入门',
      title:
        '没有技术背景？<br><span class="highlight">正好。</span>',
      sub: '不看专业、不看出身——会说话，你就能做产品。',
      cards: [
        {
          title: '学习地图',
          desc: '了解从零基础到全栈开发的完整学习路径，明确每个阶段的目标和收获。',
          sub: '全年龄友好',
          link: '/zh-cn/stage-0/0.1-learning-map/'
        },
        {
          title: '游戏化入门',
          desc: '通过制作贪吃蛇等 AI 原生小游戏，体验 AI 编程的魅力，打破对代码的恐惧。',
          sub: '边玩边学',
          link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/'
        },
        {
          title: '产品原型实战',
          desc: '掌握 Vibe Coding 工作流，从想法到可交互原型，独立完成高保真 Web 应用。',
          sub: '核心心法',
          link: '/zh-cn/stage-1/1.0-finding-great-idea/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · 初中级开发',
      title: '一个人，<br><span class="highlight">就是一支团队。</span>',
      sub: '从前端到后端，从数据库到上线。',
      cards: [
        {
          title: '全栈开发',
          headline: '独立完成前后端。',
          desc: '从数据库设计到 API 开发，再到前端组件化，完整构建一个现代化 Web 应用。',
          link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
        },
        {
          title: '真实项目',
          headline: '拒绝玩具代码。',
          desc: '深入理解用户鉴权、数据存储、文件上传等核心业务逻辑。',
          link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
        },
        {
          title: '部署上线',
          headline: '让世界看到你的作品。',
          desc: '学习服务器配置、域名解析和自动化部署，打通产品落地的最后一公里。',
          link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · 高级开发',
      title: '产品和结果，<br><span class="highlight">我全都要。</span>',
      sub: '突破时间与设备限制，让 AI 产品随处可见。',
      cards: [
        {
          title: '多端发布',
          desc: '一套代码，覆盖 Web、小程序与 App，触达所有用户。',
          link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
        },
        {
          title: 'AI 智能体',
          desc: '构建具备记忆与规划能力的 Agent，实现自主任务执行。',
          link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
        },
        {
          title: '长效稳定',
          desc: '掌握异步任务与队列技术，确保 AI 复杂任务稳定完成。',
          link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
        },
        {
          title: '商业闭环',
          desc: '集成支付与会员系统，将你的 AI 创意转化为商业产品。',
          link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · 附录',
      title: '让代码，<br><span class="highlight">活灵活现。</span>',
      sub: '告别晦涩的文字堆砌。用动态演示和实时交互，重新定义技术文档。',
      cards: [
        {
          title: 'AI 进化史',
          desc: '回顾人工智能发展历程中的关键里程碑。',
          link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
        },
        {
          title: '提示词工程',
          desc: '掌握与 AI 高效对话的技巧，解锁潜力。',
          link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering'
        },
        {
          title: '大语言模型',
          desc: '深入浅出解析 LLM 的工作原理与应用。',
          link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles'
        },
        {
          title: 'Agent 智能体',
          desc: '探索具备自主决策与执行能力的 AI 架构。',
          link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents'
        },
        {
          title: '前端基础',
          desc: 'HTML/CSS/JS 三大基石，入门必修课。',
          link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive'
        },
        {
          title: '前端进化史',
          desc: '了解前端技术栈演变，把握发展趋势。',
          link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks'
        },
        {
          title: '后端架构',
          desc: '从单体到微服务，探索架构演进之路。',
          link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
        },
        {
          title: '后端语言',
          desc: '对比主流后端语言特性，选择最佳技术栈。',
          link: '/zh-cn/appendix/4-server-and-backend/backend-languages'
        },
        {
          title: '数据库原理',
          desc: '理解数据库核心原理，掌握数据存储艺术。',
          link: '/zh-cn/appendix/5-data/database-fundamentals'
        },
        {
          title: 'API 设计',
          desc: 'API 接口设计与开发的基础知识。',
          link: '/zh-cn/appendix/4-server-and-backend/api-intro'
        },
        {
          title: 'Git 版本控制',
          desc: '深入理解 Git 原理与高级用法。',
          link: '/zh-cn/appendix/2-development-tools/git-version-control'
        },
        {
          title: '计算机网络',
          desc: '网络协议与通信原理的基础知识。',
          link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks'
        }
      ]
    },
    footer: {
      title: '你的想法，<br>此刻上线。',
      desc: '灵感到现实，何不从现在开始。',
      btn: '>_ Start'
    }
  },
  'en': {
    nav: {
      title: 'Easy-Vibe Tutorial',
      home: 'Home',
      pm: 'Product Manager',
      junior: 'Junior Dev',
      senior: 'Senior Dev',
      appendix: 'Appendix',
      start: 'Start Learning'
    },
    stage1: {
      cat: 'Stage 1 · Getting Started',
      title: 'Zero to Hero, <br><span class="highlight">Be Your Own PM.</span>',
      sub: 'No CS background needed. Just speak your ideas—AI will turn them into high-fidelity web prototypes.',
      cards: [
        {
          title: 'Learning Map',
          desc: 'Understand the complete learning path from zero to full-stack development.',
          sub: 'All Ages Friendly',
          link: '/en/stage-0/0.1-learning-map/'
        },
        {
          title: 'Gamified Intro',
          desc: 'Experience the magic of AI programming by building games like Snake.',
          sub: 'Learn by Playing',
          link: '/en/stage-0/0.2-ai-capabilities-through-games/'
        },
        {
          title: 'Vibe Coding',
          desc: 'Master the core of AI coding: From product ideas to interactive prototypes.',
          sub: 'Core Mindset',
          link: '/en/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · Junior/Mid Dev',
      title:
        'Go Full Stack, <br><span class="highlight">Build Real Apps.</span>',
      sub: 'Master frontend-backend separation and build commercial-grade projects with DB and API.',
      cards: [
        {
          title: 'Full Stack',
          headline: 'Frontend & Backend.',
          desc: 'From DB design to API and components, build a modern web app completely.',
          link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
        },
        {
          title: 'Real Projects',
          headline: 'No Toy Code.',
          desc: 'Deep dive into Auth, Storage, File Uploads and core business logic.',
          link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
        },
        {
          title: 'Deployment',
          headline: 'Show the World.',
          desc: 'Server config, DNS, CI/CD. The last mile of product delivery.',
          link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · Senior Dev',
      title:
        'Advanced Practice, <br><span class="highlight">Infinite Possibilities.</span>',
      sub: 'Mobile Mini-programs & AI Native Apps. Explore the era of LLMs.',
      cards: [
        {
          title: 'WeChat Mini-app',
          desc: 'Cross-platform dev, reaching millions of users.',
          link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
        },
        {
          title: 'AI Native Apps',
          desc: 'RAG, Agent. Explore the limits of LLMs.',
          link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
        },
        {
          title: 'Complex Arch',
          desc: 'Architecture design for high concurrency and stable AI tasks.',
          link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
        },
        {
          title: 'Personal Brand',
          desc: 'Build your own website and academic blog.',
          link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI History',
          desc: 'Milestones in AI evolution.',
          link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
        },
        {
          title: 'Prompt Eng',
          desc: 'Master AI communication skills.',
          link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering'
        },
        {
          title: 'LLM Intro',
          desc: 'Understanding Large Language Models.',
          link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles'
        },
        {
          title: 'AI Agents',
          desc: 'Autonomous decision-making AI.',
          link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents'
        },
        {
          title: 'Web Basics',
          desc: 'HTML/CSS/JS fundamentals.',
          link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive'
        },
        {
          title: 'Frontend Evo',
          desc: 'Evolution of frontend tech stack.',
          link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks'
        },
        {
          title: 'Backend Arch',
          desc: 'From monolith to microservices.',
          link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
        },
        {
          title: 'Backend Lang',
          desc: 'Choosing the right tech stack.',
          link: '/zh-cn/appendix/4-server-and-backend/backend-languages'
        },
        {
          title: 'Database',
          desc: 'Core principles of data storage.',
          link: '/zh-cn/appendix/5-data/database-fundamentals'
        },
        {
          title: 'API Design',
          desc: 'Designing robust interfaces.',
          link: '/zh-cn/appendix/4-server-and-backend/api-intro'
        },
        {
          title: 'Git',
          desc: 'Version control mastery.',
          link: '/zh-cn/appendix/2-development-tools/git-version-control'
        },
        {
          title: 'Networks',
          desc: 'Protocols and communication.',
          link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks'
        }
      ]
    },
    footer: {
      title: 'Ready to start?',
      desc: 'Easy-Vibe, make coding as natural as breathing.',
      btn: 'Start Now'
    }
  },
  'ja-jp': {
    nav: {
      title: 'Easy-Vibe チュートリアル',
      home: 'ホーム',
      pm: 'プロダクトマネージャー',
      junior: '初中級開発者',
      senior: '上級開発者',
      appendix: '付録',
      start: '学習を開始'
    },
    stage1: {
      cat: 'Stage 1 · 初心者とPM',
      title:
        'ゼロからの入門、<br><span class="highlight">自分だけのPMになる。</span>',
      sub: 'CSの背景は不要。アイデアを話すだけで、AIが高精度のWebプロトタイプに変換します。',
      cards: [
        {
          title: 'AI PM',
          desc: 'アイデアからプロトタイプまで、話すだけ。',
          sub: '非技術者向け',
          link: '/ja-jp/stage-0/'
        },
        {
          title: 'ゲーム化入門',
          desc: 'スネークゲームやテトリスを作って、コードへの恐怖を克服。',
          sub: '遊びながら学ぶ',
          link: '/ja-jp/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: 'AI時代のコーディングの核心：プロンプトエンジニアリングとコンテキスト管理。',
          sub: '核心的な考え方',
          link: '/ja-jp/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · 初中級開発者',
      title:
        'フルスタックへ、<br><span class="highlight">リアルなアプリを構築。</span>',
      sub: 'フロントエンドとバックエンドの分離をマスター。DB、API、複雑なインタラクションを含む商用レベルのプロジェクトを構築。',
      cards: [
        {
          title: 'フルスタック',
          headline: 'フロント＆バックエンド。',
          desc: 'DB設計からAPI、コンポーネントまで、現代的なWebアプリを完全に構築。',
          link: '/ja-jp/stage-2/'
        },
        {
          title: 'リアルプロジェクト',
          headline: 'おもちゃのコードは卒業。',
          desc: '認証、ストレージ、ファイルアップロード、コアビジネスロジックを深く掘り下げる。',
          link: '/ja-jp/stage-2/'
        },
        {
          title: 'デプロイ',
          headline: '世界に公開。',
          desc: 'サーバー設定、DNS、CI/CD。製品リリースのラストワンマイル。',
          link: '/ja-jp/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · 上級開発者',
      title: '高度な実践、<br><span class="highlight">無限の可能性。</span>',
      sub: 'モバイルミニプログラムとAIネイティブアプリ。LLM時代の可能性を探求。',
      cards: [
        {
          title: 'WeChatミニアプリ',
          desc: 'クロスプラットフォーム開発、数億人のユーザーに到達。',
          link: '/ja-jp/stage-3/'
        },
        {
          title: 'AIネイティブアプリ',
          desc: 'RAG、Agent。LLMの限界を探る。',
          link: '/ja-jp/stage-3/'
        },
        {
          title: '複雑なアーキテクチャ',
          desc: '高並行性、高可用性のアーキテクチャ設計。',
          link: '/ja-jp/stage-3/'
        },
        {
          title: 'パーソナルブランド',
          desc: '自分のウェブサイトと学術ブログを構築。',
          link: '/ja-jp/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · 付録',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI Fundamentals',
          desc: 'LLM, Agent, RAG. Dive into AI internals.',
          link: '/ja-jp/appendix/ai-evolution'
        },
        {
          title: 'Frontend',
          desc: 'Browser internals, Performance, Canvas.',
          link: '/ja-jp/appendix/web-basics'
        },
        {
          title: 'Backend',
          desc: 'High concurrency, Distributed systems, Microservices.',
          link: '/ja-jp/appendix/backend-evolution'
        },
        {
          title: 'General Skills',
          desc: 'Git, Networks, IDE internals.',
          link: '/ja-jp/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: '準備はいいですか？',
      desc: 'Easy-Vibe、呼吸するように自然にコーディング。',
      btn: '今すぐ開始'
    }
  },
  'zh-tw': {
    nav: {
      title: 'Easy-Vibe 教學',
      home: '首頁',
      pm: '產品經理',
      junior: '初中級開發',
      senior: '高級開發',
      appendix: '附錄',
      start: '開始學習'
    },
    stage1: {
      cat: 'Stage 1 · 新手與產品原型',
      title:
        '零基礎入門，<br><span class="highlight">做自己的產品經理。</span>',
      sub: '不需要計算機專業背景，只要會說話，就能通過 AI 將你的創意轉化為高保真的 Web 原型。',
      cards: [
        {
          title: 'AI 產品經理',
          desc: '從想法到高保真原型，你只需要會說話。',
          sub: '適合非技術背景',
          link: '/zh-tw/stage-0/'
        },
        {
          title: '遊戲化入門',
          desc: '通過製作貪吃蛇、俄羅斯方塊，打破對代碼的恐懼。',
          sub: '邊玩邊學',
          link: '/zh-tw/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: '掌握 AI 時代的編程核心：提示詞工程與上下文管理。',
          sub: '核心心法',
          link: '/zh-tw/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · 初中級開發',
      title: '深入全棧，<br><span class="highlight">構建真實應用。</span>',
      sub: '掌握前後端分離架構，親手打造包含數據庫、API 和複雜交互的完整商業級項目。',
      cards: [
        {
          title: '全棧開發',
          headline: '獨立完成前後端。',
          desc: '從數據庫設計到 API 開發，再到前端組件化，完整構建一個現代化 Web 應用。',
          link: '/zh-tw/stage-2/'
        },
        {
          title: '真實項目',
          headline: '拒絕玩具代碼。',
          desc: '深入理解用戶鑑權、數據存儲、文件上傳等核心業務邏輯。',
          link: '/zh-tw/stage-2/'
        },
        {
          title: '部署上線',
          headline: '讓世界看到你的作品。',
          desc: '學習服務器配置、域名解析和自動化部署，打通產品落地的最後一公里。',
          link: '/zh-tw/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · 高級開發',
      title: '高階實戰，<br><span class="highlight">挑戰無限可能。</span>',
      sub: '進軍移動端小程序與 AI 原生應用開發，探索大模型時代的無限機遇。',
      cards: [
        {
          title: '微信小程序',
          desc: '跨平台開發，觸達億級用戶。',
          link: '/zh-tw/stage-3/'
        },
        {
          title: 'AI 原生應用',
          desc: 'RAG、Agent，探索 LLM 的無限可能。',
          link: '/zh-tw/stage-3/'
        },
        {
          title: '複雜業務架構',
          desc: '應對高並發、高可用場景的架構設計。',
          link: '/zh-tw/stage-3/'
        },
        {
          title: '個人品牌',
          desc: '構建屬於自己的個人網頁與學術博客。',
          link: '/zh-tw/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · 附錄',
      title: '百科全書，<br><span class="highlight">夯實基礎。</span>',
      sub: '從計算機網絡到 AI 原理，補齊你的技術拼圖。',
      cards: [
        {
          title: '人工智能',
          desc: 'LLM、Agent、RAG，深入 AI 底層原理。',
          link: '/zh-tw/appendix/ai-evolution'
        },
        {
          title: '前端開發',
          desc: '瀏覽器原理、性能優化、Canvas 圖形學。',
          link: '/zh-tw/appendix/web-basics'
        },
        {
          title: '後端架構',
          desc: '高並發、分佈式、微服務架構設計。',
          link: '/zh-tw/appendix/backend-evolution'
        },
        {
          title: '通用技能',
          desc: 'Git、網絡、IDE 原理，開發者必備素養。',
          link: '/zh-tw/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: '準備好開始了嗎？',
      desc: 'Easy-Vibe，讓編程像呼吸一樣自然。',
      btn: '立即開啟'
    }
  },
  'ko-kr': {
    nav: {
      title: 'Easy-Vibe 튜토리얼',
      home: '홈',
      pm: '제품 관리자',
      junior: '초/중급 개발자',
      senior: '고급 개발자',
      appendix: '부록',
      start: '학습 시작'
    },
    stage1: {
      cat: 'Stage 1 · 초보자 & PM',
      title:
        '제로 베이스 입문,<br><span class="highlight">나만의 PM이 되다.</span>',
      sub: 'CS 배경지식이 없어도 괜찮습니다. 아이디어를 말하기만 하면 AI가 고품질 웹 프로토타입으로 변환해줍니다.',
      cards: [
        {
          title: 'AI 제품 관리자',
          desc: '아이디어에서 프로토타입까지, 말 한마디로.',
          sub: '비전공자 추천',
          link: '/ko-kr/stage-0/'
        },
        {
          title: '게임으로 입문',
          desc: '스네이크 게임, 테트리스를 만들며 코딩 공포증 극복.',
          sub: '놀면서 배우기',
          link: '/ko-kr/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: 'AI 시대 코딩의 핵심: 프롬프트 엔지니어링과 컨텍스트 관리.',
          sub: '핵심 마인드셋',
          link: '/ko-kr/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · 초/중급 개발자',
      title: '풀스택 심화,<br><span class="highlight">실제 앱 구축.</span>',
      sub: '프론트엔드-백엔드 분리 아키텍처 마스터. DB, API, 복잡한 상호작용이 포함된 상용급 프로젝트 구축.',
      cards: [
        {
          title: '풀스택 개발',
          headline: '프론트 & 백엔드 독립 완성.',
          desc: 'DB 설계부터 API 개발, 프론트엔드 컴포넌트화까지 현대적인 웹 앱을 완벽하게 구축.',
          link: '/ko-kr/stage-2/'
        },
        {
          title: '실전 프로젝트',
          headline: '장난감 코드는 그만.',
          desc: '사용자 인증, 데이터 저장, 파일 업로드 등 핵심 비즈니스 로직 심층 이해.',
          link: '/ko-kr/stage-2/'
        },
        {
          title: '배포 및 출시',
          headline: '세상에 보여주세요.',
          desc: '서버 설정, 도메인 연결, CI/CD. 제품 출시의 마지막 관문.',
          link: '/ko-kr/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · 고급 개발자',
      title:
        '고급 실전,<br><span class="highlight">무한한 가능성에 도전.</span>',
      sub: '모바일 미니 프로그램 및 AI 네이티브 앱 개발. LLM 시대의 무한한 기회 탐색.',
      cards: [
        {
          title: '위챗 미니프로그램',
          desc: '크로스 플랫폼 개발, 수억 명의 사용자 도달.',
          link: '/ko-kr/stage-3/'
        },
        {
          title: 'AI 네이티브 앱',
          desc: 'RAG, Agent. LLM의 한계 탐색.',
          link: '/ko-kr/stage-3/'
        },
        {
          title: '복잡한 아키텍처',
          desc: '고동시성, 고가용성 아키텍처 설계.',
          link: '/ko-kr/stage-3/'
        },
        {
          title: '퍼스널 브랜딩',
          desc: '나만의 웹사이트와 학술 블로그 구축.',
          link: '/ko-kr/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · 부록',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI Fundamentals',
          desc: 'LLM, Agent, RAG. Dive into AI internals.',
          link: '/ko-kr/appendix/ai-evolution'
        },
        {
          title: 'Frontend',
          desc: 'Browser internals, Performance, Canvas.',
          link: '/ko-kr/appendix/web-basics'
        },
        {
          title: 'Backend',
          desc: 'High concurrency, Distributed systems, Microservices.',
          link: '/ko-kr/appendix/backend-evolution'
        },
        {
          title: 'General Skills',
          desc: 'Git, Networks, IDE internals.',
          link: '/ko-kr/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: '시작할 준비 되셨나요?',
      desc: 'Easy-Vibe, 숨 쉬듯 자연스러운 코딩.',
      btn: '지금 시작하기'
    }
  },
  'es-es': {
    nav: {
      title: 'Tutorial Easy-Vibe',
      home: 'Inicio',
      pm: 'Gerente de Producto',
      junior: 'Desarrollador Junior',
      senior: 'Desarrollador Senior',
      appendix: 'Apéndice',
      start: 'Empezar'
    },
    stage1: {
      cat: 'Stage 1 · Principiante y PM',
      title:
        'De Cero a Héroe,<br><span class="highlight">Sé tu propio PM.</span>',
      sub: 'No necesitas experiencia en CS. Solo di tu idea y la IA la convertirá en prototipos web de alta fidelidad.',
      cards: [
        {
          title: 'PM de IA',
          desc: 'De la idea al prototipo, solo hablando.',
          sub: 'Amigable para no técnicos',
          link: '/es-es/stage-0/'
        },
        {
          title: 'Intro Gamificada',
          desc: 'Crea Snake, Tetris y rompe el miedo al código.',
          sub: 'Aprende jugando',
          link: '/es-es/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: 'Domina el núcleo de la programación con IA: Ingeniería de Prompts y Contexto.',
          sub: 'Mentalidad Clave',
          link: '/es-es/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · Desarrollador Junior/Mid',
      title: 'Full Stack,<br><span class="highlight">Crea Apps Reales.</span>',
      sub: 'Domina la separación frontend-backend. Crea proyectos de nivel comercial con DB, API e interacciones complejas.',
      cards: [
        {
          title: 'Full Stack',
          headline: 'Frontend y Backend.',
          desc: 'Desde el diseño de DB hasta API y componentes, construye una web app moderna completamente.',
          link: '/es-es/stage-2/'
        },
        {
          title: 'Proyectos Reales',
          headline: 'Sin código de juguete.',
          desc: 'Profundiza en Auth, Almacenamiento, Subida de Archivos y lógica de negocio.',
          link: '/es-es/stage-2/'
        },
        {
          title: 'Despliegue',
          headline: 'Muestra al mundo.',
          desc: 'Configuración de servidor, DNS, CI/CD. La última milla de la entrega del producto.',
          link: '/es-es/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · Desarrollador Senior',
      title:
        'Práctica Avanzada,<br><span class="highlight">Posibilidades Infinitas.</span>',
      sub: 'Mini-programas móviles y Apps Nativas de IA. Explora la era de los LLMs.',
      cards: [
        {
          title: 'WeChat Mini-app',
          desc: 'Desarrollo multiplataforma, llegando a millones de usuarios.',
          link: '/es-es/stage-3/'
        },
        {
          title: 'Apps Nativas IA',
          desc: 'RAG, Agent. Explora los límites de los LLMs.',
          link: '/es-es/stage-3/'
        },
        {
          title: 'Arq. Compleja',
          desc: 'Diseño de arquitectura de alta concurrencia y alta disponibilidad.',
          link: '/es-es/stage-3/'
        },
        {
          title: 'Marca Personal',
          desc: 'Construye tu propio sitio web y blog académico.',
          link: '/es-es/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · Apéndice',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI Fundamentals',
          desc: 'LLM, Agent, RAG. Dive into AI internals.',
          link: '/es-es/appendix/ai-evolution'
        },
        {
          title: 'Frontend',
          desc: 'Browser internals, Performance, Canvas.',
          link: '/es-es/appendix/web-basics'
        },
        {
          title: 'Backend',
          desc: 'High concurrency, Distributed systems, Microservices.',
          link: '/es-es/appendix/backend-evolution'
        },
        {
          title: 'General Skills',
          desc: 'Git, Networks, IDE internals.',
          link: '/es-es/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: '¿Listo para empezar?',
      desc: 'Easy-Vibe, haz que programar sea tan natural como respirar.',
      btn: 'Empezar Ahora'
    }
  },
  'fr-fr': {
    nav: {
      title: 'Tutoriel Easy-Vibe',
      home: 'Accueil',
      pm: 'Chef de Produit',
      junior: 'Dév Junior',
      senior: 'Dév Senior',
      appendix: 'Annexe',
      start: 'Commencer'
    },
    stage1: {
      cat: 'Stage 1 · Débutant & PM',
      title:
        'De Zéro à Héros,<br><span class="highlight">Soyez votre propre PM.</span>',
      sub: "Pas besoin de background CS. Parlez juste de votre idée, et l'IA la transformera en prototypes web haute fidélité.",
      cards: [
        {
          title: 'PM IA',
          desc: "De l'idée au prototype, juste en parlant.",
          sub: 'Accessible aux non-tech',
          link: '/fr-fr/stage-0/'
        },
        {
          title: 'Intro Gamifiée',
          desc: 'Créez Snake, Tetris et brisez la peur du code.',
          sub: 'Apprendre en jouant',
          link: '/fr-fr/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: 'Maîtrisez le cœur du codage IA : Prompt Engineering & Contexte.',
          sub: 'Esprit Clé',
          link: '/fr-fr/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · Dév Junior/Mid',
      title:
        'Full Stack,<br><span class="highlight">Créez de Vraies Apps.</span>',
      sub: 'Maîtrisez la séparation frontend-backend. Créez des projets commerciaux avec DB, API et interactions complexes.',
      cards: [
        {
          title: 'Full Stack',
          headline: 'Frontend & Backend.',
          desc: 'Du design DB aux API et composants, construisez une web app moderne complète.',
          link: '/fr-fr/stage-2/'
        },
        {
          title: 'Projets Réels',
          headline: 'Pas de code jouet.',
          desc: "Plongez dans l'Auth, le Stockage, l'Upload de fichiers et la logique métier.",
          link: '/fr-fr/stage-2/'
        },
        {
          title: 'Déploiement',
          headline: 'Montrez au monde.',
          desc: 'Config serveur, DNS, CI/CD. Le dernier kilomètre de la livraison produit.',
          link: '/fr-fr/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · Dév Senior',
      title:
        'Pratique Avancée,<br><span class="highlight">Possibilités Infinies.</span>',
      sub: "Mini-programmes mobiles et Apps Natives IA. Explorez l'ère des LLM.",
      cards: [
        {
          title: 'WeChat Mini-app',
          desc: "Dév multiplateforme, touchant des millions d'utilisateurs.",
          link: '/fr-fr/stage-3/'
        },
        {
          title: 'Apps Natives IA',
          desc: 'RAG, Agent. Explorez les limites des LLM.',
          link: '/fr-fr/stage-3/'
        },
        {
          title: 'Arch. Complexe',
          desc: "Conception d'architecture haute concurrence et haute disponibilité.",
          link: '/fr-fr/stage-3/'
        },
        {
          title: 'Marque Perso',
          desc: 'Construisez votre propre site web et blog académique.',
          link: '/fr-fr/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · Annexe',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI Fundamentals',
          desc: 'LLM, Agent, RAG. Dive into AI internals.',
          link: '/fr-fr/appendix/ai-evolution'
        },
        {
          title: 'Frontend',
          desc: 'Browser internals, Performance, Canvas.',
          link: '/fr-fr/appendix/web-basics'
        },
        {
          title: 'Backend',
          desc: 'High concurrency, Distributed systems, Microservices.',
          link: '/fr-fr/appendix/backend-evolution'
        },
        {
          title: 'General Skills',
          desc: 'Git, Networks, IDE internals.',
          link: '/fr-fr/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: 'Prêt à commencer ?',
      desc: 'Easy-Vibe, rendez le codage aussi naturel que la respiration.',
      btn: 'Commencer'
    }
  },
  'de-de': {
    nav: {
      title: 'Easy-Vibe Tutorial',
      home: 'Startseite',
      pm: 'Produktmanager',
      junior: 'Junior Dev',
      senior: 'Senior Dev',
      appendix: 'Anhang',
      start: 'Starten'
    },
    stage1: {
      cat: 'Stage 1 · Anfänger & PM',
      title:
        'Von Null auf Hundert,<br><span class="highlight">Sei dein eigener PM.</span>',
      sub: 'Kein CS-Hintergrund nötig. Sprich einfach deine Idee aus, und KI verwandelt sie in High-Fidelity-Web-Prototypen.',
      cards: [
        {
          title: 'KI PM',
          desc: 'Von der Idee zum Prototyp, einfach durch Sprechen.',
          sub: 'Nicht-Tech-freundlich',
          link: '/de-de/stage-0/'
        },
        {
          title: 'Gamifizierte Intro',
          desc: 'Baue Snake, Tetris und überwinde die Angst vor Code.',
          sub: 'Spielend lernen',
          link: '/de-de/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: 'Meistere den Kern des KI-Codings: Prompt Engineering & Kontext.',
          sub: 'Kern-Mindset',
          link: '/de-de/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · Junior/Mid Dev',
      title: 'Full Stack,<br><span class="highlight">Baue echte Apps.</span>',
      sub: 'Meistere die Frontend-Backend-Trennung. Baue kommerzielle Projekte mit DB, API und komplexen Interaktionen.',
      cards: [
        {
          title: 'Full Stack',
          headline: 'Frontend & Backend.',
          desc: 'Vom DB-Design bis zu APIs und Komponenten, baue eine moderne Web-App komplett.',
          link: '/de-de/stage-2/'
        },
        {
          title: 'Echte Projekte',
          headline: 'Kein Spielzeug-Code.',
          desc: 'Tauche ein in Auth, Speicher, Datei-Uploads und Kern-Geschäftslogik.',
          link: '/de-de/stage-2/'
        },
        {
          title: 'Deployment',
          headline: 'Zeig es der Welt.',
          desc: 'Server-Konfig, DNS, CI/CD. Die letzte Meile der Produktlieferung.',
          link: '/de-de/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · Senior Dev',
      title:
        'Fortgeschrittene Praxis,<br><span class="highlight">Unendliche Möglichkeiten.</span>',
      sub: 'Mobile Mini-Programme & KI-Native Apps. Erkunde die Ära der LLMs.',
      cards: [
        {
          title: 'WeChat Mini-App',
          desc: 'Plattformübergreifende Entwicklung, Millionen von Nutzern erreichen.',
          link: '/de-de/stage-3/'
        },
        {
          title: 'KI-Native Apps',
          desc: 'RAG, Agent. Erkunde die Grenzen von LLMs.',
          link: '/de-de/stage-3/'
        },
        {
          title: 'Komplexe Arch',
          desc: 'Architekturdesign für hohe Gleichzeitigkeit und hohe Verfügbarkeit.',
          link: '/de-de/stage-3/'
        },
        {
          title: 'Persönliche Marke',
          desc: 'Baue deine eigene Website und deinen akademischen Blog.',
          link: '/de-de/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · Anhang',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI Fundamentals',
          desc: 'LLM, Agent, RAG. Dive into AI internals.',
          link: '/de-de/appendix/ai-evolution'
        },
        {
          title: 'Frontend',
          desc: 'Browser internals, Performance, Canvas.',
          link: '/de-de/appendix/web-basics'
        },
        {
          title: 'Backend',
          desc: 'High concurrency, Distributed systems, Microservices.',
          link: '/de-de/appendix/backend-evolution'
        },
        {
          title: 'General Skills',
          desc: 'Git, Networks, IDE internals.',
          link: '/de-de/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: 'Bereit zu starten?',
      desc: 'Easy-Vibe, mache Coden so natürlich wie Atmen.',
      btn: 'Jetzt starten'
    }
  },
  'ar-sa': {
    nav: {
      title: 'Easy-Vibe درس تعليمي',
      home: 'الرئيسية',
      pm: 'مدير المنتج',
      junior: 'مطور مبتدئ',
      senior: 'مطور خبير',
      appendix: 'ملحق',
      start: 'ابدأ التعلم'
    },
    stage1: {
      cat: 'Stage 1 · مدير المنتج',
      title:
        'من الصفر إلى الاحتراف،<br><span class="highlight">كن مدير منتجك الخاص.</span>',
      sub: 'لا حاجة لخلفية في علوم الحاسوب. فقط تحدث بفكرتك، وسيُحولها الذكاء الاصطناعي إلى نماذج ويب عالية الدقة.',
      cards: [
        {
          title: 'مدير منتج AI',
          desc: 'من الفكرة إلى النموذج الأولي، بمجرد التحدث.',
          sub: 'صديق لغير التقنيين',
          link: '/ar-sa/stage-0/'
        },
        {
          title: 'مقدمة بالألعاب',
          desc: 'ابنِ Snake و Tetris واكسر حاجز الخوف من الكود.',
          sub: 'تعلم باللعب',
          link: '/ar-sa/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: 'أتقن جوهر برمجة الذكاء الاصطناعي: هندسة الأوامر والسياق.',
          sub: 'العقلية الأساسية',
          link: '/ar-sa/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · مطور مبتدئ/متوسط',
      title:
        'Full Stack،<br><span class="highlight">ابنِ تطبيقات حقيقية.</span>',
      sub: 'أتقن فصل الواجهة الأمامية عن الخلفية. ابنِ مشاريع تجارية مع قواعد بيانات و API وتفاعلات معقدة.',
      cards: [
        {
          title: 'Full Stack',
          headline: 'واجهة أمامية وخلفية.',
          desc: 'من تصميم DB إلى API والمكونات، ابنِ تطبيق ويب حديث بالكامل.',
          link: '/ar-sa/stage-2/'
        },
        {
          title: 'مشاريع حقيقية',
          headline: 'ليس كود ألعاب.',
          desc: 'تعمق في المصادقة، التخزين، رفع الملفات ومنطق العمل الأساسي.',
          link: '/ar-sa/stage-2/'
        },
        {
          title: 'النشر',
          headline: 'أظهر للعالم.',
          desc: 'إعداد الخادم، DNS، CI/CD. الميل الأخير لتسليم المنتج.',
          link: '/ar-sa/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · مطور خبير',
      title:
        'ممارسة متقدمة،<br><span class="highlight">إمكانيات لا نهائية.</span>',
      sub: 'برامج WeChat الصغيرة وتطبيقات AI الأصلية. استكشف عصر LLMs.',
      cards: [
        {
          title: 'برنامج WeChat المصغر',
          desc: 'تطوير متعدد المنصات، الوصول لملايين المستخدمين.',
          link: '/ar-sa/stage-3/'
        },
        {
          title: 'تطبيقات AI الأصلية',
          desc: 'RAG، Agent. استكشف حدود LLMs.',
          link: '/ar-sa/stage-3/'
        },
        {
          title: 'هندسة معقدة',
          desc: 'تصميم هندسة التزامن العالي والتوافر العالي.',
          link: '/ar-sa/stage-3/'
        },
        {
          title: 'العلامة التجارية الشخصية',
          desc: 'ابنِ موقعك الخاص ومدونتك الأكاديمية.',
          link: '/ar-sa/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · ملحق',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI Fundamentals',
          desc: 'LLM, Agent, RAG. Dive into AI internals.',
          link: '/ar-sa/appendix/ai-evolution'
        },
        {
          title: 'Frontend',
          desc: 'Browser internals, Performance, Canvas.',
          link: '/ar-sa/appendix/web-basics'
        },
        {
          title: 'Backend',
          desc: 'High concurrency, Distributed systems, Microservices.',
          link: '/ar-sa/appendix/backend-evolution'
        },
        {
          title: 'General Skills',
          desc: 'Git, Networks, IDE internals.',
          link: '/ar-sa/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: 'جاهز للبدء؟',
      desc: 'Easy-Vibe، اجعل البرمجة طبيعية كالتنفس.',
      btn: 'ابدأ الآن'
    }
  },
  'vi-vn': {
    nav: {
      title: 'Hướng dẫn Easy-Vibe',
      home: 'Trang chủ',
      pm: 'Quản lý sản phẩm',
      junior: 'Dev Sơ/Trung cấp',
      senior: 'Dev Cao cấp',
      appendix: 'Phụ lục',
      start: 'Bắt đầu học'
    },
    stage1: {
      cat: 'Stage 1 · Người mới & PM',
      title:
        'Từ số 0 đến Hero,<br><span class="highlight">Tự làm PM cho chính mình.</span>',
      sub: 'Không cần nền tảng CS. Chỉ cần nói ra ý tưởng, AI sẽ biến nó thành nguyên mẫu web độ trung thực cao.',
      cards: [
        {
          title: 'AI PM',
          desc: 'Từ ý tưởng đến nguyên mẫu, chỉ bằng lời nói.',
          sub: 'Thân thiện với non-tech',
          link: '/vi-vn/stage-0/'
        },
        {
          title: 'Nhập môn qua Game',
          desc: 'Xây dựng Snake, Tetris và phá bỏ nỗi sợ code.',
          sub: 'Học mà chơi',
          link: '/vi-vn/stage-0/'
        },
        {
          title: 'Vibe Coding',
          desc: 'Nắm vững cốt lõi lập trình AI: Prompt Engineering & Context.',
          sub: 'Tư duy cốt lõi',
          link: '/vi-vn/stage-0/'
        }
      ]
    },
    stage2: {
      cat: 'Stage 2 · Dev Sơ/Trung cấp',
      title:
        'Full Stack,<br><span class="highlight">Xây dựng App thực tế.</span>',
      sub: 'Nắm vững tách biệt frontend-backend. Xây dựng dự án thương mại với DB, API và tương tác phức tạp.',
      cards: [
        {
          title: 'Full Stack',
          headline: 'Frontend & Backend.',
          desc: 'Từ thiết kế DB đến API và component, xây dựng trọn vẹn web app hiện đại.',
          link: '/vi-vn/stage-2/'
        },
        {
          title: 'Dự án thực tế',
          headline: 'Không phải code đồ chơi.',
          desc: 'Đi sâu vào Auth, Lưu trữ, Upload file và logic nghiệp vụ cốt lõi.',
          link: '/vi-vn/stage-2/'
        },
        {
          title: 'Triển khai',
          headline: 'Show cho thế giới.',
          desc: 'Cấu hình server, DNS, CI/CD. Chặng cuối của việc giao sản phẩm.',
          link: '/vi-vn/stage-2/'
        }
      ]
    },
    stage3: {
      cat: 'Stage 3 · Dev Cao cấp',
      title:
        'Thực hành nâng cao,<br><span class="highlight">Khả năng vô hạn.</span>',
      sub: 'Mini-app di động & Ứng dụng AI Native. Khám phá kỷ nguyên LLM.',
      cards: [
        {
          title: 'WeChat Mini-app',
          desc: 'Phát triển đa nền tảng, tiếp cận hàng triệu người dùng.',
          link: '/vi-vn/stage-3/'
        },
        {
          title: 'App AI Native',
          desc: 'RAG, Agent. Khám phá giới hạn của LLM.',
          link: '/vi-vn/stage-3/'
        },
        {
          title: 'Kiến trúc phức tạp',
          desc: 'Thiết kế kiến trúc chịu tải cao và sẵn sàng cao.',
          link: '/vi-vn/stage-3/'
        },
        {
          title: 'Thương hiệu cá nhân',
          desc: 'Xây dựng website và blog học thuật của riêng bạn.',
          link: '/vi-vn/stage-3/'
        }
      ]
    },
    appendix: {
      cat: 'Appendix · Phụ lục',
      title:
        'Encyclopedia, <br><span class="highlight">Solid Foundation.</span>',
      sub: 'From Computer Networks to AI Principles, complete your tech puzzle.',
      cards: [
        {
          title: 'AI Fundamentals',
          desc: 'LLM, Agent, RAG. Dive into AI internals.',
          link: '/vi-vn/appendix/ai-evolution'
        },
        {
          title: 'Frontend',
          desc: 'Browser internals, Performance, Canvas.',
          link: '/vi-vn/appendix/web-basics'
        },
        {
          title: 'Backend',
          desc: 'High concurrency, Distributed systems, Microservices.',
          link: '/vi-vn/appendix/backend-evolution'
        },
        {
          title: 'General Skills',
          desc: 'Git, Networks, IDE internals.',
          link: '/vi-vn/appendix/git-intro'
        }
      ]
    },
    footer: {
      title: 'Sẵn sàng chưa?',
      desc: 'Easy-Vibe, biến lập trình trở nên tự nhiên như hơi thở.',
      btn: 'Bắt đầu ngay'
    }
  }
}

const t = computed(() => {
  const code = lang.value ? lang.value.toLowerCase() : 'zh-cn'
  return i18n[code] || i18n['en']
})

const isCjkLocale = computed(() => {
  const code = lang.value ? lang.value.toLowerCase() : ''
  if (['zh-cn', 'zh-tw', 'ja-jp', 'ko-kr'].includes(code)) {
    return true
  }
  const path = router.route.path.toLowerCase()
  return /^\/(zh-cn|zh-tw|ja-jp|ko-kr)\//.test(path)
})

const topPromo = computed(() => {
  const code = lang.value ? lang.value.toLowerCase() : 'en'
  if (code === 'zh-cn' || code === 'zh-tw') {
    return {
      text: '用 Easy-Vibe 构建你的第一个 AI 应用，最快当天可上线原型。',
      cta: '开始学习 ›',
      link: '/zh-cn/stage-0/0.1-learning-map/'
    }
  }
  return {
    text: 'Build your first AI app with Easy-Vibe and ship a working prototype fast.',
    cta: 'Start learning ›',
    link: '/en/stage-0/0.1-learning-map/'
  }
})

const appleFooterInfo = computed(() => {
  const locale = lang.value ? lang.value.toLowerCase() : 'zh-cn'
  const content = {
    'zh-cn': {
      notes: [
        '1. 学习路径与章节内容会持续更新，显示内容以当前页面为准。',
        '2. 示例项目与截图用于教学演示，可能与后续版本界面存在差异。',
        '3. 部分章节链接会随着课程迭代调整，建议优先从首页导航进入最新路径。'
      ],
      breadcrumbPrefix: 'Easy-Vibe',
      breadcrumbCurrent: '学习导航',
      columns: [
        {
          title: '学习与导航',
          links: ['零基础入门', '初中级开发', '高级开发', '附录', '学习地图', '课程总览']
        },
        {
          title: '学习支持',
          links: ['常见问题', '学习建议', '章节勘误', '版本更新']
        },
        {
          title: '项目资源',
          links: ['GitHub 仓库', '开源协议', '提交 Issue', '贡献指南']
        },
        {
          title: '社区',
          links: ['学习社群', '讨论区', '课程反馈']
        },
        {
          title: '关于 Easy-Vibe',
          links: ['项目介绍', '更新日志', '联系我们']
        }
      ],
      more: '更多学习方式：访问',
      moreLink: 'GitHub 仓库',
      moreTail: '，获取更新与交流信息。',
      copyright: 'Copyright © 2026 Easy-Vibe. 保留所有权利。',
      policies: ['隐私政策', '使用条款', '网站地图']
    },
    en: {
      notes: [
        '1. Learning paths and chapters are continuously updated.',
        '2. Screenshots and demo projects are for educational illustration.',
        '3. Some chapter links may change as the course evolves.',
        '4. The page is optimized for modern desktop browsers and responsive layouts.'
      ],
      breadcrumbPrefix: 'Easy-Vibe',
      breadcrumbCurrent: 'Learning Navigation',
      columns: [
        {
          title: 'Explore',
          links: ['Foundations', 'Junior/Mid Dev', 'Senior Dev', 'Appendix', 'Learning Map', 'Course Outline']
        },
        {
          title: 'Support',
          links: ['FAQ', 'Learning Tips', 'Errata', 'Release Notes']
        },
        {
          title: 'Resources',
          links: ['GitHub Repository', 'License', 'Report Issue', 'Contribution Guide']
        },
        {
          title: 'Community',
          links: ['Community', 'Discussions', 'Feedback']
        },
        {
          title: 'About Easy-Vibe',
          links: ['Overview', 'Changelog', 'Contact']
        }
      ],
      more: 'More ways to learn: visit',
      moreLink: 'GitHub Repository',
      moreTail: ' for updates and community discussions.',
      copyright: 'Copyright © 2026 Easy-Vibe. All rights reserved.',
      policies: ['Privacy Policy', 'Terms of Use', 'Sitemap']
    }
  }
  return content[locale] || content.en
})

const footerRepositoryLink = computed(() => {
  const locale = lang.value ? lang.value.toLowerCase() : 'zh-cn'
  if (locale === 'zh-cn') {
    return 'https://github.com/datawhalechina/easy-vibe'
  }
  return 'https://github.com/datawhalechina/easy-vibe'
})

const footerPolicyLinkMap = {
  '隐私政策': '#',
  '使用条款': '#',
  '网站地图': '#',
  'Privacy Policy': '#',
  'Terms of Use': '#',
  'Sitemap': '#'
}

const footerColumnLinkMap = {
  '零基础入门': '/zh-cn/stage-0/',
  '初中级开发': '/zh-cn/stage-2/',
  '高级开发': '/zh-cn/stage-3/',
  '附录': '/zh-cn/appendix/',
  '学习地图': '/zh-cn/stage-0/0.1-learning-map/',
  '课程总览': '/zh-cn/stage-0/',
  'GitHub 仓库': 'https://github.com/datawhalechina/easy-vibe',
  'Foundations': '/en/stage-0/',
  'Junior/Mid Dev': '/en/stage-2/',
  'Senior Dev': '/en/stage-3/',
  'Appendix': '/en/appendix/',
  'Learning Map': '/en/stage-0/0.1-learning-map/',
  'Course Outline': '/en/stage-0/',
  'GitHub Repository': 'https://github.com/datawhalechina/easy-vibe',
  'Overview': '/en/guide/introduction',
  'Changelog': 'https://github.com/datawhalechina/easy-vibe/releases'
}

const getFooterLink = (label) => {
  return footerColumnLinkMap[label] || '#'
}

const getPolicyLink = (label) => {
  return footerPolicyLinkMap[label] || '#'
}

const resolveFooterHref = (link) => {
  if (link.startsWith('http://') || link.startsWith('https://')) {
    return link
  }
  return withBase(link)
}

const locales = [
  { code: 'zh-cn', text: '简体中文' },
  { code: 'en', text: 'English' },
  { code: 'ja-jp', text: '日本語' },
  { code: 'zh-tw', text: '繁體中文' },
  { code: 'ko-kr', text: '한국어' },
  { code: 'es-es', text: 'Español' },
  { code: 'fr-fr', text: 'Français' },
  { code: 'de-de', text: 'Deutsch' },
  { code: 'ar-sa', text: 'العربية' },
  { code: 'vi-vn', text: 'Tiếng Việt' }
]

const toggleLangMenu = () => {
  showLangMenu.value = !showLangMenu.value
}

const changeLang = (targetLocale) => {
  const currentPath = router.route.path
  // Find current locale based on path prefix
  const currentLocale = locales.find((l) =>
    currentPath.startsWith(`/${l.code}/`)
  )

  let newPath
  if (currentLocale) {
    newPath = currentPath.replace(
      `/${currentLocale.code}/`,
      `/${targetLocale}/`
    )
  } else {
    // Fallback for root path or missing locale prefix
    newPath = `/${targetLocale}/`
  }

  router.go(withBase(newPath))
  showLangMenu.value = false
}

const scrollTo = (id) => {
  if (id === 'home') {
    window.scrollTo({ top: 0, behavior: 'smooth' })
    activeTab.value = 'home'
    return
  }
  const el = document.getElementById(id)
  if (el) {
    const navHeight = 48 // Approximate nav height
    // Use getBoundingClientRect for better accuracy
    const elementPosition = el.getBoundingClientRect().top + window.pageYOffset
    // Increase buffer to ensure section header is clearly visible below nav
    const offset = elementPosition - navHeight - 64
    window.scrollTo({ top: offset, behavior: 'smooth' })
    activeTab.value = id
  }
}

// Close lang menu on click outside
const closeLangMenu = (e) => {
  if (!e.target.closest('.lang-switch-wrapper')) {
    showLangMenu.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', closeLangMenu)
  if (appendixWrapper.value) {
    appendixWrapper.value.addEventListener('scroll', onAppendixScroll)
    updatePagination()
    window.addEventListener('resize', updatePagination)
  }
})

onUnmounted(() => {
  document.removeEventListener('click', closeLangMenu)
  if (appendixWrapper.value) {
    appendixWrapper.value.removeEventListener('scroll', onAppendixScroll)
  }
  window.removeEventListener('resize', updatePagination)
})

// Stage 1: 产品经理 (Web 原型)
const stage1Cards = [
  {
    title: 'AI 产品经理',
    desc: '从想法到高保真原型，你只需要会说话。',
    sub: '适合非技术背景',
    color: 'linear-gradient(135deg, #FF9A9E 0%, #FECFEF 99%, #FECFEF 100%)',
    icon: '🎨',
    link: '/zh-cn/stage-0/0.1-learning-map/'
  },
  {
    title: '游戏化入门',
    desc: '通过制作贪吃蛇、俄罗斯方块，打破对代码的恐惧。',
    sub: '边玩边学',
    color: 'linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%)',
    icon: '🎮',
    link: '/zh-cn/stage-0/0.2-ai-capabilities-through-games/'
  },
  {
    title: 'Vibe Coding',
    desc: '掌握 AI 时代的编程核心：提示词工程与上下文管理。',
    sub: '核心心法',
    color: 'linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%)',
    icon: '💡',
    link: '/zh-cn/stage-1/1.1-introduction-to-ai-ide/'
  }
]

// Stage 2: 初中级开发 (全栈)
const stage2Cards = [
  {
    title: '全栈开发',
    headline: '独立完成前后端。',
    desc: '从数据库设计到 API 开发，再到前端组件化，完整构建一个现代化 Web 应用。',
    imageColor: '#E0C3FC',
    visualType: 'code',
    link: '/zh-cn/stage-2/assignments/2.1-fullstack-app/'
  },
  {
    title: '真实项目',
    headline: '拒绝玩具代码。',
    desc: '深入理解用户鉴权、数据存储、文件上传等核心业务逻辑。',
    imageColor: '#8EC5FC',
    visualType: 'server',
    link: '/zh-cn/stage-2/backend/2.2-database-supabase/chapter5/'
  },
  {
    title: '部署上线',
    headline: '让世界看到你的作品。',
    desc: '学习服务器配置、域名解析和自动化部署，打通产品落地的最后一公里。',
    imageColor: '#96E6A1',
    visualType: 'cloud',
    link: '/zh-cn/stage-2/backend/2.5-zeabur-deployment/extra6/'
  }
]

// Stage 3: 高级开发 (小程序 & AI)
const stage3Cards = [
  {
    title: '微信小程序',
    desc: '跨平台开发，触达亿级用户。',
    tag: 'Stage 3',
    visualType: 'phone',
    link: '/zh-cn/stage-3/cross-platform/3.3-wechat-miniprogram/'
  },
  {
    title: 'AI 原生应用',
    desc: 'RAG、Agent，探索 LLM 的无限可能。',
    tag: 'Advanced',
    visualType: 'ai',
    link: '/zh-cn/stage-3/ai-advanced/3.a1-rag-introduction/'
  },
  {
    title: '复杂业务架构',
    desc: '应对高并发、高可用场景的架构设计。',
    tag: 'Architecture',
    visualType: 'arch',
    link: '/zh-cn/stage-3/core-skills/3.2-long-running-tasks/'
  },
  {
    title: '个人品牌',
    desc: '构建属于自己的个人网页与学术博客。',
    tag: 'Brand',
    visualType: 'brand',
    link: '/zh-cn/stage-3/personal-brand/3.7-personal-website-blog/'
  }
]

// Appendix: 附录
const appendixCards = [
  {
    title: '人工智能',
    desc: 'LLM、Agent、RAG，深入 AI 底层原理。',
    tag: 'AI',
    link: '/zh-cn/appendix/8-artificial-intelligence/ai-history'
  },
  {
    title: '提示词工程',
    desc: '掌握与 AI 高效对话的技巧，解锁潜力。',
    tag: 'AI',
    link: '/zh-cn/appendix/8-artificial-intelligence/prompt-engineering'
  },
  {
    title: '大语言模型',
    desc: '深入浅出解析 LLM 的工作原理与应用。',
    tag: 'AI',
    link: '/zh-cn/appendix/8-artificial-intelligence/llm-principles'
  },
  {
    title: 'Agent 智能体',
    desc: '探索具备自主决策与执行能力的 AI 架构。',
    tag: 'AI',
    link: '/zh-cn/appendix/8-artificial-intelligence/ai-agents'
  },
  {
    title: '前端基础',
    desc: 'HTML/CSS/JS 三大基石，入门必修课。',
    tag: 'Frontend',
    link: '/zh-cn/appendix/3-browser-and-frontend/javascript-deep-dive'
  },
  {
    title: '前端进化史',
    desc: '了解前端技术栈演变，把握发展趋势。',
    tag: 'Frontend',
    link: '/zh-cn/appendix/3-browser-and-frontend/frontend-frameworks'
  },
  {
    title: '后端架构',
    desc: '从单体到微服务，探索架构演进之路。',
    tag: 'Backend',
    link: '/zh-cn/appendix/4-server-and-backend/backend-layered-architecture'
  },
  {
    title: '后端语言',
    desc: '对比主流后端语言特性，选择最佳技术栈。',
    tag: 'Backend',
    link: '/zh-cn/appendix/4-server-and-backend/backend-languages'
  },
  {
    title: '数据库原理',
    desc: '理解数据库核心原理，掌握数据存储艺术。',
    tag: 'Database',
    link: '/zh-cn/appendix/5-data/database-fundamentals'
  },
  {
    title: 'API 设计',
    desc: 'API 接口设计与开发的基础知识。',
    tag: 'API',
    link: '/zh-cn/appendix/4-server-and-backend/api-intro'
  },
  {
    title: 'Git 版本控制',
    desc: '深入理解 Git 原理与高级用法。',
    tag: 'General',
    link: '/zh-cn/appendix/2-development-tools/git-version-control'
  },
  {
    title: '计算机网络',
    desc: '网络协议与通信原理的基础知识。',
    tag: 'General',
    link: '/zh-cn/appendix/1-computer-fundamentals/computer-networks'
  }
]
</script>

<template>
  <div class="apple-container">
    <!-- Sticky Navigation -->
    <nav class="sticky-nav glass">
      <div class="nav-content">
        <div class="nav-cluster">
          <span class="nav-title">{{ t.nav.title }}</span>
          <div class="nav-links">
            <button
              :class="{ active: activeTab === 'home' }"
              class="nav-link-item"
              @click="scrollTo('home')"
            >
              {{ t.nav.home }}
            </button>
            <button
              :class="{ active: activeTab === 'pm' }"
              class="nav-link-item"
              @click="scrollTo('pm')"
            >
              {{ t.nav.pm }}
            </button>
            <button
              :class="{ active: activeTab === 'junior' }"
              class="nav-link-item"
              @click="scrollTo('junior')"
            >
              {{ t.nav.junior }}
            </button>
            <button
              :class="{ active: activeTab === 'senior' }"
              class="nav-link-item"
              @click="scrollTo('senior')"
            >
              {{ t.nav.senior }}
            </button>
            <button
              :class="{ active: activeTab === 'appendix' }"
              class="nav-link-item"
              @click="scrollTo('appendix')"
            >
              {{ t.nav.appendix }}
            </button>
          </div>
          <div class="nav-action">
            <div class="nav-icons">
              <div class="lang-switch-wrapper">
                <button
                  type="button"
                  class="button"
                  aria-haspopup="true"
                  :aria-expanded="showLangMenu"
                  aria-label="Change language"
                  @click.stop="toggleLangMenu"
                >
                  <span class="text">
                    <span class="vpi-languages option-icon" />
                    <span class="vpi-chevron-down text-icon" />
                  </span>
                </button>
                <div
                  v-if="showLangMenu"
                  class="lang-dropdown glass"
                >
                  <button
                    v-for="locale in locales"
                    :key="locale.code"
                    class="lang-item"
                    @click="changeLang(locale.code)"
                  >
                    {{ locale.text }}
                  </button>
                </div>
              </div>
              <GitHubStars class="nav-github-stars" />
            </div>
            <a
              class="buy-btn"
              :href="withBase(t.stage1.cards[0].link)"
            >{{ t.footer.btn }}</a>
          </div>
        </div>
      </div>
      <div class="nav-promo">
        <span>{{ topPromo.text }}</span>
        <a :href="resolveFooterHref(topPromo.link)">{{ topPromo.cta }}</a>
      </div>
    </nav>

    <!-- Home Anchor -->
    <div
      id="home"
      style="height: 0"
    />

    <!-- Stage 1: Product Manager -->
    <section
      id="pm"
      class="section-container section-pm"
    >
      <div class="section-header">
        <h2 class="section-category">
          {{ t.stage1.cat }}
        </h2>
        <h3
          class="section-headline"
          v-html="t.stage1.title"
        />
        <p class="section-sub">
          {{ t.stage1.sub }}
        </p>
      </div>

      <div class="feature-grid">
        <a
          v-for="(card, i) in stage1Cards"
          :key="i"
          :href="withBase(t.stage1.cards[i].link)"
          class="feature-card glass"
        >
          <div
            class="feature-icon"
            :style="{ background: card.color }"
          >
            {{ card.icon }}
          </div>
          <div class="feature-content">
            <h4>{{ t.stage1.cards[i].title }}</h4>
            <p>{{ t.stage1.cards[i].desc }}</p>
          </div>
        </a>
      </div>
    </section>

    <!-- Stage 2: Junior/Mid Dev -->
    <section
      id="junior"
      class="section-container section-junior"
    >
      <div class="section-header">
        <h2 class="section-category">
          {{ t.stage2.cat }}
        </h2>
        <h3
          class="section-headline"
          v-html="t.stage2.title"
        />
        <p class="section-sub">
          {{ t.stage2.sub }}
        </p>
      </div>

      <div class="comm-grid">
        <a
          v-for="(card, index) in stage2Cards"
          :key="index"
          :href="withBase(t.stage2.cards[index].link)"
          class="comm-card glass"
        >
          <div
            class="comm-visual"
            :style="{ backgroundColor: card.imageColor }"
          >
            <div class="visual-placeholder" />
          </div>
          <div class="comm-text">
            <h4 class="comm-title">{{ t.stage2.cards[index].title }}</h4>
            <p class="comm-desc">{{ t.stage2.cards[index].desc }}</p>
            <span class="comm-note">进一步了解 ›</span>
          </div>
        </a>
      </div>
    </section>

    <!-- Stage 3: Senior Dev -->
    <section
      id="senior"
      class="section-container section-senior"
    >
      <div class="section-header">
        <h2 class="section-category">
          {{ t.stage3.cat }}
        </h2>
        <h3
          class="section-headline"
          v-html="t.stage3.title"
        />
        <p class="section-sub">
          {{ t.stage3.sub }}
        </p>
      </div>

      <div class="scroll-container">
        <div class="scroll-track">
          <a
            v-for="(card, index) in stage3Cards"
            :key="index"
            :href="withBase(t.stage3.cards[index].link)"
            class="prod-card glass"
          >
            <div class="prod-tag">{{ card.tag }}</div>
            <h4>{{ t.stage3.cards[index].title }}</h4>
            <p>{{ t.stage3.cards[index].desc }}</p>
            <div class="prod-visual" />
          </a>
        </div>
      </div>
    </section>

    <!-- Appendix -->
    <section
      id="appendix"
      class="section-container section-appendix"
    >
      <div class="section-header">
        <h2 class="section-category">
          {{ t.appendix.cat }}
        </h2>
        <h3
          class="section-headline"
          v-html="t.appendix.title"
        />
        <p class="section-sub">
          {{ t.appendix.sub }}
        </p>
      </div>

      <div
        ref="appendixWrapper"
        class="appendix-scroll-wrapper"
      >
        <div class="appendix-track">
          <a
            v-for="(card, index) in t.appendix.cards"
            :key="index"
            :href="withBase(card.link)"
            class="appendix-card"
          >
            <div
              class="appendix-icon-wrapper"
              :class="'icon-' + (index % 4)"
            >
              <span class="appendix-emoji">{{
                ['🤖', '🧠', '🎨', '🚀', '⚙️', '💾', '🛠️', '🌐'][index] || '📚'
              }}</span>
            </div>
            <div class="appendix-content">
              <p class="appendix-text">
                <span class="appendix-title">{{ card.title }}.</span>
                {{ card.desc }}
              </p>
            </div>
          </a>
        </div>
      </div>

      <!-- Slider Indicator -->
      <div
        v-if="totalPages > 1"
        class="appendix-controls"
      >
        <button
          class="control-btn play-btn"
          aria-label="Auto Scroll"
          @click="autoScroll"
        >
          <svg
            width="12"
            height="14"
            viewBox="0 0 12 14"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M10.5 5.76795C11.1667 6.15285 11.1667 7.1151 10.5 7.5L2.25 12.2631C1.58333 12.648 0.75 12.1669 0.75 11.3971L0.75 1.87084C0.75 1.10104 1.58333 0.61991 2.25 1.00481L10.5 5.76795Z"
              fill="currentColor"
            />
          </svg>
        </button>
        <div class="indicator-track">
          <div
            v-for="i in totalPages"
            :key="i"
            class="indicator-dot"
            :class="{ active: currentPage === i - 1 }"
            @click="scrollToPage(i - 1)"
          />
        </div>
      </div>
    </section>

    <!-- Footer Callout -->
    <div class="footer-callout">
      <h2 v-html="t.footer.title" />
      <p>{{ t.footer.desc }}</p>
      <a
        class="buy-btn large"
        :href="withBase('/zh-cn/stage-0/0.1-learning-map/')"
      >{{ t.footer.btn }}</a>
    </div>

    <div
      class="apple-site-footer"
      :class="{ 'is-cjk-locale': isCjkLocale }"
    >
      <div class="apple-site-footer-inner">
        <div class="apple-footer-breadcrumb">
          <span>⌘</span>
          <span>›</span>
          <span>{{ appleFooterInfo.breadcrumbPrefix }}</span>
          <span>›</span>
          <span>{{ appleFooterInfo.breadcrumbCurrent }}</span>
        </div>

        <div class="apple-footer-notes">
          <p
            v-for="(item, idx) in appleFooterInfo.notes"
            :key="idx"
          >
            {{ item }}
          </p>
        </div>

        <div class="apple-footer-grid">
          <div
            v-for="(column, index) in appleFooterInfo.columns"
            :key="index"
            class="apple-footer-column"
          >
            <h4>{{ column.title }}</h4>
            <a
              v-for="(link, linkIndex) in column.links"
              :key="linkIndex"
              :href="resolveFooterHref(getFooterLink(link))"
            >
              {{ link }}
            </a>
          </div>
        </div>

        <div class="apple-footer-more">
          {{ appleFooterInfo.more }}
          <a :href="footerRepositoryLink">{{ appleFooterInfo.moreLink }}</a>
          {{ appleFooterInfo.moreTail }}
        </div>

        <div class="apple-footer-bottom">
          <p>{{ appleFooterInfo.copyright }}</p>
          <div class="apple-footer-policy">
            <a
              v-for="(policy, policyIndex) in appleFooterInfo.policies"
              :key="policyIndex"
              :href="resolveFooterHref(getPolicyLink(policy))"
            >
              {{ policy }}
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* Reset & Base */
.apple-container {
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC',
    'Helvetica Neue', sans-serif;
  color: var(--vp-c-text-1);
  background: transparent;
}

a {
  text-decoration: none;
  color: inherit;
}

.highlight {
  color: var(--vp-c-text-2);
}

/* Sticky Nav */
.sticky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-bottom: 1px solid #d2d2d7;
  transition: all 0.3s ease;
  background: rgba(245, 245, 247, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Dark mode adjustment for glass effect */
:root.dark .sticky-nav {
  background: rgba(18, 18, 20, 0.8);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nav-cluster {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 100%;
}

.nav-title {
  font-weight: 500;
  font-size: 12px;
  color: var(--vp-c-text-1) !important;
  flex-shrink: 0;
  letter-spacing: -0.008em;
}

.nav-links {
  display: flex;
  gap: 20px;
  align-items: center;
  margin: 0;
  white-space: nowrap;
}

.nav-links button,
.nav-link-item {
  background: none;
  border: none;
  font-size: 12px;
  color: var(--vp-c-text-1) !important;
  cursor: pointer;
  transition: opacity 0.2s;
  padding: 0;
  margin: 0;
  line-height: 1;
  font-weight: 400;
  opacity: 0.76;
  text-decoration: none;
}

.nav-links button:hover,
.nav-links button.active,
.nav-link-item:hover {
  color: var(--vp-c-text-1) !important;
  opacity: 1;
}

.nav-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-icons {
  display: flex;
  gap: 10px;
  align-items: center;
}

:deep(.nav-github-stars) {
  display: flex;
  align-items: center;
}

:deep(.nav-github-stars .github-stars-link) {
  color: var(--vp-c-text-1) !important;
  display: flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}

:deep(.nav-github-stars .github-stars-link:hover) {
  opacity: 0.7;
}

:deep(.nav-github-stars .github-stars-wrapper) {
  padding-left: 0 !important;
}

.nav-promo {
  height: 30px;
  border-top: 1px solid #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: #1d1d1f;
  padding: 0 16px;
}

.nav-promo a {
  color: #0066cc;
  text-decoration: none;
}

.button {
  background: none;
  border: none;
  padding: 0;
  color: var(--vp-c-text-1) !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.2s;
}

.button:hover {
  opacity: 0.7;
}

.button .text {
  display: flex;
  align-items: center;
  gap: 2px;
}

.button .option-icon {
  width: 20px;
  height: 20px;
  color: var(--vp-c-text-1) !important;
}

.button .text-icon {
  width: 14px;
  height: 14px;
  color: var(--vp-c-text-1) !important;
}

/* Lang Switcher */
.lang-switch-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-dropdown {
  position: absolute;
  top: 100%;
  right: -10px; /* Align slightly to right */
  margin-top: 12px;
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-radius: 16px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 300px;
  overflow-y: auto;
}

.lang-item {
  text-align: left;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--vp-c-text-1);
  transition: background 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

.lang-item:hover {
  background: var(--vp-c-bg-soft);
}

.buy-btn {
  background: #0071e3;
  color: #fff !important;
  padding: 7px 16px;
  border-radius: 980px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: all 0.2s ease;
}

.buy-btn:hover {
  background: #0077ed;
  transform: scale(1.02);
}

.buy-btn.large {
  padding: 12px 24px;
  font-size: 15px;
  margin-top: 20px;
  display: inline-block;
}

/* Sections General */
.section-container {
  max-width: 1280px;
  margin: 0 auto 96px;
  padding: 0 40px;
}

.section-junior,
.section-appendix {
  background: #f5f5f7;
  border-radius: 40px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.dark .section-junior,
.dark .section-appendix {
  background: rgba(255, 255, 255, 0.03);
}

.section-header {
  margin-bottom: 44px;
}

.section-category {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px;
  border: none;
  padding: 0;
  color: #1d1d1f;
  letter-spacing: -0.024em;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC',
    sans-serif;
}

.section-headline {
  font-size: 64px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.034em;
  margin-bottom: 12px;
  color: #1d1d1f;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC',
    sans-serif;
}

.section-sub {
  font-size: 21px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #6e6e73;
  max-width: 760px;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC',
    sans-serif;
}

/* Bento Grid */
.bento-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  height: 500px;
}

.bento-item {
  border-radius: 30px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  color: #1d1d1f; /* Force dark text on colorful backgrounds */
  display: block;
}

.bento-item:hover {
  transform: scale(1.02);
}

.bento-column {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.bento-item.small {
  flex: 1;
  padding: 30px;
}

.card-icon {
  font-size: 48px;
  margin-bottom: 20px;
  display: block;
}

.bento-item h4 {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 1.2;
}

.bento-item p {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  opacity: 0.8;
}

.card-sub {
  position: absolute;
  bottom: 40px;
  font-size: 14px;
  opacity: 0.6;
}

/* Communication Grid (Now used for Stage 2) */
.comm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.comm-card {
  border-radius: 32px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.3s;
  display: block;
}

.comm-card:hover {
  transform: translateY(-6px);
}

.comm-visual {
  height: 220px;
  width: 100%;
  position: relative;
}

.visual-placeholder {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  backdrop-filter: blur(10px);
}

.comm-text {
  padding: 26px 26px 30px;
}

.comm-title {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #1d1d1f;
  letter-spacing: -0.02em;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC',
    sans-serif;
}

.comm-desc {
  font-size: 16px;
  color: #6e6e73;
  margin-bottom: 20px;
  line-height: 1.5;
}

.comm-note {
  font-size: 17px;
  color: #0066cc;
  letter-spacing: -0.01em;
}

/* Productivity Scroll (Now used for Stage 3) */
.scroll-container {
  overflow-x: auto;
  padding-bottom: 40px;
  margin: 0 -20px;
  padding: 0 20px 40px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.scroll-track {
  display: flex;
  gap: 24px;
  width: max-content;
}

.prod-card {
  width: 300px;
  height: 400px;
  border-radius: 32px;
  background: #fff;
  padding: 30px;
  scroll-snap-align: center;
  text-decoration: none !important;
  color: inherit !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.prod-card:hover {
  transform: translateY(-6px);
}

.prod-tag {
  font-size: 12px;
  font-weight: 600;
  color: #6e6e73;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.prod-card h4 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1d1d1f;
  letter-spacing: -0.025em;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC',
    sans-serif;
}

.prod-card p {
  color: #6e6e73;
  font-size: 16px;
  line-height: 1.5;
}

.prod-visual {
  margin-top: auto;
  height: 150px;
  background: linear-gradient(135deg, #dbeafe 0%, #e5e7eb 100%);
  border-radius: 20px;
  opacity: 1;
}

/* Appendix Horizontal Scroll */
.appendix-scroll-wrapper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  margin: 0 -20px;
  padding: 0 20px;
  scrollbar-width: none;
}

.appendix-scroll-wrapper::-webkit-scrollbar {
  display: none;
}

.appendix-track {
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 32px 24px;
  width: max-content;
  padding-bottom: 10px;
}

.appendix-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none !important;
  color: inherit !important;
  background: #fff;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  scroll-snap-align: start;
  width: 100%;
  transition: transform 0.25s ease;
}

/* Slider Controls */
.appendix-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.control-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--vp-c-text-1);
  transition: all 0.2s;
}

.control-btn:hover {
  background: #f0f0f2;
  transform: scale(1.05);
}

.indicator-track {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  height: 44px;
}

.indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #b8b8bd;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity: 0.5;
}

.indicator-dot.active {
  width: 32px;
  background: #1d1d1f;
  opacity: 1;
}

.indicator-dot:hover {
  opacity: 0.8;
}

/* Remove hover effects */
.appendix-card:hover {
  transform: translateY(-4px);
}

.appendix-icon-wrapper {
  width: 64px;
  height: 64px;
  border-radius: 17.5px; /* Apple continuous curve approximation */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-bottom: 16px;
  /* Glassmorphism / VisionOS Style */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  /* No transition */
}

/* Remove hover effects on icon */
.appendix-card:hover .appendix-icon-wrapper {
  /* No transform or shadow change */
}

/* Transparent Tinted Gradients for icons (VisionOS Style) */
/* AI - Blue */
.icon-0 {
  background: linear-gradient(
    180deg,
    rgba(0, 122, 255, 0.16) 0%,
    rgba(0, 122, 255, 0.06) 100%
  );
  border: 1px solid rgba(0, 122, 255, 0.15);
}
/* Frontend - Orange */
.icon-1 {
  background: linear-gradient(
    180deg,
    rgba(255, 149, 0, 0.16) 0%,
    rgba(255, 149, 0, 0.06) 100%
  );
  border: 1px solid rgba(255, 149, 0, 0.15);
}
/* Backend - Pink */
.icon-2 {
  background: linear-gradient(
    180deg,
    rgba(255, 45, 85, 0.16) 0%,
    rgba(255, 45, 85, 0.06) 100%
  );
  border: 1px solid rgba(255, 45, 85, 0.15);
}
/* General - Green */
.icon-3 {
  background: linear-gradient(
    180deg,
    rgba(52, 199, 89, 0.16) 0%,
    rgba(52, 199, 89, 0.06) 100%
  );
  border: 1px solid rgba(52, 199, 89, 0.15);
}

.appendix-content {
  text-align: left;
}

.appendix-text {
  font-size: 15px;
  line-height: 1.5;
  color: #6e6e73;
  margin: 0;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.appendix-title {
  font-weight: 600;
  color: #1d1d1f;
  margin-right: 6px;
  font-size: 13px;
}

/* Footer */
.footer-callout {
  text-align: center;
  padding: 92px 20px;
  background: #fff;
  margin: 0 40px 64px;
  border-radius: 40px;
}

.footer-callout h2 {
  font-size: 62px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #1d1d1f;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC',
    sans-serif;
}

.footer-callout p {
  color: #6e6e73;
  font-size: 20px;
  margin-bottom: 18px;
}

.apple-site-footer {
  max-width: 1060px;
  margin: 0 auto 56px;
  padding: 0 40px;
}

.apple-site-footer-inner {
  border-top: 1px solid #d2d2d7;
  color: #6e6e73;
  font-size: 12px;
}

.apple-footer-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6e6e73;
  font-size: 12px;
  padding-top: 12px;
}

.apple-site-footer.is-cjk-locale .apple-footer-breadcrumb {
  font-family:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  font-size: 13px;
  letter-spacing: 0.02em;
}

.apple-footer-notes {
  padding-top: 18px;
}

.apple-footer-notes p {
  margin: 0 0 8px;
  line-height: 1.45;
  color: #86868b;
}

.apple-site-footer.is-cjk-locale .apple-footer-notes p {
  font-family:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  font-size: 13px;
  line-height: 1.88;
  letter-spacing: 0.03em;
  font-weight: 400;
  color: #7d7d83;
}

.apple-footer-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

.apple-footer-column h4 {
  margin: 0 0 10px;
  color: #1d1d1f;
  font-size: 12px;
  font-weight: 600;
}

.apple-site-footer.is-cjk-locale .apple-footer-column h4 {
  font-family:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.025em;
}

.apple-footer-column a {
  display: block;
  color: #424245;
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1.25;
}

.apple-site-footer.is-cjk-locale .apple-footer-column a {
  font-family:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  font-size: 13px;
  line-height: 1.72;
  letter-spacing: 0.02em;
  margin-bottom: 9px;
}

.apple-footer-column a:hover {
  color: #0066cc;
}

.apple-footer-more {
  margin-top: 18px;
  border-top: 1px solid #d2d2d7;
  padding-top: 14px;
  color: #6e6e73;
}

.apple-site-footer.is-cjk-locale .apple-footer-more {
  font-family:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  font-size: 13px;
  line-height: 1.72;
  letter-spacing: 0.02em;
}

.apple-footer-more a {
  color: #0066cc;
}

.apple-footer-bottom {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #d2d2d7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.apple-footer-bottom p {
  margin: 0;
  color: #86868b;
}

.apple-site-footer.is-cjk-locale .apple-footer-bottom p {
  font-family:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

.apple-footer-policy {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.apple-footer-policy a {
  color: #424245;
}

.apple-footer-policy a:hover {
  color: #0066cc;
}

.apple-site-footer.is-cjk-locale .apple-footer-policy a {
  font-family:
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC',
    sans-serif;
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0.02em;
}

@media (min-width: 1024px) {
  .apple-site-footer {
    max-width: 996px;
    padding: 0 24px;
  }

  .apple-site-footer-inner {
    font-size: 11px;
  }

  .apple-footer-notes p {
    font-size: 11px;
    line-height: 1.38;
    margin-bottom: 6px;
  }

  .apple-footer-grid {
    grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
    gap: 24px;
  }

  .apple-footer-column h4 {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .apple-footer-column a {
    font-size: 11px;
    margin-bottom: 7px;
  }

  .apple-site-footer.is-cjk-locale .apple-site-footer-inner {
    font-size: 13px;
  }

  .apple-site-footer.is-cjk-locale .apple-footer-notes p {
    font-size: 13px;
    margin-bottom: 7px;
  }

  .apple-site-footer.is-cjk-locale .apple-footer-column h4 {
    font-size: 13px;
  }

  .apple-site-footer.is-cjk-locale .apple-footer-column a {
    font-size: 13px;
    margin-bottom: 8px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .section-headline {
    font-size: 42px;
  }

  .bento-grid {
    grid-template-columns: 1fr;
    height: auto;
  }

  .comm-grid {
    grid-template-columns: 1fr;
  }

  .nav-links {
    display: none;
  }

  .nav-promo {
    font-size: 12px;
    height: 28px;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
  }

  .section-junior,
  .section-appendix {
    border-radius: 28px;
    padding-top: 42px;
    padding-bottom: 42px;
  }

  .footer-callout {
    margin: 0 16px 40px;
    border-radius: 28px;
  }

  .footer-callout h2 {
    font-size: 38px;
  }

  .footer-callout p {
    font-size: 17px;
  }

  .apple-site-footer {
    padding: 0 16px;
  }

  .apple-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 14px;
  }

  .apple-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

<style>
/* Global layout fix for fixed nav */
.VPHome {
  padding-top: 84px !important;
}
</style>

<style scoped>
/* Feature Grid (Apple Store Style) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: #fff;
  border-radius: 32px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  height: 100%;
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.dark .feature-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: var(--vp-c-bg-mute);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 24px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.feature-content {
  display: flex;
  flex-direction: column;
}

.feature-content h4 {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #1d1d1f;
  line-height: 1.3;
  letter-spacing: -0.024em;
  font-family:
    -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC',
    sans-serif;
}

.feature-content p {
  font-size: 17px;
  color: #6e6e73;
  line-height: 1.6;
  margin-top: 4px;
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .feature-card {
    padding: 24px;
  }
}
</style>