// LEDGER · work history + education as hand-kept ledger, aurologic first
const LEDGER = [
  {
    from: '2024·IV',
    to: 'NOW',
    house: 'aurologic GmbH',
    seat: 'Frankfurt · remote from Poznań',
    title: 'Software Engineer',
    note: 'Primary post. The Vue.js surface and the Golang engines beneath; admin consoles, internal instruments, and pipelines held steady with Jenkins, Docker and Elasticsearch. On-premise DDoS mitigation is quietly part of the trade.',
    crest: '✦',
    kind: 'WORK',
  },
  {
    from: '2023·V',
    to: 'NOW',
    house: 'CyberFilters',
    seat: 'Saudi Arabia · remote',
    title: 'Lead Developer & Sysadmin',
    note: 'Custodian of the VPS clusters, admin panels and control instruments. Small automations where a human hand would tire, and full-stack repairs wherever the estate asks for them.',
    crest: '⊕',
    kind: 'WORK',
  },
  {
    from: '2020·X',
    to: '2023·V',
    house: 'Virfect Solutions',
    seat: 'Co-founder · CTO · remote',
    title: 'Chief Technology Officer',
    note: 'Held the whole estate of a DDoS-protected hosting concern: the front pages, the services, the clusters, the security. Brought to an honourable close in May 2023 and folded into CyberFilters.',
    crest: '☗',
    kind: 'WORK',
  },
  {
    from: '2022',
    to: 'NOW',
    house: 'Triospare',
    seat: 'Saudi Arabia · side project',
    title: 'Sysadmin & Developer (assisting)',
    note: 'Standing counsel to a friend’s commerce site. Payment gateways, small internal tools, and infrastructure trimmed back whenever it begins to sprawl.',
    crest: '⌂',
    kind: 'WORK',
  },
  {
    from: '2025',
    to: '2026',
    house: 'Poznań University of Technology',
    seat: 'Poznań, Poland',
    title: 'M.Sc. · ICT · Electronics & Telecommunications',
    note: 'Networks and mobile systems, signal processing, optical fibre, satellite navigation, digital design. Thesis in progress: the cost of getting a traffic classifier wrong in multi-class multirate loss systems. Graduation projected for the summer of 2026.',
    crest: '⎈',
    kind: 'STUDY',
  },
  {
    from: '2021',
    to: '2024',
    house: 'Akli Mohand Oulhadj University of Bouira',
    seat: 'Bouira, Algeria',
    title: 'B.Sc. · Computer Science · IT Systems & Software Engineering',
    note: 'Foundations of the trade: algorithms, operating systems, networks and security, databases, artificial intelligence, web and mobile. Taken while already at work in the field.',
    crest: '✎',
    kind: 'STUDY',
  },
];

function Ledger() {
  return (
    <section 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">CHRONICLE · LEDGER OF HOUSES SERVED &amp; SCHOOLS KEPT</div>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85, textAlign: 'right' }}>
          Campaigns<span style={{color:'var(--stamp)'}}>,</span>
        </h2>
      </div>
      <div style={{textAlign:'right'}}>
        <span className="hand" style={{ fontSize: 28, color: 'var(--stamp-dark)' }}>rendered in the year MMXXVI</span>
      </div>
      <hr className="rule" style={{marginTop: 8}}/>

      <div style={{ display: 'grid', gridTemplateColumns: '80px 1fr 1.1fr 1fr', borderBottom: '1px solid var(--ink)' }}
           className="mono ledger-head">
        <div style={{padding: '8px 10px', fontSize: 10, letterSpacing: '.2em', borderRight: '1px solid var(--ink)'}}>CREST</div>
        <div style={{padding: '8px 10px', fontSize: 10, letterSpacing: '.2em', borderRight: '1px solid var(--ink)'}}>HOUSE / SEAT</div>
        <div style={{padding: '8px 10px', fontSize: 10, letterSpacing: '.2em', borderRight: '1px solid var(--ink)'}}>ROLE</div>
        <div style={{padding: '8px 10px', fontSize: 10, letterSpacing: '.2em'}}>DATES &amp; DISPATCH</div>
      </div>

      {LEDGER.map((row, i) => (
        <div key={i} className="lift ledger-row"
             style={{
               display: 'grid',
               gridTemplateColumns: '80px 1fr 1.1fr 1fr',
               borderBottom: '1px solid var(--ink)',
               background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-shade)',
               minHeight: 108,
             }}>
          <div className="ledger-crest" style={{ padding: 16, borderRight: '1px solid var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <span className="didone" style={{ fontSize: 44, color: 'var(--stamp)' }}>{row.crest}</span>
            <span className="mono" style={{
              position: 'absolute', bottom: 6, fontSize: 8, letterSpacing: '.2em', color: 'var(--ink-fade)'
            }}>{row.kind}</span>
          </div>
          <div style={{ padding: 16, borderRight: '1px solid var(--ink)' }}>
            <div className="didone" style={{ fontSize: 22, lineHeight: 1.1 }}>{row.house}</div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: '.15em', color: 'var(--ink-fade)', marginTop: 4 }}>
              {row.seat}
            </div>
          </div>
          <div style={{ padding: 16, borderRight: '1px solid var(--ink)' }}>
            <div className="grot" style={{ fontSize: 14, textTransform: 'uppercase', letterSpacing: '.08em' }}
                 dangerouslySetInnerHTML={{__html: row.title}} />
            <p style={{ fontSize: 14, marginTop: 6, lineHeight: 1.4, color: 'var(--ink-soft)' }}>
              {row.note}
            </p>
          </div>
          <div style={{ padding: 16, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '.15em', color: 'var(--ink-fade)' }}>FROM</div>
              <div className="didone" style={{ fontSize: 26, lineHeight: 1 }}>{row.from}</div>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 11, letterSpacing: '.15em', color: 'var(--ink-fade)' }}>TO</div>
              <div className="didone" style={{ fontSize: 26, lineHeight: 1, color: row.to === 'NOW' ? 'var(--stamp)' : 'var(--ink)' }}>{row.to}</div>
            </div>
          </div>
        </div>
      ))}

      <div className="mono" style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 0', fontSize: 11, letterSpacing: '.15em', color: 'var(--ink-fade)' }}>
        <span>⟡ end of ledger ⟡</span>
        <span>SIGNED · Y. BADAOUI · <span className="arabic" style={{fontSize: 15, letterSpacing: 0}}>يوسف</span></span>
      </div>
    </section>
  );
}

Object.assign(window, { Ledger });