﻿/* ===== i18n.jsx ===== */
/* ============================================================
   4-CAS i18n — Multilingual dictionary
   Languages: en (English), zh (中文), ko (한국어), ja (日本語)
   ============================================================ */

const I18N = {
  en: {
    // Brand
    brand: {
      name: '4-CAS',
      tagline: 'Master AI, Master Life',
      slogan: 'AI-empowered education, returning to its essence.',
    },

    // Nav
    nav: {
      home: 'Home',
      theory: 'Theory',
      tools: 'Tools',
      forms: 'Resources',
      about: 'About',
      contact: 'Contact',
    },

    // Home / Hero
    hero: {
      eyebrow: 'A Structural Reconstruction of CAS',
      title: 'Reclaiming the Purpose of',
      titleItalic: 'Experiential Learning',
      subtitle: '4-CAS is an original governance framework for experiential education in the age of AI. It redefines responsibility across the full learning chain — empowering students, clarifying teacher boundaries, and restoring the educational value of hands-on practice.',
      taglineMain: 'Master AI, Master Life',
      taglineSub: '驾驭AI，驾驭人生',
      ctaPrimary: 'Explore the Framework',
      ctaSecondary: 'Download Resources',
      scroll: 'Scroll',
    },

    homeFeatures: {
      eyebrow: 'Four Pillars',
      title: 'Four Foundational Pillars',
      desc: '4-CAS rests on four interdependent pillars that together reconstruct the governance of experiential learning in the AI era.',
      items: [
        { num: '01', title: 'AI Empowerment', desc: 'Technology raises the bar of assessment — it does not lower it. Multi-round iteration, comparative design, and evidence-based critical revision.' },
        { num: '02', title: 'Student-Led Agency', desc: 'Students own topic choice, design, resources, and reflection. From scripted execution to active, creative knowledge construction.' },
        { num: '03', title: 'Open Service Ecosystem', desc: 'Service providers become dialogue partners, not decision-makers. Students hold final choice; transparency and AI-assisted judgment break resource monopolies.' },
        { num: '04', title: 'Teacher Boundary Supervision', desc: 'Teachers shift from deciders to guardians of academic integrity. Red lines are published upfront; risk is quantified and visualized.' },
      ],
    },

    // Theory page
    theory: {
      eyebrow: 'Theoretical Framework',
      title: 'The 4-CAS Theory',
      desc: '4-CAS is not a patch on existing CAS practice — it is a structural reconstruction of educational responsibility in an era where AI has fundamentally expanded what students can do.',
      originsTitle: 'Why 4-CAS',
      originsSubtitle: 'Three Structural Crises in Current CAS Practice',
      originsDesc: 'Experiential learning has been eroded by commercialization and formalism, increasingly reduced to a resume-packaging exercise rather than serving genuine student growth.',
      origins: [
        {
          title: 'Commercialization',
          desc: 'Paid standardized "overseas charity packages" have flooded the market. Third-party agencies run entire processes, and students are reduced to mere buyers.',
        },
        {
          title: 'Subjective Review',
          desc: 'Clear, quantifiable review criteria are missing. Teachers reject student proposals on arbitrary, experience-based grounds rather than transparent standards.',
        },
        {
          title: 'AI Fabrication',
          desc: 'Generative AI can produce fake proposals, reports, and deep reflections at low cost — content that is nearly impossible for teachers to identify manually.',
        },
      ],
      positioningTitle: 'A Structural Reconstruction',
      positioningDesc: '4-CAS redefines the distribution of educational responsibility across the entire chain: who decides the topic, who provides resource support, who bears implementation cost, who oversees and intervenes, and who evaluates outcomes.',
      pillarsTitle: 'Four Core Pillars',
      pillars: [
        {
          num: '01',
          short: 'AI',
          name: 'AI Empowerment System',
          desc: 'AI technology expands the boundary of what students can achieve. Assessment standards must rise accordingly — not be lowered.',
          forward: {
            label: 'Forward Empowerment',
            items: ['Multi-round prompt iteration', 'Comparative design across proposals', 'Full-process evidence retention', 'Critical revision and optimization'],
          },
          warning: {
            label: 'Critical Warning',
            items: ['Beware of copy-paste finalization', 'Loss of independent judgment', 'Erosion of ownership over outcomes'],
          },
        },
        {
          num: '02',
          short: 'SL',
          name: 'Student-Led Agency',
          desc: 'From passive script execution to active, creative knowledge construction. Students exercise autonomy across the full project lifecycle.',
          forward: {
            label: 'Four Autonomies',
            items: ['Self-directed topic choice', 'Independent project design', 'Self-selected resources', 'Authentic self-reflection'],
          },
        },
        {
          num: '03',
          short: 'OE',
          name: 'Open Service Ecosystem',
          desc: 'Service providers are repositioned as dialogue participants — offering risk warnings and professional advice, but never making final decisions.',
          forward: {
            label: 'Ecosystem Principles',
            items: ['Break resource monopolies', 'Open choice of providers', 'Full-process transparency', 'AI-enabled scientific decision-making'],
          },
        },
        {
          num: '04',
          short: 'TB',
          name: 'Teacher Boundary Supervision',
          desc: 'Teachers transition from decision-makers to guides and guardians of academic bottom lines. Red lines are published upfront; risk is quantified and visualized.',
          forward: {
            label: 'Core Responsibilities',
            items: ['Define research ethics red lines', 'Maintain academic integrity standards', 'Publish red lines in advance', 'Visual quantitative risk assessment'],
          },
        },
      ],
      riskTitle: 'Five-Dimensional Risk Assessment',
      riskSubtitle: 'Quantified 0–5 Scale',
      riskDesc: 'Every project proposal is evaluated across five risk dimensions on a 0–5 scale, enabling objective, comparable, and transparent review decisions.',
      riskDims: [
        { name: 'Safety Exposure', desc: 'Physical, psychological, and reputational risk to students' },
        { name: 'Educational Value', desc: 'Weight of genuine learning outcomes vs. performative output' },
        { name: 'Ethical Concern', desc: 'Potential ethical violations in research methods and impact' },
        { name: 'Governance Maturity', desc: 'Adequacy of oversight mechanisms and supporting processes' },
        { name: 'Implementation Feasibility', desc: 'Practical controllability of on-the-ground execution' },
      ],
      integrityTitle: 'Academic Integrity Code',
      integrityAllowed: {
        label: 'Legitimate AI Assistance',
        items: ['Multi-angle brainstorming', 'Scenario simulation and comparison', 'Logical framework refinement', 'Designing deep inquiry question lists'],
      },
      integrityForbidden: {
        label: 'Strictly Prohibited',
        items: ['Fabricating unimplemented activities', 'Falsifying personal experience', 'Outsourcing core creative work', 'AI-generated false supporting materials'],
      },
      toolTitle: 'Assessment Tool Philosophy',
      toolSubtitle: '"Dialogue Is Evidence"',
      toolDesc: 'Students converse with AI; the system automatically retains process evidence. Assessment is built on the trace of thinking, not on polished final outputs alone.',
      toolStages: [
        { label: 'Stage 01', name: 'Baseline', desc: 'Establish an individual starting-point profile' },
        { label: 'Stage 02', name: 'Training', desc: 'Multi-round iterations leave a thinking trail' },
        { label: 'Stage 03', name: 'Re-assessment', desc: 'Compare against baseline to observe change' },
      ],
      toolDimsTitle: 'Four-Dimensional Scoring',
      toolDimsDesc: 'Each dimension scored 0–25. Total maps to A / B / C / D grade.',
      toolDims: [
        { name: 'Authenticity', score: 25 },
        { name: 'AI Literacy', score: 25 },
        { name: 'Planning', score: 25 },
        { name: 'Reflection Trace', score: 25 },
      ],
      scopeTitle: 'Scope of Application',
      scopeDesc: '4-CAS is a general governance framework for experiential education, applicable across program types and grade levels.',
      scopeItems: [
        'IB CAS Programme',
        'A-Level EPQ',
        'The Duke of Edinburgh\'s Award',
        'School-wide club activities',
        'All-grade extracurricular practice',
      ],
    },

    // Tools page
    tools: {
      eyebrow: 'Assessment Tools',
      title: 'The 4-CAS Assessment Suite',
      desc: 'Professional-grade tools built on the 4-CAS framework, designed for educators, coordinators, and researchers.',
      desktopTitle: 'Desktop Assessment Tool',
      desktopSubtitle: 'Python / Tkinter — Available Now',
      desktopDesc: 'A fully-featured desktop application that walks educators through 4-CAS assessment, automatically calculating scores and generating detailed student reports across four dimensions.',
      enVersion: 'English Version',
      zhVersion: 'Chinese Version',
      features: [
        { title: 'Guided Assessment Workflow', desc: 'Step-by-step process covering all four dimensions' },
        { title: 'Auto Scoring & Grading', desc: 'Built-in algorithms for scores and A/B/C/D grades' },
        { title: 'Student Reports', desc: 'Generate printable PDF reports per student' },
        { title: 'Dual Language UI', desc: 'Full English and Chinese interface support' },
        { title: 'Offline Operation', desc: 'Runs locally — no internet connection required' },
        { title: 'Data Export', desc: 'Export results in CSV for further analysis' },
      ],
      webBadge: 'In Development',
      webTitle: 'Web Platform — Coming Soon',
      webDesc: 'A cloud-native web platform is currently under development. The web version will support collaborative assessment, class-level analytics, and seamless integration with existing school systems.',
      webCta: 'Notify Me on Launch',
    },

    // Forms page
    forms: {
      eyebrow: 'Resources & Forms',
      title: 'Resources & Downloads',
      desc: 'Assessment forms, implementation toolkits, and research presentations — everything you need to understand and pilot the 4-CAS framework.',
      resourcesNav: 'Research Resources',

      // Section 1: Pilot 14 forms
      pilotTitle: 'Pilot Assessment — 14 Forms',
      pilotSubtitle: 'Revised Edition · Assessment Tool Companion',
      pilotDesc: 'Fourteen specialized forms covering the full pilot lifecycle, from red-line self-check to teaching evaluation rubrics.',
      pilotForms: [
        { num: 'F01', name: 'Red Line Self-Check', stage: 'Pre-flight', url: 'assets/forms/zh/4CAS_Form01_RedLine.docx' },
        { num: 'F02', name: 'Project Overview', stage: 'Pre-flight', url: 'assets/forms/zh/4CAS_Form02_ProjectOverview.docx' },
        { num: 'F03', name: 'Stage 1 — Inquiry & Topic Selection', stage: 'Stage 1', url: 'assets/forms/zh/4CAS_Form03_Stage1_InquiryTopicSelection.docx' },
        { num: 'F04', name: 'Stage 2 — Planning & Preparation', stage: 'Stage 2', url: 'assets/forms/zh/4CAS_Form04_Stage2_PlanningPreparation.docx' },
        { num: 'F05', name: 'Stage 3 — Action & Implementation', stage: 'Stage 3', url: 'assets/forms/zh/4CAS_Form05_Stage3_ActionImplementation.docx' },
        { num: 'F06', name: 'Stage 4 — Reflection & Presentation', stage: 'Stage 4', url: 'assets/forms/zh/4CAS_Form06_Stage4_ReflectionPresentation.docx' },
        { num: 'F07', name: 'Red Line Review Decision', stage: 'Review', url: 'assets/forms/zh/4CAS_Form07_RedLineReviewDecision.docx' },
        { num: 'F08', name: 'Pilot Screening Risk Assessment', stage: 'Review', url: 'assets/forms/zh/4CAS_Form08_PilotScreeningRiskAssessment.docx' },
        { num: 'F09', name: 'Pilot Ethical Compliance Review', stage: 'Review', url: 'assets/forms/zh/4CAS_Form09_PilotEthicalComplianceReview.docx' },
        { num: 'F10', name: 'On-Site Observation Record', stage: 'Research', url: 'assets/forms/zh/4CAS_Form10_OnSiteObservationRecord.docx' },
        { num: 'F11', name: 'Semi-Structured Interview Record', stage: 'Research', url: 'assets/forms/zh/4CAS_Form11_SemiStructuredInterviewRecord.docx' },
        { num: 'F12', name: 'Pilot Progress Tracking', stage: 'Research', url: 'assets/forms/zh/4CAS_Form12_PilotProgressTracking.docx' },
        { num: 'F13', name: 'Teaching Evaluation Rubric', stage: 'Research', url: 'assets/forms/zh/4CAS_Form13_TeachingEvaluationRubric.docx' },
        { num: 'F14', name: 'Conference Journal Archiving', stage: 'Archive', url: 'assets/forms/zh/4CAS_Form14_ConferenceJournalArchiving.docx' },
      ],

      // Section 2: Formal 5 forms
      formalTitle: 'Formal Implementation — 5 Forms',
      formalSubtitle: 'Streamlined Edition · For Regular School Use',
      formalDesc: 'Five streamlined forms for day-to-day implementation after the pilot phase, covering the essentials from project initiation to final review.',
      formalOverview: { name: 'Five-Form Comparison Guide', url: 'assets/forms/zh/正式实施00_五表对照.docx' },
      formalForms: [
        { num: '01', name: 'Project Red Line Self-Check', url: 'assets/forms/zh/正式实施01_立项红线自查.docx' },
        { num: '02', name: 'Project Card', url: 'assets/forms/zh/正式实施02_项目卡.docx' },
        { num: '03', name: 'Action Record', url: 'assets/forms/zh/正式实施03_行动记录.docx' },
        { num: '04', name: 'Reflection & Closure', url: 'assets/forms/zh/正式实施04_反思结项.docx' },
        { num: '05', name: 'Teacher Review Decision', url: 'assets/forms/zh/正式实施05_教师审核判定.docx' },
      ],

      // Section 3: Research PPT resources
      researchTitle: 'Research Presentations',
      researchSubtitle: '4-CAS Framework Deck Series',
      researchDesc: 'Two presentation decks — English and Chinese — introducing the 4-CAS framework for seminars, workshops, and discussion.',
      researchPpts: [
        { title: '4-CAS Framework Presentation', lang: 'English', desc: 'Full framework overview deck', url: 'assets/ppt/4CAS-Framework-Presentation-EN.pptx' },
        { title: '4CAS Framework Discussion Draft', lang: '中文 · Chinese', desc: 'Chinese edition with assessment tool supplement', url: 'assets/ppt/4CAS-Framework-Discussion-ZH.pptx' },
      ],

      download: 'Download',
      viewGuide: 'View Guide',
    },

    // About page
    about: {
      eyebrow: 'About 4-CAS',
      title: 'Origins & Vision',
      intro: '4-CAS grew from a single question: in an age where artificial intelligence is reshaping every field of human endeavor, how do we ensure that experiential learning still serves genuine student growth — and is not reduced to a performative checkbox on a college application?',
      intro2: 'The framework was created by an independent educational researcher, drawing on years of work in assessment design, curriculum innovation, and the intersection of AI with K-12 education. It has been developed through iterative classroom research and ongoing collaboration with international school practitioners.',
      visionTitle: 'Our Vision',
      visionDesc: 'Through AI-enabled education, return to the true essence of learning — cultivating students\' autonomous agency, independent judgment, and inner-driven responsibility.',
      visionPoints: [
        'Autonomous agency',
        'Independent judgment',
        'Inner-driven responsibility',
      ],
      founderTitle: 'Founder',
      founder: {
        name: 'Founder & Principal Investigator',
        role: 'Independent Educational Researcher',
        bio: 'The originator of the 4-CAS theory. Formerly a medical technology entrepreneur, and a graduate of Nanjing Medical University.',
      },
      pilotTitle: 'Pilot School',
      pilotSubtitle: 'Kunming Beanstalk International School',
      pilotDesc: 'Kunming Beanstalk International School is the official pilot institution for the 4-CAS framework. As an established IB World School with a strong commitment to innovation in teaching and learning, the school provides a rigorous, real-world testing ground for the assessment methodology across primary and secondary grade levels.',
      badges: ['IB World School', 'K-12 International Curriculum', 'Pilot Since 2025', 'Kunming, Yunnan'],
      partnerTitle: 'Partner & Collaborate',
      partnerDesc: 'Interested in piloting 4-CAS at your school, co-developing research, or exploring partnership opportunities? We welcome conversations with schools, educators, and research institutions.',
      partnerCta: 'Get in Touch',
    },

    // Contact page
    contact: {
      eyebrow: 'Get in Touch',
      title: 'Contact Us',
      desc: 'Interested in learning more about 4-CAS, partnering on research, or piloting the framework at your school? We would love to hear from you.',
      email: { label: 'Email', value: 'info@4-cas.org' },
      address: { label: 'Address', value: 'Kunming, Yunnan, China' },
      academic: { label: 'Research Inquiries', value: 'research@4-cas.org' },
      formTitle: 'Send a Message',
      formName: 'Name',
      formEmail: 'Email',
      formSubject: 'Subject',
      formMessage: 'Message',
      formSubmit: 'Send Message',
    },

    // Footer
    footer: {
      tagline: 'An original framework for AI-empowered experiential education.',
      explore: 'Explore',
      resources: 'Resources',
      connect: 'Connect',
      rights: '© 2026 4-CAS. All rights reserved.',
      domain: '4-cas.org',
    },
  },

  zh: {
    // 品牌
    brand: {
      name: '4-CAS',
      tagline: 'Master AI, Master Life',
      slogan: '驾驭AI，驾驭人生',
    },

    // Nav
    nav: {
      home: '首页',
      theory: '理论',
      tools: '工具',
      forms: '资源',
      about: '关于',
      contact: '联系',
    },

    // Home / Hero
    hero: {
      eyebrow: 'CAS的结构性重构',
      title: '回归体验式学习的',
      titleItalic: '教育本源',
      subtitle: '4-CAS是一套AI时代原创的体验式教育治理框架。它重新定义了学习全链条的权责分配——赋能学生、厘清教师边界、让实践回归育人本质。',
      taglineMain: 'Master AI, Master Life',
      taglineSub: '驾驭AI，驾驭人生',
      ctaPrimary: '了解理论体系',
      ctaSecondary: '下载研究资源',
      scroll: '向下滚动',
    },

    homeFeatures: {
      eyebrow: '四大支柱',
      title: '四大底层支柱',
      desc: '4-CAS建立在四根相互支撑的支柱之上，共同重构AI时代体验式学习的治理体系。',
      items: [
        { num: '01', title: 'AI赋能能力', desc: '技术赋能抬高评价标尺，而非降低标准。多轮迭代、对比设计、基于证据的批判性修订。' },
        { num: '02', title: '学生自主主导', desc: '学生拥有选题、设计、资源与反思的自主权。从被动执行脚本到主动创造、建构知识。' },
        { num: '03', title: '开放服务生态', desc: '服务商是论证参与者而非决策者。学生掌握最终取舍权，透明化与AI辅助判断破除资源垄断。' },
        { num: '04', title: '教师边界监督', desc: '教师从决策者转型为学术底线守护者。监管红线前置公示，风险量化可视化评估。' },
      ],
    },

    // Theory page
    theory: {
      eyebrow: '理论框架',
      title: '4-CAS 理论体系',
      desc: '4-CAS不是对现有CAS实践的修补，而是在AI极大拓展学生能力边界的时代，对教育权责分配的结构性重构。',
      originsTitle: '研究缘起',
      originsSubtitle: '当前CAS实践的三大结构性问题',
      originsDesc: '体验式学习正被商业化与形式化侵蚀，逐渐沦为包装履历、升学加分的工具，而非服务学生真实成长。',
      origins: [
        {
          title: '商业化泛滥',
          desc: '付费标准化"海外公益套餐"泛滥，第三方机构包办全流程，学生沦为"购买者"。',
        },
        {
          title: '评审主观化',
          desc: '缺乏清晰可量化的审核体系，教师以主观经验随意驳回学生提案，标准不透明。',
        },
        {
          title: 'AI造假门槛降低',
          desc: '生成式AI可低成本生成虚假策划、报告与深度反思，人工识别难度大。',
        },
      ],
      positioningTitle: '不是修补，而是结构性重构',
      positioningDesc: '4-CAS重新定义教育全链条的权责分配：谁拥有选题决策权、谁提供资源支持、谁承担实施成本、谁履行监管叫停职责、谁完成成效评价。',
      pillarsTitle: '四大核心支柱',
      pillars: [
        {
          num: '01',
          short: 'AI',
          name: 'AI赋能能力体系',
          desc: 'AI技术拓展了学生实践与研究的能力边界，评价标尺必须同步抬高——而非降低标准。',
          forward: {
            label: '正向赋能',
            items: ['多轮提示词迭代', '多方案横向对比', '全流程证据留存', '批判性修订优化'],
          },
          warning: {
            label: '反向警示',
            items: ['警惕"拿来主义"定稿', '警惕丧失独立判断', '警惕消解成果主体性'],
          },
        },
        {
          num: '02',
          short: 'SL',
          name: '学生自主主导权',
          desc: '从"被动执行脚本"向"主动创造"转变。学生在项目全生命周期中行使自主权。',
          forward: {
            label: '四项自主',
            items: ['自主选题', '独立设计', '自选资源', '自主反思'],
          },
        },
        {
          num: '03',
          short: 'OE',
          name: '开放服务生态',
          desc: '服务商重塑为论证参与者——提供风险预警与专业咨询，但最终取舍权始终在学生手中。',
          forward: {
            label: '生态原则',
            items: ['破除资源垄断', '开放选择权', '全流程透明化', 'AI赋能科学决策'],
          },
        },
        {
          num: '04',
          short: 'TB',
          name: '教师边界化监督',
          desc: '教师从"决策者"转型为"引导者"和学术底线守护者。监管红线前置公示，风险量化可视化评估。',
          forward: {
            label: '核心职责',
            items: ['划定科研伦理红线', '把控学术规范标准', '监管红线前置公示', '可视化风险量化评估'],
          },
        },
      ],
      riskTitle: '五维风险评分模块',
      riskSubtitle: '0-5分量化评估体系',
      riskDesc: '每个项目提案均在五个维度上进行0-5分量化评估，使审核决策客观、可比、透明。',
      riskDims: [
        { name: '安全暴露风险', desc: '学生在身体、心理、声誉等方面的风险暴露程度' },
        { name: '教育成效权重', desc: '真实学习成效权重 vs. 表演性产出的比例' },
        { name: '伦理隐患等级', desc: '研究方法与影响中潜在的伦理违规风险' },
        { name: '监管配套完善度', desc: '监督机制与配套流程的完备程度' },
        { name: '落地可控程度', desc: '实际执行过程的可控性与可操作性' },
      ],
      integrityTitle: '学术诚信规范',
      integrityAllowed: {
        label: '合法AI辅助',
        items: ['多角度创意头脑风暴', '场景推演对比', '逻辑框架优化', '设计深度探究提问清单'],
      },
      integrityForbidden: {
        label: '明令禁止',
        items: ['编造未实施的活动', '虚构个人体验', '外包核心创作', 'AI生成虚假佐证材料'],
      },
      toolTitle: '配套评测工具理念',
      toolSubtitle: '"对话即证据"',
      toolDesc: '学生与AI对话，系统自动留存过程证据。测评建立在思考轨迹之上，而非仅看润色后的最终产物。',
      toolStages: [
        { label: '阶段一', name: '基线测评 Baseline', desc: '建立个人起点档案' },
        { label: '阶段二', name: '正式训练 Training', desc: '多轮迭代留下思考轨迹' },
        { label: '阶段三', name: '复测 Re-assessment', desc: '对照基线观察四维变化' },
      ],
      toolDimsTitle: '四维评分体系',
      toolDimsDesc: '每个维度各25分，总分对应A/B/C/D四级评定。',
      toolDims: [
        { name: '真实性', score: 25 },
        { name: 'AI素养', score: 25 },
        { name: '规划能力', score: 25 },
        { name: '反思留痕', score: 25 },
      ],
      scopeTitle: '适用范围',
      scopeDesc: '4-CAS是一套通用型实践育人治理框架，可覆盖多种项目类型与学段。',
      scopeItems: [
        'IB CAS课程',
        'A-Level EPQ',
        '爱丁堡公爵奖',
        '全校社团活动',
        '全学段课外拓展实践',
      ],
    },

    // Tools page
    tools: {
      eyebrow: '测评工具',
      title: '4-CAS 测评工具套件',
      desc: '基于4-CAS框架打造的专业级测评工具，专为教育工作者、协调员与研究者设计。',
      desktopTitle: '桌面版测评工具',
      desktopSubtitle: 'Python / Tkinter — 现已可用',
      desktopDesc: '一款功能完备的桌面应用程序，引导教育工作者完成4-CAS评估的全流程，自动计算分数并生成详细的多维度学生报告。',
      enVersion: '英文版界面',
      zhVersion: '中文版界面',
      features: [
        { title: '引导式测评流程', desc: '覆盖全部四大维度的分步工作流' },
        { title: '自动评分定级', desc: '内置评分算法与A/B/C/D等级计算' },
        { title: '学生报告生成', desc: '为每位学生生成可打印的PDF报告' },
        { title: '双语界面', desc: '完整的中英文界面切换支持' },
        { title: '离线运行', desc: '本地运行，无需联网' },
        { title: '数据导出', desc: 'CSV格式导出，便于深入分析' },
      ],
      webBadge: '开发中',
      webTitle: 'Web 平台 — 即将推出',
      webDesc: '云端Web平台目前正在开发中。Web版将支持协作测评、班级级数据分析，并可与现有校园系统无缝集成。',
      webCta: '上线时通知我',
    },

    // Forms page
    forms: {
      eyebrow: '资源与表单',
      title: '资源下载',
      desc: '测评表单、实施工具包与研究演示文稿——全面了解与试点4-CAS框架所需的一切资源。',
      resourcesNav: '研究资源',

      pilotTitle: '试点评测 · 14份表单',
      pilotSubtitle: '评测工具配套修订版',
      pilotDesc: '覆盖从红线自查到教学评估量规的全试点生命周期，共14份专业表单。',
      pilotForms: [
        { num: 'F01', name: '红线自查', stage: '前置', url: 'assets/forms/zh/4CAS_Form01_RedLine.docx' },
        { num: 'F02', name: '项目概览', stage: '前置', url: 'assets/forms/zh/4CAS_Form02_ProjectOverview.docx' },
        { num: 'F03', name: '阶段一 · 选题立项', stage: '阶段一', url: 'assets/forms/zh/4CAS_Form03_Stage1_InquiryTopicSelection.docx' },
        { num: 'F04', name: '阶段二 · 规划准备', stage: '阶段二', url: 'assets/forms/zh/4CAS_Form04_Stage2_PlanningPreparation.docx' },
        { num: 'F05', name: '阶段三 · 行动实施', stage: '阶段三', url: 'assets/forms/zh/4CAS_Form05_Stage3_ActionImplementation.docx' },
        { num: 'F06', name: '阶段四 · 反思展示', stage: '阶段四', url: 'assets/forms/zh/4CAS_Form06_Stage4_ReflectionPresentation.docx' },
        { num: 'F07', name: '红线审核判定', stage: '审核', url: 'assets/forms/zh/4CAS_Form07_RedLineReviewDecision.docx' },
        { num: 'F08', name: '试点筛选风险评估', stage: '审核', url: 'assets/forms/zh/4CAS_Form08_PilotScreeningRiskAssessment.docx' },
        { num: 'F09', name: '试点伦理合规审查', stage: '审核', url: 'assets/forms/zh/4CAS_Form09_PilotEthicalComplianceReview.docx' },
        { num: 'F10', name: '现场观察记录', stage: '研究', url: 'assets/forms/zh/4CAS_Form10_OnSiteObservationRecord.docx' },
        { num: 'F11', name: '半结构化访谈记录', stage: '研究', url: 'assets/forms/zh/4CAS_Form11_SemiStructuredInterviewRecord.docx' },
        { num: 'F12', name: '试点进度追踪', stage: '研究', url: 'assets/forms/zh/4CAS_Form12_PilotProgressTracking.docx' },
        { num: 'F13', name: '教学评估量规', stage: '研究', url: 'assets/forms/zh/4CAS_Form13_TeachingEvaluationRubric.docx' },
        { num: 'F14', name: '研讨日志归档', stage: '归档', url: 'assets/forms/zh/4CAS_Form14_ConferenceJournalArchiving.docx' },
      ],

      formalTitle: '正式实施 · 五表精简版',
      formalSubtitle: '常态化校园使用版',
      formalDesc: '试点成熟后的日常实施版本，五份精简表单覆盖从立项到终审的核心环节。',
      formalOverview: { name: '五表对照说明', url: 'assets/forms/zh/正式实施00_五表对照.docx' },
      formalForms: [
        { num: '01', name: '立项红线自查', url: 'assets/forms/zh/正式实施01_立项红线自查.docx' },
        { num: '02', name: '项目卡', url: 'assets/forms/zh/正式实施02_项目卡.docx' },
        { num: '03', name: '行动记录', url: 'assets/forms/zh/正式实施03_行动记录.docx' },
        { num: '04', name: '反思结项', url: 'assets/forms/zh/正式实施04_反思结项.docx' },
        { num: '05', name: '教师审核判定', url: 'assets/forms/zh/正式实施05_教师审核判定.docx' },
      ],

      researchTitle: '研究演示文稿',
      researchSubtitle: '4-CAS 框架PPT系列',
      researchDesc: '中英文两份演示文稿，介绍4-CAS框架体系——适用于研讨会、工作坊与深度讨论。',
      researchPpts: [
        { title: '4-CAS Framework Presentation', lang: '英文版 · English', desc: '完整框架总览演示', url: 'assets/ppt/4CAS-Framework-Presentation-EN.pptx' },
        { title: '4CAS体系研讨稿（评测工具增补）', lang: '中文版', desc: '含评测工具增补的研讨稿', url: 'assets/ppt/4CAS-Framework-Discussion-ZH.pptx' },
      ],

      download: '下载',
      viewGuide: '查看说明',
    },

    // About page
    about: {
      eyebrow: '关于 4-CAS',
      title: '起源与愿景',
      intro: '4-CAS框架源于一个根本问题：在人工智能正在重塑人类各领域的时代，如何确保体验式学习仍然服务于学生的真实成长，而不是退化为大学申请材料上一个走过场的勾选框？',
      intro2: '该框架由一位独立教育研究者原创，融合了多年教育评估、课程创新以及AI与K-12教育交叉领域的研究经验，通过迭代式课堂研究与和国际学校实践者的持续协作逐步发展成型。',
      visionTitle: '理论愿景',
      visionDesc: '通过AI赋能回归教育本源，培养学生的自主行动力、独立判断力与内生责任感。',
      visionPoints: [
        '自主行动力',
        '独立判断力',
        '内生责任感',
      ],
      founderTitle: '创始人',
      founder: {
        name: '创始人 & 首席研究者',
        role: '独立教育研究者',
        bio: '4-CAS理论的原创者。前医疗科技企业经营者，南京医科大学毕业。',
      },
      pilotTitle: '试点合作学校',
      pilotSubtitle: '昆明青苗学校',
      pilotDesc: '昆明青苗学校是4-CAS框架的官方试点机构。作为一所在教学创新方面深耕多年的IB世界学校，该校为中小学各年级的测评方法论提供了严谨的、真实的实践检验场。',
      badges: ['IB世界学校', 'K-12 国际课程', '2025年启动试点', '云南 · 昆明'],
      partnerTitle: '合作洽谈',
      partnerDesc: '有意在贵校试点4-CAS、开展研究合作或探讨其他合作方式？我们欢迎学校、教育工作者与研究机构前来交流。',
      partnerCta: '联系我们',
    },

    // Contact page
    contact: {
      eyebrow: '联系我们',
      title: '取得联系',
      desc: '想了解更多关于4-CAS的信息、开展研究合作，或在您的学校试点该框架？欢迎与我们联系。',
      email: { label: '电子邮箱', value: 'info@4-cas.org' },
      address: { label: '通讯地址', value: '中国 · 云南 · 昆明' },
      academic: { label: '学术合作', value: 'research@4-cas.org' },
      formTitle: '发送消息',
      formName: '姓名',
      formEmail: '邮箱',
      formSubject: '主题',
      formMessage: '留言',
      formSubmit: '发送',
    },

    // Footer
    footer: {
      tagline: 'AI赋能体验式教育的原创治理框架。',
      explore: '探索',
      resources: '资源',
      connect: '联系',
      rights: '© 2026 4-CAS 保留所有权利。',
      domain: '4-cas.org',
    },
  },

  ko: {
    // 브랜드
    brand: {
      name: '4-CAS',
      tagline: 'Master AI, Master Life',
      slogan: 'AI를 마스터하고 인생을 주도하라',
    },

    // Nav
    nav: {
      home: '홈',
      theory: '이론',
      tools: '도구',
      forms: '자료',
      about: '소개',
      contact: '연락처',
    },

    // Home / Hero
    hero: {
      eyebrow: 'CAS의 구조적 재구성',
      title: '체험학습의 본질을',
      titleItalic: '되찾다',
      subtitle: '4-CAS는 AI 시대의 체험교육을 위한 독창적인 거버넌스 프레임워크입니다. 학습 전 과정에 걸친 책임과 권한을 재정의하여 — 학생에게 역량을 부여하고 교사의 경계를 명확히 하며 실천의 교육적 가치를 회복합니다.',
      taglineMain: 'Master AI, Master Life',
      taglineSub: 'AI를 마스터하고 인생을 주도하라',
      ctaPrimary: '프레임워크 탐구',
      ctaSecondary: '리소스 다운로드',
      scroll: '스크롤',
    },

    homeFeatures: {
      eyebrow: '네 가지 기둥',
      title: '네 가지 근간 기둥',
      desc: '4-CAS는 서로 의존하는 네 가지 기둥 위에 서 있으며, AI 시대 체험학습의 거버넌스를 함께 재구성합니다.',
      items: [
        { num: '01', title: 'AI 임파워먼트', desc: '기술은 평가의 기준을 높일 뿐 낮추지 않습니다. 다중 반복, 비교 설계, 증거 기반 비판적 수정.' },
        { num: '02', title: '학생 주도성', desc: '학생이 주제 선정, 설계, 자원, 성찰의 주인이 됩니다. 각본화된 실행에서 능동적 창의적 지식 구성으로.' },
        { num: '03', title: '개방형 서비스 생태계', desc: '서비스 제공자는 의사결정자가 아니라 대화 파트너입니다. 학생이 최종 선택권을 가지며, 투명성과 AI 지원 판단이 자원 독점을 깹니다.' },
        { num: '04', title: '교사 경계 감독', desc: '교사는 결정자에서 학문적 진실성의 수호자로 전환합니다. 레드라인은 사전에 공개되고, 위험은 정량화되어 시각화됩니다.' },
      ],
    },

    // Theory page
    theory: {
      eyebrow: '이론 프레임워크',
      title: '4-CAS 이론',
      desc: '4-CAS는 기존 CAS 실천에 대한 덧방이 아닙니다 — AI가 학생의 성취 가능한 경계를 근본적으로 넓힌 시대에, 교육적 책임 분배에 대한 구조적 재구성입니다.',
      originsTitle: '연구 배경',
      originsSubtitle: '현재 CAS 실천의 세 가지 구조적 위기',
      originsDesc: '체험학습은 상업화와 형식화에 의해 훼손되어, 진정한 학생 성장에 기여하기보다 스펙 쌓기 도구로 전락하고 있습니다.',
      origins: [
        {
          title: '상업화 만연',
          desc: '유료 표준화 "해외 봉사 패키지"가 범람하고 있습니다. 제3자 기관이 전 과정을 대행하며 학생은 단순한 구매자로 전락합니다.',
        },
        {
          title: '심사의 주관성',
          desc: '명확하고 정량화된 심사 기준이 부재합니다. 교사는 투명한 기준이 아닌 주관적 경험에 기반해 학생 제안을 기각합니다.',
        },
        {
          title: 'AI 위조 장벽 하락',
          desc: '생성형 AI는 적은 비용으로 가짜 기획안, 보고서, 깊은 성찰문을 생산할 수 있으며 — 교사가 수작업으로 식별하기 거의 불가능합니다.',
        },
      ],
      positioningTitle: '구조적 재구성',
      positioningDesc: '4-CAS는 전 과정에 걸친 교육적 책임 분배를 재정의합니다: 누가 주제를 결정하는가, 누가 자원을 지원하는가, 누가 실행 비용을 부담하는가, 누가 감독하고 개입하는가, 누가 성과를 평가하는가.',
      pillarsTitle: '네 가지 핵심 기둥',
      pillars: [
        {
          num: '01',
          short: 'AI',
          name: 'AI 임파워먼트 체계',
          desc: 'AI 기술은 학생이 성취할 수 있는 경계를 넓힙니다. 평가 기준은 이에 맞춰 상승해야지 — 낮춰서는 안 됩니다.',
          forward: {
            label: '순방향 임파워먼트',
            items: ['다중 프롬프트 반복', '다안 가로 비교', '전과정 증거 보존', '비판적 수정 최적화'],
          },
          warning: {
            label: '역방향 경고',
            items: ['가져다 쓰는 최종안 경계', '독립적 판단 상실', '결과에 대한 주체성 훼손'],
          },
        },
        {
          num: '02',
          short: 'SL',
          name: '학생 주도성',
          desc: '"수동적 각본 실행"에서 "능동적 창조"로 전환합니다. 학생은 프로젝트 전 생애주기에 걸쳐 자율성을 행사합니다.',
          forward: {
            label: '네 가지 자율',
            items: ['자율적 주제 선정', '독립적 프로젝트 설계', '자율적 자원 선택', '진정한 자기 성찰'],
          },
        },
        {
          num: '03',
          short: 'OE',
          name: '개방형 서비스 생태계',
          desc: '서비스 제공자는 논증 참여자로 재위치화됩니다 — 위험 경고와 전문적 조언을 제공하되 최종 결코 내리지 않습니다.',
          forward: {
            label: '생태계 원칙',
            items: ['자원 독점 타파', '제공자 선택권 개방', '전과정 투명화', 'AI 지원 과학적 의사결정'],
          },
        },
        {
          num: '04',
          short: 'TB',
          name: '교사 경계 감독',
          desc: '교사는 결정자에서 안내자이자 학문적 선의 수호자로 전환합니다. 레드라인은 사전 공개되며, 위험은 정량화되고 시각화됩니다.',
          forward: {
            label: '핵심 책무',
            items: ['연구윤리 레드라인 설정', '학문 진실성 기준 수호', '레드라인 사전 공개', '시각적 정량 위험 평가'],
          },
        },
      ],
      riskTitle: '오차원 위험 평가',
      riskSubtitle: '0–5점 정량 척도',
      riskDesc: '모든 프로젝트 제안은 다섯 가지 위험 차원에 걸쳐 0–5점 척도로 평가되며, 객관적이고 비교 가능하며 투명한 심사 결정을 가능하게 합니다.',
      riskDims: [
        { name: '안전 노출 위험', desc: '학생의 신체적·심리적·평판적 위험 노출 정도' },
        { name: '교육적 효과 가중치', desc: '진정한 학습 성과 대비 수행적 산출물의 비율' },
        { name: '윤리적 우려 수준', desc: '연구 방법과 영향에서의 잠재적 윤리 위반 위험' },
        { name: '거버넌스 성숙도', desc: '감독 메커니즘과 지원 프로세스의 완비성' },
        { name: '실행 가능성', desc: '현장 실행의 실질적 통제 가능성' },
      ],
      integrityTitle: '학문 진실성 규범',
      integrityAllowed: {
        label: '합법적 AI 지원',
        items: ['다각도 브레인스토밍', '시나리오 시뮬레이션과 비교', '논리 프레임워크 정제', '심층 탐구 질문 목록 설계'],
      },
      integrityForbidden: {
        label: '엄격히 금지',
        items: ['실시하지 않은 활동 조작', '개인 경험 허위 기술', '핵심 창작 외주', 'AI 생성 가짜 증빙 자료'],
      },
      toolTitle: '평가 도구 철학',
      toolSubtitle: '"대화가 곧 증거"',
      toolDesc: '학생은 AI와 대화하고, 시스템은 자동으로 과정 증거를 보존합니다. 평가는 다듬어진 최종 결과물만이 아니라 사고의 흔적 위에 세워집니다.',
      toolStages: [
        { label: '단계 01', name: '기준선 평가 Baseline', desc: '개인별 출발점 프로파일 구축' },
        { label: '단계 02', name: '정규 훈련 Training', desc: '다중 반복을 통한 사고 흔적 남기기' },
        { label: '단계 03', name: '재평가 Re-assessment', desc: '기준선과 비교하여 변화 관찰' },
      ],
      toolDimsTitle: '사차원 점수 체계',
      toolDimsDesc: '각 차원 0–25점. 총점은 A / B / C / D 등급으로 매핑.',
      toolDims: [
        { name: '진정성', score: 25 },
        { name: 'AI 리터러시', score: 25 },
        { name: '기획력', score: 25 },
        { name: '성찰 흔적', score: 25 },
      ],
      scopeTitle: '적용 범위',
      scopeDesc: '4-CAS는 보편적인 체험교육 거버넌스 프레임워크로, 다양한 프로그램 유형과 학년에 걸쳐 적용 가능합니다.',
      scopeItems: [
        'IB CAS 프로그램',
        'A-Level EPQ',
        '에든버러 공작상',
        '전교 동아리 활동',
        '전 학년 체험활동',
      ],
    },

    // Tools page
    tools: {
      eyebrow: '평가 도구',
      title: '4-CAS 평가 도구 모음',
      desc: '4-CAS 프레임워크를 기반으로 구축된 전문가급 평가 도구로, 교육자, 코디네이터, 연구자를 위해 설계되었습니다.',
      desktopTitle: '데스크톱 평가 도구',
      desktopSubtitle: 'Python / Tkinter — 현재 사용 가능',
      desktopDesc: '교육자가 4-CAS 평가 전 과정을 단계별로 진행하도록 안내하고, 점수를 자동 계산하며 네 가지 차원에 걸친 상세한 학생 보고서를 생성하는 완전한 기능의 데스크톱 애플리케이션입니다.',
      enVersion: '영어 버전',
      zhVersion: '중국어 버전',
      features: [
        { title: '가이드 평가 워크플로우', desc: '네 가지 차원 전체를 아우르는 단계별 프로세스' },
        { title: '자동 채점 및 등급', desc: '내장된 점수 및 A/B/C/D 등급 계산 알고리즘' },
        { title: '학생 보고서', desc: '학생별 인쇄 가능한 PDF 보고서 생성' },
        { title: '다국어 UI', desc: '영어와 중국어 인터페이스 완전 지원' },
        { title: '오프라인 작동', desc: '로컬에서 실행 — 인터넷 연결 불필요' },
        { title: '데이터 내보내기', desc: 'CSV 형식으로 결과 내보내기' },
      ],
      webBadge: '개발 중',
      webTitle: '웹 플랫폼 — 출시 예정',
      webDesc: '완전한 클라우드 네이티브 웹 플랫폼이 현재 개발 중입니다. 웹 버전은 협업 평가, 학급 단위 분석, 기존 학교 시스템과의 원활한 통합을 지원할 예정입니다.',
      webCta: '출시 알림 받기',
    },

    // Forms page
    forms: {
      eyebrow: '자료 및 양식',
      title: '자료실',
      desc: '평가 양식, 실행 툴킷, 연구 발표 자료 — 4-CAS 프레임워크를 이해하고 파일럿 운영하는 데 필요한 모든 자료입니다.',
      resourcesNav: '연구 자료',

      pilotTitle: '파일럿 평가 · 14종 양식',
      pilotSubtitle: '평가 도구配套 개정판',
      pilotDesc: '레드라인 자가점검부터 교수 평가 루브릭까지 파일럿 전 생애주기를 아우르는 14종의 전문 양식.',
      pilotForms: [
        { num: 'F01', name: '레드라인 자가점검', stage: '사전', url: 'assets/forms/ko/01_Form01_RedLine_SelfCheck_KO_EN.docx' },
        { num: 'F02', name: '프로젝트 개요', stage: '사전', url: 'assets/forms/ko/02_Form02_ProjectOverview_KO_EN.docx' },
        { num: 'F03', name: '단계 1 · 주제 선정', stage: '단계 1', url: 'assets/forms/ko/03_Form03_Stage1_InquiryTopicSelection_KO_EN.docx' },
        { num: 'F04', name: '단계 2 · 기획 준비', stage: '단계 2', url: 'assets/forms/ko/04_Form04_Stage2_PlanningPreparation_KO_EN.docx' },
        { num: 'F05', name: '단계 3 · 실행 실시', stage: '단계 3', url: 'assets/forms/ko/05_Form05_Stage3_ActionImplementation_KO_EN.docx' },
        { num: 'F06', name: '단계 4 · 성찰 발표', stage: '단계 4', url: 'assets/forms/ko/06_Form06_Stage4_ReflectionPresentation_KO_EN.docx' },
        { num: 'F07', name: '레드라인 심사 판정', stage: '심사', url: 'assets/forms/ko/07_Form07_RedLineReviewDecision_KO_EN.docx' },
        { num: 'F08', name: '파일럿 선별 위험 평가', stage: '심사', url: 'assets/forms/ko/08_Form08_PilotScreeningRiskAssessment_KO_EN.docx' },
        { num: 'F09', name: '파일럿 윤리 준수 심사', stage: '심사', url: 'assets/forms/ko/09_Form09_PilotEthicalComplianceReview_KO_EN.docx' },
        { num: 'F10', name: '현장 관찰 기록', stage: '연구', url: 'assets/forms/ko/10_Form10_OnSiteObservationRecord_KO_EN.docx' },
        { num: 'F11', name: '반구조화 면접 기록', stage: '연구', url: 'assets/forms/ko/11_Form11_SemiStructuredInterviewRecord.docx' },
        { num: 'F12', name: '교사·심사자 평가 기준 보정 기록', stage: '연구', url: 'assets/forms/ko/12_Form12_TeacherReviewerCalibrationLog_KO_EN.docx' },
        { num: 'F13', name: '4-CAS 현장 적용 교육연구 평가표', stage: '연구', url: 'assets/forms/ko/13_Form13_TeachingEvaluationRubric.docx' },
        { num: 'F14', name: '평가 도구 출력·익명화 데이터 엑스포트', stage: '아카이브', url: 'assets/forms/ko/14_Form14_ToolOutputAnonymizedExport_KO_EN.docx' },
      ],

      formalTitle: '정식 운영 · 5종 양식',
      formalSubtitle: '간소화판 · 정규 학교 운영용',
      formalDesc: '파일럿 단계 이후 일상적 운영을 위한 다섯 가지 간소화된 양식으로, 착수부터 최종 심사까지 핵심 과정을 아우릅니다.',
      formalOverview: { name: '오폼 비교 가이드', url: 'assets/forms/zh/正式实施00_五表对照.docx' },
      formalForms: [
        { num: '01', name: '프로젝트 레드라인 자가점검', url: 'assets/forms/zh/正式实施01_立项红线自查.docx' },
        { num: '02', name: '프로젝트 카드', url: 'assets/forms/zh/正式实施02_项目卡.docx' },
        { num: '03', name: '활동 기록', url: 'assets/forms/zh/正式实施03_行动记录.docx' },
        { num: '04', name: '성찰 및 마감', url: 'assets/forms/zh/正式实施04_反思结项.docx' },
        { num: '05', name: '교사 심사 판정', url: 'assets/forms/zh/正式实施05_教师审核判定.docx' },
      ],

      researchTitle: '연구 발표 자료',
      researchSubtitle: '4-CAS 프레임워크 덱 시리즈',
      researchDesc: '영어와 중국어 두 가지 발표 덱으로, 세미나, 워크숍, 심층 토론에 활용할 수 있습니다.',
      researchPpts: [
        { title: '4-CAS Framework Presentation', lang: '영어 · English', desc: '완전한 프레임워크 개요 덱', url: 'assets/ppt/4CAS-Framework-Presentation-EN.pptx' },
        { title: '4CAS Framework Discussion Draft', lang: '중국어 · Chinese', desc: '평가 도구 보충판 중문판', url: 'assets/ppt/4CAS-Framework-Discussion-ZH.pptx' },
      ],

      download: '다운로드',
      viewGuide: '가이드 보기',
    },

    // About page
    about: {
      eyebrow: '4-CAS 소개',
      title: '기원과 비전',
      intro: '4-CAS 프레임워크는 하나의 근본적인 질문에서 출발했습니다: 인공지능이 인간 활동의 모든 분야를 재편하는 시대에, 체험학습이 여전히 학생의 진정한 성장에 기여하도록 — 대학 지원서의 형식적인 체크박스로 전락하지 않도록 — 어떻게 보장할 수 있을까?',
      intro2: '이 프레임워크는 독립 교육 연구자가 창안했으며, 교육 평가, 교육과정 혁신, AI와 K-12 교육의 교차 분야에서 다년간의 연구 경험을 바탕으로 합니다. 반복적인 교실 연구와 국제학교 실천가들과의 지속적인 협력을 통해 개발되었습니다.',
      visionTitle: '이론 비전',
      visionDesc: 'AI를 통한 교육으로 교육의 본질로 돌아가 — 학생의 자율적 행동력, 독립적 판단력, 내면에서 비롯된 책임감을 기릅니다.',
      visionPoints: [
        '자율적 행동력',
        '독립적 판단력',
        '내면의 책임감',
      ],
      founderTitle: '창립자',
      founder: {
        name: '창립자 & 수석 연구원',
        role: '독립 교육 연구자',
        bio: '4-CAS 이론의 창시자. 전 의료기술 기업 경영자이며 난징의과대학을 졸업했습니다.',
      },
      pilotTitle: '파일럿 협력 학교',
      pilotSubtitle: '쿤밍 빈스톡 국제학교',
      pilotDesc: '쿤밍 빈스톡 국제학교는 4-CAS 프레임워크의 공식 파일럿 기관입니다. 교수학습 혁신에 강한 의지를 가진 유서 깊은 IB 월드 스쿨로서, 초등 및 중등 학년 전반에 걸쳐 평가 방법론에 대한 엄격하고 실제적인 시험장을 제공합니다.',
      badges: ['IB 월드 스쿨', 'K-12 국제 교육과정', '2025년부터 파일럿 운영', '윈난성 쿤밍'],
      partnerTitle: '협력 문의',
      partnerDesc: '귀하의 학교에서 4-CAS를 파일럿 운영하거나, 연구 협력을 진행하거나, 다른 협력 방안을 모색하고 싶으신가요? 학교, 교육자, 연구 기관과의 대화를 환영합니다.',
      partnerCta: '문의하기',
    },

    // Contact page
    contact: {
      eyebrow: '연락하기',
      title: '연락처',
      desc: '4-CAS에 대해 더 알아보고 싶으시거나, 연구에 협력하고 싶으시거나, 귀하의 학교에서 프레임워크를 파일럿 운영하고 싶으신가요? 연락 주시길 바랍니다.',
      email: { label: '이메일', value: 'info@4-cas.org' },
      address: { label: '주소', value: '중국 윈난성 쿤밍' },
      academic: { label: '연구 문의', value: 'research@4-cas.org' },
      formTitle: '메시지 보내기',
      formName: '이름',
      formEmail: '이메일',
      formSubject: '제목',
      formMessage: '메시지',
      formSubmit: '보내기',
    },

    // Footer
    footer: {
      tagline: 'AI로 임파워된 체험교육을 위한 독창적인 프레임워크.',
      explore: '탐색',
      resources: '자료',
      connect: '연결',
      rights: '© 2026 4-CAS. 판권 소유.',
      domain: '4-cas.org',
    },
  },

  ja: {
    // ブランド
    brand: {
      name: '4-CAS',
      tagline: 'Master AI, Master Life',
      slogan: 'AIを極め、人生を舵取る',
    },

    // Nav
    nav: {
      home: 'ホーム',
      theory: '理論',
      tools: 'ツール',
      forms: '資料',
      about: '概要',
      contact: 'お問い合わせ',
    },

    // Home / Hero
    hero: {
      eyebrow: 'CASの構造的再構築',
      title: '体験学習の本質を',
      titleItalic: '取り戻す',
      subtitle: '4-CASは、AI時代における体験教育のための独自のガバナンスフレームワークです。学びの全連鎖にわたる責任と権限を再定義し — 学生に力を与え、教師の役割境界を明らかにし、実践の教育的価値を回復します。',
      taglineMain: 'Master AI, Master Life',
      taglineSub: 'AIを極め、人生を舵取る',
      ctaPrimary: 'フレームワークを探る',
      ctaSecondary: '資料をダウンロード',
      scroll: 'スクロール',
    },

    homeFeatures: {
      eyebrow: '4つの柱',
      title: '4つの基盤となる柱',
      desc: '4-CASは相互に依存する4つの柱の上に成り立ち、AI時代の体験学習のガバナンスを共に再構築します。',
      items: [
        { num: '01', title: 'AIエンパワーメント', desc: 'テクノロジーは評価の基準を高めるのであって、下げるのではない。多ラウンド反復、比較設計、証拠に基づく批判的修正。' },
        { num: '02', title: '学生主導の主体性', desc: '学生がテーマ選択、設計、リソース、省察の主権を持つ。脚本化された実行から、能動的で創造的な知識構築へ。' },
        { num: '03', title: 'オープンサービスエコシステム', desc: 'サービス提供者は意思決定者ではなく対話パートナー。学生が最終的な選択権を持ち、透明性とAI支援による判断が資源独占を崩す。' },
        { num: '04', title: '教師の境界的監督', desc: '教師は決定者から、学術的誠実性の守護者へと転換。レッドラインは事前公開され、リスクは定量化・可視化される。' },
      ],
    },

    // Theory page
    theory: {
      eyebrow: '理論フレームワーク',
      title: '4-CAS 理論',
      desc: '4-CASは既存のCAS実践への当て所ではなく、AIが学生の到達可能な境界を根本的に拡大した時代における、教育的責任分配の構造的再構築です。',
      originsTitle: '研究の背景',
      originsSubtitle: '現在のCAS実践が抱える3つの構造的危機',
      originsDesc: '体験学習は商業化と形式主義によって蝕まれ、学生の真の成長に資するものではなく、履歴書を飾るツールへと堕しつつあります。',
      origins: [
        {
          title: '商業化の氾濫',
          desc: '有料で標準化された「海外ボランティアパッケージ」が氾濫。第三者機関が全行程を代行し、学生は単なる「購入者」に成り下がっている。',
        },
        {
          title: '審査の主観化',
          desc: '明確で定量化可能な審査基準が欠けている。教師は透明な基準ではなく、経験に基づく主観的な理由で学生の提案を却下する。',
        },
        {
          title: 'AIによる偽造の障壁低下',
          desc: '生成AIは低コストで偽の企画書、報告書、深い省察文を生成でき、教師が目視で見分けることはほぼ不可能。',
        },
      ],
      positioningTitle: '構造的再構築',
      positioningDesc: '4-CASは教育の全連鎖にわたる責任分配を再定義します：誰がテーマを決定するのか、誰がリソースを支援するのか、誰が実施コストを負担するのか、誰が監督と介入を行うのか、誰が成果を評価するのか。',
      pillarsTitle: '4つの中核的柱',
      pillars: [
        {
          num: '01',
          short: 'AI',
          name: 'AIエンパワーメント体系',
          desc: 'AI技術は学生が到達できる境界を拡大しました。評価基準はこれに合わせて引き上げられるべきであり — 引き下げられるべきではありません。',
          forward: {
            label: 'フォワード・エンパワー',
            items: ['多ラウンドのプロンプト反復', '複数案の横断比較', '全プロセスの証拠保存', '批判的修正と最適化'],
          },
          warning: {
            label: 'クリティカル・ワーニング',
            items: ['「そのまま使う」最終案に警戒', '独立した判断力の喪失', '成果の主体性の希薄化'],
          },
        },
        {
          num: '02',
          short: 'SL',
          name: '学生主導の主体性',
          desc: '"受動的な脚本実行"から"能動的な創造"への転換。学生はプロジェクトの全ライフサイクルで自律性を発揮します。',
          forward: {
            label: '4つの自律',
            items: ['自律的なテーマ選択', '独立したプロジェクト設計', '自ら選ぶリソース', '真の自己省察'],
          },
        },
        {
          num: '03',
          short: 'OE',
          name: 'オープンサービスエコシステム',
          desc: 'サービス提供者は論証参加者として再位置づけられます — リスク警告と専門的助言を提供しますが、最終決定は下しません。',
          forward: {
            label: 'エコシステム原則',
            items: ['資源独占の打破', '提供者選択の開放', '全プロセスの透明化', 'AIによる科学的意思決定支援'],
          },
        },
        {
          num: '04',
          short: 'TB',
          name: '教師の境界的監督',
          desc: '教師は「決定者」から「ガイド」であり学術的底線の守護者へと転換。レッドラインは事前公開され、リスクは定量化・可視化されます。',
          forward: {
            label: '中核的責務',
            items: ['研究倫理のレッドライン設定', '学術的誠実性基準の維持', 'レッドラインの事前公開', '可視化による定量リスク評価'],
          },
        },
      ],
      riskTitle: '5次元リスク評価',
      riskSubtitle: '0–5点定量化スケール',
      riskDesc: 'すべてのプロジェクト提案は5つのリスク次元にわたって0–5点で評価され、客観的で比較可能かつ透明な審査決定を可能にします。',
      riskDims: [
        { name: '安全曝露リスク', desc: '身体的・心理的・評判的観点からの学生のリスク曝露度' },
        { name: '教育的価値の重み', desc: '真の学習成果とパフォーマンス的産出の比率' },
        { name: '倫理的懸念レベル', desc: '研究方法と影響における潜在的な倫理違反リスク' },
        { name: 'ガバナンス成熟度', desc: '監督メカニズムと支援プロセスの整備度' },
        { name: '実行可能性', desc: '現場での実行の現実的な制御可能性' },
      ],
      integrityTitle: '学術的誠実性規範',
      integrityAllowed: {
        label: '適正なAI支援',
        items: ['多角的なブレインストーミング', 'シナリオ推論と比較', '論理フレームワークの精緻化', '深い探究のための質問リスト設計'],
      },
      integrityForbidden: {
        label: '厳格に禁止',
        items: ['実施していない活動の捏造', '個人の体験の虚偽記載', '中核的創作の外注', 'AI生成による偽の証拠資料'],
      },
      toolTitle: '評価ツールの思想',
      toolSubtitle: '"対話が証拠である"',
      toolDesc: '学生はAIと対話し、システムは自動的にプロセスの証拠を保存します。評価は磨き上げられた最終成果物だけでなく、思考の軌跡の上に築かれます。',
      toolStages: [
        { label: '第1段階', name: 'ベースライン評価 Baseline', desc: '個人別の出発点プロファイルを構築' },
        { label: '第2段階', name: 'トレーニング Training', desc: '多ラウンド反復による思考の軌跡を残す' },
        { label: '第3段階', name: '再評価 Re-assessment', desc: 'ベースラインと比較して変化を観察' },
      ],
      toolDimsTitle: '4次元スコアリング',
      toolDimsDesc: '各次元 0–25点。合計点はA / B / C / Dのグレードに対応します。',
      toolDims: [
        { name: '真正性', score: 25 },
        { name: 'AIリテラシー', score: 25 },
        { name: '計画力', score: 25 },
        { name: '省察の痕跡', score: 25 },
      ],
      scopeTitle: '適用範囲',
      scopeDesc: '4-CASは汎用的な体験教育ガバナンスフレームワークであり、多様なプログラム種別と学年にわたって適用可能です。',
      scopeItems: [
        'IB CASプログラム',
        'A-Level EPQ',
        'エディンバラ公爵賞',
        '全校クラブ活動',
        '全学年の課外活動',
      ],
    },

    // Tools page
    tools: {
      eyebrow: '評価ツール',
      title: '4-CAS 評価ツール群',
      desc: '4-CASフレームワークに基づいて構築されたプロフェッショナルレベルの評価ツール。教育者、コーディネーター、研究者のために設計されています。',
      desktopTitle: 'デスクトップ評価ツール',
      desktopSubtitle: 'Python / Tkinter — 現在利用可能',
      desktopDesc: '教育者が4-CAS評価の全行程を段階的に進められるようガイドし、スコアを自動計算して4つの次元にわたる詳細な学生レポートを生成する、フル機能のデスクトップアプリケーションです。',
      enVersion: '英語版',
      zhVersion: '中国語版',
      features: [
        { title: 'ガイド付き評価フロー', desc: '4つの柱すべてをカバーするステップバイステップのワークフロー' },
        { title: '自動採点・グレーディング', desc: '内蔵のスコアリングアルゴリズムとA/B/C/Dグレード計算' },
        { title: '学生レポート', desc: '学生ごとに印刷可能なPDFレポートを生成' },
        { title: '多言語UI', desc: '英語と中国語のインターフェースを完全サポート' },
        { title: 'オフライン動作', desc: 'ローカルで実行 — インターネット接続不要' },
        { title: 'データエクスポート', desc: 'CSV形式で結果をエクスポート' },
      ],
      webBadge: '開発中',
      webTitle: 'Web プラットフォーム — 近日公開',
      webDesc: 'フルクラウドネイティブのWebプラットフォームが現在開発中です。Web版では共同評価、クラス単位の分析、既存の学校システムとのシームレスな連携がサポートされる予定です。',
      webCta: 'リリースを通知する',
    },

    // Forms page
    forms: {
      eyebrow: '資料・フォーム',
      title: 'ダウンロード資料',
      desc: '評価フォーム、実施ツールキット、研究発表資料 — 4-CASフレームワークを理解し、パイロット運用するために必要なすべてのリソース。',
      resourcesNav: '研究資料',

      pilotTitle: 'パイロット評価 · 14種フォーム',
      pilotSubtitle: '評価ツール対応改訂版',
      pilotDesc: 'レッドライン自己チェックから教育評価ルーブリックまで、パイロットの全ライフサイクルをカバーする14種の専門フォーム。',
      pilotForms: [
        { num: 'F01', name: 'レッドライン自己チェック', stage: '事前', url: 'assets/forms/ja/01_Form01_RedLine_SelfCheck_JA_EN.docx' },
        { num: 'F02', name: 'プロジェクト概要', stage: '事前', url: 'assets/forms/ja/02_Form02_ProjectOverview_JA_EN.docx' },
        { num: 'F03', name: '第1段階 · 課題・テーマ選定', stage: '第1段', url: 'assets/forms/ja/03_Form03_Stage1_InquiryTopicSelection_JA_EN.docx' },
        { num: 'F04', name: '第2段階 · 計画・準備', stage: '第2段', url: 'assets/forms/ja/04_Form04_Stage2_PlanningPreparation_JA_EN.docx' },
        { num: 'F05', name: '第3段階 · 実行・実施', stage: '第3段', url: 'assets/forms/ja/05_Form05_Stage3_ActionImplementation_JA_EN.docx' },
        { num: 'F06', name: '第4段階 · 省察・発表', stage: '第4段', url: 'assets/forms/ja/06_Form06_Stage4_ReflectionPresentation_JA_EN.docx' },
        { num: 'F07', name: 'レッドライン審査判定', stage: '審査', url: 'assets/forms/ja/07_Form07_RedLineReviewDecision_JA_EN.docx' },
        { num: 'F08', name: 'パイロット選別リスク評価', stage: '審査', url: 'assets/forms/ja/08_Form08_PilotScreeningRiskAssessment_JA_EN.docx' },
        { num: 'F09', name: 'パイロット倫理コンプライアンス審査', stage: '審査', url: 'assets/forms/ja/09_Form09_PilotEthicalComplianceReview_JA_EN.docx' },
        { num: 'F10', name: 'オンサイト観察記録', stage: '研究', url: 'assets/forms/ja/10_Form10_OnSiteObservationRecord_JA_EN.docx' },
        { num: 'F11', name: 'AI評価ツール診断レポート・検証記録', stage: '研究', url: 'assets/forms/ja/11_Form11_AIEvaluationToolReportRecord_JA_EN.docx' },
        { num: 'F12', name: '教員・審査者評価基準校正記録', stage: '研究', url: 'assets/forms/ja/12_Form12_TeacherReviewerCalibrationLog_JA_EN.docx' },
        { num: 'F13', name: '研究データアーカイブ・匿名化管理', stage: '研究', url: 'assets/forms/ja/13_Form13_PilotDataArchiveAnonymization_JA_EN.docx' },
        { num: 'F14', name: 'ツール出力・匿名化データエクスポート', stage: 'アーカイブ', url: 'assets/forms/ja/14_Form14_ToolOutputAnonymizedExport_JA_EN.docx' },
      ],

      formalTitle: '本格実施 · 5種フォーム',
      formalSubtitle: '簡素版 · 通常運用向け',
      formalDesc: 'パイロットフェーズ後の日常的な実施のための、5つの簡素化されたフォーム。企画から最終審査までの中核プロセスをカバーします。',
      formalOverview: { name: '5フォーム対比ガイド', url: 'assets/forms/zh/正式实施00_五表对照.docx' },
      formalForms: [
        { num: '01', name: '企画レッドライン自己チェック', url: 'assets/forms/zh/正式实施01_立项红线自查.docx' },
        { num: '02', name: 'プロジェクトカード', url: 'assets/forms/zh/正式实施02_项目卡.docx' },
        { num: '03', name: '活動記録', url: 'assets/forms/zh/正式实施03_行动记录.docx' },
        { num: '04', name: '省察・完了報告', url: 'assets/forms/zh/正式实施04_反思结项.docx' },
        { num: '05', name: '教員審査判定', url: 'assets/forms/zh/正式实施05_教师审核判定.docx' },
      ],

      researchTitle: '研究発表資料',
      researchSubtitle: '4-CAS フレームワークデッキシリーズ',
      researchDesc: '英語と中国語の2つのプレゼンテーションデッキ。セミナー、ワークショップ、ディスカッションなど、さまざまな用途でご活用いただけます。',
      researchPpts: [
        { title: '4-CAS Framework Presentation', lang: '英語 · English', desc: 'フレームワーク全体像のデッキ', url: 'assets/ppt/4CAS-Framework-Presentation-EN.pptx' },
        { title: '4CAS Framework Discussion Draft', lang: '中国語 · Chinese', desc: '評価ツール補足版・中国語', url: 'assets/ppt/4CAS-Framework-Discussion-ZH.pptx' },
      ],

      download: 'ダウンロード',
      viewGuide: 'ガイドを見る',
    },

    // About page
    about: {
      eyebrow: '4-CASについて',
      title: '起源とビジョン',
      intro: '4-CASフレームワークは、根本的な問いから生まれました。人工知能が人間のあらゆる活動分野を再構築する時代に、体験学習がいかにして学生の真の成長に資し続けることができるか — 大学出願の形式的なチェックボックスに成り下がらないようにするには、どうすればよいのか。',
      intro2: 'このフレームワークは独立系教育研究者によって創案され、教育評価、カリキュラムイノベーション、そしてAIとK-12教育の交差する分野での長年の研究経験に基づいています。反復的な教室研究と国際学校の実践者たちとの継続的な協力を通じて開発されました。',
      visionTitle: '理論のビジョン',
      visionDesc: 'AIによる教育を通じて教育の本質に回帰し — 学生の自律的行動力、独立した判断力、内発的な責任感を育みます。',
      visionPoints: [
        '自律的行動力',
        '独立した判断力',
        '内発的責任感',
      ],
      founderTitle: '創設者',
      founder: {
        name: '創設者 & チーフリサーチャー',
        role: '独立系教育研究者',
        bio: '4-CAS理論の創始者。元医療テクノロジー企業経営者で、南京医科大学卒業。',
      },
      pilotTitle: 'パイロット協力校',
      pilotSubtitle: '昆明青苗学校',
      pilotDesc: '昆明青苗学校は、4-CASフレームワークの公式パイロット機関です。教育と学びの革新に強いコミットメントを持つ歴史あるIBワールドスクールとして、小学校から高校までの学年全体で評価方法論の厳格かつ現実的な実証の場を提供しています。',
      badges: ['IBワールドスクール', 'K-12 国際カリキュラム', '2025年よりパイロット運用', '雲南省 昆明'],
      partnerTitle: 'パートナーシップ',
      partnerDesc: '貴校で4-CASをパイロット運用したい、研究で協力したい、その他の協力形態を模索したい — 学校、教育者、研究機関からのご相談を歓迎します。',
      partnerCta: 'お問い合わせ',
    },

    // Contact page
    contact: {
      eyebrow: 'お問い合わせ',
      title: 'ご連絡先',
      desc: '4-CASについて詳しく知りたい方、研究での提携をご希望の方、またはご自身の学校でフレームワークのパイロット運用をご検討の方 — ぜひお問い合わせください。',
      email: { label: 'メール', value: 'info@4-cas.org' },
      address: { label: '住所', value: '中国 雲南省 昆明市' },
      academic: { label: '研究に関するお問い合わせ', value: 'research@4-cas.org' },
      formTitle: 'メッセージを送る',
      formName: 'お名前',
      formEmail: 'メールアドレス',
      formSubject: '件名',
      formMessage: 'メッセージ',
      formSubmit: '送信する',
    },

    // Footer
    footer: {
      tagline: 'AIによってエンパワーされた体験教育のための、独自のフレームワーク。',
      explore: '探す',
      resources: '資料',
      connect: 'つながる',
      rights: '© 2026 4-CAS. All rights reserved.',
      domain: '4-cas.org',
    },
  },
};

