// Variant 2: Field Notebook — 方眼紙・付箋・手書きメモ風
function NotebookResult({ subject, level, onChangeLevel, tone, onChangeTone, onClose }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, background: '#f4ecdc',
      overflowY: 'auto', WebkitOverflowScrolling: 'touch',
      fontFamily: '"Kosugi Maru", "Noto Sans JP", sans-serif',
      color: '#1a1612',
      backgroundImage: `
        linear-gradient(#c4b59322 1px, transparent 1px),
        linear-gradient(90deg, #c4b59322 1px, transparent 1px)
      `,
      backgroundSize: '18px 18px',
    }}>
      <StickyHeader variant="notebook" onClose={onClose} subject={subject}/>

      <div style={{ padding: '14px 20px 40px', position: 'relative' }}>

        {/* Date stamp + page number */}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          marginBottom: 12,
        }}>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: 1.5,
            color: '#5a6b4a',
          }}>2026 / 4 / 18 · 14:27</div>
          <div style={{
            fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: 1.5,
            color: '#5a6b4a',
          }}>p. 027</div>
        </div>

        {/* Sticky note with title, rotated */}
        <div style={{
          background: '#fff8c4', padding: '18px 20px 22px',
          boxShadow: '3px 4px 0 rgba(0,0,0,0.15), 0 0 0 0.5px rgba(0,0,0,0.1)',
          transform: 'rotate(-1deg)', marginBottom: 24,
          position: 'relative',
        }}>
          {/* tape */}
          <div style={{
            position: 'absolute', top: -8, left: '50%', width: 80, height: 22,
            marginLeft: -40, background: 'rgba(200,180,120,0.5)',
            transform: 'rotate(2deg)',
          }}/>
          <div style={{ fontSize: 11, color: '#5a6b4a', marginBottom: 2, letterSpacing: 1 }}>
            きょうの「なぜ？」
          </div>
          <div style={{ fontSize: 34, fontWeight: 700, lineHeight: 1.2 }}>{subject.name}</div>
          <div style={{ fontSize: 12, color: '#5a6b4a', marginTop: 2 }}>
            〈 {subject.reading} 〉 · {subject.latin}
          </div>
          {/* hand-drawn underline */}
          <svg width="90" height="6" style={{ marginTop: 6 }}>
            <path d="M2 3 Q 22 0 42 3 T 82 3" stroke="#5a6b4a" strokeWidth="1.5" fill="none"/>
          </svg>
        </div>

        {/* Photo with polaroid frame + clip */}
        <div style={{
          display: 'flex', gap: 14, marginBottom: 24, alignItems: 'flex-start',
        }}>
          <div style={{
            background: '#fff', padding: 8, paddingBottom: 28,
            boxShadow: '2px 3px 0 rgba(0,0,0,0.15)',
            transform: 'rotate(1.5deg)', flexShrink: 0,
            position: 'relative',
          }}>
            <SubjectIllustration which={subject.thumb} size={130}/>
            <div style={{
              position: 'absolute', bottom: 6, left: 0, right: 0,
              fontFamily: '"Caveat", "Kosugi Maru", cursive', fontSize: 13,
              textAlign: 'center', color: '#5a6b4a',
            }}>これ、なんだろう？</div>
            {/* clip */}
            <div style={{
              position: 'absolute', top: -14, right: 14,
              width: 16, height: 28, background: '#8b9785',
              borderRadius: '3px 3px 0 0',
              boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.2)',
            }}/>
          </div>
          {/* Hand summary */}
          <div style={{ flex: 1, paddingTop: 8 }}>
            <div style={{
              fontSize: 12, color: '#5a6b4a', letterSpacing: 1.5, marginBottom: 4,
              borderBottom: '1px dashed #5a6b4a', paddingBottom: 2,
            }}>→ ひとことでいうと</div>
            <div style={{ fontSize: 14, lineHeight: 1.8 }}>{renderEmphasis(subject.summary, '#5a6b4a')}</div>
          </div>
        </div>

        {/* Spec chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginBottom: 22 }}>
          {[['分類', subject.category], ['時代', subject.era], ['場所', subject.region]].map(([k, v], i) => (
            <div key={i} style={{
              background: '#f4ecdc', border: '1px solid #5a6b4a', borderRadius: 3,
              padding: '4px 10px', fontSize: 11, color: '#1a1612',
            }}>
              <span style={{ color: '#5a6b4a', marginRight: 6 }}>{k}</span>
              {v}
            </div>
          ))}
        </div>

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

        {/* History as hand-drawn timeline */}
        <HandSection title="どうやってうまれたの？" kanji="歴史メモ">
          <div style={{ position: 'relative', paddingLeft: 22 }}>
            <svg style={{ position: 'absolute', left: 6, top: 0, bottom: 0 }}
              width="4" height="100%">
              <path d="M2 0 Q 4 30 2 60 Q 0 90 2 100%" stroke="#5a6b4a" strokeWidth="1.5" fill="none"/>
            </svg>
            {subject.history.map((h, i) => (
              <div key={i} style={{ marginBottom: 14, position: 'relative' }}>
                <div style={{
                  position: 'absolute', left: -22, top: 4, width: 10, height: 10,
                  border: '1.5px solid #5a6b4a', background: '#fff8c4',
                  transform: 'rotate(45deg)',
                }}/>
                <div style={{ fontSize: 11, color: '#5a6b4a', fontWeight: 700, marginBottom: 1 }}>
                  {h.year}
                </div>
                <div style={{ fontSize: 13, lineHeight: 1.65 }}>{h.text}</div>
              </div>
            ))}
          </div>
        </HandSection>

        {/* Connections as sticky-note cards */}
        <HandSection title="学校の勉強と、ここでつながる！" kanji="授業リンク">
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 6 }}>
            {subject.connections.map((c, i) => {
              const tints = ['#fde5a0', '#c9e0c4', '#fdd6c4', '#c4dde8'];
              const rot = (i % 2 ? 1 : -1) * (0.6 + (i % 3) * 0.4);
              return (
                <div key={i} style={{
                  background: tints[i % tints.length], padding: '10px 12px',
                  transform: `rotate(${rot}deg)`,
                  boxShadow: '1.5px 2px 0 rgba(0,0,0,0.12)',
                }}>
                  <div style={{
                    display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                    marginBottom: 4,
                  }}>
                    <div style={{ fontWeight: 700, fontSize: 13 }}>{c.subject}</div>
                    <div style={{ fontSize: 9, color: '#5a6b4a', letterSpacing: 1 }}>{c.grade}</div>
                  </div>
                  <div style={{ fontSize: 11, fontWeight: 600, marginBottom: 3 }}>{c.topic}</div>
                  <div style={{ fontSize: 11, lineHeight: 1.55 }}>{c.note}</div>
                </div>
              );
            })}
          </div>
          <LessonsButton subject={subject} accent="#5a6b4a"/>
        </HandSection>

        {/* Deeper */}
        <HandSection title="先生のひとこと" kanji="ふかぼり">
          <div style={{
            background: '#fff', padding: '14px 16px',
            border: '1.5px solid #1a1612', position: 'relative',
          }}>
            <div style={{
              position: 'absolute', left: -10, top: -10, background: '#5a6b4a',
              color: '#f4ecdc', padding: '2px 8px', fontSize: 10, letterSpacing: 2,
              transform: 'rotate(-3deg)',
            }}>！ふかぼり</div>
            <div style={{ fontSize: 13, lineHeight: 1.8, paddingTop: 2 }}>{renderEmphasis(subject.deeper, '#5a6b4a')}</div>
          </div>
        </HandSection>

        {/* Tags */}
        <div style={{
          marginTop: 24, display: 'flex', flexWrap: 'wrap', gap: 8,
        }}>
          {subject.tags.map((t, i) => (
            <div key={i} style={{
              fontSize: 11, color: '#5a6b4a', fontWeight: 700,
              fontFamily: '"Caveat", cursive',
            }}>{t}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function HandSection({ title, kanji, children }) {
  return (
    <div style={{ marginTop: 24 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
        <div style={{
          background: '#5a6b4a', color: '#f4ecdc', padding: '2px 8px',
          fontSize: 10, letterSpacing: 2,
        }}>{kanji}</div>
        <div style={{ fontSize: 15, fontWeight: 700 }}>{title}</div>
      </div>
      {children}
    </div>
  );
}

window.NotebookResult = NotebookResult;