// 威威知識分享 — Learning Path page.
// Shows a recommended learning journey grouped by difficulty,
// math-English connections, and a 30-day challenge schedule.
(function () {
  const { Icon } = window.WWIcons;
  const { useState, useEffect } = React;
  const WW = window.WW, CAT = window.WWCAT;

  // Define difficulty-based learning paths for English
  const PATHS = {
    beginner: {
      label: '入門',
      en: 'Beginner',
      color: '#7aa84f',
      icon: 'spark',
      subtitle: '國中生 / 英文剛起步的大人',
      desc: '從零開始，建立穩固的基礎。先搞定五大句型和 be 動詞，再慢慢擴展字彙和閱讀。',
      weeks: '1-4 週',
      articles: [
        { t: '五大句型：英文句子的骨架', tag: '文法', slug: 'five-basic-sentence-patterns', why: '所有英文句子都跑不出這五種結構，先學這個就對了' },
        { t: 'be 動詞與一般動詞：兩大幫派的勢力範圍', tag: '文法', slug: 'be-verb-vs-general-verbs', why: '搞懂「我是」和「我做」的差異，英文就通了一半' },
        { t: '代名詞全攻略', tag: '文法', slug: 'pronouns', why: 'I/me/my/mine 到底差在哪？一次搞懂' },
        { t: '時式入門：現在、過去、未來一次搞懂', tag: '文法', slug: 'introduction-to-tenses', why: '三種時式是英文的時間軸，先有概念再細學' },
        { t: '介系詞不再神秘：in / on / at 完全解析', tag: '文法', slug: 'prepositions', why: '台灣學生最頭痛的介系詞，用圖像記憶法搞定' },
        { t: '基礎閱讀：句子解碼術', tag: '閱讀', slug: 'reading-sentence-decoding', why: '學會拆句子，閱讀就不再是一團亂' },
        { t: '國中必備 1200 字（上）', tag: '字彙', slug: 'junior-vocabulary-1200-part1', why: '會考必備字彙，先掌握最常用的 600 字' },
        { t: '用咖啡廳菜單教英文不可數名詞', tag: '日常英文', slug: 'coffee-shop-uncountable-nouns', why: '用生活素材理解抽象文法概念' },
        { t: '用 Instagram 教英文現在進行式', tag: '社群', slug: 'instagram-present-continuous', why: '你每天都在看 Instagram，順便學個時態吧' },
      ],
    },
    intermediate: {
      label: '中等',
      en: 'Intermediate',
      color: '#d9a13a',
      icon: 'book',
      subtitle: '國三～高一 / 準備會考學測',
      desc: '基礎穩了之後，開始挑戰進階文法、提升閱讀速度、練習寫作。這是從「會英文」到「考好英文」的關鍵階段。',
      weeks: '5-12 週',
      articles: [
        { t: '連接詞：把句子串起來的膠水', tag: '文法', slug: 'conjunctions', why: '複合句的基礎，學測長句必備' },
        { t: '形容詞與副詞：修飾語的位置與用法', tag: '文法', slug: 'adjectives-adverbs', why: '修飾語放錯位置，意思完全不一樣' },
        { t: '被動語態：什麼時候要把主詞藏起來', tag: '文法', slug: 'passive-voice', why: '學測和多益都愛考，一定要會' },
        { t: '不定詞 vs 動名詞：to V 還是 V-ing？', tag: '文法', slug: 'infinitive-vs-gerund', why: '台灣學生犯錯率最高的文法點之一' },
        { t: '關係代名詞：who / which / that 的連接魔法', tag: '文法', slug: 'relative-pronouns', why: '把短句變成長句的關鍵技巧' },
        { t: '比較級與最高級', tag: '文法', slug: 'comparatives-superlatives', why: '會考、學測必考，規則加例外都要記' },
        { t: '國中閱讀：短篇故事精讀', tag: '閱讀', slug: 'reading-junior-short-stories', why: '用故事訓練閱讀耐力' },
        { t: '高中核心 3000 字 Level 1', tag: '字彙', slug: 'senior-vocabulary-3000-l1', why: '跨入高中的字彙門檻' },
        { t: '用 Taylor Swift 教你的 9 種時態', tag: '流行文化', slug: 'taylor-swift-9-tenses', why: '用歌詞把抽象時態變成具體畫面' },
        { t: '看 NBA 學英文：球評教你的連接詞與介系詞', tag: '體育英文', slug: 'nba-english-connections-prepositions', why: '看球賽也能學英文' },
        { t: '基礎寫作：句子建造術', tag: '寫作', slug: 'sentence-building', why: '先會造句，才能寫文章' },
        { t: '用學測翻譯題教「英文是一個整體」', tag: '學測', slug: 'gsat-translation-integrated-skills', why: '翻譯題考的是綜合能力' },
      ],
    },
    advanced: {
      label: '進階',
      en: 'Advanced',
      color: '#cc7a3a',
      icon: 'globe',
      subtitle: '高二～高三 / 學測分科衝刺',
      desc: '挑戰高難度文法、長篇閱讀、議論文寫作。這個階段的目標不只是「看得懂」，而是「讀得快、寫得準」。',
      weeks: '13-20 週',
      articles: [
        { t: '假設語氣：if I were 的世界', tag: '文法', slug: 'subjunctive-mood', why: '學測高頻考點，也是很多人搞混的地方' },
        { t: '進階時式：完成式與完成進行式', tag: '文法', slug: 'advanced-tenses', why: '時態的最後一塊拼圖' },
        { t: '倒裝句：考試最愛考的句型', tag: '文法', slug: 'inverted-sentences', why: '學測每年都考，背起來就對了' },
        { t: '分詞構句：把兩個句子變成一個的技巧', tag: '文法', slug: 'participial-constructions', why: '讓你的英文更精練、更學術' },
        { t: '名詞子句：that / whether 引導的子句', tag: '文法', slug: 'noun-clauses', why: '寫作和閱讀都需要的進階能力' },
        { t: '學測閱讀：克漏字攻略', tag: '閱讀', slug: 'reading-cloze-strategy', why: '學測佔分高，策略比實力更重要' },
        { t: '學測閱讀：篇章結構攻略', tag: '閱讀', slug: 'reading-text-structure', why: '看懂文章結構，答題速度翻倍' },
        { t: '學測翻譯：中翻英技巧', tag: '寫作', slug: 'translation-skills', why: '翻譯題是學測拉分關鍵' },
        { t: '學測作文：英文寫作全攻略', tag: '寫作', slug: 'exam-english-writing', why: '從結構到用字，完整備考指南' },
        { t: '學測高頻片語 300', tag: '字彙', slug: 'exam-phrases-300', why: '片語是閱讀和寫作的加速器' },
        { t: '字根字首字尾（上）', tag: '字彙', slug: 'word-roots-prefixes-suffixes-part1', why: '用邏輯記單字，一個字根拆出十個字' },
        { t: '學測英文滿級分的祕密：不是天賦，是系統', tag: '考試', slug: 'gsat-english-top-scorer-secrets', why: '滿級分不是天才，是方法對了' },
        { t: '用 TED Talks 學字根字首：一個演講拆出 30 個字', tag: '演講學英文', slug: 'ted-talks-word-roots', why: '學術英文的字彙寶庫' },
        { t: '用新聞英文學詞彙：2026 年最熱門的 20 個科技單字', tag: '時事學英文', slug: 'tech-vocabulary-2026', why: '時事閱讀必備的當代字彙' },
      ],
    },
    challenge: {
      label: '挑戰',
      en: 'Challenge',
      color: '#b1474a',
      icon: 'spark',
      subtitle: 'GRE / TOEFL / 國際檢定',
      desc: '最高難度的英文能力。GRE 的長難句、TOEFL 的學術聽力、國際檢定的全方位挑戰——準備好了就來。',
      weeks: '21+ 週',
      articles: [
        { t: 'GRE 文法精要：長難句與平行結構', tag: '文法', slug: 'gre-grammar', why: 'GRE Verbal 的核心能力' },
        { t: 'GRE 閱讀：文章結構分析', tag: '閱讀', slug: 'gre-reading-structure', why: '看懂 GRE 文章的骨架' },
        { t: 'GRE 閱讀：邏輯推理', tag: '閱讀', slug: 'gre-reading-logic', why: '邏輯題是 GRE 的靈魂' },
        { t: 'GRE Analytical Writing 完整指南', tag: '寫作', slug: 'gre-writing', why: 'GRE 寫作的滿分策略' },
        { t: 'GRE 核心字彙精選', tag: '字彙', slug: 'gre-core-vocabulary', why: 'GRE 字彙不是背字典，是學邏輯' },
        { t: '分科作文：議論文寫作指南', tag: '寫作', slug: 'argumentative-essay', why: '最高難度的英文寫作' },
        { t: '分科閱讀：長篇閱讀攻略', tag: '閱讀', slug: 'reading-advanced-long-passage', why: '分科測驗的閱讀耐力訓練' },
        { t: '用 Wikipedia 教英文學術寫作風格', tag: '學術', slug: 'wikipedia-academic-writing', why: '學術英文的範本' },
        { t: '用 Apple 發布會教英文簡報技巧', tag: '簡報英文', slug: 'apple-keynote-presentation-english', why: '職場英文的最高表現形式' },
      ],
    },
  };

  // Math-English connections
  const CONNECTIONS = [
    {
      title: '邏輯結構',
      math: '數學證明的「假設 → 推導 → 結論」',
      english: '英文寫作的「Topic sentence → Support → Conclusion」',
      insight: '數學訓練的邏輯思維，直接幫助英文閱讀理解和寫作結構。',
    },
    {
      title: '符號系統',
      math: '數學符號（∑, ∫, ∀, ∃）是一套精確的語言',
      english: '英文文法（時態、語態、連接詞）也是一套符號系統',
      insight: '學會解讀一套符號系統，就更容易學會第二套。',
    },
    {
      title: '模式識別',
      math: '排列組合的題型分類與解題模板',
      english: '閱讀理解的題型分類與答題策略',
      insight: '數學教你的「分類 → 套路 → 練習」方法，英文考試一樣適用。',
    },
    {
      title: '字根 vs 公式',
      math: '記公式要理解推導過程，不是死背',
      english: '記單字要懂字根字首，不是死背',
      insight: '兩種語言都在告訴你：理解結構比記憶表面更有效。',
    },
    {
      title: '錯誤分析',
      math: '整理錯題本，找出錯誤模式',
      english: '分析文法錯誤，找出母語干擾的規律',
      insight: '威威的「錯題系統」在數學和英文都適用。',
    },
  ];

  // 30-day challenge
  const CHALLENGE = [
    { week: '第 1 週', theme: '打基礎', days: [
      { d: 1, task: '學五大句型', link: 'five-basic-sentence-patterns', min: 15 },
      { d: 2, task: '練習 be 動詞造句 10 句', link: 'be-verb-vs-general-verbs', min: 15 },
      { d: 3, task: '背 20 個國中基礎單字', link: 'junior-vocabulary-1200-part1', min: 10 },
      { d: 4, task: '學現在式 vs 現在進行式', link: 'introduction-to-tenses', min: 15 },
      { d: 5, task: '讀一篇短篇故事（200 字內）', link: 'reading-sentence-decoding', min: 20 },
      { d: 6, task: '用 Instagram 學現在進行式', link: 'instagram-present-continuous', min: 10 },
      { d: 7, task: '週回顧：複習本週學的所有內容', link: '', min: 20 },
    ]},
    { week: '第 2 週', theme: '建文法', days: [
      { d: 8, task: '學介系詞 in / on / at', link: 'prepositions', min: 15 },
      { d: 9, task: '學連接詞 and / but / or / so', link: 'conjunctions', min: 15 },
      { d: 10, task: '背 20 個新單字 + 複習舊字', link: 'junior-vocabulary-1200-part1', min: 15 },
      { d: 11, task: '學形容詞與副詞的位置', link: 'adjectives-adverbs', min: 15 },
      { d: 12, task: '讀一篇國中程度短文', link: 'reading-junior-short-stories', min: 20 },
      { d: 13, task: '用 Taylor Swift 歌詞學過去式', link: 'taylor-swift-9-tenses', min: 15 },
      { d: 14, task: '週回顧 + 寫 5 個完整句子', link: '', min: 25 },
    ]},
    { week: '第 3 週', theme: '練閱讀', days: [
      { d: 15, task: '學代名詞（人稱 + 所有格）', link: 'pronouns', min: 15 },
      { d: 16, task: '學疑問句與否定句', link: 'questions-negation', min: 15 },
      { d: 17, task: '背 20 個新單字 + 字根複習', link: 'word-roots-prefixes-suffixes-part1', min: 15 },
      { d: 18, task: '學被動語態基礎', link: 'passive-voice', min: 15 },
      { d: 19, task: '讀一篇說明文 + 回答問題', link: 'reading-junior-expository', min: 25 },
      { d: 20, task: '用 Netflix 影集學日常對話', link: 'netflix-stranger-things-vocabulary', min: 15 },
      { d: 21, task: '週回顧 + 造 10 個被動語態句子', link: '', min: 25 },
    ]},
    { week: '第 4 週', theme: '整合應用', days: [
      { d: 22, task: '學不定詞 vs 動名詞', link: 'infinitive-vs-gerund', min: 20 },
      { d: 23, task: '學比較級與最高級', link: 'comparatives-superlatives', min: 15 },
      { d: 24, task: '背 20 個新單字 + 造句練習', link: 'senior-vocabulary-3000-l1', min: 15 },
      { d: 25, task: '讀一篇短文 + 寫 3 句摘要', link: 'reading-sentence-decoding', min: 25 },
      { d: 26, task: '學關係代名詞 who / which / that', link: 'relative-pronouns', min: 20 },
      { d: 27, task: '用 NBA 球評學連接詞', link: 'nba-english-connections-prepositions', min: 15 },
      { d: 28, task: '寫一篇 80 字短文（自我介紹）', link: 'sentence-building', min: 30 },
      { d: 29, task: '全面複習：文法 + 字彙 + 閱讀', link: '', min: 30 },
      { d: 30, task: '成果檢驗：做一份會考模擬題', link: 'gept-hub', min: 40 },
    ]},
  ];

  function LearningPath() {
  const [activeLevel, setActiveLevel] = useState('beginner');
  const [showChallenge, setShowChallenge] = useState(false);
  const [checkedDays, setCheckedDays] = useState({});

  useEffect(() => {
    const els = document.querySelectorAll('.ww-reveal');
    if (!('IntersectionObserver' in window)) { els.forEach((e) => e.classList.add('in')); return; }
    const io = new IntersectionObserver((ents) => ents.forEach((en) => {
      if (en.isIntersecting) { en.target.classList.add('in'); io.unobserve(en.target); }
    }), { threshold: 0.1, rootMargin: '0px 0px -6% 0px' });
    els.forEach((e) => io.observe(e));
    return () => io.disconnect();
  }, []);

  // Load saved progress
  useEffect(() => {
    try {
      const saved = localStorage.getItem('ww-challenge-progress');
      if (saved) setCheckedDays(JSON.parse(saved));
    } catch (e) {}
  }, []);

  const toggleDay = (d) => {
    setCheckedDays((prev) => {
      const next = { ...prev, [d]: !prev[d] };
      try { localStorage.setItem('ww-challenge-progress', JSON.stringify(next)); } catch (e) {}
      return next;
    });
  };

  const completedCount = Object.values(checkedDays).filter(Boolean).length;

  const level = PATHS[activeLevel];

  return (
    <div className="ww" style={{ '--sc': 'var(--eng)', '--sc-l': '#e3a37e' }}>
      <window.WWTop.Nav />

      {/* Hero */}
      <section className="ww-cphero">
        <div className="ww-cpheroin">
          <div className="ww-bc">
            <a href="/">首頁</a><span className="sep">/</span>
            <a href="/english">英文</a><span className="sep">/</span>
            <span>學習路徑</span>
          </div>
          <div className="ww-cpeyebrow"><Icon name="arrow" size={15} />Learning Path</div>
          <h1 className="ww-cph1">英文學習路徑</h1>
          <p className="ww-cplead">
            不知道從哪裡開始？這條路徑幫你從入門到挑戰，一步一步走。每個階段都有明確的目標和推薦教材。
          </p>
          <div className="ww-cpstats">
            <div className="ww-cpstat"><div className="n">4</div><div className="l">難度等級</div></div>
            <div className="ww-cpstat"><div className="n">30</div><div className="l">天挑戰</div></div>
            <div className="ww-cpstat"><div className="n">5</div><div className="l">數學×英文連結</div></div>
          </div>
        </div>
      </section>

      {/* Difficulty Level Selector */}
      <section className="ww-sec ww-wrap">
        <div className="ww-sechead ww-reveal">
          <div className="ww-eyebrow">分級學習路徑</div>
          <h2 className="ww-h2">選你的等級，開始旅程</h2>
          <div className="ww-h2sub">不確定自己在哪裡？看看每個等級的描述，選一個最接近的開始。隨時可以往回學或往前挑戰。</div>
        </div>

        {/* Level tabs */}
        <div className="ww-reveal" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 36 }}>
          {Object.entries(PATHS).map(([key, p]) => (
            <button
              key={key}
              onClick={() => setActiveLevel(key)}
              style={{
                display: 'flex', alignItems: 'center', gap: 10,
                padding: '14px 24px', borderRadius: 12,
                border: `2px solid ${activeLevel === key ? p.color : 'var(--line2)'}`,
                background: activeLevel === key ? `color-mix(in srgb, ${p.color} 10%, var(--paper))` : 'var(--paper)',
                cursor: 'pointer', fontFamily: 'inherit',
                transition: 'all .15s',
              }}
            >
              <span style={{
                width: 32, height: 32, borderRadius: 8,
                background: p.color, color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, fontWeight: 700, fontFamily: 'var(--serif)',
              }}>{p.label[0]}</span>
              <div style={{ textAlign: 'left' }}>
                <div style={{ fontSize: 16, fontWeight: 700, color: activeLevel === key ? p.color : 'var(--ink)' }}>{p.label}</div>
                <div style={{ fontSize: 12, color: 'var(--gray)', fontFamily: 'var(--mono)' }}>{p.en} · {p.weeks}</div>
              </div>
            </button>
          ))}
        </div>

        {/* Active level detail */}
        <div className="ww-grp open ww-reveal" style={{ borderColor: level.color }}>
          <div className="ww-grphead" style={{ cursor: 'default', borderBottom: `2px solid ${level.color}` }}>
            <div className="gi" style={{ background: level.color, color: '#fff' }}>
              <Icon name={level.icon} size={20} />
            </div>
            <div>
              <div className="gt" style={{ marginBottom: 2 }}>{level.label}：{level.subtitle}</div>
              <div style={{ fontSize: 14, color: 'var(--soft)', lineHeight: 1.6 }}>{level.desc}</div>
            </div>
            <span className="gc" style={{ color: level.color }}>{level.articles.length} 篇</span>
          </div>
          <div className="ww-grpbody">
            <div className="ww-arts">
              {level.articles.map((a, i) => (
                <a
                  className="ww-art"
                  key={i}
                  href={a.slug ? `/post/${a.slug}` : '/english'}
                >
                  <span className="atag" style={{
                    color: level.color,
                    background: `color-mix(in srgb, ${level.color} 12%, transparent)`,
                  }}>{a.tag}</span>
                  <span className="abody">
                    <span className="atitle">{a.t}</span>
                    <span className="awhy">{a.why}</span>
                  </span>
                  <span className="aarrow"><Icon name="arrow" size={17} /></span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* Math × English Connections */}
      <section className="ww-sec" style={{ background: 'linear-gradient(180deg, var(--cream), #f3ede2)' }}>
        <div className="ww-wrap">
          <div className="ww-sechead ww-reveal">
            <div className="ww-eyebrow">跨領域連結</div>
            <h2 className="ww-h2">數學 × 英文：看似不同，其實相通</h2>
            <div className="ww-h2sub">威威同時教數學和英文，不是巧合——這兩種語言在底層共享同一種思維結構。</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: 20 }}>
            {CONNECTIONS.map((c, i) => (
              <div key={i} className="ww-reveal" style={{
                background: 'var(--paper)', border: '1px solid var(--line)',
                borderRadius: 16, padding: 28,
                transition: 'transform .18s, box-shadow .18s',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                  <span style={{
                    width: 36, height: 36, borderRadius: 10,
                    background: 'color-mix(in srgb, var(--eng) 12%, transparent)',
                    color: 'var(--eng)',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontFamily: 'var(--serif)', fontWeight: 700, fontSize: 16,
                  }}>{i + 1}</span>
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 20, fontWeight: 700 }}>{c.title}</span>
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginBottom: 16 }}>
                  <div style={{
                    background: 'color-mix(in srgb, var(--math) 8%, transparent)',
                    borderRadius: 10, padding: 14,
                  }}>
                    <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--math)', fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>數學</div>
                    <div style={{ fontSize: 14, color: 'var(--soft)', lineHeight: 1.6 }}>{c.math}</div>
                  </div>
                  <div style={{
                    background: 'color-mix(in srgb, var(--eng) 8%, transparent)',
                    borderRadius: 10, padding: 14,
                  }}>
                    <div style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--eng)', fontWeight: 700, letterSpacing: 1, marginBottom: 6 }}>英文</div>
                    <div style={{ fontSize: 14, color: 'var(--soft)', lineHeight: 1.6 }}>{c.english}</div>
                  </div>
                </div>
                <div style={{ fontSize: 15, color: 'var(--ink)', lineHeight: 1.7, fontWeight: 500 }}>
                  {c.insight}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 30-Day Challenge */}
      <section className="ww-sec ww-wrap" id="challenge">
        <div className="ww-sechead ww-reveal">
          <div className="ww-eyebrow">30 天挑戰</div>
          <h2 className="ww-h2">30 天英文養成計畫</h2>
          <div className="ww-h2sub">每天 15-40 分鐘，一個月後你會驚訝自己的進步。從五大句型開始，到能獨立寫一篇短文。</div>
        </div>

        {/* Progress bar */}
        <div className="ww-reveal" style={{
          background: 'var(--paper)', border: '1px solid var(--line)',
          borderRadius: 16, padding: 28, marginBottom: 32,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
            <div>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 700 }}>挑戰進度</span>
              <span style={{ fontSize: 14, color: 'var(--gray)', marginLeft: 12 }}>{completedCount} / 30 天</span>
            </div>
            <button
              className="ww-chip"
              onClick={() => setShowChallenge(!showChallenge)}
              style={{ cursor: 'pointer' }}
            >
              {showChallenge ? '收起' : '展開'}完整計畫
            </button>
          </div>
          <div style={{
            height: 12, borderRadius: 6, background: 'var(--line)',
            overflow: 'hidden', position: 'relative',
          }}>
            <div style={{
              height: '100%', borderRadius: 6,
              background: `linear-gradient(90deg, #7aa84f, #d9a13a, #cc7a3a, #b1474a)`,
              width: `${(completedCount / 30) * 100}%`,
              transition: 'width .3s ease',
            }} />
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8, fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--mono)' }}>
            <span>入門</span><span>中等</span><span>進階</span><span>完成！</span>
          </div>
        </div>

        {/* Challenge weeks */}
        {showChallenge && (
          <div>
            {CHALLENGE.map((week, wi) => (
              <div key={wi} className="ww-grp open ww-reveal" style={{ marginBottom: 16 }}>
                <div className="ww-grphead" style={{ cursor: 'default' }}>
                  <div className="gi" style={{
                    background: ['#7aa84f', '#d9a13a', '#cc7a3a', '#b1474a'][wi],
                    color: '#fff', fontSize: 14,
                  }}>{wi + 1}</div>
                  <div className="gt">{week.week}：{week.theme}</div>
                  <span className="gc">{week.days.filter((d) => checkedDays[d.d]).length} / {week.days.length} 天</span>
                </div>
                <div className="ww-grpbody">
                  {week.days.map((day) => (
                    <div
                      key={day.d}
                      style={{
                        display: 'flex', alignItems: 'center', gap: 14,
                        padding: '12px 0',
                        borderBottom: '1px solid var(--line)',
                      }}
                    >
                      <button
                        onClick={() => toggleDay(day.d)}
                        style={{
                          width: 28, height: 28, borderRadius: 8,
                          border: `2px solid ${checkedDays[day.d] ? '#7aa84f' : 'var(--line2)'}`,
                          background: checkedDays[day.d] ? '#7aa84f' : 'transparent',
                          color: checkedDays[day.d] ? '#fff' : 'transparent',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                          cursor: 'pointer', flex: 'none', fontSize: 14,
                        }}
                        aria-label={`第 ${day.d} 天`}
                      >
                        {checkedDays[day.d] ? '✓' : ''}
                      </button>
                      <span style={{
                        fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--muted)',
                        width: 28, textAlign: 'center', flex: 'none',
                      }}>D{day.d}</span>
                      {day.link ? (
                        <a
                          href={`/post/${day.link}`}
                          style={{
                            flex: 1, fontSize: 15, fontWeight: 500,
                            color: checkedDays[day.d] ? 'var(--gray)' : 'var(--ink)',
                            textDecoration: checkedDays[day.d] ? 'line-through' : 'none',
                          }}
                        >{day.task}</a>
                      ) : (
                        <span style={{
                          flex: 1, fontSize: 15, fontWeight: 500,
                          color: checkedDays[day.d] ? 'var(--gray)' : 'var(--ink)',
                          textDecoration: checkedDays[day.d] ? 'line-through' : 'none',
                        }}>{day.task}</span>
                      )}
                      <span style={{
                        fontSize: 12, color: 'var(--muted)', fontFamily: 'var(--mono)',
                        flex: 'none',
                      }}>{day.min} 分鐘</span>
                    </div>
                  ))}
                </div>
              </div>
            ))}

            {/* Completion message */}
            {completedCount === 30 && (
              <div className="ww-reveal" style={{
                background: 'color-mix(in srgb, #7aa84f 10%, var(--paper))',
                border: '2px solid #7aa84f', borderRadius: 16,
                padding: 36, textAlign: 'center', marginTop: 24,
              }}>
                <div style={{ fontSize: 48, marginBottom: 12 }}>🎉</div>
                <div style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 700, marginBottom: 12 }}>恭喜完成 30 天挑戰！</div>
                <div style={{ fontSize: 16, color: 'var(--soft)', lineHeight: 1.8, maxWidth: 500, margin: '0 auto' }}>
                  你已經建立了英文學習的基礎系統。下一步，繼續往中等和進階等級挑戰吧！
                </div>
                <div style={{ display: 'flex', justifyContent: 'center', gap: 14, marginTop: 24 }}>
                  <a className="ww-btn" href="/english" style={{ fontSize: 15, padding: '13px 22px' }}>
                    繼續學習<Icon name="arrow" size={17} />
                  </a>
                  <button
                    className="ww-btn ghost"
                    onClick={() => { setCheckedDays({}); localStorage.removeItem('ww-challenge-progress'); }}
                    style={{ fontSize: 15, padding: '13px 22px' }}
                  >
                    重新開始
                  </button>
                </div>
              </div>
            )}
          </div>
        )}

        {!showChallenge && (
          <div className="ww-reveal" style={{ textAlign: 'center' }}>
            <button
              className="ww-btn"
              onClick={() => setShowChallenge(true)}
              style={{ fontSize: 16 }}
            >
              開始 30 天挑戰<Icon name="arrow" size={18} />
            </button>
            <p style={{ fontSize: 14, color: 'var(--gray)', marginTop: 14 }}>
              進度會自動儲存在你的瀏覽器中
            </p>
          </div>
        )}
      </section>

      {/* CTA to related pages */}
      <section className="ww-learn" style={{ borderRadius: 0 }}>
        <div className="ww-learnin">
          <div className="ww-reveal">
            <div className="ww-eyebrow">更多資源</div>
            <h3>學習路徑只是起點</h3>
            <p>完整的知識地圖、六大分類、全文搜尋——用不同的角度找到你需要的教材。</p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 14, marginTop: 24 }}>
              <a className="ww-btn" href="/english" style={{ fontSize: 15, padding: '13px 22px' }}>
                <Icon name="globe" size={17} />英文知識地圖
              </a>
              <a className="ww-btn ghost" href="/search" style={{ fontSize: 15, padding: '13px 22px', borderColor: 'rgba(255,255,255,.34)' }}>
                <Icon name="search" size={17} />全文搜尋
              </a>
            </div>
          </div>
          <div className="ww-learnchips ww-reveal">
            {['30 天挑戰', '分級學習', '數學×英文', '考試準備', '免費教材'].map((c) => (
              <span key={c}>{c}</span>
            ))}
          </div>
        </div>
      </section>

      <window.WWBottom.Freebie />
      <window.WWBottom.Newsletter />
      <window.WWBottom.Footer />
    </div>
  );

}

window.WWLearningPath = LearningPath;
})();