// components/Footer.jsx
const Footer = ({ setRoute, openLineModal }) => {
  return (
    <footer style={{ borderTop: '2.5px solid var(--line)', marginTop: 80, background: 'var(--sub)' }}>
      <div className="container" style={{ padding: '60px 24px 24px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr 1fr 1fr', gap: 40, marginBottom: 40 }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
              <div style={{
                width: 40, height: 40, background: 'var(--sky)', border: '2.5px solid var(--line)',
                borderRadius: 12, display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontWeight: 900, color: '#fff', fontSize: 20,
              }}>.</div>
              <div style={{ fontSize: 16, fontWeight: 900 }}>ドット先生のAI学園</div>
            </div>
            <p style={{ fontSize: 13, lineHeight: 1.7, color: 'var(--ink)', opacity: .8 }}>
              AIは難しくない。楽しく学べば、仕事が変わる。<br/>
              関西弁の犬と仲間たちが、AIを明日から使えるレベルで教えます。
            </p>
            <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
              <DotSensei size="xs" />
              <Harin size="xs" />
              <Kame size="xs" />
            </div>
          </div>

          <div>
            <div style={{ fontWeight: 900, fontSize: 14, marginBottom: 14 }}>カテゴリ</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {CATEGORIES.map(c => (
                <li key={c.id}>
                  <button
                    onClick={() => setRoute({ page: 'list', cat: c.id })}
                    style={{ background: 'none', border: 'none', cursor: 'pointer', fontWeight: 700, fontSize: 13, padding: 0, color: 'var(--ink)' }}
                  >{c.emoji} {c.label}</button>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <div style={{ fontWeight: 900, fontSize: 14, marginBottom: 14 }}>メニュー</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13, fontWeight: 700 }}>
              <li><button onClick={() => setRoute({ page: 'home' })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontWeight: 700 }}>ホーム</button></li>
              <li><button onClick={() => setRoute({ page: 'list', cat: 'all' })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontWeight: 700 }}>全記事</button></li>
              <li><button onClick={() => setRoute({ page: 'lp' })} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontWeight: 700 }}>LINE登録特典</button></li>
              <li><button style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontWeight: 700 }}>運営者情報</button></li>
              <li><button style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'inherit', padding: 0, fontWeight: 700 }}>プライバシーポリシー</button></li>
            </ul>
          </div>

          <div>
            <div style={{ fontWeight: 900, fontSize: 14, marginBottom: 14 }}>LINE登録してAIを攻略</div>
            <div style={{ fontSize: 12, marginBottom: 12, opacity: .8 }}>無料AIロードマップ＋プロンプト早見表が即もらえる。</div>
            <button className="btn btn-line" onClick={openLineModal}>
              <Icon name="line" size={14} />
              無料で登録する
            </button>
          </div>
        </div>

        <div style={{
          borderTop: '2px solid var(--line)',
          paddingTop: 20,
          display: 'flex', justifyContent: 'space-between',
          fontSize: 11, fontFamily: 'IBM Plex Mono, monospace', opacity: .6,
        }}>
          <div>© 2026 DOT-SENSEI'S AI ACADEMY</div>
          <div>Made with 🐶🦔🐢 + AI</div>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });