function Hero({ onNavigate }) {
  return (
    <section style={{ position: 'relative', background: 'var(--grad-navy)', overflow: 'hidden' }}>
      <span style={{ position: 'absolute', inset: 0, background: 'var(--scrim-hero)' }} />
      <span style={{ position: 'absolute', right: -80, top: -60, width: 520, height: 520, borderRadius: '50%', background: 'radial-gradient(circle, rgba(20,184,166,.22) 0%, rgba(20,184,166,0) 68%)' }} />
      <Container style={{ position: 'relative', padding: '104px var(--gutter) 88px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.15fr .85fr', gap: 'var(--sp-9)', alignItems: 'center' }}>
          <div>
            <div className="mvl-eyebrow" style={{ color: 'var(--teal-200)' }}>CAREER STRATEGY MEDIA</div>
            <h1 style={{ margin: 'var(--sp-4) 0 0', fontSize: 'var(--fs-display)', fontWeight: 800, lineHeight: 'var(--lh-display)', letterSpacing: 'var(--ls-display)', color: '#fff', textWrap: 'pretty' }}>
              転職する人ではなく、<br />成長する人のためのメディア。
            </h1>
            <p style={{ margin: 'var(--sp-5) 0 0', maxWidth: 520, fontSize: 'var(--fs-lead)', lineHeight: 'var(--lh-lead)', color: 'var(--text-on-inverse-muted)' }}>
              仕事の悩みから市場価値、スキルアップ、キャリア選択まで。25〜55歳のビジネスパーソンが、次の10年を設計するための視点を届けます。
            </p>
            <div style={{ marginTop: 'var(--sp-6)', display: 'flex', gap: 'var(--sp-3)', flexWrap: 'wrap' }}>
              <Button tone="cta" size="lg" onClick={() => onNavigate('diagnosis')}>市場価値を3分で診断する</Button>
              <Button tone="onDark" size="lg" onClick={() => onNavigate('市場価値')}>特集を読む</Button>
            </div>
          </div>
          <Card tone="inverse" padding="lg" style={{ background: 'rgba(255,255,255,.06)', backdropFilter: 'blur(6px)', border: '1px solid var(--line-inverse)' }}>
            <div className="mvl-eyebrow" style={{ color: 'var(--teal-200)' }}>MARKET DATA 2026</div>
            <div style={{ marginTop: 'var(--sp-5)', display: 'grid', gap: 'var(--sp-6)' }}>
              <StatBlock tone="inverse" value="782" unit="万円" label="30代・SaaS営業の中位年収" caption="出典：自社調査 2026（n=1,204）" />
              <div style={{ height: 1, background: 'var(--line-inverse)' }} />
              <StatBlock tone="inverse" value="63" unit="%" label="自分の市場価値を把握していない" caption="ビジネスパーソン調査 2026" />
            </div>
          </Card>
        </div>
      </Container>
    </section>
  );
}

