// ============================================================
// Footer — Linen background, multi-column.
// ============================================================

function JmFooter({ lang, onNavigate }) {
  const t = JM.t[lang];
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  const cols = [
    {
      title: lang === 'vi' ? 'Cửa hàng' : 'Shop',
      items: JM.categories.slice(1).map(c => ({ label: lang === 'vi' ? c.vi : c.en, action: () => onNavigate({ view: 'shop', category: c.id }) })),
    },
    {
      title: lang === 'vi' ? 'Về Jesmee' : 'About',
      items: [
        { label: lang === 'vi' ? 'Câu chuyện' : 'Our story', action: () => onNavigate({ view: 'about' }) },
        { label: lang === 'vi' ? 'Tạp chí' : 'Journal', action: () => onNavigate({ view: 'journal' }) },
      ],
    },
    {
      title: lang === 'vi' ? 'Hỗ trợ' : 'Support',
      items: [
        { label: lang === 'vi' ? 'Đổi trả' : 'Exchange', action: () => onNavigate({ view: 'contact' }) },
        { label: lang === 'vi' ? 'Liên hệ' : 'Contact', action: () => onNavigate({ view: 'contact' }) },
      ],
    },
  ];

  return (
    <footer className="jm-footer" data-screen-label="Footer">
      <div className="jm-container">
        <div className="jm-footer__inner">
          <div className="jm-footer__brand">
            <img src="src/assets/logo-jesmee.png" alt="JESMEE" style={{ height: 52, width: 'auto' }}/>
            <p className="jm-small" style={{ marginTop: 18, maxWidth: 320 }}>
              {t['footer.tagline']}<br/>
              SHINE &amp; UNIQUE — {lang === 'vi' ? 'từ 2020' : 'since 2020'}.
            </p>
            <div className="jm-footer__social">
              {JM.shop.instagram && <a aria-label="Instagram" href={JM.shop.instagram} target="_blank" rel="noopener"><i data-lucide="camera" className="jm-icon"></i></a>}
              {JM.shop.tiktok && <a aria-label="TikTok" href={JM.shop.tiktok} target="_blank" rel="noopener"><i data-lucide="music-2" className="jm-icon"></i></a>}
              {JM.shop.facebook && <a aria-label="Facebook" href={JM.shop.facebook} target="_blank" rel="noopener"><i data-lucide="thumbs-up" className="jm-icon"></i></a>}
              {JM.shop.shopee && <a aria-label="Shopee" href={JM.shop.shopee} target="_blank" rel="noopener"><i data-lucide="shopping-bag" className="jm-icon"></i></a>}
            </div>
          </div>
          {cols.map((col, i) => (
            <div className="jm-footer__col" key={i}>
              <span className="jm-label">{col.title}</span>
              <ul>
                {col.items.map((it, j) => (
                  <li key={j}><a onClick={it.action}>{it.label}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div className="jm-footer__legal">
          <div className="jm-footer__legal-inner">
            <span className="jm-small">© 2026 JESMEE. <span className="jm-version">{lang === 'vi' ? 'Phiên bản' : 'Version'} {JM.version}</span></span>
            {(JM.shop.company || JM.shop.address) && (
              <span className="jm-small">{[JM.shop.company, JM.shop.address].filter(Boolean).join(' · ')}</span>
            )}
            <span className="jm-small">{lang === 'vi' ? 'COD · Chuyển khoản' : 'COD · Bank transfer'}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.JmFooter = JmFooter;