// Expose globally
window.I18N = I18N;


/* ===== components.jsx ===== */
/* ============================================================
   4-CAS Shared Components
   ============================================================ */

const { useState, useEffect } = React;

// --- 4-CAS Logo Mark (SVG) ---
// Concept: AI neural pathways ascending like a growing seedling
// Four nodes represent Cognition → Application → Criticality → Creativity
// Apex is a luminous sprout / lightbulb: "returning to the essence of education"
// Neural connection lines suggest AI empowerment flowing upward
function LogoMark({ className = '', color = '#1B3A5C', accent = '#B8860B' }) {
  return (
    <svg
      className={className}
      viewBox="0 0 40 40"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      style={{ flexShrink: 0 }}
    >
      {/* Neural pathway / growth curve — ascending from base to apex */}
      <path
        d="M 20 36 C 14 30, 10 24, 12 18 C 14 12, 20 8, 24 5"
        stroke={color}
        strokeWidth="1.1"
        strokeLinecap="round"
        fill="none"
        opacity="0.3"
      />
      <path
        d="M 20 36 C 26 30, 30 24, 28 18 C 26 12, 22 8, 20 5"
        stroke={color}
        strokeWidth="1.1"
        strokeLinecap="round"
        fill="none"
        opacity="0.25"
      />
      {/* Horizontal cross-connections (neural network look) */}
      <line x1="13" y1="28" x2="27" y2="28" stroke={color} strokeWidth="0.8" opacity="0.2" />
      <line x1="14" y1="20" x2="26" y2="20" stroke={color} strokeWidth="0.8" opacity="0.2" />
      <line x1="17" y1="13" x2="23" y2="13" stroke={color} strokeWidth="0.8" opacity="0.2" />

      {/* C1 - Cognition (root / foundation) */}
      <circle cx="13" cy="28" r="3.2" fill={color} opacity="0.75" />
      {/* C2 - Application */}
      <circle cx="27" cy="28" r="3.2" fill={color} opacity="0.8" />
      {/* C3 - Criticality */}
      <circle cx="20" cy="20" r="3.5" fill={color} opacity="0.9" />

      {/* C4 - Creativity (the apex sprout / lightbulb) */}
      {/* Outer glow halo */}
      <circle cx="20" cy="8" r="6" fill={accent} opacity="0.12" />
      <circle cx="20" cy="8" r="4.5" fill={accent} opacity="0.2" />
      {/* Core bulb / seed */}
      <circle cx="20" cy="8" r="3.2" fill={accent} />
      {/* Sprout tip — two leaves emerging */}
      <path
        d="M 20 4.8 C 18.5 3, 17 3.5, 17.5 5.5 C 17.8 6.8, 19 7.5, 20 7"
        stroke={accent}
        strokeWidth="0.9"
        strokeLinecap="round"
        fill="none"
      />
      <path
        d="M 20 4.8 C 21.5 3, 23 3.5, 22.5 5.5 C 22.2 6.8, 21 7.5, 20 7"
        stroke={accent}
        strokeWidth="0.9"
        strokeLinecap="round"
        fill="none"
      />

      {/* "4" subtly integrated — left stem of the 4 is the growth line */}
      {/* The negative space between nodes and the apex forms the concept of 4 */}
    </svg>
  );
}

