// DISPATCH I · the intro / bio spread
function Dispatch() {
  const [photoRotation, setPhotoRotation] = React.useState(-4);
  const [stamped, setStamped] = React.useState(false);

  const birth = new Date('2002-06-25');
  const age = Math.floor((Date.now() - birth.getTime()) / (1000 * 60 * 60 * 24 * 365.25));

  return (
    <section className="page" style={{ paddingTop: 40, paddingBottom: 60, position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 120px 1.35fr', gap: 0, alignItems: 'start' }}>
        {/* LEFT COLUMN · body text */}
        <div style={{ paddingRight: 30 }}>
          <div className="kicker" style={{ marginBottom: 8 }}>DISPATCH I · BIOGRAPHICAL</div>
          <h2 className="didone" style={{ fontSize: 'clamp(34px, 4vw, 56px)', lineHeight: .95, marginBottom: 14 }}>
            A short <span className="scribble">introduction</span><br/>to the subject.
          </h2>
          <hr className="rule" style={{ margin: '10px 0 20px' }} />

          <p className="dropcap" style={{ marginBottom: 14, textAlign: 'justify', hyphens: 'auto' }}>
            Youcef was entered in the register at <span className="smallcaps">Aïn Bessem, Province of Bouira, Algeria</span>, in the year <span className="smallcaps">two thousand and two</span>.
            He draws steadily from the capital of his name (Joseph, in the European tongues) and files his dispatches from Poznań.
            By day he keeps the books at <span className="ribbon" style={{background:'var(--stamp)'}}>aurologic GmbH</span>, drafting Vue.js frontages
            and fastening them to Golang engines. The usual estate: admin consoles, internal instruments, and the quiet pipelines that hold a German
            infrastructure house together.
          </p>
          <p style={{ marginBottom: 14, textAlign: 'justify', hyphens: 'auto' }}>
            Earlier chapters are not small. In 2020 he raised a hosting concern of his own, <em>Virfect Solutions</em>, and ran it through to an honourable
            close in 2023, folding its lands into <em>CyberFilters</em>, where he still keeps a hand on the clusters and the control panels.
            On the side he lends counsel to <em>Triospare</em>, a friend’s modest commercial venture, and catalogues the rest here, in this book.
          </p>
          <p style={{ marginBottom: 14, textAlign: 'justify', hyphens: 'auto' }}>
            Schooling, for those who keep score: a <span className="smallcaps">B.Sc. in Computer Science</span> from Akli Mohand Oulhadj University of Bouira (2021 to 2024),
            followed by an <span className="smallcaps">M.Sc. in ICT, Electronics &amp; Telecommunications</span> at Poznań University of Technology, presently being
            brought to its final chapter (graduation expected in the summer of 2026).
          </p>
          <p style={{ textAlign: 'justify', hyphens: 'auto' }}>
            Known fondnesses, declared openly:
            &nbsp;<span className="smallcaps">anime</span>,
            &nbsp;<span className="smallcaps">the rise and fall of empires</span>,
            &nbsp;<span className="smallcaps">fantasy of the older kind</span>,
            &nbsp;<span className="smallcaps">the quiet cosmos</span>,
            &nbsp;<span className="smallcaps">a great deal of gaming</span>.
          </p>

          <div style={{ marginTop: 22, display: 'flex', gap: 10, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="#projects" className="btn">▾ INSPECT THE WORK</a>
            <a href="mailto:me@youcef.io" className="btn red">✉ SEND DISPATCH</a>
            <span className="mono" style={{fontSize: 11, opacity: .6}}>or press <span className="kbd">/</span> to search</span>
          </div>
        </div>

        {/* CENTER · narrow column of marks */}
        <div className="dispatch-marks" style={{ paddingTop: 20, textAlign: 'center', position: 'relative' }}>
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28 }}>
            <span className="reg-mark" />
            <div className="mono" style={{ fontSize: 10, letterSpacing: '.25em', writingMode: 'vertical-rl', transform: 'rotate(180deg)', color: 'var(--ink-fade)' }}>
              PL · 52.4064°N · 16.9252°E
            </div>
            <div style={{height: 80, width: 1, background: 'var(--ink)'}} />
            <div className="didone" style={{ fontSize: 56, color: 'var(--stamp)', fontStyle: 'italic' }}>§</div>
            <div style={{height: 80, width: 1, background: 'var(--ink)'}} />
            <span className="reg-mark" />
          </div>
        </div>

        {/* RIGHT · photo & stamps */}
        <div style={{ position: 'relative', paddingLeft: 10 }}>
          {/* taped polaroid */}
          <div
            className="draggable lift polaroid"
            style={{
              display: 'inline-block',
              padding: '14px 14px 50px',
              background: 'var(--paper)',
              border: '1px solid var(--ink)',
              boxShadow: '6px 8px 0 rgba(20,17,16,.12)',
              transform: `rotate(${photoRotation}deg)`,
              position: 'relative',
              transition: 'transform .3s',
            }}
            onClick={() => setPhotoRotation(r => (r === -4 ? 3 : -4))}
          >
            <div className="tape" style={{ top: -12, left: 40, transform: 'rotate(-6deg)' }} />
            <div className="tape" style={{ top: -14, right: 28, transform: 'rotate(8deg)' }} />
            <img src="assets/youcef.jpg" alt="Youcef"
              className="photo-halftone dispatch-photo"
              style={{ width: 300, height: 300, display: 'block', objectFit: 'cover' }}
            />
            <div className="polaroid-cap" style={{ position: 'absolute', bottom: 14, left: 16, right: 16, display:'flex', justifyContent:'space-between', alignItems:'center' }}>
              <span className="hand" style={{ fontSize: 20 }}>yours, J.</span>
              <span className="mono" style={{ fontSize: 10, opacity: .6 }}>taken on the shores of Algeria</span>
            </div>
          </div>

          {/* vitals card */}
          <div className="card" style={{ marginTop: 28, padding: 18, position: 'relative' }}>
            <div className="kicker" style={{ marginBottom: 8 }}>VITALS · SPECIMEN CARD</div>
            <hr className="rule-dash" />
            <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: "'JetBrains Mono', monospace", fontSize: 12, marginTop: 8 }}>
              <tbody>
                {[
                  ['ALIAS',     <span>Youcef / Joseph / <span className="arabic" style={{fontSize: 18, letterSpacing: 0}}>يوسف</span></span>],
                  ['AGE',       `${age} years, and counting`],
                  ['BORN',      'Aïn Bessem, Bouira · MMII'],
                  ['STATIONED', 'Poznań, Poland'],
                  ['PATRON',    'aurologic GmbH'],
                  ['TONGUES',   'AR native · EN fluent · FR passable · DE in progress'],
                  ['SIGIL',     '★ quietly writing my own story'],
                ].map(([k, v]) => (
                  <tr key={k} style={{ borderBottom: '1px dashed rgba(20,17,16,.25)'}}>
                    <td style={{ padding: '6px 8px', width: 120, color: 'var(--ink-fade)' }}>{k}</td>
                    <td style={{ padding: '6px 8px' }}>{v}</td>
                  </tr>
                ))}
              </tbody>
            </table>

            {/* stampable */}
            <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <span className="mono" style={{ fontSize: 11, opacity: .6 }}>
                {stamped ? '✓ verified by visitor' : 'tap stamp to verify →'}
              </span>
              <div onClick={() => setStamped(true)}
                className="stamp wobble"
                style={{ cursor: 'pointer', opacity: stamped ? 1 : .45, transform: stamped ? 'rotate(-10deg)' : 'rotate(0deg)' }}>
                ✓ AUTHENTIC
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Dispatch });