// ATELIER · the workshop, homelab, rig specimen
function Atelier() {
  const gear = [
    { label: 'THE RIG',        body: 'Ryzen 9 · 64 GB · RTX 4080', sub: 'principal workstation', sigil: '◐' },
    { label: 'THE HOMELAB',    body: 'Proxmox · 3-node cluster',   sub: 'with too many VMs',     sigil: '▣' },
    { label: 'THE NETWORK',    body: 'UniFi · VLANs · WireGuard',  sub: 'guarded like a fortress',sigil: '◈' },
    { label: 'THE DAILY',      body: 'Arch + Hyprland · 14" OLED', sub: 'for travelling light',   sigil: '◇' },
    { label: 'THE KEYBOARD',   body: 'Split 42-key · Cherry tact.',sub: 'home row, always',       sigil: '⌨' },
    { label: 'THE NOTEBOOK',   body: 'A5 · dotgrid · black pen',   sub: 'ideas outlive batteries',sigil: '✎' },
  ];

  return (
    <section id="atelier" 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 IV · THE WORKSHOP &amp; ITS INSTRUMENTS</div>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85, textAlign: 'right' }}>
          Atelier<span style={{color:'var(--stamp)'}}>.</span>
        </h2>
      </div>
      <div style={{textAlign:'right'}}>
        <span className="hand" style={{ fontSize: 26, color: 'var(--stamp-dark)' }}>where the work is made</span>
      </div>
      <hr className="rule" style={{marginTop: 8}}/>

      <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, marginTop: 30 }}>
        <div>
          <p className="dropcap" style={{ textAlign: 'justify', hyphens: 'auto' }}>
            Every craft needs its bench. This one is assembled in a small room in Poznań, where a desk of reclaimed oak carries a
            keyboard whose keys have long lost their letters, two matte panels of the modest sort, and a mug that refills itself
            (if you count the trip to the kitchen). Behind a closed door hums the homelab: three nodes that run a quiet little
            empire of services, chiefly for the satisfaction of running them.
          </p>
          <p style={{ marginTop: 16, textAlign: 'justify', hyphens: 'auto' }}>
            The instruments are chosen by the same rule as any honest trade: buy well, buy once, and look after the thing
            with the reverence of someone who understands what it cost. What is pictured here is catalogued; everything else
            has been quietly retired to the lower shelves.
          </p>
        </div>

        <div className="card" style={{ padding: 24, background: 'var(--paper-shade)', position:'relative' }}>
          <div className="kicker" style={{ marginBottom: 14 }}>PLATE IV-a · INVENTORY</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
            {gear.map((g, i) => (
              <div key={i} className="card lift" style={{ padding: 14, background: 'var(--paper)' }}>
                <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
                  <span className="mono" style={{ fontSize: 9, letterSpacing: '.2em', color:'var(--ink-fade)' }}>№ IV-{String(i+1).padStart(2,'0')}</span>
                  <span className="didone" style={{ fontSize: 24, color: 'var(--stamp)' }}>{g.sigil}</span>
                </div>
                <div className="grot" style={{ fontSize: 11, letterSpacing: '.15em', marginTop: 6 }}>{g.label}</div>
                <div className="didone" style={{ fontSize: 18, lineHeight: 1.1, marginTop: 4 }}>{g.body}</div>
                <div className="serif" style={{ fontStyle: 'italic', fontSize: 13, color: 'var(--ink-fade)', marginTop: 6 }}>{g.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* exploded diagram */}
      <div style={{ marginTop: 40, border: '1px solid var(--ink)', padding: 30, background:'var(--paper)', position:'relative' }}>
        <div className="kicker" style={{ marginBottom: 14 }}>FIG. IV-β · THE WORKBENCH, VIEWED FROM ABOVE</div>
        <svg viewBox="0 0 1000 260" className="atelier-svg" style={{ width:'100%', height:260, display:'block' }}>
          {/* desk outline */}
          <rect x="20" y="30" width="960" height="200" fill="none" stroke="#141110" strokeWidth="2"/>
          {/* monitor */}
          <rect x="360" y="60" width="280" height="120" fill="#141110"/>
          <rect x="470" y="180" width="60" height="8" fill="#141110"/>
          <text x="500" y="130" fill="#f3ede2" fontSize="11" textAnchor="middle" fontFamily="JetBrains Mono">MAIN · 32" 4K</text>
          {/* keyboard */}
          <rect x="420" y="196" width="160" height="22" fill="none" stroke="#141110" strokeWidth="1.5"/>
          <text x="500" y="212" fill="#141110" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">SPLIT KEY</text>
          {/* mug */}
          <circle cx="700" cy="120" r="18" fill="none" stroke="#c0392b" strokeWidth="2"/>
          <text x="700" y="155" fill="#c0392b" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">MUG</text>
          {/* notebook */}
          <rect x="760" y="70" width="90" height="60" fill="none" stroke="#141110" strokeWidth="1.5"/>
          <text x="805" y="103" fill="#141110" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">NOTEBOOK</text>
          {/* lamp */}
          <circle cx="120" cy="80" r="22" fill="none" stroke="#141110" strokeWidth="2"/>
          <line x1="120" y1="102" x2="120" y2="180" stroke="#141110" strokeWidth="2"/>
          <text x="120" y="205" fill="#141110" fontSize="10" textAnchor="middle" fontFamily="JetBrains Mono">LAMP</text>
          {/* labels + leader lines */}
          <line x1="640" y1="120" x2="680" y2="120" stroke="#c0392b" strokeDasharray="3 3"/>
          <line x1="718" y1="120" x2="758" y2="100" stroke="#141110" strokeDasharray="3 3"/>
          {/* scale */}
          <line x1="40" y1="245" x2="140" y2="245" stroke="#141110" strokeWidth="1"/>
          <text x="90" y="258" fill="#141110" fontSize="9" textAnchor="middle" fontFamily="JetBrains Mono">0 · 40 cm</text>
        </svg>
        <div className="mono" style={{ position: 'absolute', top: 10, right: 14, fontSize: 10, letterSpacing: '.2em', color:'var(--ink-fade)' }}>SCALE 1:8</div>
      </div>
    </section>
  );
}

Object.assign(window, { Atelier });