function Footer() {
  const { t } = window.useT();
  return (
    <footer style={footStyles.wrap}>
      <div style={footStyles.inner}>
        <div style={footStyles.left}>
          <img src="./assets/logo-am-digital-solutions-brand.svg" alt="AM Digital Solutions" style={footStyles.brandMark}/>
          <div>
            <div style={footStyles.name}>ALFREDO A. MARTÍNEZ</div>
            <div style={footStyles.tag}>{t('foot.tagline')}</div>
            <div style={footStyles.op}>
              {t('foot.operating.a')}<a href="https://am-digital-solutions.pages.dev/" target="_blank" rel="noreferrer" style={footStyles.opLink}>AM Digital Solutions</a>
            </div>
          </div>
        </div>
        <div style={footStyles.cols}>
          <div style={footStyles.col}>
            <div style={footStyles.colTitle}>{t('foot.col.systems')}</div>
            <a href="#capabilities" style={footStyles.link}>{t('foot.sys.dash')}</a>
            <a href="#capabilities" style={footStyles.link}>{t('foot.sys.auto')}</a>
            <a href="#capabilities" style={footStyles.link}>{t('foot.sys.crm')}</a>
            <a href="#capabilities" style={footStyles.link}>{t('foot.sys.ai')}</a>
          </div>
          <div style={footStyles.col}>
            <div style={footStyles.colTitle}>{t('foot.col.cases')}</div>
            <a href="#cases" style={footStyles.link}>{t('foot.cases.client')}</a>
            <a href="#cases" style={footStyles.link}>{t('foot.cases.cc')}</a>
            <a href="#shelf" style={footStyles.link}>{t('foot.cases.tools')}</a>
          </div>
          <div style={footStyles.col}>
            <div style={footStyles.colTitle}>{t('foot.col.connect')}</div>
            <a href="mailto:mtzstrategies@gmail.com" style={footStyles.link}>mtzstrategies@gmail.com</a>
            <a href="https://www.linkedin.com/in/mtzstrategies" target="_blank" rel="noreferrer" style={footStyles.link}>LinkedIn</a>
            <a href="tel:+19568151714" style={footStyles.link}>(956) 815-1714 · IA</a>
            <span style={{...footStyles.link, cursor: 'default'}}>{t('foot.connect.laredo')}</span>
          </div>
        </div>
      </div>
      <div style={footStyles.bottom}>
        <span>{t('foot.copyright')}</span>
        <span>{t('foot.version')}</span>
      </div>
    </footer>
  );
}

const footStyles = {
  wrap: { padding: '64px 32px 32px', background: 'var(--ink-950)', borderTop: '1px solid var(--border-default)' },
  inner: { maxWidth: 1240, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.2fr 1.5fr', gap: 40, paddingBottom: 40, borderBottom: '1px solid var(--border-subtle)' },
  left: { display: 'flex', alignItems: 'center', gap: 14 },
  brandMark: { width: 44, height: 44, borderRadius: '50%', display: 'block' },
  name: { fontFamily: 'Montserrat', fontWeight: 700, fontSize: 15, color: 'var(--fg-1)', letterSpacing: '0.005em' },
  tag: { fontFamily: 'Inter', fontSize: 13, color: 'var(--fg-3)', marginTop: 4 },
  op: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-4)', letterSpacing: '0.08em', marginTop: 8, textTransform: 'uppercase' },
  opLink: { color: 'var(--cyan-400)', textDecoration: 'none' },
  cols: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 },
  col: { display: 'flex', flexDirection: 'column', gap: 8 },
  colTitle: { fontFamily: 'JetBrains Mono, monospace', fontSize: 10, color: 'var(--fg-3)', letterSpacing: '0.14em', marginBottom: 6 },
  link: { fontFamily: 'Inter', fontSize: 13, color: 'var(--fg-2)', textDecoration: 'none', cursor: 'pointer' },
  bottom: { maxWidth: 1240, margin: '24px auto 0', display: 'flex', justifyContent: 'space-between', fontFamily: 'JetBrains Mono, monospace', fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.06em' },
};