// Variant 3: Encyclopedia — 古い百科事典の版面・2段組・章ナンバリング
function EncyclopediaResult({ subject, level, onChangeLevel, tone, onChangeTone, onClose }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, background: '#eee5cd',
      overflowY: 'auto', WebkitOverflowScrolling: 'touch',
      fontFamily: '"Noto Serif JP", "Hiragino Mincho Pro", serif',
      color: '#1a1612',
    }}>
      <StickyHeader variant="encyclopedia" onClose={onClose} subject={subject}/>

      <div style={{ padding: '0 22px 40px' }}>

        {/* Running head */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '12px 0 8px', borderBottom: '2px double #1a1612',
          fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: 2,
          color: '#1e3a5f',
        }}>
          <div>{subject.name.slice(0, 1).toUpperCase()} · {subject.reading.slice(0, 2)}</div>
          <div>VOL. Ⅰ</div>
          <div>p. 0{Math.abs(subject.catalogNo.length * 7) % 900}</div>
        </div>

        {/* Letter drop + title */}
        <div style={{ marginTop: 22, position: 'relative' }}>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 10,
            letterSpacing: 3, color: '#1e3a5f', marginBottom: 4,
          }}>ENTRY № {subject.catalogNo}</div>
          <div style={{
            display: 'flex', alignItems: 'flex-start', gap: 14,
            borderBottom: '1px solid #1a1612', paddingBottom: 12, marginBottom: 16,
          }}>
            <div style={{
              fontSize: 72, fontWeight: 600, lineHeight: 0.85,
              color: '#1e3a5f', fontFamily: '"Noto Serif JP", serif',
              marginTop: -4,
            }}>{subject.name.slice(0, 1)}</div>
            <div style={{ flex: 1, paddingTop: 6 }}>
              <div style={{
                fontSize: 26, fontWeight: 500, letterSpacing: 2, lineHeight: 1.15,
              }}>{subject.name}</div>
              <div style={{
                fontSize: 11, color: '#5a4818', letterSpacing: 1, marginTop: 3,
                fontFamily: 'ui-monospace, monospace',
              }}>{subject.reading} · {subject.latin}</div>
              <div style={{
                fontSize: 11, color: '#5a4818', marginTop: 4, fontStyle: 'italic',
              }}>［{subject.category}］</div>
            </div>
          </div>
        </div>

        {/* Lead paragraph with drop cap — columnar text */}
        <div style={{
          fontSize: 14, lineHeight: 2, textAlign: 'justify',
          textIndent: '1em', marginBottom: 18, hyphens: 'auto',
        }}>
          <span style={{
            float: 'left', fontSize: 44, lineHeight: 0.9, fontWeight: 600,
            marginRight: 6, marginTop: 4, color: '#1e3a5f',
            fontFamily: '"Noto Serif JP", serif',
          }}>¶</span>
          {renderEmphasis(subject.summary, '#1e3a5f')}
        </div>

        {/* Plate */}
        <div style={{
          border: '1.5px solid #1a1612', padding: 6, marginBottom: 4,
          background: '#f4ecdc',
        }}>
          <SubjectIllustration which={subject.thumb} size={undefined}/>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <SubjectIllustration which={subject.thumb} size={150}/>
          </div>
        </div>
        <div style={{
          fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: 2,
          color: '#5a4818', textAlign: 'center', marginBottom: 22,
          textTransform: 'uppercase',
        }}>FIG. 1 — {subject.latin}</div>

        <LevelPicker level={level} onChange={onChangeLevel} variant="encyclopedia"/>
        <ToneToggle tone={tone} onChange={onChangeTone} variant="encyclopedia"/>

        {/* Chapter 1: What is it */}
        <EncyChapter no="§ 1" title="本項について">
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px 16px',
            fontSize: 12, marginTop: 8,
          }}>
            {[['分類', subject.category], ['時代', subject.era],
              ['地域', subject.region], ['素材', subject.material || '—']].map(([k, v], i) => (
              <div key={i} style={{ borderBottom: '0.5px dotted #1a1612', paddingBottom: 3 }}>
                <span style={{
                  fontFamily: 'ui-monospace, monospace', fontSize: 9,
                  color: '#1e3a5f', letterSpacing: 2, marginRight: 6,
                }}>{k}</span>
                {v}
              </div>
            ))}
          </div>
        </EncyChapter>

        {/* Chapter 2: History */}
        <EncyChapter no="§ 2" title="沿革 — 歴史的経緯">
          {subject.history.map((h, i) => (
            <div key={i} style={{ display: 'flex', gap: 12, marginBottom: 8 }}>
              <div style={{
                fontFamily: 'ui-monospace, monospace', fontSize: 10,
                letterSpacing: 1, color: '#1e3a5f', width: 78, flexShrink: 0,
                paddingTop: 2,
              }}>{h.year}</div>
              <div style={{ fontSize: 13, lineHeight: 1.85, flex: 1 }}>{h.text}</div>
            </div>
          ))}
        </EncyChapter>

        {/* Chapter 3: Curriculum connections */}
        <EncyChapter no="§ 3" title="学科連関 — 中学・高校の学びとの接続">
          <div style={{ marginTop: 6 }}>
            {subject.connections.map((c, i) => (
              <div key={i} style={{
                display: 'flex', gap: 10, padding: '10px 0',
                borderTop: '0.5px solid #c4b593',
              }}>
                <div style={{
                  width: 56, flexShrink: 0, textAlign: 'right', paddingTop: 2,
                }}>
                  <div style={{
                    fontSize: 12, fontWeight: 600, color: '#1e3a5f',
                  }}>{c.subject}</div>
                  <div style={{
                    fontFamily: 'ui-monospace, monospace', fontSize: 8,
                    letterSpacing: 1, color: '#5a4818',
                  }}>{c.grade}</div>
                </div>
                <div style={{
                  width: 1, background: '#1e3a5f', opacity: 0.4, flexShrink: 0,
                }}/>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{
                    fontSize: 12, fontWeight: 600, marginBottom: 2,
                    fontStyle: 'italic',
                  }}>— {c.topic}</div>
                  <div style={{ fontSize: 12.5, lineHeight: 1.75 }}>{c.note}</div>
                </div>
              </div>
            ))}
          </div>
          <LessonsButton subject={subject} accent="#1e3a5f"/>
        </EncyChapter>

        {/* Chapter 4: Deeper */}
        <EncyChapter no="§ 4" title="補註">
          <div style={{
            fontSize: 13, lineHeight: 1.9, textAlign: 'justify',
            borderLeft: '3px double #1e3a5f', paddingLeft: 14, marginTop: 6,
            fontStyle: 'italic', color: '#2a2318',
          }}>{renderEmphasis(subject.deeper, '#1e3a5f')}</div>
        </EncyChapter>

        {/* See also */}
        <div style={{
          marginTop: 28, paddingTop: 10, borderTop: '2px double #1a1612',
          fontSize: 11, color: '#5a4818', fontStyle: 'italic',
        }}>
          <span style={{
            fontFamily: 'ui-monospace, monospace', fontStyle: 'normal',
            fontSize: 10, letterSpacing: 2, color: '#1e3a5f', marginRight: 8,
          }}>SEE ALSO →</span>
          {subject.tags.map(t => t.replace('#', '')).join(' · ')}
        </div>

        <div style={{
          marginTop: 20, textAlign: 'center',
          fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: 3,
          color: '#5a4818',
        }}>— 終 —</div>
      </div>
    </div>
  );
}

