function Strengths() {
  const items = [
    {
      num: "Reason 01",
      figure: "17", unit: "年",
      title: "創業以来、現場ひと筋。",
      desc: "2008年の創業から、福岡を中心に九州・沖縄エリアでの現場経験を積み重ねてきました。",
    },
    {
      num: "Reason 02",
      figure: "29", unit: "名",
      title: "施工管理 4 + 職人 18。",
      desc: "施工管理職員4名、職人18名の自社体制。営業3名・事務4名が現場をしっかりと支えます。",
    },
    {
      num: "Reason 03",
      figure: "9", unit: "業種",
      title: "とび・土工から解体まで。",
      desc: "建設業許可（福岡県知事許可）を背景に、9業種に及ぶ工事種別をひとつの会社で対応します。",
    },
    {
      num: "Reason 04",
      figure: "1", unit: "号",
      title: "請けたら、必ず引き渡す。",
      desc: "規模の大小を問わず、一案件一案件を真摯に。仕上がりとスピード、両方をお約束します。",
    },
  ];
  return (
    <section className="section strengths" id="strengths" data-screen-label="Strengths">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow-row">Why us · 選ばれる理由</div>
          <h2 className="section-title">
            選ばれてきた、四つの理由。
          </h2>
          <p className="section-sub">
            「仕上がりが確か」「段取りが早い」「何かあっても必ず動く」 ──
            お取引先からそう言われ続ける、その根拠を数字で示す。
          </p>
        </div>

        <div className="strengths-grid">
          {items.map((it, i) => (
            <article className="strength-card" key={i}>
              <div className="strength-num">{it.num}</div>
              <div className="strength-figure">{it.figure}<small>{it.unit}</small></div>
              <h3 className="strength-title">{it.title}</h3>
              <p className="strength-desc">{it.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Strengths });