import React from 'react'
import { useLanguage } from '../contexts/LanguageContext.jsx'

export default function Footer() {
  const { t } = useLanguage()
  const year = new Date().getFullYear()
  const phones = t('contact.phones')

  return (
    <footer className="bg-slate-900 text-slate-400 py-10">
      <div className="max-w-6xl mx-auto px-4 sm:px-6 flex flex-col md:flex-row items-center justify-between gap-4">
        <img src="/logo.png" alt="Сисадмингрупп" className="h-7 w-auto brightness-0 invert" />
        <span className="text-sm">{year} © {t('footer.rights')}</span>
        <div className="flex flex-wrap justify-center gap-x-6 gap-y-1 text-sm">
          {phones.map((p, i) => (
            <a key={i} href={`tel:${p.replace(/\D/g,'')}`} className="hover:text-white transition-colors">{p}</a>
          ))}
          <a href="mailto:info@sag24.ru" className="hover:text-white transition-colors">info@sag24.ru</a>
        </div>
      </div>
    </footer>
  )
}