// IssueBody.jsx — long-form article view
function IssueBody({ issue }) {
  return (
    <article style={{ maxWidth: 'var(--measure-article)', margin: '0 auto', padding: '80px 32px 0' }}>
      <ReadingProgress />
      <div className="kd-anim-up" style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--blue)' }}>
        № {String(issue.number).padStart(2, '0')} · {issue.section}
      </div>

      <h1 style={{
        fontFamily: 'var(--serif)', fontSize: 52, fontWeight: 400,
        letterSpacing: '-0.02em', color: 'var(--ink)', lineHeight: 1.08,
        margin: '24px 0 18px 0', textWrap: 'pretty',
      }}>
        {issue.title}
      </h1>

      <p style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'var(--slate)', margin: '0 0 32px 0', textWrap: 'pretty', fontStyle: 'italic' }}>
        {issue.dek}
      </p>

      <div style={{
        display: 'flex', gap: 18, alignItems: 'center',
        fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--slate)',
        letterSpacing: '0.04em',
        paddingBottom: 32, borderBottom: '1px solid var(--hairline)',
      }}>
        <span>{issue.date}</span>
        <span style={{ color: 'var(--hairline)' }}>·</span>
        <span>{issue.readTime}</span>
        <span style={{ color: 'var(--hairline)' }}>·</span>
        <span>by {issue.author}</span>
      </div>

      <div style={{ paddingTop: 40, fontFamily: 'var(--serif)', fontSize: 18, lineHeight: 1.7, color: 'var(--ink)' }}>
        {issue.body.map((block, i) => {
          if (block.type === 'p') return <p key={i} style={{ margin: '0 0 1.2em 0', textWrap: 'pretty' }}>{block.text}</p>;
          if (block.type === 'h2') return <h2 key={i} style={{ fontFamily: 'var(--serif)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.01em', color: 'var(--ink)', margin: '2em 0 0.5em 0' }}>{block.text}</h2>;
          if (block.type === 'pull') return (
            <blockquote key={i} style={{
              margin: '2em 0', padding: '0 0 0 28px', borderLeft: '2px solid var(--blue)',
              fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.45, color: 'var(--ink)',
            }}>{block.text}</blockquote>
          );
          if (block.type === 'divider') return <Divider key={i} vMargin={48} />;
          return null;
        })}
      </div>

      <Divider vMargin={56} />

      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18, padding: '0 0 40px' }}>
        <span className="kd-float"><Mark size="md" /></span>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--slate)' }}>
          {window.UI.endOf} № {String(issue.number).padStart(2, '0')}
        </div>
      </div>

      {/* End-of-article subscribe prompt — highest-intent moment */}
      <div style={{ maxWidth: 460, margin: '0 auto', padding: '8px 0 96px' }}>
        <div style={{ fontFamily: 'var(--serif)', fontStyle: 'italic', fontSize: 17, lineHeight: 1.5, color: 'var(--slate)', textAlign: 'center', marginBottom: 18 }}>
          Read this far? Get the next one in a fortnight.
        </div>
        <SubscribeForm variant="inline" />
      </div>
    </article>
  );
}
window.IssueBody = IssueBody;