// --- Navigation ---
function Nav({ t, lang, setLang, currentPage, setPage, mobileOpen, setMobileOpen }) {
  const pages = ['home', 'theory', 'tools', 'forms', 'about', 'contact'];
  const langOptions = [
    { code: 'en', label: 'EN' },
    { code: 'zh', label: '中文' },
    { code: 'ko', label: '한국' },
    { code: 'ja', label: '日本' },
  ];

  const handleNav = (page) => {
    setPage(page);
    setMobileOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <>
      <nav className="nav">
        <div className="nav-inner">
          <div className="nav-logo" onClick={() => handleNav('home')}>
            <LogoMark className="nav-logo-icon" />
            <div className="nav-logo-block">
              <span className="nav-logo-text">4-CAS</span>
              <span className="nav-logo-slogan">{t.brand.tagline}</span>
            </div>
          </div>

          <ul className="nav-links">
            {pages.map((p) => (
              <li key={p}>
                <a
                  className={currentPage === p ? 'active' : ''}
                  onClick={(e) => { e.preventDefault(); handleNav(p); }}
                  href={`#${p}`}
                >
                  {t.nav[p]}
                </a>
              </li>
            ))}
          </ul>

          <div className="nav-right">
            <div className="lang-switcher">
              {langOptions.map((opt) => (
                <button
                  key={opt.code}
                  className={`lang-btn ${lang === opt.code ? 'active' : ''}`}
                  onClick={() => setLang(opt.code)}
                >
                  {opt.label}
                </button>
              ))}
            </div>
            <button
              className="nav-mobile-toggle"
              onClick={() => setMobileOpen(!mobileOpen)}
              aria-label="Toggle menu"
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1B3A5C" strokeWidth="2">
                {mobileOpen ? (
                  <>
                    <line x1="6" y1="6" x2="18" y2="18" />
                    <line x1="6" y1="18" x2="18" y2="6" />
                  </>
                ) : (
                  <>
                    <line x1="4" y1="7" x2="20" y2="7" />
                    <line x1="4" y1="12" x2="20" y2="12" />
                    <line x1="4" y1="17" x2="20" y2="17" />
                  </>
                )}
              </svg>
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile nav drawer */}
      <div className={`mobile-nav ${mobileOpen ? 'open' : ''}`}>
        <ul className="mobile-nav-links">
          {pages.map((p) => (
            <li key={p}>
              <a
                className={currentPage === p ? 'active' : ''}
                onClick={(e) => { e.preventDefault(); handleNav(p); }}
                href={`#${p}`}
              >
                {t.nav[p]}
              </a>
            </li>
          ))}
        </ul>
      </div>
    </>
  );
}

