/* Section 2 — Pain */

const PAINS = [
  { n: '01', q: '『源泉徴収票、もう一度ください』——そんな質問が毎週飛んでくる。', note: '本来社長が答えなくていい質問で、1日が細切れになる。' },
  { n: '02', q: '社員同士のささいな揉め事に、気づけば巻き込まれている。', note: '本業の思考が止まる。どっちにも肩入れできず、気疲れだけが残る。' },
  { n: '03', q: '入退社、年末調整、算定基礎。『そういえば、今月アレ』が毎月ある。', note: '漏れていないか、間違っていないか。終わらない確認作業。' },
  { n: '04', q: '今の社労士は『聞かれたら答える』だけ。こちらから持ってこない。', 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">Case {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;