// PANTRY · shelf of tools & languages, stocked with honest levels
const SHELVES = [
  {
    name: 'LANGUAGES OF THE MACHINE',
    items: [
      { n: 'JavaScript · TypeScript', lvl: 0.95, note: 'daily bread' },
      { n: 'Go (Golang)',             lvl: 0.82, note: 'aurologic services' },
      { n: 'Python',                  lvl: 0.70, note: 'scripts & research' },
      { n: 'C / C++',                 lvl: 0.55, note: 'university years' },
      { n: 'Rust',                    lvl: 0.35, note: 'slowly, with care' },
      { n: 'SQL',                     lvl: 0.80, note: 'MySQL · Postgres · Maria' },
    ],
  },
  {
    name: 'FRAMES & SCAFFOLDS',
    items: [
      { n: 'Vue.js · Nuxt',           lvl: 0.92, note: 'company surface' },
      { n: 'React · Next',            lvl: 0.78, note: 'this very book' },
      { n: 'NestJS · Fastify · Express', lvl: 0.80, note: 'service backbones' },
      { n: 'React Native · Expo',     lvl: 0.65, note: 'Pharmo and friends' },
      { n: 'Tailwind · CSS craft',    lvl: 0.85, note: 'brutalist or otherwise' },
    ],
  },
  {
    name: 'INFRASTRUCTURE & DEFENCE',
    items: [
      { n: 'Linux (Debian · Arch)',   lvl: 0.90, note: 'daily driver' },
      { n: 'Docker · Compose',        lvl: 0.85, note: 'bread and butter' },
      { n: 'Kubernetes',              lvl: 0.60, note: 'when warranted' },
      { n: 'Jenkins · CI pipelines',  lvl: 0.75, note: 'aurologic' },
      { n: 'Nginx · HAProxy',         lvl: 0.80, note: 'edge & balance' },
      { n: 'DDoS mitigation',         lvl: 0.85, note: 'earned at aurologic' },
    ],
  },
  {
    name: 'TONGUES OF MEN',
    items: [
      { n: 'Arabic',                  lvl: 1.00, note: 'mother tongue' },
      { n: 'English',                 lvl: 0.95, note: 'fluent, daily' },
      { n: 'French',                  lvl: 0.50, note: 'half-kept, half-remembered' },
      { n: 'German',                  lvl: 0.15, note: 'early pages' },
      { n: 'Polish',                  lvl: 0.08, note: 'by osmosis' },
    ],
  },
];

function Jar({ n, lvl, note, i }) {
  return (
    <div className="pantry-jar" style={{ display: 'grid', gridTemplateColumns: '1.3fr 2fr 90px', gap: 14, alignItems: 'center', padding: '10px 0', borderBottom: '1px dashed rgba(20,17,16,.22)' }}>
      <div>
        <div className="didone" style={{ fontSize: 18, lineHeight: 1.05 }}>{n}</div>
        <div className="mono" style={{ fontSize: 9, letterSpacing: '.2em', color: 'var(--ink-fade)', marginTop: 2 }}>№ {String(i+1).padStart(2,'0')} · {note}</div>
      </div>
      <div style={{ position: 'relative', height: 22, border: '1px solid var(--ink)', background: 'var(--paper)' }}>
        <div style={{
          position: 'absolute', inset: 0, width: (lvl * 100) + '%',
          background: lvl > 0.85 ? 'var(--stamp)' : 'var(--ink)',
          transition: 'width 1s ease',
        }} />
        {/* tick marks */}
        {[0.25, 0.5, 0.75].map((t, k) => (
          <span key={k} style={{ position:'absolute', top: 0, bottom: 0, left: (t*100)+'%', width: 1, background:'rgba(243,237,226,.5)' }}/>
        ))}
      </div>
      <div className="mono pantry-score" style={{ fontSize: 11, letterSpacing: '.15em', textAlign: 'right', color: lvl > 0.85 ? 'var(--stamp)' : 'var(--ink)' }}>
        {Math.round(lvl * 100)} / 100
      </div>
    </div>
  );
}

function Pantry() {
  return (
    <section id="pantry" className="page" style={{ paddingTop: 60, paddingBottom: 60 }}>
      <hr className="rule-thick" />
      <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', padding: '18px 0 6px'}}>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85 }}>
          Pantry<span style={{color:'var(--stamp)'}}>,</span>
        </h2>
        <div className="kicker">CHAPTER V · THE SHELF &amp; ITS STORES</div>
      </div>
      <div>
        <span className="hand" style={{ fontSize: 26, color: 'var(--stamp-dark)' }}>measured honestly, not by self-esteem</span>
      </div>
      <hr className="rule" style={{marginTop: 8}}/>

      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 30 }}>
        {SHELVES.map((s, si) => (
          <div key={si} className="card" style={{ padding: 24, background: si % 2 === 0 ? 'var(--paper)' : 'var(--paper-shade)' }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom: 8 }}>
              <div className="kicker" dangerouslySetInnerHTML={{__html: s.name}} />
              <span className="mono" style={{ fontSize: 10, letterSpacing:'.2em', color:'var(--ink-fade)' }}>SHELF {String.fromCharCode(65 + si)}</span>
            </div>
            <hr className="rule-dash" />
            {s.items.map((it, i) => <Jar key={i} i={i} {...it} />)}
          </div>
        ))}
      </div>

      <div style={{ marginTop: 28, display:'flex', justifyContent:'space-between', alignItems:'center', border:'1px solid var(--ink)', padding:'14px 18px', background:'var(--ink)', color:'var(--paper)' }}>
        <span className="mono" style={{ fontSize: 11, letterSpacing:'.2em' }}>
          ⟡ DECLARED WITHOUT VANITY. The jars marked red hold the oldest and most trusted provisions.
        </span>
        <span className="hand" style={{ fontSize: 24, color: 'var(--paper)' }}>Y.B.</span>
      </div>
    </section>
  );
}

Object.assign(window, { Pantry });