// AFTERWORD · the final stamped send-off, the closing of the volume
function Afterword() {
  const [visits, setVisits] = React.useState(1);
  React.useEffect(() => {
    const n = Number(localStorage.getItem('codex-visits') || 0) + 1;
    localStorage.setItem('codex-visits', String(n));
    setVisits(n);
  }, []);

  return (
    <section id="afterword" className="page" style={{ paddingTop: 80, paddingBottom: 80, position:'relative' }}>
      <hr className="rule-double" />
      <div style={{ textAlign:'center', padding: '40px 0 20px' }}>
        <div className="kicker">CHAPTER X · THE FINAL LEAF</div>
        <h2 className="display" style={{ fontSize: 'clamp(80px, 12vw, 180px)', lineHeight: .85, marginTop: 8 }}>
          Afterword<span style={{color:'var(--stamp)'}}>.</span>
        </h2>
        <span className="hand" style={{ fontSize: 30, color: 'var(--stamp-dark)' }}>at the closing of the volume</span>
      </div>
      <hr className="rule" />

      <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: 40, marginTop: 40 }}>
        <div>
          <p className="dropcap" style={{ textAlign:'justify', hyphens:'auto', fontSize: 19, lineHeight: 1.55 }}>
            You have walked the length of the book, from masthead to margin, and that is no small thing in an age of scrolling.
            The subject is grateful for the attention and considers the gesture a fair exchange for the hours spent setting the pages.
            Everything here was made by hand, in the evenings, between the proper work and whatever sleep could be negotiated.
          </p>
          <p style={{ marginTop: 16, textAlign:'justify', hyphens:'auto' }}>
            If anything in these pages struck a useful chord, the best reply is a short letter: dispatches are read within a few earth rotations,
            and the oracle in the margin answers freely to anyone who bothers to ask. What remains unfilled in this volume will be filled in
            the next impression.
          </p>
          <p style={{ marginTop: 16, textAlign:'justify', hyphens:'auto' }}>
            Until then, kind reader, go well. Build something small and honest. Refuse the unexamined buzzword.
            And, if the day permits, take the long way home.
          </p>

          <div style={{ marginTop: 28, display:'flex', gap: 12, flexWrap:'wrap' }}>
            <a href="#post" className="btn red">✉ SEND A LETTER</a>
            <a href="#oracle" className="btn">❋ ASK THE ORACLE</a>
            <a href="#" className="btn" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); }}>↑ RETURN TO THE MASTHEAD</a>
          </div>
        </div>

        {/* signatures block */}
        <div style={{ position:'relative' }}>
          <div className="card" style={{ padding: 30, background: 'var(--paper-shade)', position:'relative' }}>
            <div className="kicker" style={{ marginBottom: 12 }}>SIGNED, STAMPED &amp; FILED</div>
            <hr className="rule-dash" />

            <div style={{ textAlign:'center', padding: '30px 0' }}>
              <div className="hand" style={{ fontSize: 64, color: 'var(--stamp-dark)', lineHeight: .9 }}>Youcef</div>
              <div className="hand" style={{ fontSize: 32, color: 'var(--ink)', marginTop: -4 }}>Badaoui</div>
              <div className="mono" style={{ fontSize: 10, letterSpacing:'.3em', color:'var(--ink-fade)', marginTop: 10 }}>
                SUBJECT OF THE PRESENT VOLUME
              </div>
            </div>

            <hr className="rule-dash" />
            <div style={{ display:'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 16 }}>
              <div className="stamp" style={{ transform: 'rotate(-8deg)', textAlign:'center' }}>
                ✓ FILED · MMXXVI
              </div>
              <div className="stamp wobble" style={{ transform: 'rotate(6deg)', color: 'var(--ink)', borderColor:'var(--ink)', textAlign:'center' }}>
                ❋ FIRST IMPRESSION
              </div>
            </div>

            <div className="mono" style={{ marginTop: 20, fontSize: 10, letterSpacing:'.2em', textAlign:'center', color:'var(--ink-fade)' }}>
              YOU ARE THE <span className="ink-red">{visits}</span>
              {visits === 1 ? 'ST' : visits === 2 ? 'ND' : visits === 3 ? 'RD' : 'TH'} VISITOR TO OPEN THIS COPY
            </div>
          </div>

          {/* red wax seal */}
          <div className="wax-seal" style={{
            position: 'absolute', bottom: -28, right: -18,
            width: 90, height: 90, borderRadius: '50%',
            background: 'radial-gradient(circle at 35% 30%, #e85b4a, #8e2a20 70%)',
            boxShadow: 'inset -6px -6px 12px rgba(0,0,0,.35), 2px 4px 8px rgba(0,0,0,.2)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            transform: 'rotate(-12deg)',
          }}>
            <span className="display" style={{ color:'#f3ede2', fontSize: 36, lineHeight: 1 }}>Y</span>
          </div>
        </div>
      </div>

      {/* last line */}
      <hr className="rule-thick" style={{marginTop: 60}} />
      <div style={{ textAlign:'center', padding:'24px 0 6px' }}>
        <div className="display" style={{ fontSize: 'clamp(42px, 6vw, 84px)', color:'var(--stamp)', lineHeight: 1 }}>Finis.</div>
        <div className="mono" style={{ fontSize: 11, letterSpacing:'.3em', color:'var(--ink-fade)', marginTop: 6 }}>
          ⟡ END OF THE FIRST IMPRESSION ⟡
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Afterword });