const Footer = ({ setRoute }) => {
  const isMobile = useIsMobile();
  return (
    <footer style={{ background: '#0A0A09', color: '#fff', marginTop: isMobile ? 64 : 96, paddingTop: isMobile ? 48 : 64, paddingBottom: 32 }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '2fr 1fr 1fr 1fr', gap: isMobile ? 32 : 48, marginBottom: isMobile ? 40 : 56 }}>
          <div>
            <img src="assets/logo-wordmark-light.svg" alt="FootballStyle" style={{ height: 28, marginBottom: 18 }} />
            <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: '#BFBFB3', lineHeight: 1.7, maxWidth: 360 }}>
              フットサルを観る・知る・選ぶ。<br/>初心者・中級者のための総合フットサルメディア。
            </p>
          </div>
          {[
            { h: 'EXPLORE', items: ['解説', 'レビュー', '動画', 'コラム'] },
            { h: 'ABOUT',   items: ['編集部について', '掲載依頼', 'プレスリリース', 'お問い合わせ'] },
            { h: 'LEGAL',   items: ['利用規約', 'プライバシー', '特定商取引法', '運営会社'] },
          ].map(col => (
            <div key={col.h}>
              <Eyebrow color="#F5E000">{col.h}</Eyebrow>
              <ul style={{ listStyle: 'none', margin: '14px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {col.items.map(it => (
                  <li key={it}><a style={{ fontSize: 14, color: '#fff', cursor: 'pointer' }}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{
          borderTop: '1px solid #2A2A25', paddingTop: 24, display: 'flex',
          justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
        }}>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: '#8E8E82' }}>
            © 2026 FOOTBALLSTYLE · ALL RIGHTS RESERVED
          </div>
          <div style={{ display: 'flex', gap: 14 }}>
            {[
              { key: 'youtube',   icon: 'youtube',   url: 'https://youtube.com/' },
              { key: 'x',         icon: 'twitter',   url: 'https://x.com/' },
              { key: 'instagram', icon: 'instagram', url: 'https://instagram.com/' },
            ].map(s => (
              <a key={s.key} href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.key} style={{ width: 36, height: 36, border: '1px solid #3E3E37', borderRadius: 2, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: '#fff', cursor: 'pointer' }}>
                <i data-lucide={s.icon} style={{ width: 16, height: 16 }}></i>
              </a>
            ))}
          </div>
        </div>
      </Container>
    </footer>
  );
};

window.Footer = Footer;