// ALMANAC · a year-log / timeline of the present chapter
const ENTRIES = [
  { month: 'JAN', year: 'MMXXVI', red: false, title: 'Thesis, properly begun', body: 'Formalised the Kaufman–Roberts recursion and the mapping from confusion matrix to offered-traffic distortion. The first clean pages went into the thesis binder.' },
  { month: 'FEB', year: 'MMXXVI', red: false, title: 'aurologic · new services rolled', body: 'Shipped two internal instruments for the admin estate and wrote the pipelines that would deliver them without fuss.' },
  { month: 'MAR', year: 'MMXXVI', red: true,  title: 'A long week with German', body: 'Decided, quietly, that the language would be a habit and not a novelty. Fifteen minutes every morning, without exception.' },
  { month: 'APR', year: 'MMXXVI', red: false, title: 'Codex, first stone laid', body: 'Began this very book. The press proof sat on the desk for a week before a single paragraph was set. No regrets.' },
  { month: 'MAY', year: 'MMXXVI', red: false, title: 'Homelab · third node added', body: 'The Proxmox cluster earned a third seat. A modest uprising of services followed over the next fortnight.' },
  { month: 'JUN', year: 'MMXXVI', red: true,  title: 'Twenty-four winters', body: 'A quiet birthday. A longer walk than usual along the Warta. A better coffee than deserved.' },
  { month: 'JUL', year: 'MMXXVI', red: false, title: 'Thesis defence · projected', body: 'The target date. What comes after is not yet written, and that is permitted.' },
];

function Almanac() {
  return (
    <section id="almanac" 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 VI · LOG OF THE YEAR, MONTH BY MONTH</div>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85, textAlign:'right' }}>
          Almanac<span style={{color:'var(--stamp)'}}>.</span>
        </h2>
      </div>
      <hr className="rule" style={{marginTop: 8}}/>

      <div style={{ position:'relative', marginTop: 40 }}>
        {/* spine */}
        <div className="almanac-spine" style={{ position:'absolute', left: 120, top: 0, bottom: 0, width: 2, background:'var(--ink)' }} />

        {ENTRIES.map((e, i) => (
          <div key={i} className="lift almanac-row" style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 0, position:'relative', padding:'18px 0' }}>
            <div style={{ textAlign: 'right', paddingRight: 30, position:'relative' }}>
              <div className="didone" style={{ fontSize: 30, lineHeight: 1, color: e.red ? 'var(--stamp)' : 'var(--ink)' }}>{e.month}</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '.2em', color:'var(--ink-fade)' }}>{e.year}</div>
              {/* marker */}
              <span style={{
                position: 'absolute', right: -6, top: 10, width: 12, height: 12,
                background: e.red ? 'var(--stamp)' : 'var(--ink)',
                borderRadius: e.red ? '50%' : 0,
                transform: e.red ? 'none' : 'rotate(45deg)',
              }}/>
            </div>
            <div style={{ paddingLeft: 30, position:'relative', borderBottom: i < ENTRIES.length - 1 ? '1px dashed rgba(20,17,16,.22)' : 0 }}>
              <div className="grot" style={{ fontSize: 11, letterSpacing: '.18em', textTransform:'uppercase', color:'var(--ink-fade)' }}>
                ENTRY № {String(i + 1).padStart(3, '0')}
              </div>
              <h4 className="didone" style={{ fontSize: 26, lineHeight: 1.1, marginTop: 2 }}>{e.title}</h4>
              <p style={{ fontSize: 15, marginTop: 6, maxWidth: 720, color:'var(--ink-soft)' }}>{e.body}</p>
            </div>
          </div>
        ))}
      </div>

      <div className="mono" style={{ display:'flex', justifyContent:'space-between', padding: '14px 0', fontSize: 11, letterSpacing:'.15em', color:'var(--ink-fade)', borderTop:'1px solid var(--ink)', marginTop: 30 }}>
        <span>⟡ FURTHER ENTRIES TO BE COMMITTED AS THEY OCCUR ⟡</span>
        <span>REDACTED: NONE</span>
      </div>
    </section>
  );
}

Object.assign(window, { Almanac });