/* global React */

function Footer() {
  return (
    <footer style={{ background: '#111', color: '#aaa', marginTop: 64 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '48px 20px 24px', display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr 1fr', gap: 32 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
            <img src="../../assets/logos/logo-lure.png" alt="" style={{ height: 42 }}/>
            <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 22, color: '#fff' }}>낚시템</span>
          </div>
          <p style={{ fontSize: 13, lineHeight: 1.6, margin: 0, maxWidth: 320 }}>
            알리익스프레스 낚시 용품을 큐레이션해서 하루에 하나씩, 월척이 될 만한 템만 골라드려요.
          </p>
        </div>
        {[
          { h: '카테고리', items: ['낚싯대', '릴', '루어 · 미끼', '장비 · 가방', '라인 · 훅'] },
          { h: '가이드',   items: ['입문자 세트', '3만원 이하 베스트', '민물 vs 바다', '계절별 추천'] },
          { h: '안내',     items: ['어필리에이트 공시', '개인정보 처리방침', '연락하기', '템 제보'] },
        ].map((col) => (
          <div key={col.h}>
            <h5 style={{ color: '#fff', fontSize: 13, margin: '0 0 12px', letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700 }}>{col.h}</h5>
            <ul style={{ padding: 0, margin: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8, fontSize: 13 }}>
              {col.items.map((i) => <li key={i}><a href="#" style={{ color: '#aaa', textDecoration: 'none' }}>{i}</a></li>)}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ borderTop: '1px solid #222', padding: '18px 20px', fontSize: 12, maxWidth: 1280, margin: '0 auto', color: '#888', lineHeight: 1.6 }}>
        낚시템은 알리익스프레스 어필리에이트 파트너입니다. 여러분이 링크로 구매하시면 저희에게 소정의 커미션이 돌아가요 — 가격은 동일합니다.<br/>
        © 2026 낚시템 · All rights reserved.
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });