const Approach = () => {
  const items = [
    {
      num: "01",
      title: "信頼感",
      desc: "派手な演出ではなく、丁寧なヒアリングと確かな技術で。長くお付き合いいただける関係を、何より大切にしています。",
    },
    {
      num: "02",
      title: "誠実さ",
      desc: "「できること」「できないこと」を正直にお伝えします。期待値を整え、納得していただいた上で、最後までやり切ります。",
    },
    {
      num: "03",
      title: "創造性",
      desc: "整理することと、新しい価値を生むことは両立します。複雑な情報の中から、伝わる構造と表現を見つけ出します。",
    },
  ];

  return (
    <section className="section approach" id="approach">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow light">Approach</span>
            <h2 className="section-title">提供する、<br/>3つの<span style={{color:"#5b9bd5"}}>価値</span>。</h2>
          </div>
          <p className="section-lead">
            「わかりにくいものを、わかりやすくする」。<br/>
            この一行に向けて、私たちが日々大切にしている姿勢を、
            3つの言葉に整理しました。
          </p>
        </div>

        <div className="approach-grid">
          {items.map((it) => (
            <div className="approach-item" key={it.num}>
              <div className="big-num">{it.num}</div>
              <h3>{it.title}</h3>
              <p>{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Approach = Approach;