function EncyChapter({ no, title, children }) {
  return (
    <div style={{ marginTop: 20 }}>
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 4,
      }}>
        <div style={{
          fontFamily: 'ui-monospace, monospace', fontSize: 11,
          color: '#1e3a5f', letterSpacing: 1,
        }}>{no}</div>
        <div style={{
          fontSize: 15, fontWeight: 600, letterSpacing: 1, flex: 1,
        }}>{title}</div>
      </div>
      <div style={{ borderTop: '0.5px solid #1a1612', paddingTop: 8 }}>
        {children}
      </div>
    </div>
  );
}

// まなびやへ単元一覧を送って授業モード起動
function LessonsButton({ subject, accent = '#1e3a5f' }) {
  const go = () => {
    const conns = (subject?.connections || []).map(c => ({
      subject: c.subject || '',
      grade: c.grade || '',
      topic: c.topic || '',
      note: (c.note || '').slice(0, 240),
    }));
    const payload = JSON.stringify(conns);
    const subName = subject?.name || '';
    const ctx = (subject?.summary || '').slice(0, 200);
    const url = (window.MANABIYA_URL || 'https://manabiya.pages.dev/')
      + '?lessons=1'
      + '&subj=' + encodeURIComponent(subName)
      + '&ctx=' + encodeURIComponent(ctx)
      + '&conns=' + encodeURIComponent(payload);
    let opened = null;
    try { opened = window.open(url, '_blank'); } catch {}
    if (!opened) window.location.href = url;
  };
  return (
    <button onClick={go} style={{
      marginTop: 14, width: '100%',
      background: accent, color: '#f4ecdc',
      border: 'none', cursor: 'pointer',
      fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: 2,
      padding: '10px 14px',
    }}>まなびやで授業を受ける →</button>
  );
}
window.LessonsButton = LessonsButton;

window.EncyclopediaResult = EncyclopediaResult;