// MARGINALIA · hand-written beliefs, principles, and small admissions
const NOTES = [
  { kind: 'PRINCIPLE',  n: 'On craft',       body: 'Build as if the tool will be inherited. Somebody is always the next person, and often that person is you.', sig: 'Y.B.' },
  { kind: 'PRINCIPLE',  n: 'On simplicity',  body: 'A small idea, well-kept, outlives a large idea poorly tended. Prefer the boring solution that still answers in five years.', sig: 'Y.B.' },
  { kind: 'ADMISSION',  n: 'On haste',       body: 'I ship faster than is strictly wise, which is why every new thing keeps a rollback.', sig: 'Y.B.' },
  { kind: 'ADMISSION',  n: 'On bookshelves', body: 'I buy more books than I will read this year. The shelf is an instrument of hope.', sig: 'Y.B.' },
  { kind: 'PRACTICE',   n: 'On mornings',    body: 'First coffee; then the hardest task; then the correspondence. The order is not negotiable.', sig: 'Y.B.' },
  { kind: 'PRACTICE',   n: 'On walking',     body: 'A long walk unblocks more bugs than a second monitor. Carry a small notebook; the ideas are embarrassingly simple.', sig: 'Y.B.' },
  { kind: 'OBSERVATION',n: 'On networks',    body: 'The packets always arrive eventually, or they do not; rarely is the truth between. Measure, do not guess.', sig: 'Y.B.' },
  { kind: 'OBSERVATION',n: 'On languages',   body: 'A new language opens a room in the house you did not know was there. German is a very tidy room.', sig: 'Y.B.' },
];

function Marginalia() {
  const rotations = [-2, 3, -1, 2, -3, 1, -2, 2];

  return (
    <section id="marginalia" className="page" style={{ paddingTop: 60, paddingBottom: 60, position:'relative' }}>
      <hr className="rule-double" />
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding: '18px 0 6px'}}>
        <div className="kicker">CHAPTER VIII · NOTES IN THE MARGIN</div>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85, textAlign:'right' }}>
          Marginalia<span style={{color:'var(--stamp)'}}>.</span>
        </h2>
      </div>
      <div style={{ textAlign:'right' }}>
        <span className="hand" style={{ fontSize: 26, color: 'var(--stamp-dark)' }}>small truths, pencilled in haste</span>
      </div>
      <hr className="rule" style={{marginTop: 8}}/>

      <div className="marginalia-sheet" style={{
        marginTop: 30,
        background:
          'repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(20,17,16,.15) 39px, rgba(20,17,16,.15) 40px),' +
          'linear-gradient(to right, transparent 88px, rgba(192,57,43,.18) 88px, rgba(192,57,43,.18) 90px, transparent 90px)',
        border: '1px solid var(--ink)',
        padding: '40px 28px 40px 110px',
        position: 'relative',
      }}>
        {/* binding holes */}
        {[0, 1, 2].map(i => (
          <span key={i} className="marginalia-holes" style={{
            position:'absolute', left: 40, top: 60 + i * 180,
            width: 14, height: 14, borderRadius:'50%',
            background:'var(--paper)', border:'1px solid var(--ink)',
          }}/>
        ))}

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '28px 40px' }}>
          {NOTES.map((note, i) => (
            <div key={i} className="lift" style={{
              position: 'relative',
              padding: '8px 0',
              transform: `rotate(${rotations[i % rotations.length] * 0.4}deg)`,
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '.22em', color:'var(--stamp)' }}>
                {note.kind} · № {String(i + 1).padStart(3, '0')}
              </div>
              <div className="didone" style={{ fontSize: 22, marginTop: 4, lineHeight: 1.1 }}>
                {note.n}
              </div>
              <p className="hand" style={{ fontSize: 24, lineHeight: 1.25, color: 'var(--ink)', marginTop: 6 }}>
                {note.body}
              </p>
              <div style={{ textAlign:'right', marginTop: 2 }}>
                <span className="hand" style={{ fontSize: 22, color:'var(--stamp-dark)' }}>· {note.sig}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* quotation */}
      <div className="quote-row" style={{ marginTop: 30, display:'grid', gridTemplateColumns:'60px 1fr 60px', gap: 10, alignItems:'center' }}>
        <div className="didone" style={{ fontSize: 80, color:'var(--stamp)', lineHeight: .8 }}>“</div>
        <blockquote className="serif" style={{ fontStyle:'italic', fontSize: 22, lineHeight: 1.4, textAlign:'center' }}>
          Man is the only creature who refuses to be what he is.
          <div className="mono" style={{ fontSize: 11, letterSpacing:'.2em', color:'var(--ink-fade)', marginTop: 8 }}>
            · A. CAMUS, pencilled on the inside cover
          </div>
        </blockquote>
        <div className="didone" style={{ fontSize: 80, color:'var(--stamp)', textAlign:'right', lineHeight: .8 }}>”</div>
      </div>
    </section>
  );
}

Object.assign(window, { Marginalia });