function Hero({ onNavigate, t }) {
  const heroChar = t.heroChar || "志";
  return (
    <section className="hero" id="top">
      <div className="hero-paper" aria-hidden="true"></div>

      <div className="hero-inner">
        <div className="hero-left">
          <div className="hero-eyebrow">Fukuoka · since 2008</div>
          <h1 className="hero-title">
            九州の現場を、
            <br/>
            <span className="shu-char">正面</span>から受ける。
          </h1>
          <p className="hero-lead">
            福岡県春日市を拠点に、九州・沖縄全域の現場へ。
            <br/>
            <strong style={{ color: "var(--fg-1)", fontWeight: 600 }}>とび・土工・解体・土木・住宅・太陽光・リフォーム</strong>──
            自社職人が直接、現場を仕上げる。それが大志建設のやり方です。
          </p>
          <div className="hero-cta">
            <button className="btn btn-primary btn-lg" onClick={() => onNavigate("contact")}>
              無料お見積り・ご相談 <IconArrow/>
            </button>
            <button className="btn btn-outline btn-lg" onClick={() => onNavigate("services")}>
              事業内容を見る
            </button>
          </div>
          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="hero-meta-num">2008<small>〜</small></div>
              <div className="hero-meta-lbl">創業</div>
            </div>
            <div className="hero-meta-rule"></div>
            <div className="hero-meta-item">
              <div className="hero-meta-num">29<small>名</small></div>
              <div className="hero-meta-lbl">従業員数</div>
            </div>
            <div className="hero-meta-rule"></div>
            <div className="hero-meta-item">
              <div className="hero-meta-num">9<small>業種</small></div>
              <div className="hero-meta-lbl">対応工事</div>
            </div>
            <div className="hero-meta-rule"></div>
            <div className="hero-meta-item">
              <div className="hero-meta-num">九州<small>・沖縄</small></div>
              <div className="hero-meta-lbl">対応エリア</div>
            </div>
          </div>
        </div>

        <div className="hero-glyph" aria-hidden="true">
          <img
            src="assets/hero-main.webp"
            alt=""
            className="hero-glyph-bg"
          />
          <div className="hero-glyph-vertical">職 人 の 仕 事</div>
          <div className="hero-glyph-char">{heroChar}</div>
          <div className="hero-glyph-romaji">taishi · kokorozashi</div>
          <div className="hero-glyph-hanko">
            <span>大志</span>
            <span>建設</span>
          </div>
        </div>
      </div>

      <div className="hero-ticker" aria-hidden="true">
        <div className="hero-ticker-track">
          <span>
            とび・土工<span className="dot"></span>足場工事<span className="dot"></span>解体工事<span className="dot"></span>土木工事<span className="dot"></span>住宅<span className="dot"></span>太陽光<span className="dot"></span>リフォーム<span className="dot"></span>造成工事<span className="dot"></span>内装仕上<span className="dot"></span>
            とび・土工<span className="dot"></span>足場工事<span className="dot"></span>解体工事<span className="dot"></span>土木工事<span className="dot"></span>住宅<span className="dot"></span>太陽光<span className="dot"></span>リフォーム<span className="dot"></span>造成工事<span className="dot"></span>内装仕上<span className="dot"></span>
          </span>
        </div>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });