/* Word Deep Dive — 對齊 WordDeepDivePage.vue */

function WordDeepDivePage({ term, navigate, onBack }) {
  const decoded = decodeURIComponent(term || "食べる");
  return (
    <div className="zen-page">
      <PageHeader title="延伸學習" onBack={onBack || (() => navigate(-1))} />
      <div className="zen-content">
        <div className="content-wrapper">
          <ZenCard>
            <div className="card-title" style={{ fontSize: "var(--fs-24)", marginBottom: 6 }}>{decoded}</div>
            <div className="card-subtitle">句中脈絡：おいしいケーキを食べました</div>
          </ZenCard>

          <ZenCard>
            <div className="card-title" style={{ marginBottom: 12 }}>詞形</div>
            <div className="kv-grid">
              <div className="kv-item"><div className="kv-label">辭書形</div><div className="kv-value">食べる</div></div>
              <div className="kv-item"><div className="kv-label">ます形</div><div className="kv-value">食べます</div></div>
              <div className="kv-item"><div className="kv-label">て形</div><div className="kv-value">食べて</div></div>
              <div className="kv-item"><div className="kv-label">た形</div><div className="kv-value">食べた</div></div>
            </div>
          </ZenCard>

          <ZenCard>
            <div className="card-title" style={{ marginBottom: 12 }}>漢字部件</div>
            <div className="kanji-row">
              <div className="kanji-glyph">食</div>
              <div className="kanji-info">
                <div className="t">食</div>
                <div className="d">音：ショク／く · 義：吃、食物</div>
              </div>
            </div>
            <div className="kanji-row">
              <div className="kanji-glyph">べ</div>
              <div className="kanji-info">
                <div className="t">送り仮名</div>
                <div className="d">動詞活用部分</div>
              </div>
            </div>
          </ZenCard>

          <ZenCard>
            <div className="card-title" style={{ marginBottom: 8 }}>用法提示</div>
            <div className="translation-box">
              「食べる」是一段動詞（る動詞）。丁寧形為「食べます」，過去形為「食べました」。常見搭配：ご飯を食べる、ケーキを食べる。
            </div>
          </ZenCard>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { WordDeepDivePage });