// 威威知識分享 — blog landing. Broad writing across all categories.
(function () {
  const { Icon } = window.WWIcons;
  const { useState, useEffect } = React;
  const WW = window.WW, CAT = window.WWCAT;

  // Pull subject teaching materials in as blog entries too (recent-ish),
  // plus the dedicated blog posts. Category colors.
  const CATCOLOR = {
    math: 'var(--math)', english: 'var(--eng)', finance: 'var(--fin)',
    learning: '#7a5bb0', mindset: '#b1474a', current: '#3a8a9c', time: '#c08a2e', story: '#7e6d5a',
  };
  const CATLABEL = { math: '數學', english: '英文', finance: '理財', learning: '學習方法', mindset: '觀念心態', current: '時事觀察', time: '時間管理', story: '教學故事' };

  // Compose a unified post list from real materials.
  function buildPosts() {
    const posts = [];
    CAT.blogPosts.forEach((p) => posts.push({ ...p }));
    // surface a few real teaching materials as posts
    const pick = (arr, cat, n) => arr.slice(0, n).forEach((a) => posts.push({
      t: a.t, cat, date: '2026.05', min: a.min,
      excerpt: cat === 'math' ? '威威整理的講義／解析，附思路導航與常見錯誤提醒。' : '依 108 課綱與檢定整理的教材，從觀念到實戰一次到位。',
    }));
    pick(CAT.math, 'math', 3);
    pick(CAT.english.filter((a) => a.skill === '閱讀' || a.skill === '寫作'), 'english', 3);
    return posts;
  }

  function Blog() {
    const [cat, setCat] = useState('all');
    const [q, setQ] = useState('');
    const posts = buildPosts();

    useEffect(() => {
      const h = (location.hash || '').replace('#', '');
      if (h && CATLABEL[h]) setCat(h);
      const els = document.querySelectorAll('.ww-reveal');
      const io = new IntersectionObserver((es) => es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }), { threshold: 0.1 });
      els.forEach((e) => io.observe(e));
      return () => io.disconnect();
    }, []);

    const filtered = posts.filter((p) =>
      (cat === 'all' || p.cat === cat) &&
      (!q.trim() || p.t.toLowerCase().includes(q.trim().toLowerCase()))
    );

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

        <section className="ww-cphero" style={{ '--sc': 'var(--accent)' }}>
          <div className="ww-cpheroin">
            <div className="ww-bc"><a href="index.html">首頁</a><span className="sep">/</span><span>部落格</span></div>
            <div className="ww-cpeyebrow"><Icon name="book" size={15} />WEIWEI · BLOG</div>
            <h1 className="ww-cph1">威威的學習筆記</h1>
            <p className="ww-cplead">數學與英文的教材，加上學習方法、觀念心態、時間管理與教學現場的觀察。比起把知識倒給你，我更想分享「怎麼學」這件事。</p>
          </div>
        </section>

        {/* category tiles */}
        <div className="ww-cpbody" style={{ paddingBottom: 20 }}>
          <div className="ww-blogcats ww-reveal">
            {CAT.blogCats.map((b) => (
              <a className="ww-bcat" key={b.key} style={{ '--bc': CATCOLOR[b.key] }}
                onClick={(e) => { e.preventDefault(); setCat(b.key); window.scrollTo({ top: 360, behavior: 'smooth' }); }} href={`#${b.key}`}>
                <div className="bt">{b.t}</div>
                <div className="bd">{b.d}</div>
                {b.n > 0 ? <div className="bn">{b.n} 篇文章 →</div> : <div className="bsoon">內容準備中</div>}
              </a>
            ))}
          </div>
        </div>

        {/* filter + posts */}
        <div className="ww-filter" style={{ '--sc': 'var(--accent)', position: 'static' }}>
          <div className="ww-filterin">
            <div className="ww-frow">
              <span className="ww-flabel">分類</span>
              <div className="ww-chips">
                {['all', ...CAT.blogCats.map((b) => b.key)].map((k) => (
                  <button key={k} className={`ww-chip ${cat === k ? 'on' : ''}`} onClick={() => setCat(k)}>
                    {k === 'all' ? '全部' : CATLABEL[k]}
                  </button>
                ))}
              </div>
              <div className="ww-srch" style={{ marginLeft: 'auto' }}>
                <Icon name="search" size={16} />
                <input placeholder="搜尋文章…" value={q} onChange={(e) => setQ(e.target.value)} />
              </div>
            </div>
          </div>
        </div>

        <div className="ww-cpbody" style={{ paddingTop: 30 }}>
          {filtered.length === 0 ? (
            <div className="ww-noresult">
              <b>這個分類的文章正在籌備中</b>
              先訂閱電子報，新文章上線會第一個通知你。
            </div>
          ) : (
            <div className="ww-postlist">
              {filtered.map((p, i) => (
                <a className="ww-post" key={i} href="#" onClick={(e) => e.preventDefault()}>
                  <span className="pcat" style={{ background: CATCOLOR[p.cat] }}>{CATLABEL[p.cat]}</span>
                  <div>
                    <h4>{p.t}</h4>
                    <p>{p.excerpt}</p>
                    <div className="pm">{p.date} · 閱讀 {p.min} 分鐘</div>
                  </div>
                </a>
              ))}
            </div>
          )}
        </div>

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

  window.WWBlog = Blog;
})();