// リユース事業サイト（/reuse/）— 共通フッター（ナビ実動作・住所確定値）
function ReuseFooter({ onNavigate }) {
  const TOP_URL = '../top/index.html';
  const RAKUAI_URL = 'https://www.smilefactory-rakuai.com/';
  const nav = (id) => (e) => { e.preventDefault(); onNavigate && onNavigate(id); };
  const linkStyle = { color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 14 };
  const cols = [
    { h: 'サービス', items: [['リユース品をあずける', 'service'], ['報酬をうけとる', 'service'], ['実績の紹介', 'service']] },
    { h: '会社案内', items: [['わたしたちの役割', 'mission'], ['地域・社会貢献', 'kouken'], ['会社概要', 'company']] },
    { h: 'サポート', items: [['お問い合わせ', 'contact'], ['ブログ・お知らせ', 'blog']] },
  ];
  return (
    <footer style={{ background: 'var(--green-800)', color: 'rgba(255,255,255,0.86)' }}>
      <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', padding: '64px 24px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <img src="../../assets/logo-mark.svg" alt="" style={{ width: 44 }} />
              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 20, color: '#fff' }}>スマイルファクトリー</span>
            </div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.9, color: 'rgba(255,255,255,0.7)' }}>
              リユースで地域と社会に貢献する。<br />
              〒213-0011 神奈川県川崎市高津区久本1-6-8 3号室<br />
              Email：admin@smilefactory-reuse.com<br />
              LINE：smilefactory001
            </p>
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <a href={TOP_URL} style={linkStyle}>← 会社トップへ</a>
              <a href={RAKUAI_URL} target="_blank" rel="noopener noreferrer" style={linkStyle}>かわさき楽AIサポート ↗</a>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 15, color: '#fff', marginBottom: 14 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.items.map(([label, id]) => (
                  <li key={label}><a href="#" onClick={nav(id)} style={linkStyle}>{label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.16)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
          <span>© 2017 株式会社スマイルファクトリー All Rights Reserved.</span>
          <span>古物営業法に基づく表示 ／ 特定商取引法に基づく表記</span>
        </div>
      </div>
    </footer>
  );
}
window.ReuseFooter = ReuseFooter;