// Concepts.jsx — browse issues by article type. Colored chips filter the list.
function Concepts({ onOpenIssue }) {
  const sections = window.ARTICLE_TYPES.map(t => t.id).filter(
    id => window.ISSUES.some(i => i.section === id)
  );
  const countOf = (s) => window.ISSUES.filter(i => i.section === s).length;
  const unit = (n) => (n === 1 ? window.UI.issueLabel : window.UI.issuesLabel);

  const [active, setActive] = React.useState('All');
  const filtered = active === 'All' ? window.ISSUES : window.ISSUES.filter(i => i.section === active);

  const Chip = ({ id, label, count, color, isActive }) => (
    <button
      className="kd-topic-chip"
      onClick={() => setActive(id)}
      style={isActive ? {
        background: color || 'var(--ink)',
        color: color ? '#1A1A1A' : 'var(--bone)',
        borderColor: 'transparent',
      } : undefined}
    >
      {color && <span className="kd-topic-swatch" style={{ background: color, boxShadow: isActive ? 'inset 0 0 0 1.5px rgba(0,0,0,0.25)' : 'none' }} />}
      {label}
      <span style={{ opacity: 0.7, marginLeft: 2 }}>{count}</span>
    </button>
  );

  return (
    <main>
      <section style={{ maxWidth: 'var(--measure-index)', margin: '0 auto', padding: '72px 32px 32px' }}>
        <div style={{ fontFamily: 'var(--mono)', fontSize: 11, fontWeight: 500, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--slate)' }}>
          {window.UI.conceptsKicker}
        </div>
        <h1 style={{ fontFamily: 'var(--serif)', fontSize: 56, fontWeight: 400, letterSpacing: '-0.02em', color: 'var(--ink)', margin: '16px 0 8px 0', lineHeight: 1.1 }}>
          {window.UI.conceptsTitle}
        </h1>
        <p style={{ fontFamily: 'var(--serif)', fontSize: 20, lineHeight: 1.5, color: 'var(--slate)', maxWidth: 560, margin: 0 }}>
          {window.UI.conceptsIntro}
        </p>

        {/* Topic cards */}
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {sections.map((s, i) => (
            <Reveal key={s} delay={i * 70}>
              <button
                onClick={() => setActive(active === s ? 'All' : s)}
                style={{
                  width: '100%', textAlign: 'left', cursor: 'pointer',
                  background: 'var(--bone-card)',
                  border: `1px solid ${active === s ? window.topicColor(s) : 'var(--hairline)'}`,
                  borderRadius: 4, padding: '22px 22px 26px',
                  display: 'flex', flexDirection: 'column', gap: 12,
                  transition: 'border-color 200ms var(--ease-out), transform 200ms var(--ease-out)',
                  transform: active === s ? 'translateY(-2px)' : 'none',
                }}
              >
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <span style={{ width: 12, height: 12, borderRadius: 50, background: window.topicColor(s), flexShrink: 0 }} />
                  <span style={{ fontFamily: 'var(--serif)', fontSize: 21, fontWeight: 400, letterSpacing: '-0.01em', color: 'var(--ink)' }}>{s}</span>
                  <span style={{ marginLeft: 'auto', fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.16em', color: 'var(--slate)', whiteSpace: 'nowrap' }}>
                    {countOf(s)} {unit(countOf(s))}
                  </span>
                </div>
                <p style={{ fontFamily: 'var(--serif)', fontSize: 15, lineHeight: 1.5, color: 'var(--slate)', margin: 0 }}>
                  {window.topicDesc(s)}
                </p>
              </button>
            </Reveal>
          ))}
        </div>

        <Divider vMargin={48} />

        {/* Filter chips */}
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, alignItems: 'center' }}>
          <Chip id="All" label={window.UI.all} count={window.ISSUES.length} isActive={active === 'All'} />
          {sections.map(s => (
            <Chip key={s} id={s} label={s} count={countOf(s)} color={window.topicColor(s)} isActive={active === s} />
          ))}
        </div>

        {/* Filtered issue list */}
        <div style={{ marginTop: 24 }}>
          {filtered.map((issue, i) => (
            <Reveal key={issue.number} delay={Math.min(i, 6) * 55}>
              <IssueCard issue={issue} last={i === filtered.length - 1} onOpen={() => onOpenIssue(issue)} />
            </Reveal>
          ))}
        </div>
      </section>
    </main>
  );
}
window.Concepts = Concepts;