/* Section 3 — 3 Promises (リブランディング版) */

const PROMISES = [
  {
    num: '01',
    label: 'OPTIONS',
    t: 'いいも悪いも、選択肢を全部出す。',
    b: '「正しい答え」を押しつけない。A案・B案・C案をテーブルに並べ、メリットもリスクも全部見せる。都合のいい話だけじゃなく、不都合な事実も。選ぶのは社長。私たちの仕事は、社長が納得して判断できる状態をつくることです。'
  },
  {
    num: '02',
    label: 'TAKE OVER',
    t: '面倒ごとを、全部引き受ける。',
    b: '給与計算・手続きはもちろん、問題社員への対応、言いにくい一言まで。「こう伝えてください。文書はこちらで作ります。必要なら直接社員に伝えます」。"どうしたらいいか分からない"を"あとは決断するだけ"に変えます。'
  },
  {
    num: '03',
    label: 'CHANGE',
    t: '現状維持はしない。変化を届ける。',
    b: '「今のままで大丈夫ですよ」は、ほとんどの場合、変化の面倒を避けているだけ。法律も働き方も価値観も変わる中で、私たちは「ここを変えましょう」と言います。手順とリスクと対処法まで具体的に示す、だからパートナーになれる。'
  }
];

const Promises = () => (
  <section className="promises" id="promises" data-screen-label="03 Promises">
    <div className="container">
      <div className="section-head">
        <Eyebrow>OUR 3 PROMISES</Eyebrow>
        <h2>経営者のストレスを減らす、<br/>3つの約束。</h2>
      </div>
      <p className="promises__intro">
        多くの社労士は <b>「何をやるか」</b>（＝サービス範囲）で差別化します。<br/>
        労務ニュースは、それに加えて<b>「どう向き合うか」</b>——
        選択肢の出し方、引き受け方、変化の届け方——で差別化します。
      </p>
      <div className="promises__grid">
        {PROMISES.map(p => (
          <div className="promise" key={p.num}>
            <div className="promise__num"><span className="small">{p.label}</span>{p.num}</div>
            <div className="promise__ttl">{p.t}</div>
            <div className="promise__body">{p.b}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

window.Promises = Promises;