/* Footer.jsx — masthead + sitemap */

function Footer() {
  const { t } = useI18n();
  const bookHrefs = ['#about', '#authors', '#praise', '#oa'];
  const buyHrefs = [
    'https://mitpressbookstore.mit.edu/book/9780262052276',
    'https://www.amazon.com/dp/026205227X/',
    'https://bookshop.org/a/2238/9780262052276',
    '#retailers',
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span className="mark" aria-hidden="true" style={{ display: 'inline-block', width: 16, height: 16, position: 'relative' }}>
                <span style={{ position: 'absolute', left: 0, right: 0, top: 7, height: 2, background: 'var(--thread-500)' }}></span>
                <span style={{ position: 'absolute', top: 0, bottom: 0, left: 7, width: 2, background: 'var(--thread-500)' }}></span>
              </span>
              <span style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 14, letterSpacing: '-0.01em', whiteSpace: 'nowrap' }}>The Society That Learns</span>
            </div>
            <p lang="th" style={{ fontFamily: "'Noto Sans Thai Looped', sans-serif", fontSize: 13, fontWeight: 600, color: 'var(--thread-700)', margin: '8px 0 0', display: 'none' }}>สังคมแห่งการเรียนรู้</p>
            <h3 className="name">{t('footer.bookBy')}</h3>
            <p className="desc">{t('footer.desc')}</p>
          </div>
          <div>
            <h4>{t('footer.theBook')}</h4>
            <ul>
              {t('footer.linksBook').map((label, i) => (
                <li key={label}><a href={bookHrefs[i] || '#'}>{label}</a></li>
              ))}
            </ul>
          </div>
          <div>
            <h4>{t('footer.buy')}</h4>
            <ul>
              {t('footer.linksBuy').map((label, i) => (
                <li key={label}>
                  <a
                    href={buyHrefs[i] || '#'}
                    {...(String(buyHrefs[i] || '').startsWith('#') ? {} : { target: '_blank', rel: 'noopener' })}
                  >{label}</a>
                </li>
              ))}
            </ul>
          </div>
          <div>
            <h4>{t('footer.connect')}</h4>
            <ul>
              <li><a href="mailto:thesocietythatlearns@tltlab.org">{t('footer.contactAuthors')}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-papers" id="papers">
          <h4 className="sub">{t('footer.papersTitle')}</h4>
          <ul className="papers">
            {t('footer.papers').map((p) => (
              <li key={p.title}>
                <a href={p.href} target="_blank" rel="noopener">{p.title}</a>
                <span className="paper-meta">{p.meta}</span>
              </li>
            ))}
          </ul>
        </div>
        <div className="footer-bottom">
          <span>{t('footer.copyright')}</span>
          <span>{t('footer.ids')}</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;