function Footer({ onNavigate }) {
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div>
          <div className="footer-brand">
            <div className="footer-brand-mark">志</div>
            <div>
              <div className="footer-name">大志建設株式会社</div>
              <div className="footer-rom">taishi kensetsu co., ltd.</div>
              <div className="footer-addr">
                〒816-0802<br/>
                福岡県春日市春日原北町 2-20-11<br/>
                TEL：092-586-7547
              </div>
            </div>
          </div>
        </div>

        <div className="footer-cols">
          <div>
            <div className="footer-h">事業内容</div>
            <a href="#services" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>とび・土工工事</a>
            <a href="#services" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>足場工事</a>
            <a href="#services" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>解体工事</a>
            <a href="#services" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>土木・造成工事</a>
            <a href="#services" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>住宅・リフォーム</a>
            <a href="#services" onClick={(e) => { e.preventDefault(); onNavigate("services"); }}>太陽光工事</a>
          </div>
          <div>
            <div className="footer-h">会社案内</div>
            <a href="#about" onClick={(e) => { e.preventDefault(); onNavigate("about"); }}>私たちについて</a>
            <a href="#strengths" onClick={(e) => { e.preventDefault(); onNavigate("strengths"); }}>選ばれる理由</a>
            <a href="#works" onClick={(e) => { e.preventDefault(); onNavigate("works"); }}>施工実績</a>
            <a href="#company" onClick={(e) => { e.preventDefault(); onNavigate("company"); }}>会社概要</a>
            <a href="#" onClick={(e) => e.preventDefault()}>採用情報</a>
          </div>
          <div>
            <div className="footer-h">連絡先</div>
            <a href="tel:0925867547">092-586-7547</a>
            <a href="mailto:info@taishi-kensetsu.com">info@taishi-kensetsu.com</a>
            <a href="https://lin.ee/KKtp6HT" target="_blank" rel="noreferrer">LINE公式アカウント</a>
            <a href="#contact" onClick={(e) => { e.preventDefault(); onNavigate("contact"); }}>お問い合わせ</a>
            <div className="row" style={{ marginTop: 12 }}>受付：月〜土<br/>8:00 – 18:00</div>
          </div>
        </div>
      </div>

      <div className="footer-bottom">
        <div>© 2026 Taishi Kensetsu Co., Ltd. ／ 福岡県知事許可 – 第107261号</div>
        <div className="footer-socials">
          <a href="https://www.instagram.com/taishi_kensetsu/" target="_blank" rel="noreferrer" aria-label="Instagram" style={{ border: "none", padding: 0, overflow: "hidden", background: "transparent", width: 36, height: 36 }}><IconInstagram size={36}/></a>
          <a href="https://lin.ee/KKtp6HT" target="_blank" rel="noreferrer" aria-label="LINE" style={{ border: "none", padding: 0, overflow: "hidden", background: "transparent", width: 36, height: 36, borderRadius: "50%" }}>
            <img src="assets/line-icon.webp" alt="LINE" style={{ width: 36, height: 36, borderRadius: "50%", objectFit: "cover", display: "block" }}/>
          </a>
          <a href="#" aria-label="メール" onClick={(e) => e.preventDefault()}><IconMail size={16}/></a>
          <a href="#" aria-label="電話" onClick={(e) => e.preventDefault()}><IconPhone size={16}/></a>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });
