// DISPATCH · contact as a typewriter form + socials
function Typewriter() {
  const [name, setName] = React.useState('');
  const [body, setBody] = React.useState('');
  const [sent, setSent] = React.useState(false);

  const send = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`Dispatch from ${name || 'a stranger'}`);
    const text = encodeURIComponent(body);
    window.location.href = `mailto:me@youcef.io?subject=${subject}&body=${text}`;
    setSent(true);
  };

  return (
    <form onSubmit={send} className="card" style={{
      padding: 26,
      background: 'var(--paper-shade)',
      position: 'relative',
      backgroundImage:
        'repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(20,17,16,.18) 31px, rgba(20,17,16,.18) 32px)',
    }}>
      <div style={{ position: 'absolute', top: -14, left: 40 }} className="tape" />
      <div className="kicker" style={{ marginBottom: 10 }}>FORM DISPATCH-A · TYPEWRITTEN</div>

      <label className="mono" style={{ display: 'block', fontSize: 11, letterSpacing: '.2em', marginTop: 4 }}>
        FROM ·
      </label>
      <input value={name} onChange={e => setName(e.target.value)}
        placeholder="yr. name"
        style={{
          width: '100%', background: 'transparent', border: 0,
          borderBottom: '1px solid var(--ink)',
          padding: '4px 0 8px',
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 18, outline: 0, marginBottom: 14,
        }} />

      <label className="mono" style={{ display: 'block', fontSize: 11, letterSpacing: '.2em' }}>
        MESSAGE ·
      </label>
      <textarea value={body} onChange={e => setBody(e.target.value)}
        rows={6}
        placeholder="state yr. business, honestly."
        style={{
          width: '100%', background: 'transparent', border: 0,
          padding: '6px 0',
          fontFamily: "'JetBrains Mono', monospace",
          fontSize: 15, lineHeight: '32px', outline: 0,
          resize: 'none',
        }} />

      <hr className="rule-dash" />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 14 }}>
        <span className="mono caret" style={{ fontSize: 12, opacity: .7 }}>
          {sent ? '✓ dispatched to me@youcef.io ' : `${body.length} / 800 char `}
        </span>
        <button type="submit" className="btn red">→ SEND BY POST</button>
      </div>
    </form>
  );
}

function Colophon() {
  const socials = [
    { label: 'GITHUB',    href: 'https://github.com/YoucefBadaoui',         handle: '@YoucefBadaoui' },
    { label: 'LINKEDIN',  href: 'https://www.linkedin.com/in/youcef-badaoui/', handle: '/in/youcef-badaoui' },
    { label: 'EMAIL',     href: 'mailto:me@youcef.io',                      handle: 'me@youcef.io' },
    { label: 'WEBSITE',   href: 'https://youcef.io',                        handle: 'youcef.io' },
  ];

  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'}}>
        <h2 className="display" style={{ fontSize: 'clamp(52px, 7vw, 110px)', lineHeight: .85 }}>
          Post<span style={{color:'var(--stamp)'}}>.</span>
        </h2>
        <div className="kicker">DISPATCH &amp; CORRESPONDENCE</div>
      </div>
      <hr className="rule" />

      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 36, marginTop: 28 }}>
        <Typewriter />

        <div>
          <div className="kicker" style={{ marginBottom: 10 }}>SIGNALS</div>
          <div style={{ border: '1px solid var(--ink)' }}>
            {socials.map((s, i) => (
              <a key={s.label} href={s.href} target="_blank" rel="noreferrer"
                 style={{
                   display: 'grid',
                   gridTemplateColumns: '140px 1fr 40px',
                   alignItems: 'center',
                   padding: '18px 20px',
                   borderBottom: i < socials.length - 1 ? '1px solid var(--ink)' : 0,
                   textDecoration: 'none',
                   color: 'var(--ink)',
                   background: i % 2 === 0 ? 'var(--paper)' : 'var(--paper-shade)',
                 }}
                 className="lift social-row"
                 onMouseEnter={e => e.currentTarget.style.background = 'var(--ink)'}
                 onMouseLeave={e => e.currentTarget.style.background = i % 2 === 0 ? 'var(--paper)' : 'var(--paper-shade)'}
              >
                <span className="mono" style={{ fontSize: 11, letterSpacing: '.25em' }}>{s.label}</span>
                <span className="didone" style={{ fontSize: 26 }}>{s.handle}</span>
                <span className="didone" style={{ fontSize: 30, textAlign: 'right', color: 'var(--stamp)' }}>→</span>
              </a>
            ))}
          </div>

          <div className="card" style={{ padding: 20, marginTop: 20, background: 'var(--ink)', color: 'var(--paper)' }}>
            <div className="kicker" style={{ marginBottom: 10, color: 'var(--paper-shade)' }}>OATH · THE SMALL PRINT</div>
            <p style={{ fontSize: 15, lineHeight: 1.5 }}>
              “Quietly writing my own story.” Dispatches answered within a few earth rotations.
              Recruiters welcome at the door, provided they carry <span className="ink-red">interesting problems</span> and not buzzwords.
              The subject also answers to <em>Joseph</em>.
            </p>
          </div>
        </div>
      </div>

      {/* colophon footer */}
      <div style={{ marginTop: 60 }}>
        <hr className="rule-thick" />
        <div className="mono colophon-foot" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20, padding: '14px 0', fontSize: 11 }}>
          <div>
            <div style={{opacity: .5, letterSpacing:'.2em'}}>COLOPHON</div>
            Set in <em>Playfair</em>, <em>Archivo Black</em>,<br/>
            <em>UnifrakturCook</em> &amp; <em>JetBrains&nbsp;Mono</em>.
          </div>
          <div>
            <div style={{opacity: .5, letterSpacing:'.2em'}}>PRESSED</div>
            One paper stock, two inks,<br/>india black &amp; vermilion red.
          </div>
          <div>
            <div style={{opacity: .5, letterSpacing:'.2em'}}>BINDING</div>
            Hand-assembled with React,<br/>bound by stubbornness.
          </div>
          <div>
            <div style={{opacity: .5, letterSpacing:'.2em'}}>IMPRIMATUR</div>
            © MMXXVI · Y. BADAOUI · <span className="arabic" style={{fontSize: 14, letterSpacing: 0}}>يوسف</span><br/>
            All chapters reserved.
          </div>
        </div>
        <hr className="rule" />
        <div style={{ textAlign: 'center', padding: '14px 0 0', fontSize: 12 }} className="mono">
          ⟡ END OF VOLUME ⟡ &nbsp; • &nbsp; PRINTED IN POZNAŃ · MMXXVI · NO. I · FIRST IMPRESSION &nbsp; • &nbsp; ⟡ TURN THE PAGE ⟡
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Colophon });