// 威威知識分享 — bottom sections: Timeline, Freebie, Newsletter, About, Social+Footer.
(function () {
  const { Icon } = window.WWIcons;
  const W = window.WW;
  const { useState } = React;

  function Timeline() {
    const [subj, setSubj] = useState('math');
    const data = W.curriculum[subj];
    const tlc = subj === 'math' ? 'var(--math)' : 'var(--eng)';
    return (
      <section className="ww-tl ww-sec" id="timeline" style={{ '--tlc': tlc }}>
        <div className="ww-wrap ww-reveal">
          <div className="ww-eyebrow">108 課綱 · 知識地圖</div>
          <h2 className="ww-h2">從國一到高三，一條看得見的學習路徑</h2>
          <div className="ww-h2sub" style={{ marginBottom: 26 }}>每個學期該掌握的核心知識點、對應的考試，與推薦閱讀——先看見全貌，再決定下一步往哪走。</div>
          <div className="ww-tltabs" role="tablist">
            <button className={`ww-tltab ${subj === 'math' ? 'on' : ''}`} onClick={() => setSubj('math')} aria-selected={subj === 'math'}>
              <Icon name="spark" size={16} />數學知識地圖
            </button>
            <button className={`ww-tltab ${subj === 'english' ? 'on' : ''}`} onClick={() => setSubj('english')} aria-selected={subj === 'english'}>
              <Icon name="globe" size={16} />英文知識地圖
            </button>
          </div>
          <div className="ww-tlnote">{W.curriculum.note}</div>
        </div>
        <div className="ww-tlrail ww-wrap" style={{ marginBottom: 12 }}>
          <span className="ww-tlrail seg ww-mono" style={{ fontSize: 11, color: 'var(--gray)' }}>國中</span>
          <span className="line" style={{ flex: '0 0 1px' }}></span>
        </div>
        <div className="ww-tlscroll">
          {data.map((c, i) => (
            <div className="ww-tlcard" key={i}>
              <div className="gr">
                <span className="grl">{c.g}</span>
                <span className="grn">{c.n} 知識點</span>
              </div>
              <ul className="ww-tlpts">
                {c.pts.map((p, j) => <li key={j}>{p}</li>)}
              </ul>
              <div className="ww-tlexams">
                {c.exams.map((e) => <span key={e}>{e}</span>)}
              </div>
            </div>
          ))}
        </div>
        <div className="ww-wrap" style={{ textAlign: 'center', marginTop: 8 }}>
          <a className="ww-pillmore" style={{ '--pc': tlc, fontSize: 16 }} href={subj === 'math' ? 'math.html' : 'english.html'}>
            進入完整{subj === 'math' ? '數學' : '英文'}知識地圖<Icon name="arrow" size={17} />
          </a>
        </div>
      </section>
    );
  }

  function Freebie() {
    const [done, setDone] = useState(false);
    const F = W.freebie;
    const submit = (e) => { e.preventDefault(); setDone(true); };
    return (
      <section className="ww-freebie" id="freebie">
        <div className="ww-freebiein">
          <div className="ww-reveal">
            <span className="ww-fbadge">{F.badge}</span>
            <h3>{F.title}</h3>
            <p>{F.desc}</p>
            <div className="ww-fitems">
              {F.items.map((it, i) => (
                <div className="ww-fitem" key={i}>
                  <div className="k"><Icon name={['book', 'check', 'globe'][i]} size={18} /></div>
                  <b>{it.t}</b>
                  <span>{it.d}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="ww-fform ww-reveal">
            {done ? (
              <div className="ww-fok">
                <div className="ic"><Icon name="check" size={28} stroke={2.6} /></div>
                <b>教材寄出囉！</b>
                <p>請到信箱收信（記得看看垃圾信匣）。下一封，是威威的學習筆記。</p>
              </div>
            ) : (
              <form onSubmit={submit}>
                <label htmlFor="fb-email">把免費教材寄到你的信箱</label>
                <input id="fb-email" className="ww-finput" type="email" required placeholder={F.placeholder} />
                <button className="ww-fsubmit" type="submit">{F.button}<Icon name="arrow" size={18} /></button>
                <div className="ww-fnote">{F.note}</div>
              </form>
            )}
          </div>
        </div>
      </section>
    );
  }

  function Newsletter() {
    const [done, setDone] = useState(false);
    const N = W.newsletter;
    return (
      <section className="ww-nl ww-sec">
        <div className="ww-nlcard">
          <div className="ww-nlin ww-reveal">
            <div>
              <div className="ww-eyebrow">電子報</div>
              <h3>{N.title}</h3>
              <p>{N.desc}</p>
            </div>
            <form className="ww-nlform" onSubmit={(e) => { e.preventDefault(); setDone(true); }}>
              {done ? (
                <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fin)', display: 'flex', alignItems: 'center', gap: 9 }}>
                  <Icon name="check" size={20} stroke={2.6} />訂閱成功，下週一見！
                </div>
              ) : (
                <div className="ww-nlrow">
                  <input type="email" required placeholder={N.placeholder} />
                  <button type="submit">{N.button}</button>
                </div>
              )}
              <span className="note">{N.note}</span>
            </form>
          </div>
        </div>
      </section>
    );
  }

  function About() {
    const A = W.about;
    return (
      <section className="ww-about ww-sec" id="about">
        <div className="ww-wrap ww-aboutin">
          <div className="ww-aphoto ww-reveal">
            <img src="assets/willy-head.jpg" alt="威威 Willy 大頭照" />
            <div className="mk"><img src="assets/mark-slate.png" alt="" /></div>
          </div>
          <div className="ww-reveal">
            <div className="ww-eyebrow">{A.title}</div>
            <h3>把兩種完全不同的腦袋，綁在一起</h3>
            {A.body.map((p, i) => <p key={i}>{p}</p>)}
            <div className="ww-acreds">
              {A.creds.map((c) => <span key={c}>{c}</span>)}
            </div>
            <a className="ww-acta" href="index.html#about">{A.cta}<Icon name="arrow" size={17} /></a>
          </div>
        </div>
      </section>
    );
  }

  function Footer() {
    return (
      <footer className="ww-foot" id="contact">
        <div className="ww-social">
          <div className="ww-socialin ww-reveal">
            <h4>在每個平台，都找得到威威</h4>
            <p>學習資源、教育觀察、日常碎念——選一個你習慣的地方追蹤吧。</p>
            <div className="ww-socialgrid">
              {W.socials.map((s) => (
                <a className="ww-soc" key={s.k} href={s.h} target="_blank" rel="noopener">
                  <Icon name={s.k} size={18} />{s.t}
                </a>
              ))}
            </div>
          </div>
        </div>
        <div className="ww-foottop">
          <div className="bcol">
            <b><img src="assets/mark-white.png" alt="" />{W.brand}</b>
            <div className="tl">{W.tagline}。寫給家長、學生，與相信跨領域思考的人。</div>
          </div>
          <div className="col">
            <b>內容</b>
            {W.nav.map((n) => <a key={n.t} href={n.href}>{n.t}</a>)}          </div>
          <div className="col">
            <b>聯絡</b>
            <a href={`mailto:${W.email}`}>{W.email}</a>
            <a href="https://line.me/ti/p/XMNSTqpm_f" target="_blank" rel="noopener">加 LINE 聊聊</a>
            <a href="#freebie">免費領取教材</a>
            <a href="#timeline">108 課綱地圖</a>
          </div>
          <div className="col">
            <div className="ww-footnl">
              <b>訂閱每週學習筆記</b>
              <form className="r" onSubmit={(e) => e.preventDefault()}>
                <input type="email" placeholder="你的 Email" aria-label="Email" />
                <button type="submit" aria-label="訂閱"><Icon name="arrow" size={16} /></button>
              </form>
            </div>
          </div>
        </div>
        <div className="ww-disc">投資相關內容僅為個人學習與教育分享，不構成投資建議。投資有風險，請依自身情況審慎評估。</div>
        <div className="ww-copy">
          <span>© 2026 王威利 Willy Wang · {W.brand}</span>
          <span className="ww-mono">{W.site}</span>
        </div>
      </footer>
    );
  }

  window.WWBottom = { Timeline, Freebie, Newsletter, About, Footer };
})();