/* Footer.jsx — bilingual footer with KR business-registration block
   Changes from DS reference: column labels remapped, business-info row added
   (Korean law mandates display of registration numbers on commercial sites).
   Rationale: spec §1.2 + §5.3. */

const Footer = () => {
  const t = window.useT();
  const cols = [
    { h: 'foot.programs', items: [
      ['오프라인 수업',        'Offline class'],
      ['SRIKI 앱',            'SRIKI app'],
      ['스리키 위클리',        'SRIKI Weekly'],
      ['교구 · 보드게임',      'Manipulatives'],
      ['여름 캠프',            'Summer camp'],
      ['국제대회반',           'Olympiad track'],
    ]},
    { h: 'foot.grades', items: [
      ['저학년 (1–3)', 'Low elementary (1–3)'],
      ['고학년 (4–6)', 'High elementary (4–6)'],
    ]},
    { h: 'foot.resources', items: [
      ['칼럼',             'Columns'],
      ['후기 모음',         'Reviews'],
      ['프레스 키트',       'Press kit'],
    ]},
    { h: 'foot.company', items: [
      ['대표 소개',  'About founders'],
      ['강사 채용',  'Careers'],
      ['뉴스룸',     'Newsroom'],
      ['SRIKI Press', 'SRIKI Press'],
    ]},
  ];

  const { lang } = React.useContext(window.LangContext);
  const pick = pair => pair[lang === 'ko' ? 0 : 1];

  return (
    <footer style={{
      background: 'linear-gradient(180deg, #F8FAFC 0%, #EEF2F7 100%)',
      padding: '72px 24px 36px',
      borderTop: '1px solid #E2E8F0',
    }}>
      <div style={{ maxWidth: 1080, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 36,
        }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
              <img src="assets/sriki-mark.svg" alt="" style={{ height: 32, width: 'auto', flexShrink: 0 }} />
              <span style={{
                fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                fontSize: 22, fontWeight: 800, letterSpacing: '-0.04em',
                color: '#0B1727', lineHeight: 1,
              }}>SRIKI</span>
            </div>
            <div style={{
              fontSize: 13.5, fontWeight: 400,
              color: '#475569', marginTop: 16, lineHeight: 1.65,
              fontFeatureSettings: '"ss01"', maxWidth: 240,
            }}>{t('foot.tagline')}</div>
            {/* Social links placeholder row */}
            <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
              {['instagram', 'youtube', 'kakao'].map(s => (
                <a key={s} href="#" aria-label={s} style={{
                  width: 34, height: 34, borderRadius: 8,
                  background: '#fff', border: '1px solid #E2E8F0',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#475569',
                  transition: 'all 140ms ease', textDecoration: 'none',
                }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
                    {s === 'instagram' && <path d="M12 2.2c2.7 0 3 0 4 0a5.4 5.4 0 0 1 1.8.3 3.7 3.7 0 0 1 2.1 2.1 5.4 5.4 0 0 1 .3 1.8c0 1 .1 1.3.1 4s0 3-.1 4a5.4 5.4 0 0 1-.3 1.8 3.7 3.7 0 0 1-2.1 2.1 5.4 5.4 0 0 1-1.8.3c-1 0-1.3.1-4 .1s-3 0-4-.1a5.4 5.4 0 0 1-1.8-.3 3.7 3.7 0 0 1-2.1-2.1 5.4 5.4 0 0 1-.3-1.8c0-1-.1-1.3-.1-4s0-3 .1-4a5.4 5.4 0 0 1 .3-1.8 3.7 3.7 0 0 1 2.1-2.1 5.4 5.4 0 0 1 1.8-.3c1 0 1.3-.1 4-.1m0 1.8h-4l-1.4.3a2 2 0 0 0-1.1 1.1L5.2 6.6v6.8l.3 1.4a2 2 0 0 0 1.1 1.1l1.4.3h6.8l1.4-.3a2 2 0 0 0 1.1-1.1l.3-1.4V7l-.3-1.4a2 2 0 0 0-1.1-1.1L14.8 4H12m0 2.5a4.5 4.5 0 1 1 0 9 4.5 4.5 0 0 1 0-9m0 1.8a2.7 2.7 0 1 0 0 5.4 2.7 2.7 0 0 0 0-5.4M17 5.3a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2"/>}
                    {s === 'youtube' && <path d="M21.6 7.2c-.2-.8-.8-1.5-1.6-1.7C18.5 5 12 5 12 5s-6.5 0-8 .5c-.8.2-1.4.9-1.6 1.7C2 8.7 2 12 2 12s0 3.3.4 4.8c.2.8.8 1.5 1.6 1.7C5.5 19 12 19 12 19s6.5 0 8-.5c.8-.2 1.4-.9 1.6-1.7.4-1.5.4-4.8.4-4.8s0-3.3-.4-4.8M10 15V9l5 3-5 3z"/>}
                    {s === 'kakao' && <ellipse cx="12" cy="11" rx="9" ry="7"/>}
                  </svg>
                </a>
              ))}
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{
                fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                fontSize: 13, fontWeight: 700, color: '#0B1727', marginBottom: 14,
                letterSpacing: '-0.01em',
              }}>{t(c.h)}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {c.items.map(it => (
                  <a key={it[0]} href="#" style={{
                    fontFamily: 'var(--font-sans)', fontFeatureSettings: '"ss01"',
                    fontSize: 13, fontWeight: 500, color: '#475569', textDecoration: 'none',
                    transition: 'color 140ms ease',
                  }}
                    onMouseEnter={e => e.currentTarget.style.color = '#6D28D9'}
                    onMouseLeave={e => e.currentTarget.style.color = '#475569'}
                  >{pick(it)}</a>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* KR-mandatory business registration block */}
        <div style={{
          marginTop: 48, paddingTop: 24, borderTop: '1px solid #E2E8F0',
          fontSize: 12, fontWeight: 400, color: '#64748B',
          fontFeatureSettings: '"ss01"', lineHeight: 1.80,
        }}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px 20px' }}>
            <span style={{ fontWeight: 600, color: '#0B1727' }}>KAIROS</span>
            <span>{lang === 'ko' ? '대표 최진영 · 안지선' : 'CEO Choi Jin-Young · Ahn Ji-Sun'}</span>
          </div>
          <div style={{ marginTop: 8 }}>
            {lang === 'ko'
              ? '서울특별시 강남구 ──────── 빌딩 N층 · 02-0000-0000 · hello@sriki.kr'
              : 'Gangnam-gu, Seoul ──────── Floor N · +82-2-0000-0000 · hello@sriki.kr'}
          </div>
          {/* KR-mandatory: 사업자등록번호 + 통신판매업신고 — fill in real numbers later */}
          <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: '4px 20px' }}>
            <span>{lang === 'ko' ? '사업자등록번호 000-00-00000' : 'Business Reg. No. 000-00-00000'}</span>
            <span>{lang === 'ko' ? '통신판매업신고 제0000-서울강남-00000호' : 'E-commerce Reg. No. 0000-Seoul-Gangnam-00000'}</span>
          </div>
        </div>

        <div style={{
          display: 'flex', justifyContent: 'space-between',
          marginTop: 20, paddingTop: 18, borderTop: '1px solid #E2E8F0',
          fontSize: 12, fontWeight: 500, color: '#64748B',
          fontFeatureSettings: '"ss01"',
          flexWrap: 'wrap', gap: 14,
        }}>
          <div>© 2026 KAIROS</div>
          <div style={{ display: 'flex', gap: 22 }}>
            <a href="#privacy" style={{ color: '#64748B', textDecoration: 'none', fontWeight: 500 }}>{t('foot.privacy')}</a>
            <a href="#terms"   style={{ color: '#64748B', textDecoration: 'none', fontWeight: 500 }}>{t('foot.terms')}</a>
            <a href="#refund"  style={{ color: '#64748B', textDecoration: 'none', fontWeight: 500 }}>{t('foot.refund')}</a>
          </div>
        </div>
      </div>

      <style>{`
        /* Tablet/mobile — brand block spans full width on its own row,
           the four link columns wrap as a 2×2 grid below. Keeps vertical
           length tight while still fitting headings and links cleanly. */
        @media (max-width: 820px) {
          .footer-grid {
            grid-template-columns: repeat(2, 1fr) !important;
            gap: 28px 20px !important;
          }
          .footer-grid > div:first-child { grid-column: 1 / -1 !important; }
        }
        /* Only the very narrowest screens drop the columns to a single
           stack — 2 columns still fit comfortably above ~340px. */
        @media (max-width: 340px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
};

window.Footer = Footer;