import { Link } from 'react-router-dom';
import { useI18n } from '../hooks/useI18n';
import { siteData } from '../data/siteData';

export default function Footer() {
  const { t, bi, lang } = useI18n();

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="footer-brand">{bi(siteData.brand.name)}</div>
            <div className="footer-slogan">{t('footer.slogan')}</div>
          </div>
          <div>
            <div className="footer-col-title">{t('footer.projects')}</div>
            <ul className="footer-links footer-project-links">
              {siteData.projects.slice(0, 6).map((p) => (
                <li key={p.id}>
                  <Link to={`/projects/${p.id}`}>{p.displayName[lang] || p.name}</Link>
                </li>
              ))}
              <li>
                <Link to="/projects" className="footer-view-all">{t('footer.viewAllProjects')} →</Link>
              </li>
            </ul>
          </div>
          <div>
            <div className="footer-col-title">{t('footer.community')}</div>
            <ul className="footer-links footer-community-links">
              <li>
                <a href={siteData.brand.github} target="_blank">
                  GitHub
                </a>
              </li>
              <li>
                <Link to="/about">{t('about.title')}</Link>
              </li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>{t('footer.copyright')}</span>
          <span className="footer-policy-links">
            <Link to="/about" className="footer-policy-link">
              {t('footer.license')}
            </Link>
            {' · '}
            <Link to="/about" className="footer-policy-link">
              {t('footer.privacy')}
            </Link>
          </span>
          <span className="footer-legal">
            {siteData.brand.icp && (
              <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener noreferrer">
                {siteData.brand.icp}
              </a>
            )}
            {siteData.brand.policeRecord && (
              <a href="https://beian.mps.gov.cn/" target="_blank" rel="noopener noreferrer">
                {siteData.brand.policeRecord}
              </a>
            )}
          </span>
        </div>
      </div>
    </footer>
  );
}
