/* Section 2 — Pain (株式会社労務ニュース版・人事全般の悩み) */

const PAINS = [
  { n: '01', tag: 'LEADERSHIP', q: '管理職が、指示しないと動かない。自分で考えて判断する人が育たない。', note: '研修は受けさせた。でも現場に戻ると元に戻る。誰のせいでもないけれど、誰も解けない。' },
  { n: '02', tag: 'MEETING',    q: '会議で決まらない。役員が言っても、現場には届いていない。',                         note: '言葉の往復だけが増えて、意思決定が前に進まない。経営と現場の間に、見えない壁がある。' },
  { n: '03', tag: 'RETENTION',  q: '採用してもすぐ辞める。理由は人それぞれだが、共通点がつかめない。',                 note: '面接時の温度感と、入ってからの空気が違う。何を変えればいいか、当たりがつかない。' },
  { n: '04', tag: 'EVALUATION', q: '評価制度はあるが、形骸化している。給与の根拠も、もう古い。',                       note: '頑張った人と、そうでない人の差がつけられない。等級と実態がずれて、社員も納得していない。' },
  { n: '05', tag: 'AI',         q: 'AIを使いたいが、社内に詳しい人がいない。導入が止まる。',                           note: '研修だけでは、現場で動かない。人事部が手作業のまま、社員だけが先に進んでいく。' },
  { n: '06', tag: 'VALUES',     q: '会社の方向性が、社員にうまく伝わっていない。',                                     note: '理念はある。でも日々の判断はバラバラ。同じ景色を見ている感覚がない。' },
  { n: '07', tag: '1ON1',       q: '1on1を始めたが、雑談で終わる。聞き出せない、踏み込めない。',                       note: '時間だけが消費されて、関係性も、課題発見も、深まらない。' }
];

const Pain = () => (
  <section className="pain" id="pain" data-screen-label="02 Pain">
    <div className="container">
      <div className="section-head">
        <Eyebrow>YOUR HEADACHES · 人事のリアル</Eyebrow>
        <h2>人事の悩みは、ひとつでは終わらない。<br/>こんなこと、ありませんか？</h2>
      </div>
      <div className="pain__grid">
        {PAINS.map(p => (
          <div className="pain__card" key={p.n}>
            <div className="pain__n">{p.tag} · {p.n}</div>
            <div className="pain__q">「{p.q}」</div>
            <div className="pain__note">— {p.note}</div>
          </div>
        ))}
      </div>
      <div className="pain__handoff">
        <strong>人事の悩みは、ぜんぶ受け止めます。</strong>
        <a className="btn btn--link" href="#promises" style={{marginLeft:'auto'}}>株式会社の3つの約束へ <Arrow/></a>
      </div>
    </div>
  </section>
);

window.Pain = Pain;