function DiagnosisScreen({ onNavigate }) {
  const [step, setStep] = React.useState(1);
  const total = 3;
  const done = step > total;
  return (
    <Container width="880px" style={{ padding: 'var(--sp-9) var(--gutter) var(--sp-10)' }}>
      {!done && <>
        <div className="mvl-eyebrow">MARKET VALUE CHECK</div>
        <h1 style={{ margin: 'var(--sp-3) 0 var(--sp-5)', fontSize: 'var(--fs-h1)', fontWeight: 800, letterSpacing: 'var(--ls-heading)' }}>市場価値を3分で可視化する</h1>
        <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--sp-4)', marginBottom: 'var(--sp-6)' }}>
          <div style={{ flex: 1, height: 4, borderRadius: 999, background: 'var(--slate-200)', overflow: 'hidden' }}>
            <div style={{ width: (step / total * 100) + '%', height: '100%', background: 'var(--action-primary)', transition: 'width var(--dur-base) var(--ease-standard)' }} />
          </div>
          <span style={{ fontFamily: 'var(--font-en)', fontSize: 'var(--fs-meta)', fontWeight: 700, color: 'var(--text-muted)' }}>STEP {step} / {total}</span>
        </div>
        <Card padding="lg">
          {step === 1 && <div style={{ display: 'grid', gap: 'var(--sp-6)' }}>
            <div><h2 style={{ fontSize: 'var(--fs-h3)', fontWeight: 700 }}>いまの状況を教えてください</h2>
              <p style={{ marginTop: 8, fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>回答は市場データとの比較にのみ使用します。</p></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-5)' }}>
              <Select label="職種" options={['営業', 'エンジニア', '企画・マーケ', 'コーポレート', '管理職']} />
              <Select label="業界" options={['SaaS・IT', '製造', '金融', 'コンサル', '医療・ヘルスケア']} />
            </div>
            <div><div style={{ fontSize: 'var(--fs-meta)', fontWeight: 700, color: 'var(--navy-800)', letterSpacing: 'var(--ls-jp-caps)', marginBottom: 'var(--sp-3)' }}>年代</div>
              <Radio options={['20代', '30代', '40代', '50代']} layout="row" /></div>
          </div>}
          {step === 2 && <div style={{ display: 'grid', gap: 'var(--sp-6)' }}>
            <div><h2 style={{ fontSize: 'var(--fs-h3)', fontWeight: 700 }}>いま感じている課題はどれですか</h2>
              <p style={{ marginTop: 8, fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>複数選択できます。</p></div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--sp-4)' }}>
              {CONCERNS.map(c => <Checkbox key={c.label} label={c.label} />)}
            </div>
          </div>}
          {step === 3 && <div style={{ display: 'grid', gap: 'var(--sp-6)' }}>
            <div><h2 style={{ fontSize: 'var(--fs-h3)', fontWeight: 700 }}>レポートの送付先</h2>
              <p style={{ marginTop: 8, fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)' }}>登録は無料です。営業メールは送りません。</p></div>
            <Input label="メールアドレス" placeholder="you@company.co.jp" iconLeft={<Ic n="Mail" s={16} />} hint="診断結果のPDFをお送りします" />
            <Checkbox label="利用規約とプライバシーポリシーに同意する" />
          </div>}
          <div style={{ marginTop: 'var(--sp-7)', display: 'flex', justifyContent: 'space-between', gap: 'var(--sp-3)' }}>
            <Button tone="ghost" disabled={step === 1} onClick={() => setStep(s => Math.max(1, s - 1))}>戻る</Button>
            <Button tone={step === total ? 'cta' : 'primary'} size="lg" onClick={() => setStep(s => s + 1)}>{step === total ? 'レポートを受け取る' : '次へ'}</Button>
          </div>
        </Card>
      </>}

      {done && <div style={{ display: 'grid', gap: 'var(--grid-gap)' }}>
        <Card tone="inverse" padding="lg">
          <div className="mvl-eyebrow" style={{ color: 'var(--teal-200)' }}>YOUR REPORT</div>
          <h1 style={{ margin: 'var(--sp-4) 0 var(--sp-5)', fontSize: 'var(--fs-h2)', fontWeight: 800, color: '#fff' }}>30代・SaaS営業／市場価値レポート</h1>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--sp-6)' }}>
            <StatBlock tone="inverse" value="812" unit="万円" label="想定オファー中位値" caption="同職種・同年代比較" />
            <StatBlock tone="inverse" value="上位24" unit="%" label="専門性スコア" caption="n=1,204" />
            <StatBlock tone="inverse" value="1.8" unit="倍" label="需給の伸び（3年）" caption="求人数ベース" />
          </div>
        </Card>
        <Card padding="lg">
          <SectionHeader eyebrow="NEXT ACTIONS" title="次の3手" />
          <RoadmapStep step={1} meta="0-3 MONTHS" title="成果を市場の言葉に翻訳する" body="社内用語を外し、数値と再現条件で書き直す。" active />
          <RoadmapStep step={2} meta="3-12 MONTHS" title="隣接領域の実務を1件つくる" body="学習ではなく、実績として残る形で。" />
          <RoadmapStep step={3} meta="12 MONTHS+" title="選べる状態で意思決定する" body="動かない判断も、選択肢があってはじめて有効。" last />
        </Card>
        <CTAPanel eyebrow="RECOMMENDED" title="レポートに沿った記事を読む" body="診断結果に対応する解説記事とデータをまとめました。"
          actions={<><Button tone="cta" size="lg" onClick={() => onNavigate('市場価値')}>記事を読む</Button><Button tone="onDark" size="lg" onClick={() => onNavigate('home')}>ホームへ戻る</Button></>} />
      </div>}
    </Container>
  );
}

Object.assign(window, { DiagnosisScreen });