// --- Footer ---
function Footer({ t, setPage }) {
  const handleClick = (page) => (e) => {
    e.preventDefault();
    setPage(page);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '16px' }}>
              <LogoMark color="#fff" accent="var(--brass-light)" className="footer-logo-icon" />
              <div>
                <span className="nav-logo-text" style={{ color: 'white' }}>4-CAS</span>
              </div>
            </div>
            <div className="footer-tagline-main">{t.brand.tagline}</div>
            <p style={{ marginBottom: '8px', fontSize: '0.85rem', opacity: '0.6' }}>{t.brand.slogan}</p>
            <p>{t.footer.tagline}</p>
          </div>

          <div className="footer-col">
            <h4>{t.footer.explore}</h4>
            <ul>
              <li><a href="#" onClick={handleClick('theory')}>{t.nav.theory}</a></li>
              <li><a href="#" onClick={handleClick('tools')}>{t.nav.tools}</a></li>
              <li><a href="#" onClick={handleClick('forms')}>{t.nav.forms}</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>{t.footer.resources}</h4>
            <ul>
              <li><a href="#" onClick={handleClick('forms')}>{t.forms.resourcesNav}</a></li>
              <li><a href="#" onClick={handleClick('tools')}>{t.tools.desktopTitle}</a></li>
              <li><a href="#" onClick={handleClick('about')}>{t.nav.about}</a></li>
            </ul>
          </div>

          <div className="footer-col">
            <h4>{t.footer.connect}</h4>
            <ul>
              <li><a href="#" onClick={handleClick('contact')}>{t.nav.contact}</a></li>
              <li><a href="mailto:contact@4-cas.org">contact@4-cas.org</a></li>
              <li><a href="#" onClick={handleClick('about')}>{t.nav.about}</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span>{t.footer.rights}</span>
          <span>{t.footer.domain}</span>
        </div>
      </div>
    </footer>
  );
}