function HomeScreen({ onNavigate, onOpenArticle }) {
  const [tab, setTab] = React.useState('人気');
  return (
    <div>
      <Hero onNavigate={onNavigate} />

      <Section tight>
        <Container>
          <SectionHeader eyebrow="SEARCH BY CONCERN" title="仕事の悩みから探す" description="いま抱えている違和感を起点に、市場価値の話へつなげます。" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--grid-gap)' }}>
            {CONCERNS.map(c => <ConcernCard key={c.label} icon={<Ic n={c.icon} s={20} />} label={c.label} count={c.count} href="#" />)}
          </div>
        </Container>
      </Section>

      <Section tone="subtle" tight>
        <Container>
          <SectionHeader eyebrow="POPULAR" title="よく読まれている記事"
            action={<Button tone="ghost" iconRight={<Ic n="ArrowRight" s={15} />} onClick={() => onNavigate('市場価値')}>すべて見る</Button>} />
          <div style={{ marginBottom: 'var(--sp-6)' }}><Tabs items={['人気', '新着', '特集']} value={tab} onChange={setTab} /></div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 'var(--grid-gap)' }}>
            {ARTICLES.slice(0, 3).map(a => <div key={a.title} onClick={onOpenArticle}><ArticleCard {...a} /></div>)}
          </div>
          <div style={{ marginTop: 'var(--sp-7)', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--grid-gap)' }}>
            {ARTICLES.slice(3, 5).map((a, i) => <div key={a.title} onClick={onOpenArticle}><ArticleCard {...a} layout="horizontal" rank={i + 4} /></div>)}
          </div>
        </Container>
      </Section>

      <Section tight>
        <Container>
          <div style={{ display: 'grid', gridTemplateColumns: '.9fr 1.1fr', gap: 'var(--sp-9)', alignItems: 'center' }}>
            <div>
              <SectionHeader eyebrow="MARKET VALUE" title="市場価値は、転職しなくても測れる" description="社内評価ではなく、労働市場での代替可能性。3つの軸で現在地を可視化します。" />
              <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
                {[['専門性', '他社でも通用する再現性のある成果'], ['市場性', 'その職種の需給と単価トレンド'], ['拡張性', '5年後に隣接領域へ移れるか']].map(([t, d]) => (
                  <div key={t} style={{ display: 'flex', gap: 'var(--sp-4)', alignItems: 'flex-start' }}>
                    <span style={{ marginTop: 3, color: 'var(--teal-600)' }}><Ic n="Check" s={18} /></span>
                    <span><b style={{ color: 'var(--text-heading)' }}>{t}</b>
                      <span style={{ display: 'block', fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)', lineHeight: 'var(--lh-lead)' }}>{d}</span></span>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 'var(--sp-6)' }}><Button tone="primary" size="lg" onClick={() => onNavigate('diagnosis')}>診断をはじめる</Button></div>
            </div>
            <Card padding="lg">
              <div className="mvl-eyebrow">CAREER ROADMAP</div>
              <div style={{ marginTop: 'var(--sp-5)' }}>
                <RoadmapStep step={1} meta="YEAR 1" title="専門性の軸を決める" body="労働市場で値付けされるスキルから逆算する。" active />
                <RoadmapStep step={2} meta="YEAR 2-3" title="実績を再現可能にする" body="属人的な成果を、他社でも通用する型に整える。" />
                <RoadmapStep step={3} meta="YEAR 4+" title="選択肢を持って意思決定する" body="転職はゴールではなく、選べる状態をつくる手段。" last />
              </div>
            </Card>
          </div>
        </Container>
      </Section>

      <Section tone="subtle" tight>
        <Container>
          <SectionHeader eyebrow="RESKILLING" title="学習・リスキリング" description="時間が限られた社会人が、順番を間違えずに学ぶために。" action={<Button tone="ghost" iconRight={<Ic n="ArrowRight" s={15} />}>すべて見る</Button>} />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 'var(--grid-gap)' }}>
            {[['データリテラシー', '意思決定の質を上げる最短の投資', 'LineChart'], ['英語', '使う場面から逆算した学習設計', 'BookOpen'], ['AI活用', '職種別に「任せる/自分でやる」を分ける', 'Sparkles']].map(([t, d, ic]) => (
              <Card key={t} interactive padding="lg" href="#">
                <span style={{ display: 'inline-flex', width: 44, height: 44, borderRadius: 'var(--r-md)', background: 'var(--surface-accent-soft)', color: 'var(--teal-700)', alignItems: 'center', justifyContent: 'center' }}><Ic n={ic} s={20} /></span>
                <h3 style={{ margin: 'var(--sp-4) 0 var(--sp-2)', fontSize: 'var(--fs-h4)', fontWeight: 700 }}>{t}</h3>
                <p style={{ fontSize: 'var(--fs-body-sm)', color: 'var(--text-muted)', lineHeight: 'var(--lh-lead)' }}>{d}</p>
              </Card>
            ))}
          </div>
        </Container>
      </Section>

      <Section tight>
        <Container>
          <SectionHeader eyebrow="CAREER STORIES" title="キャリアストーリー" description="意思決定の瞬間を、本人の言葉で。" />
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 'var(--sp-8)', alignItems: 'center' }}>
            <Card padding="lg">
              <PullQuote attribution="外資系SaaS・事業開発 / 34歳">市場価値は、転職しなくても測れる。動くかどうかは、その後の話でいい。</PullQuote>
              <div style={{ marginTop: 'var(--sp-5)', paddingTop: 'var(--sp-5)', borderTop: '1px solid var(--line-hairline)' }}>
                <AuthorByline name="編集部 佐藤" role="インタビュー" date="2026.08.02" readTime="11分" size="lg" />
              </div>
            </Card>
            <div style={{ display: 'grid', gap: 'var(--sp-4)' }}>
              {ARTICLES.slice(4, 6).map(a => <div key={a.title} onClick={onOpenArticle}><ArticleCard {...a} layout="horizontal" /></div>)}
            </div>
          </div>
        </Container>
      </Section>

      <Section tight style={{ paddingTop: 0 }}>
        <Container>
          <CTAPanel eyebrow="MARKET VALUE" title="あなたの市場価値を3分で可視化する" align="center"
            body="職種・年次・スキルから、労働市場での現在地と次の一手をレポートします。登録は無料です。"
            actions={<><Button tone="cta" size="lg" onClick={() => onNavigate('diagnosis')}>無料で診断する</Button><Button tone="onDark" size="lg">サンプルレポートを見る</Button></>} />
          <div style={{ marginTop: 'var(--grid-gap)' }}><NewsletterSignup tone="light" /></div>
        </Container>
      </Section>
    </div>
  );
}

Object.assign(window, { HomeScreen });