function ArticleScreen({ onBack, onNavigate }) {
  const [saved, setSaved] = React.useState(false);
  const [gate, setGate] = React.useState(false);
  return (
    <div>
      <Container style={{ paddingTop: 'var(--sp-6)' }}>
        <Breadcrumb items={[{ label: 'ホーム', href: '#' }, { label: '市場価値', href: '#' }, { label: '年収が上がらない本当の理由' }]} />
      </Container>

      <Container style={{ paddingTop: 'var(--sp-6)', paddingBottom: 'var(--sp-9)' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 340px', gap: 'var(--sp-9)', alignItems: 'start' }}>
          <article>
            <div style={{ display: 'flex', gap: 'var(--sp-3)', alignItems: 'center' }}>
              <Tag category="value">市場価値</Tag><Badge tone="accent">特集</Badge>
            </div>
            <h1 style={{ margin: 'var(--sp-4) 0 0', fontSize: 'var(--fs-h1)', fontWeight: 800, lineHeight: 'var(--lh-heading)', letterSpacing: 'var(--ls-heading)', textWrap: 'pretty' }}>
              年収が上がらない本当の理由と、いま測るべき3つの指標
            </h1>
            <div style={{ marginTop: 'var(--sp-5)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--sp-5)', flexWrap: 'wrap' }}>
              <AuthorByline name="編集部 田中" role="キャリア領域" date="2026.08.10" readTime="7分" size="lg" />
              <div style={{ display: 'flex', gap: 'var(--sp-2)' }}>
                <IconButton label="保存" tone="outline" onClick={() => setSaved(true)}><Ic n={saved ? 'BookmarkCheck' : 'Bookmark'} /></IconButton>
                <IconButton label="共有" tone="outline"><Ic n="Share2" /></IconButton>
                <IconButton label="Xでシェア" tone="outline"><Ic n="Link" /></IconButton>
              </div>
            </div>

            <div style={{ marginTop: 'var(--sp-6)' }}><Thumb ratio="16 / 9" label="ARTICLE HERO IMAGE" /></div>

            <div style={{ maxWidth: 'var(--measure-article)', marginTop: 'var(--sp-7)' }}>
              <p style={{ fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-lead)', color: 'var(--slate-700)', fontWeight: 500 }}>
                昇給が止まったとき、多くの人は社内の評価制度を疑います。しかし年収を決めているのは、労働市場におけるあなたの代替可能性です。
              </p>
              <h2 style={{ margin: 'var(--sp-8) 0 var(--sp-4)', fontSize: 'var(--fs-h2)', fontWeight: 800 }}>評価と市場価値は別の指標である</h2>
              <p style={{ fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-body)' }}>
                社内評価は、その組織の目標達成にどれだけ貢献したかで決まります。一方で市場価値は、他社があなたを採用したときにどれだけの成果が再現されるかで決まります。この2つは相関しますが、一致はしません。だからこそ、評価が高いまま市場価値が下がるという状態が起こります。
              </p>
              <div style={{ margin: 'var(--sp-7) 0' }}>
                <Card padding="lg">
                  <div className="mvl-eyebrow">DATA</div>
                  <div style={{ marginTop: 'var(--sp-4)', display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--sp-5)' }}>
                    <StatBlock value="782" unit="万円" label="30代・SaaS営業の中位年収" caption="出典：自社調査 2026" />
                    <StatBlock value="2.4" unit="倍" label="学習継続者の昇進率" caption="n=1,204" />
                    <StatBlock value="63" unit="%" label="市場価値を把握していない" caption="ビジネスパーソン調査" />
                  </div>
                </Card>
              </div>
              <p style={{ fontSize: 'var(--fs-body)', lineHeight: 'var(--lh-body)' }}>
                測るべき指標は3つです。専門性、市場性、拡張性。いずれも「いまの職場で評価されているか」ではなく、「他社で再現できるか」という問いに置き換えると判断しやすくなります。
              </p>
              <div style={{ margin: 'var(--sp-7) 0' }}>
                <PullQuote attribution="外資系SaaS・事業開発 / 34歳">評価されている実感と、選ばれる可能性は、まったく別物だった。</PullQuote>
              </div>
              <h2 style={{ margin: 'var(--sp-8) 0 var(--sp-4)', fontSize: 'var(--fs-h2)', fontWeight: 800 }}>いま取れる3つの行動</h2>
              <div style={{ display: 'grid', gap: 'var(--sp-5)' }}>
                <RoadmapStep step={1} meta="STEP 1" title="成果を市場の言葉に翻訳する" body="社内用語を外して、数値と再現条件だけで書き直す。" active />
                <RoadmapStep step={2} meta="STEP 2" title="需給が伸びる領域に隣接させる" body="いまのスキルから半歩の距離にある領域を選ぶ。" />
                <RoadmapStep step={3} meta="STEP 3" title="選択肢を持ったまま留まる" body="動かない判断も、選べる状態でなければ意味がない。" last />
              </div>
              <div style={{ marginTop: 'var(--sp-8)' }}>
                <CTAPanel tone="soft" eyebrow="NEXT STEP" title="3分で市場価値レポートを受け取る"
                  body="この記事の3指標をもとに、あなたの現在地をレポートします。"
                  actions={<Button tone="cta" onClick={() => setGate(true)}>無料で診断する</Button>} />
              </div>
            </div>

            <div style={{ marginTop: 'var(--sp-9)' }}>
              <SectionHeader eyebrow="RELATED" title="関連記事" />
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--grid-gap)' }}>
                {ARTICLES.slice(1, 3).map(a => <ArticleCard key={a.title} {...a} />)}
              </div>
            </div>
          </article>

          <aside style={{ position: 'sticky', top: 96, display: 'grid', gap: 'var(--grid-gap)' }}>
            <Card padding="md">
              <div className="mvl-eyebrow">POPULAR</div>
              <div style={{ marginTop: 'var(--sp-4)', display: 'grid', gap: 'var(--sp-4)' }}>
                {ARTICLES.slice(0, 4).map((a, i) => (
                  <a key={a.title} href="#" style={{ display: 'flex', gap: 'var(--sp-3)', alignItems: 'flex-start' }}>
                    <span style={{ fontFamily: 'var(--font-en)', fontSize: 18, fontWeight: 800, lineHeight: 1.2, color: 'var(--teal-500)' }}>{String(i + 1).padStart(2, '0')}</span>
                    <span style={{ fontSize: 'var(--fs-body-sm)', fontWeight: 700, lineHeight: 1.6, color: 'var(--text-heading)' }}>{a.title}</span>
                  </a>
                ))}
              </div>
            </Card>
            <NewsletterSignup tone="light" title="週1回、市場価値の話を。" body="編集部が選ぶ記事だけをお届けします。" />
            <Card padding="md">
              <div className="mvl-eyebrow">CATEGORIES</div>
              <div style={{ marginTop: 'var(--sp-4)', display: 'flex', flexWrap: 'wrap', gap: 'var(--sp-2)' }}>
                <Tag category="concern" variant="line">仕事の悩み</Tag><Tag category="value" variant="line">市場価値</Tag>
                <Tag category="growth" variant="line">キャリアアップ</Tag><Tag category="change" variant="line">転職</Tag>
                <Tag category="learning" variant="line">学習・リスキリング</Tag><Tag category="story" variant="line">キャリアストーリー</Tag>
              </div>
            </Card>
          </aside>
        </div>
      </Container>

      {saved && <div style={{ position: 'fixed', left: '50%', bottom: 32, transform: 'translateX(-50%)', zIndex: 40 }}>
        <Toast tone="accent" icon={<Ic n="Check" s={16} />} onClose={() => setSaved(false)}>記事を保存しました</Toast>
      </div>}
      {gate && <div style={{ position: 'fixed', inset: 0, zIndex: 60 }}>
        <Dialog title="会員登録して診断を受ける" description="無料登録で市場価値レポートと全記事が利用できます。" onClose={() => setGate(false)}
          footer={<><Button tone="outline" onClick={() => setGate(false)}>あとで</Button><Button tone="cta" onClick={() => { setGate(false); onNavigate('diagnosis'); }}>無料で登録する</Button></>}>
          <Input label="メールアドレス" placeholder="you@company.co.jp" iconLeft={<Ic n="Mail" s={16} />} />
          <div style={{ marginTop: 'var(--sp-4)' }}><Checkbox label="ニュースレターも受け取る" description="週1回・いつでも解除できます" /></div>
        </Dialog>
      </div>}
    </div>
  );
}

Object.assign(window, { ArticleScreen });