// --- Feature check icon (used in tools page) ---
function CheckIcon() {
  return (
    <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
      <path d="M2 6.5L4.5 9L10 3" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

// --- Download icon ---
function DownloadIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
      <polyline points="7 10 12 15 17 10" />
      <line x1="12" y1="15" x2="12" y2="3" />
    </svg>
  );
}

// --- Contact icons ---
function ContactIcon({ type }) {
  const paths = {
    email: (
      <>
        <rect x="3" y="4" width="18" height="14" rx="1.5" />
        <path d="M3 6l9 7 9-7" />
      </>
    ),
    location: (
      <>
        <path d="M12 22s7-6.5 7-12a7 7 0 0 0-14 0c0 5.5 7 12 7 12z" />
        <circle cx="12" cy="10" r="2.5" />
      </>
    ),
    academic: (
      <>
        <path d="M12 3L2 8l10 5 10-5-10-5z" />
        <path d="M6 10v6c0 1 3 3 6 3s6-2 6-3v-6" />
      </>
    ),
  };

  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      {paths[type]}
    </svg>
  );
}

// --- Mobile-friendly download helper ---
// 解决跨域短链接 + target="_blank" 在手机浏览器（尤其 iOS Safari）上无法下载的问题
function triggerDownload(href, filename) {
  const a = document.createElement('a');
  a.href = href;
  if (filename) a.download = filename;
  a.rel = 'noopener';
  // 故意不设置 target="_blank"，避免手机浏览器弹窗拦截
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
}

