// Footer — 전 페이지 공용
const Footer = () => {
  return (
    <footer id="about" style={{
      background: 'var(--navy-900)',
      color: 'rgba(255,255,255,0.65)',
      padding: '5rem 0 2.5rem'
    }}>
      <div className="container">
        <div className="rsp-stack" style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr',
          gap: '3rem',
          paddingBottom: '3.5rem',
          borderBottom: '0.5px solid rgba(255,255,255,0.1)'
        }}>
          {/* 브랜드 */}
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', marginBottom: '1.25rem' }}>
              <img src={`assets/sync-on-mark.png?v=${window.ASSET_VER}`} alt="Sync-On"
                style={{ height: '2rem', width: 'auto', display: 'block' }} />
              <span style={{
                fontWeight: 700, fontSize: '1.1875rem', color: '#fff', letterSpacing: '-0.02em'
              }}>Sync-On</span>
            </div>

            <p style={{
              fontSize: '0.875rem', lineHeight: 1.7, margin: 0,
              maxWidth: '20rem', color: 'rgba(255,255,255,0.55)'
            }}>
              이커머스 브랜드의 마케팅 파트너.<br />
              광고에 의존하지 않는 안정적 성장을 설계합니다.
            </p>

            <p style={{
              fontSize: '0.75rem', marginTop: '1.5rem',
              color: 'rgba(255,255,255,0.4)', lineHeight: 1.7
            }}>
              싱크온<br />
              대표 이성우<br />
              사업자등록번호 101-13-52553<br />
              세종특별자치시 누리로 119, 상가동 1층 B107호
            </p>
          </div>

          <FooterCol title="문의" links={[
            '이메일 sync-on@naver.com',
            '연락처 010-9836-2486',
            '평일 10:00 – 24:00',
            '카카오톡 채널 @싱크온'
          ]} />
        </div>

        <div style={{
          paddingTop: '2rem',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          flexWrap: 'wrap', gap: '1rem'
        }}>
          <div style={{
            fontSize: '0.75rem', color: 'rgba(255,255,255,0.4)', letterSpacing: '0.02em'
          }}>
            © 2022 Sync-On Marketing Management. All rights reserved.
          </div>
          <a href="privacy.html" style={{ fontSize: '0.75rem', color: 'rgba(255,255,255,0.55)' }}>
            개인정보처리방침
          </a>
        </div>
      </div>
    </footer>);
};

const FooterCol = ({ title, links }) =>
  <div style={{ textAlign: 'right' }}>
    <div style={{
      fontSize: '0.6875rem', fontWeight: 700,
      letterSpacing: '0.16em', textTransform: 'uppercase',
      color: 'rgba(255,255,255,0.45)', marginBottom: '1.25rem'
    }}>{title}</div>
    <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: '0.75rem' }}>
      {links.map((l, i) =>
        <li key={i} style={{ fontSize: '0.875rem', color: 'rgba(255,255,255,0.7)' }}>{l}</li>
      )}
    </ul>
  </div>;

window.Footer = Footer;