const Why = () => (
  <section id="why" className="why">
    <div className="wrap">
      <Eyebrow>Why Us · 選ばれる理由</Eyebrow>
      <h2 className="display" style={{ marginTop: 24 }}>
        AI RPOパートナーが<br/><em>選ばれる</em>理由。
      </h2>
      <div className="why-list">
        <div className="why-card">
          <div className="why-num">
            <span className="big">01</span>
            <div className="lbl">Dedicated Team</div>
          </div>
          <div>
            <h3>採用のプロフェッショナルが<br/>専任で伴走。</h3>
            <p>
              エンジニア採用、ハイクラス採用、新卒採用など、各領域で実績を積んだ採用のプロフェッショナルが専任チームとしてアサイン。貴社の採用チームの一員として、週次の定例を通じて継続的にご支援します。
            </p>
            <p>
              単なる業務代行ではなく、<b style={{ color: 'var(--fg)' }}>採用成果に責任を持つパートナー</b>として、戦略から運用まで伴走します。
            </p>
          </div>
          <div className="why-viz">
            <div style={{ fontFamily: 'var(--font-en)', fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.2em', marginBottom: 18, textTransform: 'uppercase' }}>Team Structure</div>
            <div style={{ display: 'grid', gap: 10, fontSize: 13 }}>
              {[
                ['ストラテジスト', '戦略設計 / KPI設計'],
                ['リクルーター', '媒体運用 / スカウト'],
                ['オペレーター', '選考管理 / 日程調整'],
              ].map(([r, d]) => (
                <div key={r} style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 14px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 4 }}>
                  <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', color: 'var(--accent)' }}>{r}</span>
                  <span style={{ color: 'var(--fg-muted)', fontSize: 12 }}>{d}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="why-card">
          <div className="why-num">
            <span className="big">02</span>
            <div className="lbl">End-to-End</div>
          </div>
          <div>
            <h3>スカウトだけじゃない。<br/>採用活動全体を一気通貫で。</h3>
            <p>
              戦略設計、媒体運用、スカウト、エージェント対応、選考管理、採用広報——
              採用のあらゆる工程を一気通貫でカバーします。
            </p>
            <p>
              <b style={{ color: 'var(--fg)' }}>「部分的な代行」ではなく、「採用活動そのもの」のパートナー</b>として伴走。全体最適の視点で、最も効果的なアクションを提案・実行します。
            </p>
          </div>
          <div className="why-viz">
            <div style={{ fontFamily: 'var(--font-en)', fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.2em', marginBottom: 18, textTransform: 'uppercase' }}>Coverage</div>
            <div style={{ display: 'grid', gap: 8, fontSize: 12 }}>
              {['戦略設計', '媒体運用', 'スカウト', 'エージェント', '選考管理', '採用広報'].map(r => (
                <div key={r} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', background: 'var(--bg-2)', border: '1px solid var(--border)', borderRadius: 4 }}>
                  <span style={{ color: 'var(--accent)' }}>◎</span>
                  <span style={{ color: 'var(--fg-muted)' }}>{r}</span>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="why-card">
          <div className="why-num">
            <span className="big">03</span>
            <div className="lbl">AI Assist</div>
          </div>
          <div>
            <h3>生成AIで工数を圧縮。<br/>人は本質的な判断に集中。</h3>
            <p>
              原稿作成、スカウト文面の個別化、競合分析、レポート集計——工数のかかる業務には自社開発の生成AIツールを活用し、担当者の時間を創出します。
            </p>
            <p>
              <b style={{ color: 'var(--fg)' }}>AIが下支えし、人が判断する。</b>同じコスト内でも、より多くの候補者と深く向き合える体制を実現します。
            </p>
          </div>
          <div className="why-viz">
            <div style={{ fontFamily: 'var(--font-en)', fontSize: 10, color: 'var(--fg-dim)', letterSpacing: '0.2em', marginBottom: 18, textTransform: 'uppercase' }}>Time Reallocation</div>
            {[
              { l: '定型業務（AI）', v: 30, c: 'var(--accent-soft)', tx: 'var(--accent)' },
              { l: '判断業務（人）', v: 70, c: 'var(--accent)', tx: 'var(--accent)' },
            ].map(r => (
              <div key={r.l} style={{ marginBottom: 14 }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, marginBottom: 6 }}>
                  <span style={{ color: 'var(--fg-muted)' }}>{r.l}</span>
                  <span style={{ fontFamily: 'var(--font-mono)', color: r.tx }}>{r.v}%</span>
                </div>
                <div style={{ height: 10, background: 'var(--bg-3)', borderRadius: 2, overflow: 'hidden' }}>
                  <div style={{ width: `${r.v}%`, height: '100%', background: r.c }}/>
                </div>
              </div>
            ))}
            <div style={{ fontSize: 11, color: 'var(--fg-dim)', marginTop: 14, lineHeight: 1.6 }}>
              担当者の時間の70%を、候補者対応や戦略判断に再配分。
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Cases = () => (
  <section id="cases">
    <div className="wrap">
      <Eyebrow>Case Studies · 支援実績</Eyebrow>
      <h2 className="display" style={{ marginTop: 24 }}>
        数字で見る、<em>採用の変化</em>。
      </h2>
      <div className="case-list" style={{ marginTop: 48 }}>
        <div className="case-card">
          <div className="case-photo"><img src="assets/case-sojitz.webp" alt="双日テックイノベーション" width="1200" height="812" loading="lazy" decoding="async"/></div>
          <div className="case-num">CASE 01</div>
          <div className="case-company">双日テックイノベーション株式会社</div>
          <div className="case-spec">中途／IT・SIer／500-1,000人</div>
          <div className="case-big">7<span className="unit">× 返信数</span></div>
          <div className="case-head">返信数を7倍に。<br/>導入2ヶ月で内定者を輩出。</div>
          <div className="case-meta">
            <div><span className="lbl">Issue</span>現場部課長がスカウト業務に週30分〜1時間しか割けず、返信ゼロのポジションも発生。</div>
            <div style={{ marginTop: 8 }}><span className="lbl">Action</span>現場課長がプロンプト設計に関与し、候補者の経歴を引用した個別スカウト文を生成・送付。</div>
            <div className="case-result" style={{ marginTop: 10 }}><span className="lbl">Result</span>返信数が従来比7倍、導入2ヶ月で内定者獲得、ツール作業工数ほぼゼロに。</div>
          </div>
        </div>
        <div className="case-card">
          <div className="case-photo"><img src="assets/case-maeda.webp" alt="前田道路" width="1194" height="808" loading="lazy" decoding="async"/></div>
          <div className="case-num">CASE 02</div>
          <div className="case-company">前田道路株式会社</div>
          <div className="case-spec">新卒／大手道路舗装会社／2,500人</div>
          <div className="case-big">工数ほぼゼロ<span className="unit"></span></div>
          <div className="case-head">スカウト送付工数をほぼゼロに。<br/>ナビサイト依存から脱却。</div>
          <div className="case-meta">
            <div><span className="lbl">Issue</span>人事部のみでスカウト運用、工数負荷で母集団確保が困難。一度は運用停止に。</div>
            <div style={{ marginTop: 8 }}><span className="lbl">Action</span>候補者選定・文面作成・送付・振り返り定例まで一貫代行。人事は戦略業務に集中。</div>
            <div className="case-result" style={{ marginTop: 10 }}><span className="lbl">Result</span>スカウト送付工数がほぼゼロ化、ナビサイト中心の採用から脱却し新チャネル確立。</div>
          </div>
        </div>
        <div className="case-card">
          <div className="case-photo"><img src="assets/case-kaneko.webp" alt="金子コード" width="1194" height="808" loading="lazy" decoding="async"/></div>
          <div className="case-num">CASE 03</div>
          <div className="case-company">金子コード株式会社</div>
          <div className="case-spec">中途／電線・医療用カテーテル・食品／100-500人</div>
          <div className="case-big">初<span className="unit"> 内定獲得</span></div>
          <div className="case-head">ダイレクト採用で自社初の内定。<br/>選考「質×量」両面で手応え。</div>
          <div className="case-meta">
            <div><span className="lbl">Issue</span>応募数不足と要件ミスマッチで、ダイレクト採用が成果に繋がらず。</div>
            <div style={{ marginTop: 8 }}><span className="lbl">Action</span>AIによる客観的候補者選定と、経歴に基づく個別カスタム文面を運用代行。</div>
            <div className="case-result" style={{ marginTop: 10 }}><span className="lbl">Result</span>ダイレクト経由で自社初の内定獲得、最終面接進出率が向上、母集団も安定増加。</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Why, Cases });