function CategoryScreen({ category = '市場価値', onOpenArticle }) {
  const [page, setPage] = React.useState(1);
  const [tab, setTab] = React.useState('新着');
  return (
    <div>
      <section style={{ background: 'var(--grad-navy)', position: 'relative', overflow: 'hidden' }}>
        <Container style={{ padding: 'var(--sp-8) var(--gutter)' }}>
          <div className="mvl-eyebrow" style={{ color: 'var(--teal-200)' }}>CATEGORY</div>
          <h1 style={{ margin: 'var(--sp-3) 0 0', fontSize: 'var(--fs-h1)', fontWeight: 800, color: '#fff', letterSpacing: 'var(--ls-heading)' }}>{category}</h1>
          <p style={{ margin: 'var(--sp-4) 0 0', maxWidth: 560, fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-lead)', color: 'var(--text-on-inverse-muted)' }}>
            労働市場での現在地を測るための視点と、実際に動いた人の記録。全128記事。
          </p>
        </Container>
      </section>

      <Container style={{ paddingTop: 'var(--sp-7)', paddingBottom: 'var(--sp-10)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '260px minmax(0,1fr)', gap: 'var(--sp-8)', alignItems: 'start' }}>
          <aside style={{ display: 'grid', gap: 'var(--grid-gap)', position: 'sticky', top: 96 }}>
            <Card padding="md">
              <div className="mvl-eyebrow">FILTER</div>
              <div style={{ marginTop: 'var(--sp-4)', display: 'grid', gap: 'var(--sp-4)' }}>
                <Select label="年代" options={['指定なし', '20代', '30代', '40代', '50代']} />
                <Select label="職種" options={['指定なし', '営業', 'エンジニア', '企画・マーケ', '管理職']} />
                <div>
                  <div style={{ fontSize: 'var(--fs-meta)', fontWeight: 700, color: 'var(--navy-800)', letterSpacing: 'var(--ls-jp-caps)', marginBottom: 'var(--sp-3)' }}>形式</div>
                  <div style={{ display: 'grid', gap: 'var(--sp-3)' }}>
                    <Checkbox label="解説記事" /><Checkbox label="インタビュー" /><Checkbox label="データ・調査" />
                  </div>
                </div>
                <Button tone="navy" full size="sm">絞り込む</Button>
              </div>
            </Card>
            <Card padding="md">
              <div className="mvl-eyebrow">READING</div>
              <div style={{ marginTop: 'var(--sp-4)', display: 'grid', gap: 'var(--sp-3)' }}>
                <Switch label="未読のみ表示" /><Switch label="保存した記事" checked />
              </div>
            </Card>
          </aside>

          <div>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 'var(--sp-5)', marginBottom: 'var(--sp-6)' }}>
              <Tabs items={['新着', '人気', '連載']} value={tab} onChange={setTab} />
              <div style={{ minWidth: 160 }}><Select options={['新着順', '人気順', '読了時間が短い順']} /></div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--grid-gap)' }}>
              {ARTICLES.map(a => <div key={a.title} onClick={onOpenArticle}><ArticleCard {...a} /></div>)}
            </div>
            <div style={{ marginTop: 'var(--sp-8)', display: 'flex', justifyContent: 'center' }}>
              <Pagination page={page} total={6} onChange={setPage} />
            </div>
          </div>
        </div>
      </Container>
    </div>
  );
}

Object.assign(window, { CategoryScreen });