function Works({ onNavigate }) {
  const items = [
    {
      tall: true,
      tag: "Demolition · 解体",
      title: "RC造マンション一棟解体工事",
      meta: ["福岡市東区", "2024.11", "近隣配慮・分別解体"],
      char: "解",
    },
    {
      tag: "Civil · 土木",
      title: "宅地造成・擁壁工事",
      meta: ["春日市", "2024.07"],
      char: "土",
    },
    {
      tag: "Solar · 太陽光",
      title: "産業用太陽光パネル設置",
      meta: ["筑紫野市", "2024.05"],
      char: "陽",
    },
    {
      tag: "Scaffolding · 足場",
      title: "戸建て住宅 外壁塗装用足場架設",
      meta: ["大野城市", "2024.09"],
      char: "足",
    },
    {
      tag: "Renovation · リフォーム",
      title: "店舗内装フルリノベーション",
      meta: ["博多区", "2024.10"],
      char: "改",
    },
  ];
  return (
    <section className="section works" id="works" data-screen-label="Works">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow-row">Works · 施工実績</div>
          <h2 className="section-title">
            現場の数だけ、覚えがある。
          </h2>
          <p className="section-sub">
            数え切れないほどの現場を、一つも投げ出さずに完工してきた。<br/>
            その実績の一部をご覧ください。
          </p>
        </div>

        <div className="works-grid">
          {items.map((w, i) => (
            <article key={i} className={"work-card" + (w.tall ? " tall" : "")}>
              <div className="work-bg" aria-hidden="true">
                <div className="work-bg-char">{w.char}</div>
                <div className="work-bg-pattern"></div>
              </div>
              <div className="work-tag">{w.tag}</div>
              <h3 className="work-title">{w.title}</h3>
              <div className="work-meta">
                {w.meta.map((m, j) => (<span key={j}>{m}</span>))}
              </div>
            </article>
          ))}
        </div>

        <div className="works-foot">
          <button className="btn btn-outline" onClick={() => onNavigate("contact")}>
            類似案件のご相談はこちら <IconArrow/>
          </button>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Works });