// ---------- Changelog ----------
function ChangelogPage() {
  const items = [
    { v: '4.2.0', d: '2026.04.12', tag: 'MAJOR', changes: ['New: Trade performance analytics dashboard', 'New: Bulk assign defects to trades', 'Fix: Offline sync timing on iOS 18'] },
    { v: '4.1.3', d: '2026.03.28', tag: 'PATCH', changes: ['Fix: PDF export orientation on A3', 'Fix: Duplicate notification emails'] },
    { v: '4.1.0', d: '2026.03.10', tag: 'MINOR', changes: ['New: Custom defect taxonomies per project', 'New: SSO via SAML (Enterprise)', 'Improved: Photo upload speed by 3×'] },
    { v: '4.0.0', d: '2026.02.01', tag: 'MAJOR', changes: ['Rebuilt sync engine — 10× faster offline recovery', 'New API: v2 with full write support', 'Breaking: Legacy CSV schema deprecated'] },
    { v: '3.8.2', d: '2026.01.05', tag: 'PATCH', changes: ['Fix: Android 14 camera permission prompt', 'Fix: Report generation on 500+ defect projects'] },
  ];
  return (
    <SideRailLayout current="/changelog">
      <Block pad="56px 56px 32px">
        <Headline eyebrow="Changelog" title="Always shipping, never surprises." subtitle="Every release is documented. Subscribe to the feed for automatic updates." align="left" />
      </Block>
      <Block pad="0 56px 72px">
        {items.map((it, i) => (
          <div key={it.v} style={{
            display: 'grid', gridTemplateColumns: '140px 1fr', gap: 32,
            padding: '28px 0', borderTop: i === 0 ? '1px solid var(--rule)' : '1px solid var(--rule)',
          }} className="log-row">
            <div>
              <div style={{ fontSize: 20, fontWeight: 500, letterSpacing: '-0.02em' }}>v{it.v}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>{it.d}</div>
              <span style={{
                display: 'inline-block', marginTop: 10, padding: '3px 8px', borderRadius: 3,
                fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 500,
                background: it.tag === 'MAJOR' ? 'color-mix(in oklab, var(--accent) 22%, transparent)' : it.tag === 'MINOR' ? 'color-mix(in oklab, var(--ok) 18%, transparent)' : 'var(--paper-2)',
                color: it.tag === 'MAJOR' ? 'var(--accent-ink)' : it.tag === 'MINOR' ? 'var(--ok)' : 'var(--ink-3)',
                letterSpacing: '0.08em',
              }}>{it.tag}</span>
            </div>
            <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 8 }}>
              {it.changes.map(c => (
                <li key={c} style={{ fontSize: 14, color: 'var(--ink-2)', display: 'flex', gap: 10 }}>
                  <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--accent)', flexShrink: 0 }}>→</span>{c}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </Block>
      <style>{`@media(max-width:720px){.log-row{grid-template-columns:1fr !important;}}`}</style>
    </SideRailLayout>
  );
}

window.ChangelogPage = ChangelogPage;