import { Link } from 'react-router-dom'
import Logo from './Logo'
import { useLang } from '../i18n'

export default function Footer() {
  const { lang } = useLang()
  const fr = lang === 'fr'

  const tagline = fr
    ? "MERKANTO accompagne ses clients en Europe et en Afrique dans le domaine de l'ingénierie financière et fiscale et de la transformation digitale."
    : 'MERKANTO supports clients across Europe and Africa in financial and tax engineering and digital transformation.'

  const services = [
    { label: fr ? 'Ingénierie financière' : 'Financial engineering', to: '/services/ingenierie' },
    { label: fr ? 'Ingénierie fiscale' : 'Tax engineering', to: '/services/fiscalite' },
    { label: fr ? 'Transformation digitale' : 'Digital transformation', to: '/services/digital' },
  ]
  const companyLinks = [
    { label: fr ? 'À propos' : 'About', to: '/a-propos' },
    { label: 'Solutions', to: '/solutions' },
    { label: fr ? 'Nos consultants' : 'Our consultants', to: '/a-propos' },
    { label: 'Contact', to: '/contact' },
  ]
  const socials = ['in', 'X', 'f', 'ig']
  const legal = fr
    ? ['Mentions légales', 'Politique de confidentialité', 'Gestion des cookies']
    : ['Legal notice', 'Privacy policy', 'Cookie settings']

  const colTitle = {
    fontSize: 12,
    fontWeight: 700,
    letterSpacing: '.1em',
    textTransform: 'uppercase',
    color: '#5BB4E8',
    marginBottom: 16,
  }
  const colLink = {
    display: 'block',
    fontSize: 14,
    color: 'rgba(255,255,255,.62)',
    marginBottom: 12,
    textDecoration: 'none',
  }

  return (
    <footer style={{ background: '#0A2540' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '62px 40px 0' }}>
        <div
          className="mk-grid-4 mk-two-col"
          style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr 1fr', gap: 40 }}
        >
          <div>
            <Link to="/" style={{ display: 'flex', alignItems: 'center', gap: 11, textDecoration: 'none' }}>
              <Logo size={40} mono="#fff" />
              <span style={{ fontWeight: 800, fontSize: 20, letterSpacing: '.04em', color: '#fff' }}>
                MERKANTO
              </span>
            </Link>
            <p
              style={{
                fontSize: 14,
                lineHeight: 1.65,
                color: 'rgba(255,255,255,.55)',
                margin: '18px 0 0',
                maxWidth: 330,
              }}
            >
              {tagline}
            </p>
            <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
              {socials.map((s, i) => (
                <a key={i} className="mk-social">
                  {s}
                </a>
              ))}
            </div>
          </div>

          <div>
            <div style={colTitle}>Services</div>
            {services.map((s, i) => (
              <Link key={i} to={s.to} style={colLink}>
                {s.label}
              </Link>
            ))}
          </div>

          <div>
            <div style={colTitle}>{fr ? 'Le cabinet' : 'Company'}</div>
            {companyLinks.map((c, i) => (
              <Link key={i} to={c.to} style={colLink}>
                {c.label}
              </Link>
            ))}
          </div>

          <div>
            <div style={colTitle}>Contact</div>
            <a href="mailto:contact@mercanto.biz" style={colLink}>
              contact@mercanto.biz
            </a>
            <div style={{ fontSize: 14, color: 'rgba(255,255,255,.62)' }}>
              Cotonou · Abidjan · Aix-en-Provence
            </div>
          </div>
        </div>

        <div
          style={{
            marginTop: 50,
            padding: '22px 0 30px',
            borderTop: '1px solid rgba(255,255,255,.12)',
            display: 'flex',
            flexWrap: 'wrap',
            alignItems: 'center',
            justifyContent: 'space-between',
            gap: 14,
          }}
        >
          <div style={{ fontSize: 13, color: 'rgba(255,255,255,.45)' }}>
            © 2026 MERKANTO. {fr ? 'Tous droits réservés.' : 'All rights reserved.'}
          </div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 22 }}>
            {legal.map((l, i) => (
              <span key={i} style={{ fontSize: 13, color: 'rgba(255,255,255,.55)' }}>
                {l}
              </span>
            ))}
          </div>
        </div>
      </div>
    </footer>
  )
}
