/* Vocabulary concept page · 食べる (taberu) — Japanese
   Parallel to ConceptPageDerivative. Same Swiss discipline.
   Vocab replaces "definition" as the headline entity; conjugation table
   takes the structural role of the notation table. */

const VocabPageTaberu = () => {
  const [hovered, setHovered] = React.useState(null);
  const [practiceForm, setPracticeForm] = React.useState("te-form");

  // Pitch accent for 食べる: 2-mora HEAD-HIGH then drop. Pattern 2 (heiban + drop on 2nd).
  // We render contour over each mora cell.
  // タベル: ta(L) be(H) ru(H), drop after る — a heiban-ish pattern.
  const moraData = [
    { kana: "た", roma: "ta", pitch: "L" },
    { kana: "べ", roma: "be", pitch: "H" },
    { kana: "る", roma: "ru", pitch: "H" },
  ];
  const dropAfterMora = 2;  // index where pitch falls after particle attachment

  const conjugations = [
    { id: "dictionary",  jp: "食べる",      kana: "たべる",        roma: "taberu",       gloss: "eat (plain)",         polite: false, tense: "non-past", pol: "plain" },
    { id: "masu",        jp: "食べます",    kana: "たべます",      roma: "tabemasu",     gloss: "eat (polite)",        polite: true,  tense: "non-past", pol: "polite" },
    { id: "te",          jp: "食べて",      kana: "たべて",        roma: "tabete",       gloss: "eating; and eat",     polite: false, tense: "—",       pol: "conjunctive" },
    { id: "past",        jp: "食べた",      kana: "たべた",        roma: "tabeta",       gloss: "ate",                  polite: false, tense: "past",     pol: "plain" },
    { id: "negative",    jp: "食べない",    kana: "たべない",      roma: "tabenai",      gloss: "not eat",              polite: false, tense: "non-past", pol: "plain" },
    { id: "past-neg",    jp: "食べなかった",kana: "たべなかった",  roma: "tabenakatta",  gloss: "did not eat",          polite: false, tense: "past",     pol: "plain" },
    { id: "potential",   jp: "食べられる",  kana: "たべられる",    roma: "taberareru",   gloss: "can eat",              polite: false, tense: "non-past", pol: "plain" },
    { id: "passive",     jp: "食べられる",  kana: "たべられる",    roma: "taberareru",   gloss: "be eaten",             polite: false, tense: "non-past", pol: "plain" },
    { id: "causative",   jp: "食べさせる",  kana: "たべさせる",    roma: "tabesaseru",   gloss: "make/let eat",         polite: false, tense: "non-past", pol: "plain" },
    { id: "imperative",  jp: "食べろ",      kana: "たべろ",        roma: "tabero",       gloss: "eat! (rude)",          polite: false, tense: "—",       pol: "imperative" },
  ];

  const examples = [
    {
      jp: ["朝", "ご飯", "を", "食べました"],
      kana: ["あさ", "ごはん", "を", "たべました"],
      pos: ["N", "N", "PRT", "V"],
      gloss: "I ate breakfast.",
      level: "N5",
    },
    {
      jp: ["パン", "より", "ご飯", "を", "食べたい"],
      kana: ["ぱん", "より", "ごはん", "を", "たべたい"],
      pos: ["N", "PRT", "N", "PRT", "V·DESI"],
      gloss: "I want to eat rice rather than bread.",
      level: "N4",
    },
    {
      jp: ["子供", "に", "野菜", "を", "食べさせる"],
      kana: ["こども", "に", "やさい", "を", "たべさせる"],
      pos: ["N", "PRT", "N", "PRT", "V·CAUS"],
      gloss: "Make the child eat vegetables.",
      level: "N3",
    },
  ];

  // Embedding neighborhood — semantic space, not prerequisite.
  const neighbors = [
    { jp: "食う",    kana: "くう",       roma: "kuu",       gloss: "to eat (rough/masculine)",  d: 0.06, freq: 1142, register: "rough" },
    { jp: "飲む",    kana: "のむ",       roma: "nomu",      gloss: "to drink",                  d: 0.11, freq:  287, register: "neutral" },
    { jp: "噛む",    kana: "かむ",       roma: "kamu",      gloss: "to chew, bite",             d: 0.14, freq: 2018, register: "neutral" },
    { jp: "味わう",  kana: "あじわう",   roma: "ajiwau",    gloss: "to taste, savor",           d: 0.16, freq: 3204, register: "literary" },
    { jp: "頂く",    kana: "いただく",   roma: "itadaku",   gloss: "to receive/eat (humble)",   d: 0.17, freq:  691, register: "humble" },
    { jp: "召し上がる", kana: "めしあがる", roma: "meshiagaru", gloss: "to eat (honorific)",     d: 0.19, freq: 4112, register: "honorific" },
  ];

  return (
    <div className="vp">
      {/* Top crumb */}
      <header className="vp__top">
        <div className="vp__top-l">
          <span className="t-mono" style={{color:"var(--ink-4)"}}>§ JP · VOCAB</span>
          <span className="cp__bc-sep">/</span>
          <a className="cp__bc-link" href="#">日本語 · Verbs · ichidan</a>
          <span className="cp__bc-sep">/</span>
          <span className="cp__bc-cur">食べる</span>
          <span className="cp__bc-sep">·</span>
          <span className="t-mono vp__top-id">vocab.jp.taberu</span>
        </div>
        <div className="vp__top-r">
          <span className="mastery-dot mastery-dot--mastered" />
          <span className="t-meta">Mastered · 11 reviews · stability 38d</span>
          <span className="cp__top-divider" />
          <button className="btn btn--ghost cp__top-btn">Audio</button>
          <button className="btn cp__top-btn">Review →</button>
        </div>
      </header>
      <hr className="rule" />

      <div className="vp__hero">
        <div className="vp__hero-main">
          {/* Headline: kanji + furigana + reading */}
          <div className="vp__head">
            <ruby className="vp__kanji">食<rt className="vp__furi">た</rt></ruby><span className="vp__okuri">べる</span>
            <div className="vp__readings">
              <span className="vp__kana-row">
                {moraData.map((m, i) => (
                  <span key={i} className="vp__mora">
                    <span className={"vp__pitch vp__pitch--" + m.pitch.toLowerCase()}>
                      {/* contour segment */}
                      <svg width="40" height="16" viewBox="0 0 40 16" preserveAspectRatio="none">
                        {/* horizontal at H or L */}
                        <line x1="0" y1={m.pitch==="H"?3:13} x2="40" y2={m.pitch==="H"?3:13}
                              stroke="var(--ink)" strokeWidth="1.2"/>
                        {/* vertical transition to next */}
                        {i < moraData.length-1 && moraData[i+1].pitch !== m.pitch && (
                          <line x1="40" y1={m.pitch==="H"?3:13} x2="40" y2={moraData[i+1].pitch==="H"?3:13}
                                stroke="var(--ink)" strokeWidth="1.2"/>
                        )}
                        {/* drop indicator */}
                        {i === dropAfterMora-1 && i === moraData.length-1 && (
                          <line x1="40" y1="3" x2="40" y2="13" stroke="var(--accent)" strokeWidth="1.2"/>
                        )}
                      </svg>
                    </span>
                    <span className="vp__kana">{m.kana}</span>
                    <span className="vp__roma t-mono">{m.roma}</span>
                  </span>
                ))}
              </span>
              <span className="vp__reading-meta">
                <span className="t-meta">Pitch · 2 (atamadaka·heiban hybrid)</span>
                <span className="t-mono vp__reading-pat">[2] た↘べ↗る</span>
              </span>
            </div>
          </div>

          <div className="vp__pos-row">
            <span className="type-chip" data-kind="definition">vocab</span>
            <span className="vp__pos">verb · ichidan (一段)</span>
            <span className="vp__pos-sep">·</span>
            <span className="vp__pos">transitive</span>
            <span className="vp__pos-sep">·</span>
            <span className="vp__pos">JLPT N5</span>
            <span className="vp__pos-sep">·</span>
            <span className="vp__pos vp__pos--freq">Top 100 · rank #87</span>
          </div>

          <hr className="rule-2" style={{margin:"22px 0 16px"}} />

          <p className="t-lead">
            <strong>To eat.</strong> The most common Japanese verb for eating, neutral in register. As an ichidan verb, all conjugations stem from <span className="t-mono">食べ</span> (taberu minus -ru), which is the simplest stem class — no kana ending changes across the paradigm.
          </p>

          <div className="vp__senses">
            <div className="vp__sense">
              <span className="t-mono vp__sense-n">i</span>
              <div>
                <div className="t-meta">Sense</div>
                <div className="t-body">To eat (food). Used for solid food specifically; not for liquids (use <span className="t-mono">飲む</span>).</div>
              </div>
            </div>
            <div className="vp__sense">
              <span className="t-mono vp__sense-n">ii</span>
              <div>
                <div className="t-meta">Sense · figurative</div>
                <div className="t-body">To live on, eke out, "eat by" (e.g. <span className="t-mono">食べていく</span> — to make a living).</div>
              </div>
            </div>
          </div>
        </div>

        {/* Sidecar — quick-reference card */}
        <aside className="vp__hero-side">
          <div className="vp__qref">
            <div className="t-meta">Quick reference</div>
            <hr className="rule-3" />
            <div className="vp__qref-row"><span className="t-meta">Class</span><span className="t-mono">ichidan · -る verb</span></div>
            <div className="vp__qref-row"><span className="t-meta">Stem</span><span className="t-mono">食べ ·tabe·</span></div>
            <div className="vp__qref-row"><span className="t-meta">Transitivity</span><span className="t-mono">他動詞 · transitive</span></div>
            <div className="vp__qref-row"><span className="t-meta">Pitch</span><span className="t-mono">[2] LHH</span></div>
            <div className="vp__qref-row"><span className="t-meta">Frequency</span><span className="t-mono">#87 / 50,000</span></div>
            <div className="vp__qref-row"><span className="t-meta">JLPT</span><span className="t-mono">N5</span></div>
            <div className="vp__qref-row"><span className="t-meta">Kanji</span><span className="t-mono"><a className="cp__prereq-link" href="#">食</a> · 9 strokes · N5</span></div>
            <div className="vp__qref-row"><span className="t-meta">Audio</span><span className="t-mono">→ NHK · CV</span></div>
          </div>
          <div className="vp__qref">
            <div className="t-meta">Your state</div>
            <hr className="rule-3" />
            <div className="vp__qref-row"><span className="t-meta">FSRS retention</span><span className="t-mono">94%</span></div>
            <div className="vp__qref-row"><span className="t-meta">Stability</span><span className="t-mono">38.4d</span></div>
            <div className="vp__qref-row"><span className="t-meta">Last seen</span><span className="t-mono">3d ago · Recall</span></div>
            <div className="vp__qref-row"><span className="t-meta">Next due</span><span className="t-mono">in 35d</span></div>
            <div className="vp__qref-row"><span className="t-meta">Difficulty</span><span className="t-mono">2.4 / 10</span></div>
          </div>
        </aside>
      </div>

      <hr className="rule-2" />

      {/* Conjugation paradigm — modeled on the derivative-page notation table */}
      <section className="vp__sect">
        <div className="vp__sect-head">
          <span className="type-chip" data-kind="theorem" style={{borderColor:"var(--ink)",color:"var(--ink)"}}>PARADIGM</span>
          <h2 className="t-h2">Conjugation</h2>
          <span className="t-meta vp__sect-id">paradigm.jp.ichidan</span>
        </div>
        <p className="t-lead vp__sect-lead">
          Ichidan verbs share one paradigm. Every form below is generated from the stem <span className="t-mono">食べ</span> by appending a fixed ending. The same shape applies to <span className="t-mono">見る</span>, <span className="t-mono">寝る</span>, <span className="t-mono">起きる</span> and ~1,400 other verbs.
        </p>

        <div className="vp__paradigm">
          <div className="vp__para-grid">
            <div className="vp__para-h">Form</div>
            <div className="vp__para-h">Kanji</div>
            <div className="vp__para-h">Kana</div>
            <div className="vp__para-h">Romaji</div>
            <div className="vp__para-h">Gloss</div>
            <div className="vp__para-h vp__para-h--r">Register</div>
            {conjugations.map((c, i) => (
              <React.Fragment key={c.id}>
                <div className={"vp__para-cell vp__para-form " + (c.id===practiceForm?"is-on":"")}
                     onClick={()=>setPracticeForm(c.id)}>
                  <span className="t-mono vp__para-n">{String.fromCharCode(0x2160 + Math.min(i,9))}</span>
                  <span className="t-ui vp__para-name">{c.id}</span>
                </div>
                <div className="vp__para-cell vp__para-kanji">{c.jp}</div>
                <div className="vp__para-cell vp__para-kana">{c.kana}</div>
                <div className="vp__para-cell t-mono vp__para-roma">{c.roma}</div>
                <div className="vp__para-cell vp__para-gloss">{c.gloss}</div>
                <div className="vp__para-cell vp__para-meta t-mono">
                  {c.pol}{c.tense !== "—" ? " · " + c.tense : ""}
                </div>
              </React.Fragment>
            ))}
          </div>
        </div>

        <hr className="rule-3" style={{margin:"18px 0"}} />

        {/* Practice slot — equivalent of explorable explanation */}
        <div className="vp__practice">
          <div className="t-meta vp__practice-h">Try a form · interactive</div>
          <hr className="rule-3" />
          <div className="vp__practice-body">
            <div className="vp__practice-l">
              <div className="t-meta">Active form</div>
              <div className="vp__practice-active">{conjugations.find(c => c.id===practiceForm)?.jp}</div>
              <div className="t-mono vp__practice-roma">{conjugations.find(c => c.id===practiceForm)?.roma}</div>
              <div className="vp__practice-gloss">{conjugations.find(c => c.id===practiceForm)?.gloss}</div>
            </div>
            <div className="vp__practice-r">
              <div className="t-meta">Construct from stem</div>
              <div className="vp__practice-build">
                <span className="vp__practice-stem">食べ</span>
                <span className="vp__practice-plus">+</span>
                <span className="vp__practice-suffix">{
                  practiceForm === "dictionary" ? "る"
                  : practiceForm === "masu" ? "ます"
                  : practiceForm === "te" ? "て"
                  : practiceForm === "past" ? "た"
                  : practiceForm === "negative" ? "ない"
                  : practiceForm === "past-neg" ? "なかった"
                  : practiceForm === "potential" ? "られる"
                  : practiceForm === "passive" ? "られる"
                  : practiceForm === "causative" ? "させる"
                  : "ろ"
                }</span>
                <span className="vp__practice-eq">=</span>
                <span className="vp__practice-result">{conjugations.find(c => c.id===practiceForm)?.jp}</span>
              </div>
              <div className="t-meta vp__practice-hint">Click any row in the paradigm above. The suffix is the only varying piece.</div>
            </div>
          </div>
        </div>
      </section>

      <hr className="rule-2" />

      {/* Examples with morpheme breakdown */}
      <section className="vp__sect">
        <div className="vp__sect-head">
          <span className="type-chip" data-kind="example">EXAMPLES</span>
          <h2 className="t-h2">In context</h2>
          <span className="t-meta vp__sect-id">3 · selected by frequency</span>
        </div>

        <div className="vp__examples">
          {examples.map((ex, i) => (
            <div key={i} className="vp__example">
              <div className="vp__ex-meta">
                <span className="t-mono vp__ex-n">{String(i+1).padStart(2,"0")}</span>
                <span className="t-meta">{ex.level}</span>
              </div>
              <div className="vp__ex-body">
                <div className="vp__ex-jp">
                  {ex.jp.map((seg, j) => (
                    <span key={j} className={"vp__ex-tok " + (seg.includes("食") ? "vp__ex-tok--focus" : "")}>
                      <span className="vp__ex-jp-seg">{seg}</span>
                      <span className="vp__ex-kana t-mono">{ex.kana[j]}</span>
                      <span className="vp__ex-pos t-mono">{ex.pos[j]}</span>
                    </span>
                  ))}
                </div>
                <div className="vp__ex-gloss">{ex.gloss}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <hr className="rule-2" />

      {/* Embedding neighborhood — semantic adjacency */}
      <section className="vp__sect">
        <div className="vp__sect-head">
          <span className="type-chip" data-kind="definition">NEIGHBORHOOD</span>
          <h2 className="t-h2">Semantic neighbors</h2>
          <span className="t-meta vp__sect-id">qwen3 embedding · cosine distance</span>
        </div>

        <p className="t-lead vp__sect-lead">
          Verbs near <span className="t-mono">食べる</span> in semantic space. Distance is cosine; register and frequency vary independently.
        </p>

        <div className="vp__neigh">
          <div className="vp__neigh-grid">
            <div className="vp__neigh-h">d</div>
            <div className="vp__neigh-h">Word</div>
            <div className="vp__neigh-h">Reading</div>
            <div className="vp__neigh-h">Gloss</div>
            <div className="vp__neigh-h">Register</div>
            <div className="vp__neigh-h vp__neigh-h--r">Freq.</div>
            {neighbors.map((n, i) => (
              <React.Fragment key={n.jp}>
                <div className="vp__neigh-cell t-mono vp__neigh-d">{n.d.toFixed(2)}</div>
                <div className="vp__neigh-cell vp__neigh-jp"><a className="cp__prereq-link" href="#">{n.jp}</a></div>
                <div className="vp__neigh-cell vp__neigh-kana">{n.kana} · <span className="t-mono">{n.roma}</span></div>
                <div className="vp__neigh-cell vp__neigh-gloss">{n.gloss}</div>
                <div className="vp__neigh-cell"><span className={"vp__reg vp__reg--" + n.register}>{n.register}</span></div>
                <div className="vp__neigh-cell t-mono vp__neigh-freq">#{n.freq}</div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      <hr className="rule" />
      <footer className="vp__foot">
        <span className="t-meta">vocab.jp.taberu · ichidan · transitive · N5 · #87</span>
        <span className="t-mono" style={{color:"var(--ink-4)"}}>last edit 2026-04-18 · 11 reviews · 94% retention</span>
      </footer>
    </div>
  );
};

window.VocabPageTaberu = VocabPageTaberu;