function Services() {
  const items = [
    { num: "01", char: "鳶", en: "tobi / scaffolding", title: "とび・土工工事",
      desc: "高所での組立・解体、足場の架設まで。安全と段取りを何より重視します。",
      img: "assets/service-tobi.webp" },
    { num: "02", char: "足", en: "scaffolding", title: "足場工事",
      desc: "戸建てから中大規模物件まで。図面を踏まえた架設計画で工期短縮に貢献します。",
      img: "assets/service-ashiba.webp" },
    { num: "03", char: "解", en: "demolition", title: "解体工事",
      desc: "木造・RC・鉄骨を問わず対応。近隣配慮と粉塵・騒音対策を徹底します。",
      img: "assets/service-kaitai.webp" },
    { num: "04", char: "土", en: "civil works", title: "土木工事",
      desc: "造成・掘削・擁壁・外構まで。土地の表情を読み、確かな基盤をつくります。",
      img: "assets/service-doboku.webp" },
    { num: "05", char: "宅", en: "housing", title: "住宅工事",
      desc: "新築・増改築の躯体から仕上げまで。住まう人の暮らしを起点に組み立てます。",
      img: "assets/service-jutaku.webp" },
    { num: "06", char: "陽", en: "solar power", title: "太陽光工事",
      desc: "産業用・住宅用パネル設置。架台・配線・電気工事まで一貫対応します。",
      img: "assets/service-solar.webp" },
    { num: "07", char: "改", en: "renovation", title: "リフォーム・リノベーション",
      desc: "内装間仕切り、天井・壁張り、塗装、外構まで。一部屋から一棟まで承ります。",
      img: "assets/service-reform.webp" },
    { num: "08", char: "造", en: "land development", title: "造成工事",
      desc: "地盤改良、盛土、整地。住宅地・店舗用地など、用途に応じて造成します。",
      img: "assets/service-zousei.webp" },
    { num: "09", char: "装", en: "interior", title: "内装仕上工事",
      desc: "店舗・オフィス・住宅の内装。壁・天井・床、すべて職人の手仕事で。",
      img: "assets/service-naiso.webp" },
  ];
  return (
    <section className="section services" id="services" data-screen-label="Services">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow-row">Services · 事業内容</div>
          <h2 className="section-title">
            九の手仕事、<br/>
            ひとつの大志建設。
          </h2>
          <p className="section-sub">
            創業以来培ってきた、とび・土工工事を起点として、
            関連する工事を内製化することで、ひとつの窓口で一貫した品質をお届けします。
          </p>
        </div>

        <div className="service-grid">
          {items.map((it) => (
            <article className="service-card" key={it.num}>
              {it.img && (
                <img src={it.img} alt="" className="service-card-bg" aria-hidden="true"/>
              )}
              <span className="corner" aria-hidden="true"></span>
              <div className="service-num">{it.num} / {String(items.length).padStart(2, "0")}</div>
              <div className="service-char">
                {it.char}
                <small>{it.en}</small>
              </div>
              <div style={{ flex: 1 }}></div>
              <h3 style={{
                fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 19,
                margin: "0 0 4px", color: "var(--paper)", lineHeight: 1.4,
              }}>{it.title}</h3>
              <p className="service-desc">{it.desc}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Services });