function downloadFile(url, filename) {
  // 优先尝试 fetch + Blob（同域或 CORS 允许时可用，能自定义文件名）
  fetch(url)
    .then(function (response) {
      if (!response.ok) throw new Error('fetch failed');
      return response.blob();
    })
    .then(function (blob) {
      const blobUrl = URL.createObjectURL(blob);
      triggerDownload(blobUrl, filename);
      setTimeout(function () { URL.revokeObjectURL(blobUrl); }, 2000);
    })
    .catch(function () {
      // 回退：用原生 a 标签在当前页触发下载（不开新标签页，兼容移动端）
      triggerDownload(url, filename);
    });
}

window.LogoMark = LogoMark;
window.Nav = Nav;
window.Footer = Footer;
window.CheckIcon = CheckIcon;
window.DownloadIcon = DownloadIcon;
window.ContactIcon = ContactIcon;
window.downloadFile = downloadFile;
window.triggerDownload = triggerDownload;


/* ===== pages.jsx ===== */
/* ============================================================
   4-CAS Page Components
   All pages share: t (translation), setPage (navigation)
   ============================================================ */

// =======================================================
// HOME PAGE
// =======================================================
function HomePage({ t, setPage }) {
  return (
    <div className="page">
      {/* Hero */}
      <section className="hero">
        <div className="hero-bg">
          <img src="assets/images/hero-classroom.jpg" alt="Students in classroom" />
        </div>
        <div className="hero-content">
          <div className="hero-eyebrow">{t.hero.eyebrow}</div>
          <h1 className="hero-title">
            {t.hero.title} <strong>{t.hero.titleItalic}</strong>
          </h1>
          {/* Brand tagline prominently shown */}
          <div className="hero-tagline">
            <span className="hero-tagline-main">{t.hero.taglineMain}</span>
            <span className="hero-tagline-sub">{t.hero.taglineSub}</span>
          </div>
          <p className="hero-subtitle">{t.hero.subtitle}</p>
          <div className="hero-cta">
            <button className="btn btn-primary" onClick={() => setPage('theory')}>
              {t.hero.ctaPrimary}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="4" y1="8" x2="12" y2="8" />
                <polyline points="9 4 13 8 9 12" />
              </svg>
            </button>
            <button className="btn btn-ghost" onClick={() => setPage('forms')}>
              {t.hero.ctaSecondary}
            </button>
          </div>
        </div>
        <div className="hero-meta">
          <span>4-CAS Framework · © 2026</span>
          <div className="hero-scroll">
            <span>{t.hero.scroll}</span>
            <div className="hero-scroll-line"></div>
          </div>
        </div>
      </section>

      {/* Four Pillars */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{t.homeFeatures.eyebrow}</div>
            <h2 className="section-title">{t.homeFeatures.title}</h2>
            <p className="section-desc">{t.homeFeatures.desc}</p>
            <div className="section-divider"></div>
          </div>

          <div className="features-grid">
            {t.homeFeatures.items.map((item) => (
              <div className="feature-card" key={item.num}>
                <div className="feature-num">{item.num}</div>
                <h3 className="feature-title">{item.title}</h3>
                <p className="feature-desc">{item.desc}</p>
              </div>
            ))}
          </div>

          <div style={{ textAlign: 'center', marginTop: '56px' }}>
            <button className="btn btn-outline" onClick={() => setPage('theory')}>
              {t.hero.ctaPrimary}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="4" y1="8" x2="12" y2="8" />
                <polyline points="9 4 13 8 9 12" />
              </svg>
            </button>
          </div>
        </div>
      </section>

      {/* Tools teaser */}
      <section className="section" style={{ background: 'var(--ivory-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{t.tools.eyebrow}</div>
            <h2 className="section-title">{t.tools.desktopTitle}</h2>
            <p className="section-desc">{t.tools.desktopDesc}</p>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '24px', marginBottom: '48px' }}>
            <div style={{
              background: 'var(--paper)',
              border: '1px solid var(--border)',
              padding: '4px',
              borderRadius: '2px',
              boxShadow: '0 8px 24px rgba(27,58,92,0.08)',
            }}>
              <img src="assets/images/tool-en.jpg" alt={t.tools.enVersion} style={{ width: '100%' }} />
            </div>
            <div style={{
              background: 'var(--paper)',
              border: '1px solid var(--border)',
              padding: '4px',
              borderRadius: '2px',
              boxShadow: '0 8px 24px rgba(27,58,92,0.08)',
            }}>
              <img src="assets/images/tool-zh.jpg" alt={t.tools.zhVersion} style={{ width: '100%' }} />
            </div>
          </div>

          <div style={{ textAlign: 'center' }}>
            <button className="btn btn-dark" onClick={() => setPage('tools')}>
              {t.nav.tools}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="4" y1="8" x2="12" y2="8" />
                <polyline points="9 4 13 8 9 12" />
              </svg>
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

// =======================================================
// THEORY PAGE
// =======================================================
function TheoryPage({ t }) {
  return (
    <div className="page">
      {/* Hero */}
      <section className="tools-hero">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <div className="section-eyebrow">{t.theory.eyebrow}</div>
            <h2 className="section-title">{t.theory.title}</h2>
            <p className="section-desc">{t.theory.desc}</p>
            <div className="section-divider"></div>
          </div>
        </div>
      </section>

      {/* Research Origins — Three Crises */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{t.theory.originsTitle}</div>
            <h2 className="section-title">{t.theory.originsSubtitle}</h2>
            <p className="section-desc">{t.theory.originsDesc}</p>
          </div>

          <div className="origins-grid">
            {t.theory.origins.map((o, i) => (
              <div className="origin-card" key={i}>
                <div className="origin-num">0{i + 1}</div>
                <h3 className="origin-title">{o.title}</h3>
                <p className="origin-desc">{o.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Positioning — Structural Reconstruction */}
      <section className="positioning-section">
        <div className="container">
          <div className="positioning-content">
            <div className="section-eyebrow" style={{ color: 'var(--brass-light)' }}>Positioning</div>
            <h2>{t.theory.positioningTitle}</h2>
            <p>{t.theory.positioningDesc}</p>
          </div>
        </div>
      </section>

      {/* Four Pillars — detailed */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Core Architecture</div>
            <h2 className="section-title">{t.theory.pillarsTitle}</h2>
            <div className="section-divider"></div>
          </div>

          <div className="pillars-grid">
            {t.theory.pillars.map((pillar) => (
              <div className="pillar-card" key={pillar.num}>
                <div className="pillar-header">
                  <div className="pillar-num">{pillar.num}</div>
                  <div className="pillar-short">{pillar.short}</div>
                </div>
                <h3 className="pillar-name">{pillar.name}</h3>
                <p className="pillar-desc">{pillar.desc}</p>

                <div className="pillar-block">
                  <div className="pillar-block-label forward">{pillar.forward.label}</div>
                  <ul className="pillar-list">
                    {pillar.forward.items.map((item, i) => (
                      <li key={i}>{item}</li>
                    ))}
                  </ul>
                </div>

                {pillar.warning && (
                  <div className="pillar-block">
                    <div className="pillar-block-label warning">{pillar.warning.label}</div>
                    <ul className="pillar-list warning-list">
                      {pillar.warning.items.map((item, i) => (
                        <li key={i}>{item}</li>
                      ))}
                    </ul>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Five-Dimensional Risk Assessment */}
      <section className="risk-section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow" style={{ color: 'var(--brass-light)' }}>Risk Quantification</div>
            <h2 className="section-title" style={{ color: 'white' }}>{t.theory.riskTitle}</h2>
            <p style={{ color: 'var(--brass-light)', letterSpacing: '0.15em', textTransform: 'uppercase', fontSize: '0.85rem', fontWeight: 600, marginBottom: '16px' }}>{t.theory.riskSubtitle}</p>
            <p className="section-desc" style={{ color: 'rgba(255,255,255,0.7)' }}>{t.theory.riskDesc}</p>
          </div>

          <div className="risk-grid">
            {t.theory.riskDims.map((dim, i) => (
              <div className="risk-card" key={i}>
                <div className="risk-bars">
                  {[1, 2, 3, 4, 5].map((n) => (
                    <div key={n} className={`risk-bar ${n <= 4 ? 'active' : ''}`}></div>
                  ))}
                </div>
                <div className="risk-name">{dim.name}</div>
                <div className="risk-desc">{dim.desc}</div>
                <div className="risk-score">0–5</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Academic Integrity Code */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Integrity</div>
            <h2 className="section-title">{t.theory.integrityTitle}</h2>
            <div className="section-divider"></div>
          </div>

          <div className="integrity-grid">
            <div className="integrity-card allowed">
              <div className="integrity-icon allowed-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
                  <polyline points="22 4 12 14.01 9 11.01" />
                </svg>
              </div>
              <h3>{t.theory.integrityAllowed.label}</h3>
              <ul>
                {t.theory.integrityAllowed.items.map((item, i) => (
                  <li key={i}>{item}</li>
                ))}
              </ul>
            </div>
            <div className="integrity-card forbidden">
              <div className="integrity-icon forbidden-icon">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="10" />
                  <line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
                </svg>
              </div>
              <h3>{t.theory.integrityForbidden.label}</h3>
              <ul>
                {t.theory.integrityForbidden.items.map((item, i) => (
                  <li key={i}>{item}</li>
                ))}
              </ul>
            </div>
          </div>
        </div>
      </section>

      {/* Assessment Tool Philosophy */}
      <section className="section" style={{ background: 'var(--ivory-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{t.theory.toolTitle}</div>
            <h2 className="section-title">{t.theory.toolSubtitle}</h2>
            <p className="section-desc">{t.theory.toolDesc}</p>
            <div className="section-divider"></div>
          </div>

          <div className="tool-stages">
            {t.theory.toolStages.map((stage, i) => (
              <React.Fragment key={i}>
                <div className="tool-stage">
                  <div className="tool-stage-label">{stage.label}</div>
                  <div className="tool-stage-name">{stage.name}</div>
                  <div className="tool-stage-desc">{stage.desc}</div>
                </div>
                {i < t.theory.toolStages.length - 1 && (
                  <div className="tool-stage-arrow">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--brass)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                      <line x1="5" y1="12" x2="19" y2="12" />
                      <polyline points="12 5 19 12 12 19" />
                    </svg>
                  </div>
                )}
              </React.Fragment>
            ))}
          </div>

          <div style={{ marginTop: '80px' }}>
            <div className="section-head" style={{ marginBottom: '48px' }}>
              <div className="section-eyebrow">Scoring</div>
              <h3 style={{ color: 'var(--academic-blue)', marginBottom: '8px' }}>{t.theory.toolDimsTitle}</h3>
              <p style={{ color: 'var(--ink-mute)', fontSize: '0.95rem' }}>{t.theory.toolDimsDesc}</p>
            </div>
            <div className="tool-dims">
              {t.theory.toolDims.map((dim, i) => (
                <div className="tool-dim-card" key={i}>
                  <div className="tool-dim-score">{dim.score}</div>
                  <div className="tool-dim-name">{dim.name}</div>
                  <div className="tool-dim-bar">
                    <div className="tool-dim-bar-fill" style={{ width: `${(dim.score / 25) * 100}%` }}></div>
                  </div>
                </div>
              ))}
            </div>
            <div style={{ textAlign: 'center', marginTop: '24px' }}>
              <span style={{ fontSize: '0.8rem', color: 'var(--ink-mute)', letterSpacing: '0.1em' }}>Total → A / B / C / D Grade</span>
            </div>
          </div>
        </div>
      </section>

      {/* Scope of Application */}
      <section className="section">
        <div className="container">
          <div className="scope-wrap">
            <div className="scope-text">
              <div className="section-eyebrow">Scope</div>
              <h2 className="section-title" style={{ textAlign: 'left', marginBottom: '16px' }}>{t.theory.scopeTitle}</h2>
              <p style={{ color: 'var(--ink-soft)', lineHeight: '1.8', marginBottom: '32px' }}>{t.theory.scopeDesc}</p>
              <ul className="scope-list">
                {t.theory.scopeItems.map((item, i) => (
                  <li key={i}>{item}</li>
                ))}
              </ul>
            </div>
            <div className="scope-visual">
              <LogoMark className="scope-logo" color="var(--academic-blue)" accent="var(--brass)" />
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// =======================================================
// TOOLS PAGE
// =======================================================
function ToolsPage({ t }) {
  return (
    <div className="page">
      <section className="tools-hero">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <div className="section-eyebrow">{t.tools.eyebrow}</div>
            <h2 className="section-title">{t.tools.title}</h2>
            <p className="section-desc">{t.tools.desc}</p>
            <div className="section-divider"></div>
          </div>
        </div>
      </section>

      {/* Desktop tool showcase */}
      <section className="section">
        <div className="container">
          <div style={{ textAlign: 'center', marginBottom: '48px' }}>
            <div className="section-eyebrow">{t.tools.desktopSubtitle}</div>
            <h2 style={{ color: 'var(--academic-blue)' }}>{t.tools.desktopTitle}</h2>
          </div>

          <div className="tool-showcase">
            <div className="tool-card">
              <img className="tool-img" src="assets/images/tool-en.jpg" alt={t.tools.enVersion} />
              <div className="tool-info">
                <span className="tool-badge">{t.tools.enVersion}</span>
                <h3 className="tool-title">4-CAS Assessment Tool</h3>
                <p className="tool-desc">{t.tools.desktopDesc}</p>
              </div>
            </div>
            <div className="tool-card">
              <img className="tool-img" src="assets/images/tool-zh.jpg" alt={t.tools.zhVersion} />
              <div className="tool-info">
                <span className="tool-badge">{t.tools.zhVersion}</span>
                <h3 className="tool-title">4-CAS 测评工具</h3>
                <p className="tool-desc">{t.tools.desktopDesc}</p>
              </div>
            </div>
          </div>

          {/* Features */}
          <div style={{ maxWidth: '900px', margin: '0 auto' }}>
            <h3 style={{ textAlign: 'center', marginBottom: '32px', color: 'var(--academic-blue)' }}>
              Key Features
            </h3>
            <div className="features-list">
              {t.tools.features.map((f, i) => (
                <div className="feature-item" key={i}>
                  <div className="feature-icon"><CheckIcon /></div>
                  <div className="feature-text">
                    <h4>{f.title}</h4>
                    <p>{f.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Web platform teaser */}
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="web-teaser">
            <div className="web-teaser-content">
              <span className="web-badge">{t.tools.webBadge}</span>
              <h2>{t.tools.webTitle}</h2>
              <p>{t.tools.webDesc}</p>
              <button className="btn btn-primary">
                {t.tools.webCta}
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                  <line x1="4" y1="8" x2="12" y2="8" />
                  <polyline points="9 4 13 8 9 12" />
                </svg>
              </button>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

// =======================================================
// FORMS / RESOURCES PAGE
// =======================================================
function FormsPage({ t }) {
  return (
    <div className="page">
      <section className="tools-hero">
        <div className="container">
          <div className="section-head" style={{ marginBottom: 0 }}>
            <div className="section-eyebrow">{t.forms.eyebrow}</div>
            <h2 className="section-title">{t.forms.title}</h2>
            <p className="section-desc">{t.forms.desc}</p>
            <div className="section-divider"></div>
          </div>
        </div>
      </section>

      {/* Section 1: Pilot 14 Forms */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{t.forms.pilotSubtitle}</div>
            <h2 className="section-title">{t.forms.pilotTitle}</h2>
            <p className="section-desc">{t.forms.pilotDesc}</p>
          </div>

          <div className="pilot-forms-grid">
            {t.forms.pilotForms.map((form) => (
              <a
                key={form.num}
                href={form.url}
                onClick={(e) => {
                  e.preventDefault();
                  downloadFile(form.url, '4CAS-' + form.num + '-' + form.name.replace(/\s+/g, '-') + '.docx');
                }}
                className="pilot-form-card"
              >
                <div className="pilot-form-top">
                  <span className="pilot-form-num">{form.num}</span>
                  <span className="pilot-form-stage">{form.stage}</span>
                </div>
                <div className="pilot-form-name">{form.name}</div>
                <div className="pilot-form-bottom">
                  <span className="pilot-form-download">
                    <DownloadIcon />
                    {t.forms.download}
                  </span>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Section 2: Formal 5 Forms */}
      <section className="section" style={{ background: 'var(--ivory-2)' }}>
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{t.forms.formalSubtitle}</div>
            <h2 className="section-title">{t.forms.formalTitle}</h2>
            <p className="section-desc">{t.forms.formalDesc}</p>
          </div>

          <div style={{ textAlign: 'center', marginBottom: '32px' }}>
            <a
              href={t.forms.formalOverview.url}
              onClick={(e) => {
                e.preventDefault();
                downloadFile(t.forms.formalOverview.url, '4CAS-Five-Form-Comparison-Guide.docx');
              }}
              className="btn btn-outline"
            >
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="2" y="1" width="12" height="14" rx="1" />
                <line x1="5" y1="5" x2="11" y2="5" />
                <line x1="5" y1="8" x2="11" y2="8" />
                <line x1="5" y1="11" x2="8" y2="11" />
              </svg>
              {t.forms.formalOverview.name}
            </a>
          </div>

          <div className="formal-forms-grid">
            {t.forms.formalForms.map((form, i) => (
              <a
                key={form.num}
                href={form.url}
                onClick={(e) => {
                  e.preventDefault();
                  downloadFile(form.url, '4CAS-Formal-' + form.num + '-' + form.name.replace(/\s+/g, '-') + '.docx');
                }}
                className="formal-form-card"
              >
                <div className="formal-form-num">{form.num}</div>
                <div className="formal-form-name">{form.name}</div>
                <div className="formal-form-download">
                  <DownloadIcon />
                  {t.forms.download}
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* Section 3: Research PPT Resources */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">{t.forms.researchSubtitle}</div>
            <h2 className="section-title">{t.forms.researchTitle}</h2>
            <p className="section-desc">{t.forms.researchDesc}</p>
            <div className="section-divider"></div>
          </div>

          <div className="research-grid">
            {t.forms.researchPpts.map((ppt, i) => (
              <a
                key={i}
                href={ppt.url}
                onClick={(e) => {
                  e.preventDefault();
                  downloadFile(ppt.url, '4CAS-' + ppt.title.replace(/\s+/g, '-') + '.pptx');
                }}
                className="research-card"
              >
                <div className="research-card-icon">
                  <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                    <polyline points="14 2 14 8 20 8" />
                    <line x1="8" y1="13" x2="16" y2="13" />
                    <line x1="8" y1="17" x2="16" y2="17" />
                    <polyline points="10 9 9 9 8 9" />
                  </svg>
                </div>
                <div className="research-card-body">
                  <span className="research-lang">{ppt.lang}</span>
                  <h3 className="research-title">{ppt.title}</h3>
                  <p className="research-desc">{ppt.desc}</p>
                </div>
                <div className="research-download">
                  <DownloadIcon />
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// =======================================================
// ABOUT PAGE
// =======================================================
function AboutPage({ t, setPage }) {
  return (
    <div className="page">
      <section className="about-hero">
        <div className="container">
          <div className="about-intro">
            <div className="about-text">
              <div className="section-eyebrow">{t.about.eyebrow}</div>
              <h2 className="section-title">{t.about.title}</h2>
              <p>{t.about.intro}</p>
              <p>{t.about.intro2}</p>
            </div>
            <div style={{ position: 'relative' }}>
              <div className="about-img">
                <img src="assets/images/class2.jpg" alt="Classroom scene" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Vision */}
      <section className="section" style={{ padding: '100px 0' }}>
        <div className="container">
          <div className="vision-wrap">
            <div className="vision-visual">
              <LogoMark className="vision-logo" color="var(--academic-blue)" accent="var(--brass)" />
            </div>
            <div className="vision-text">
              <div className="section-eyebrow">Vision</div>
              <h2 className="section-title" style={{ textAlign: 'left', marginBottom: '20px' }}>{t.about.visionTitle}</h2>
              <p style={{ color: 'var(--ink-soft)', lineHeight: '1.85', marginBottom: '32px', fontSize: '1.05rem' }}>{t.about.visionDesc}</p>
              <div className="vision-points">
                {t.about.visionPoints.map((p, i) => (
                  <div key={i} className="vision-point">
                    <div className="vision-point-bullet"></div>
                    <span>{p}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Founder */}
      <section className="people-section" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="section-head">
            <div className="section-eyebrow">Founder</div>
            <h2 className="section-title">{t.about.founderTitle}</h2>
            <div className="section-divider"></div>
          </div>

          <div style={{ maxWidth: '640px', margin: '0 auto' }}>
            <div className="founder-card">
              <div className="founder-avatar">
                <img src="assets/images/founder-avatar.jpg" alt="Founder" style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '50%' }} />
              </div>
              <h3 className="founder-name">{t.about.founder.name}</h3>
              <div className="founder-role">{t.about.founder.role}</div>
              <div className="founder-divider"></div>
              <p className="founder-bio">{t.about.founder.bio}</p>
            </div>
          </div>
        </div>
      </section>

      {/* Partner / Collaboration */}
      <section className="section">
        <div className="container">
          <div className="partner-banner">
            <div>
              <div className="section-eyebrow" style={{ marginBottom: '8px' }}>{t.about.partnerTitle}</div>
              <h2 style={{ color: 'white', marginBottom: '12px' }}>{t.about.partnerCta}</h2>
              <p style={{ color: 'rgba(255,255,255,0.75)', margin: 0, maxWidth: '520px' }}>{t.about.partnerDesc}</p>
            </div>
            <button className="btn btn-primary" onClick={() => { setPage && setPage('contact'); }}>
              {t.about.partnerCta}
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2">
                <line x1="4" y1="8" x2="12" y2="8" />
                <polyline points="9 4 13 8 9 12" />
              </svg>
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

// =======================================================
// CONTACT PAGE
// =======================================================
function ContactPage({ t }) {
  return (
    <div className="page">
      <section className="contact-section">
        <div className="container">
          <div className="contact-grid">
            <div className="contact-info">
              <div className="section-eyebrow">{t.contact.eyebrow}</div>
              <h2 className="section-title">{t.contact.title}</h2>
              <p>{t.contact.desc}</p>

              <div className="contact-items">
                <div className="contact-item">
                  <div className="contact-icon">
                    <ContactIcon type="email" />
                  </div>
                  <div>
                    <h4>{t.contact.email.label}</h4>
                    <p><a href={`mailto:${t.contact.email.value}`}>{t.contact.email.value}</a></p>
                  </div>
                </div>

                <div className="contact-item">
                  <div className="contact-icon">
                    <ContactIcon type="location" />
                  </div>
                  <div>
                    <h4>{t.contact.address.label}</h4>
                    <p>{t.contact.address.value}</p>
                  </div>
                </div>

                <div className="contact-item">
                  <div className="contact-icon">
                    <ContactIcon type="academic" />
                  </div>
                  <div>
                    <h4>{t.contact.academic.label}</h4>
                    <p><a href={`mailto:${t.contact.academic.value}`}>{t.contact.academic.value}</a></p>
                  </div>
                </div>
              </div>
            </div>

            <div className="contact-card">
              <h3>{t.contact.formTitle}</h3>
              <form onSubmit={(e) => e.preventDefault()}>
                <div className="contact-form-group">
                  <label>{t.contact.formName}</label>
                  <input type="text" />
                </div>
                <div className="contact-form-group">
                  <label>{t.contact.formEmail}</label>
                  <input type="email" />
                </div>
                <div className="contact-form-group">
                  <label>{t.contact.formSubject}</label>
                  <input type="text" />
                </div>
                <div className="contact-form-group">
                  <label>{t.contact.formMessage}</label>
                  <textarea rows="4"></textarea>
                </div>
                <button type="submit" className="btn btn-dark" style={{ width: '100%', justifyContent: 'center' }}>
                  {t.contact.formSubmit}
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.HomePage = HomePage;
window.TheoryPage = TheoryPage;
window.ToolsPage = ToolsPage;
window.FormsPage = FormsPage;
window.AboutPage = AboutPage;
window.ContactPage = ContactPage;


/* ===== app.jsx ===== */
/* ============================================================
   4-CAS App — Main entry, state, routing
   ============================================================ */

function App() {
  const [lang, setLang] = React.useState('en');
  const [currentPage, setCurrentPage] = React.useState('home');
  const [mobileOpen, setMobileOpen] = React.useState(false);

  // Update html lang attribute
  React.useEffect(() => {
    document.documentElement.lang = lang;
  }, [lang]);

  // Get translation object
  const t = I18N[lang];

  const setPage = (page) => {
    setCurrentPage(page);
    setMobileOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const renderPage = () => {
    switch (currentPage) {
      case 'home': return <HomePage t={t} setPage={setPage} />;
      case 'theory': return <TheoryPage t={t} />;
      case 'tools': return <ToolsPage t={t} />;
      case 'forms': return <FormsPage t={t} />;
      case 'about': return <AboutPage t={t} />;
      case 'contact': return <ContactPage t={t} />;
      default: return <HomePage t={t} setPage={setPage} />;
    }
  };

  return (
    <div>
      <Nav
        t={t}
        lang={lang}
        setLang={setLang}
        currentPage={currentPage}
        setPage={setPage}
        mobileOpen={mobileOpen}
        setMobileOpen={setMobileOpen}
      />
      <main>
        {renderPage()}
      </main>
      <Footer t={t} setPage={setPage} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

