import React from 'react';
import { useTranslation } from 'react-i18next';

function SiteFooter() {
  const { t } = useTranslation();

  return (
    <footer className="registration-footer">
      <div className="container">
        <div className="footer-content" style={{ display: 'flex', flexDirection: 'row', gap: '2rem', justifyContent: 'space-between', alignItems: 'flex-start' }}>
          <div className="footer-section" style={{ minWidth: '220px' }}>
            <h3>{t('home.title')}</h3>
            <p>{t('footer.description')}</p>
          </div>
          <div className="footer-section" style={{ minWidth: '200px' }}>
            <h4>{t('footer.sections.support')}</h4>
            <ul>
              <li><a href="#help">{t('footer.links.helpCenter')}</a></li>
              <li><a href="#contact">{t('footer.links.contactUs')}</a></li>
              <li><a href="#status">{t('footer.links.status')}</a></li>
            </ul>
          </div>
          <div className="footer-section" style={{ minWidth: '200px' }}>
            <h4>{t('footer.sections.legal')}</h4>
            <ul>
              <li><a href="#terms">{t('footer.links.terms')}</a></li>
              <li><a href="#privacy">{t('footer.links.privacy')}</a></li>
              <li><a href="#compliance">{t('footer.links.compliance')}</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <p>{t('footer.copyright')}</p>
        </div>
      </div>
    </footer>
  );
}

export default SiteFooter; 