// Shared reference material, separated from the Dojo's exercises.
function ReferenceView({ db, section, immersionMode, externalSearch, onClearExternalSearch, pushToast, onRefresh, onJumpToWord }) {
  const activeTab = section;
  const [inspectedWord, setInspectedWord] = React.useState(null);
  const [corpusSearch, setCorpusSearch] = React.useState('');
  const [pluralTestNoun, setPluralTestNoun] = React.useState('Sobo');
  const lexicon = React.useMemo(() => buildLiveLexicon(db), [db]);
  const conjugations = React.useMemo(() => buildLiveConjugations(db), [db]);
  const tokenMap = React.useMemo(() => buildTokenMap(lexicon, conjugations), [lexicon, conjugations]);
  const canonical45List = React.useMemo(() => BASELINE_CORPUS_45.map(base => {
    const live = (db.example_sentences || []).find(s => (!s.status || s.status === 'active') && Number(s.corpus_number) === Number(base.num));
    return live ? { num: base.num, sea: live.conlang, eng: live.english } : base;
  }), [db.example_sentences]);
  return <div className="reference-shell">
      {activeTab === 'grammar' && (
        <>
        <GrammarView data={db} pushToast={pushToast} onRefresh={onRefresh} onJumpToWord={onJumpToWord} />
        <details className="grammar-reference-details">
          <summary className="serif">Reference guide &amp; 45 canonical sentences</summary>
        <section className="learn-tab-section">
          <h3 className="serif learn-section-h">Plurals, pronunciation &amp; corpus</h3>
          <p className="learn-section-desc">
            Complete grammatical rules, plural formation formula, pronunciation guide, compound builder, and all 45 numbered sentences from <code>SeameneseDictionary.txt</code>.
          </p>

          <div className="learn-grammar-two-col">
            {/* Official Plural Rule Card + Interactive Pluralizer */}
            <div className="learn-card">
              <span className="learn-badge learn-badge-amber">Official Plural Rule (-on)</span>
              <h4 className="serif" style={{ fontSize: 22, margin: '8px 0' }}>
                Formula: <code>&lt;noun&gt; minus last vowel + on</code>
              </h4>
              <ul style={{ margin: '8px 0 14px', paddingLeft: 20, lineHeight: 1.7 }}>
                <li><strong>1 sobo</strong> {!immersionMode && '(1 foot)'} → <strong>2 sobon</strong> {!immersionMode && '(2 feet)'}</li>
                <li><strong>1 buana</strong> {!immersionMode && '(1 friend)'} → <strong>2 buanon</strong> {!immersionMode && '(2 friends)'}</li>
                <li><strong>1 skantar</strong> {!immersionMode && '(1 crush/lover)'} → <strong>2 skantaron</strong> {!immersionMode && '(2 crushes/lovers)'}</li>
                <li><strong>1 texik</strong> {!immersionMode && '(1 asshole)'} → <strong>2 texikon</strong> {!immersionMode && '(2 assholes)'}</li>
                <li><strong>1 silhbi</strong> {!immersionMode && '(1 cat)'} → <strong>2 silhbon</strong> {!immersionMode && '(2 cats)'}</li>
              </ul>
              <div style={{ background: 'var(--ink-0)', padding: 12, borderRadius: 'var(--radius-control)', border: '1px solid var(--line)' }}>
                <div className="mono" style={{ fontSize: 11, color: 'var(--fg-mute)', marginBottom: 6 }}>
                  INTERACTIVE PLURALIZER LAB:
                </div>
                <div style={{ display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap' }}>
                  <input
                    type="text"
                    className="field field-mono"
                    style={{ maxWidth: 180 }}
                    value={pluralTestNoun}
                    onChange={e => setPluralTestNoun(e.target.value)}
                    placeholder="Type a noun…"
                  />
                  <span className="mono" style={{ fontSize: 15, color: 'var(--accent)' }}>
                    → 2{' '}
                    <strong>
                      {pluralTestNoun.trim()
                        ? pluralTestNoun.trim().replace(/[aeiouëAEIOUË]$/, '') + 'on'
                        : '...'}
                    </strong>
                  </span>
                </div>
              </div>
            </div>

            {/* Pronunciation & Multi-Verb Chaining Rules */}
            <div className="learn-card">
              <span className="learn-badge">Pronunciation &amp; Multi-Verb Chaining</span>
              <h4 className="serif" style={{ fontSize: 22, margin: '8px 0' }}>
                Diaeresis Ë, Shibilant X &amp; Verb Chains
              </h4>
              <div style={{ fontSize: 14, lineHeight: 1.65, color: 'var(--paper-dim)' }}>
                <p style={{ margin: '0 0 8px' }}>
                  • <strong>Vowel Ë (Diaeresis):</strong> <code>E</code> followed by <code>I</code> always makes <code>Ë</code> (e.g., <em>Ëi</em>, <em>Zetëi</em>, <em>Obisëi</em>, <em>Mikëi</em>, <em>Zorpëi</em>). <code>Ëi</code> is pronounced <strong>"ay"</strong>, whereas normally <code>E</code> is pronounced like <strong>"a" in "amp"</strong>.
                </p>
                <p style={{ margin: '0 0 8px' }}>
                  • <strong>Consonant X:</strong> Always pronounced as <strong>"sh"</strong> (e.g., <em>Xai</em> = "shai", <em>Texik</em> = "teshik", <em>Brux</em> = "brush").
                </p>
                <p style={{ margin: '0 0 8px' }}>
                  • <strong>Multi-Verb Chaining Rule:</strong> When using more than one verb referring to a single subject, <strong>only the first verb conjugates</strong>; the second stays in the infinitive! E.g.: <em>"Ëi skan obisëi ezuki"</em> <ImmersionGloss cue="The second verb stays in its infinitive.">(I like to sing)</ImmersionGloss>, <em>"Lon kinai zetëi tumu"</em>.
                </p>
                <p style={{ margin: 0 }}>
                  • <strong>Singing &amp; Amplifier Wo:</strong> Singing is expressed as <strong>"Obisëi ezuki"</strong> (vocalize music). And <strong>Wo</strong> amplifies the phrase: <em>Ëi skan</em> → <em>Ëi wo skan</em>. <ImmersionGloss cue="Use wo when the feeling grows stronger.">I like → I love.</ImmersionGloss>
                </p>
              </div>
            </div>
          </div>

          {/* Pronoun & Possessive Matrix */}
          <div className="learn-card">
            <span className="learn-badge">Pronoun &amp; Possessive Matrix</span>
            <table className="learn-conj-table" style={{ marginTop: 10 }}>
              <thead>
                <tr>
                  <th>Person</th>
                  <th>Subject / Object</th>
                  <th>Possessive (Before Noun)</th>
                  <th>Verb Ending</th>
                </tr>
              </thead>
              <tbody>
                <tr><td>{immersionMode ? '1st Sg' : '1st Sg (I / My)'}</td><td className="mono"><strong>Ëi</strong></td><td className="mono"><strong>Ta</strong> (never Ëi!)</td><td>Bare stem (<code>Bet</code>, <code>Xa</code>)</td></tr>
                <tr><td>{immersionMode ? '2nd Sg' : '2nd Sg (You / Your)'}</td><td className="mono"><strong>Te</strong></td><td className="mono"><strong>Tëi</strong></td><td>Bare stem (<code>Bet</code>, <code>Xa</code>)</td></tr>
                <tr><td>{immersionMode ? '2nd Pl' : '2nd Pl (You all)'}</td><td className="mono"><strong>Ton</strong></td><td className="mono"><strong>Tëion</strong></td><td>Stem + <code>-u</code> (<code>Betu</code>, <code>Xau</code>)</td></tr>
                <tr><td>{immersionMode ? '1st Pl' : '1st Pl (We / Our)'}</td><td className="mono"><strong>Na</strong></td><td className="mono"><strong>Nai</strong></td><td>Stem + <code>-ami</code> (<code>Betami</code>, <code>Xaami</code>)</td></tr>
                <tr><td>{immersionMode ? '3rd Sg' : '3rd Sg (He/She/It)'}</td><td className="mono"><strong>La</strong></td><td className="mono"><strong>Lai</strong></td><td>Stem + <code>-ai</code> (<code>Betai</code>, <code>Xaai</code>)</td></tr>
                <tr><td>{immersionMode ? '3rd Pl' : '3rd Pl (They / Their)'}</td><td className="mono"><strong>Lon</strong></td><td className="mono"><strong>Laion</strong></td><td>Stem + <code>-ai</code> (<code>Betai</code>, <code>Xaai</code>)</td></tr>
              </tbody>
            </table>
          </div>

          {/* Compound Word Builder */}
          <h4 className="serif" style={{ fontSize: 24, margin: '28px 0 12px' }}>Compound Word Builder</h4>
          <div className="learn-compounds-grid">
            {CANONICAL_COMPOUNDS.map((c, idx) => (
              <div key={idx} className="learn-card" style={{ marginBottom: 0, padding: 16 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
                  <span className="mono" style={{ fontSize: 13 }}>{c.part1} + {c.part2}</span>
                  <span className="mono" style={{ fontSize: 16, fontWeight: 700, color: '#fbbf24' }}>→ {c.result}</span>
                </div>
                <div style={{ fontSize: 13, color: 'var(--fg-mute)', marginTop: 6 }}>
                  <ImmersionGloss cue={`Combine ${c.part1} and ${c.part2} to describe a related concept.`}><strong style={{ color: 'var(--paper)' }}>{c.meaning}</strong></ImmersionGloss>
                </div>
              </div>
            ))}
          </div>

          {/* Searchable Official 45 Corpus Sentences */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap', margin: '32px 0 14px' }}>
            <h4 className="serif" style={{ fontSize: 24, margin: 0 }}>Official 45 Corpus Sentences</h4>
            <input
              type="search"
              className="field"
              style={{ maxWidth: 380 }}
              placeholder="Search the 45 canonical sentences (e.g. ezuki, skantar, panke)…"
              value={corpusSearch}
              onChange={e => setCorpusSearch(e.target.value)}
            />
          </div>

          <div className="learn-corpus-grid">
            {canonical45List
              .filter(item => {
                if (!corpusSearch.trim()) return true;
                const q = corpusSearch.toLowerCase();
                return (
                  item.sea.toLowerCase().includes(q) ||
                  item.eng.toLowerCase().includes(q) ||
                  item.num.includes(q)
                );
              })
              .map(item => (
                <div key={item.num} className="learn-card" style={{ marginBottom: 0, padding: '14px 16px' }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
                    <span className="corpus-num-badge mono">#{item.num}</span>
                    <span className="mono" style={{ fontSize: 16, fontWeight: 600, color: 'var(--accent)' }}>
                      <InteractiveSeameneseText
                        text={item.sea}
                        tokenMap={tokenMap}
                        onInspectWord={setInspectedWord}
                      />
                    </span>
                  </div>
                  <div className="serif" style={{ fontSize: 14, fontStyle: 'italic', color: 'var(--paper-dim)', marginTop: 6 }}>
                    <ImmersionGloss cue="Read the sentence, then select its words for usage cues.">{item.eng}</ImmersionGloss>
                  </div>
                </div>
              ))}
          </div>
        </section>
        </details>
        </>
      )}
      <WordInspectorModal entry={inspectedWord} conjugations={conjugations} immersionMode={immersionMode} onClose={() => setInspectedWord(null)} />
    </div>;
}