// IssueCard.jsx — one row in the archive/home list
function IssueCard({ issue, onOpen, last }) {
  return (
    <article
      className="kd-card"
      onClick={onOpen}
      style={{
        display: 'grid',
        gridTemplateColumns: '150px 1fr 150px',
        gap: 32,
        alignItems: 'baseline',
        padding: '28px 20px',
        borderBottom: last ? 'none' : '1px solid var(--hairline)',
        cursor: 'pointer',
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
        <span style={{
          fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'var(--slate)',
        }}>
          № {String(issue.number).padStart(2, '0')}
        </span>
        <span className="kd-tag" style={{ background: window.topicColor(issue.section) }}>
          {issue.section}
        </span>
      </div>
      <div>
        <h3 className="kd-card-title" style={{
          fontFamily: 'var(--serif)', fontSize: 26, fontWeight: 400,
          color: 'var(--ink)', margin: '0 0 8px 0', letterSpacing: '-0.01em', lineHeight: 1.25,
        }}>
          {issue.title}
        </h3>
        <p style={{ fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.6, color: 'var(--slate)', margin: 0, maxWidth: 580 }}>
          {issue.dek}
        </p>
      </div>
      <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--slate)', textAlign: 'right', letterSpacing: '0.04em' }}>
        <div>{issue.date}</div>
        <div style={{ marginTop: 4, color: 'rgba(74,85,104,0.6)' }}>{issue.readTime}</div>
        <div className="kd-arrow" style={{ marginTop: 10, color: 'var(--blue)', fontSize: 14 }}>
          Read →
        </div>
      </div>
    </article>
  );
}
window.IssueCard = IssueCard;