function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--bg)', paddingTop: 80, paddingBottom: 40 }}>
      <div className="max">
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 60, paddingBottom: 60, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 20 }}>
              <div style={{ width: 28, height: 28, position: 'relative' }}>
                <div style={{ position: 'absolute', inset: 0, background: 'var(--bg)', borderRadius: 2, transform: 'rotate(-8deg)' }} />
                <div style={{ position: 'absolute', inset: 4, background: 'var(--coral)', borderRadius: 1, transform: 'rotate(6deg)' }} />
              </div>
              <div className="serif" style={{ fontSize: 22, letterSpacing: '-0.02em' }}>모두의 포트폴리오</div>
            </div>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)', lineHeight: 1.65, maxWidth: 340 }}>
              재능은 당신이, 날개는 우리가.<br />
              Portfolio Atelier for creators. Est. 2024, Seoul.
            </p>
          </div>

          {/* {[
            { title: 'Service', items: ['Type A. 원페이지', 'Type B. 브랜드', 'Type C. 시스템', '창작자 지원플랜'] },
            { title: 'Company', items: ['About', 'Portfolio', 'Journal', 'Contact'] },
            { title: 'Connect', items: ['hello@modufolio.kr', 'Instagram', 'KakaoTalk', '070-0000-0000'] },
          ].map(col => (
            <div key={col.title}>
              <div className="kicker" style={{ color: 'rgba(255,255,255,0.5)', marginBottom: 20 }}>{col.title}</div>
              <ul style={{ listStyle: 'none' }}>
                {col.items.map((x, i) => (
                  <li key={i} style={{ padding: '7px 0', fontSize: 13.5, color: 'rgba(255,255,255,0.85)' }}>{x}</li>
                ))}
              </ul>
            </div>
          ))} */}
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', paddingTop: 30 }}>
          <div className="mono" style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>© 2026 MODUFOLIO. All rights reserved.</div>
          {/* <div style={{ display: 'flex', gap: 20, fontSize: 11.5, color: 'rgba(255,255,255,0.5)' }}>
            <span>이용약관</span><span>개인정보처리방침</span><span>사업자정보</span>
          </div> */}
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;