function Footer() {
  const t = useT();
  const { endereco } = DATA_SHARED;
  return (
    <footer style={{ background: 'var(--ink)', color: 'var(--cream)', padding: '80px 0 32px' }}>
      <div className="wrap">
        <div style={{
          display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr',
          gap: 60, marginBottom: 64,
        }} className="foot-grid">
          <div>
            <div className="title-font" style={{
              fontSize: 44, lineHeight: 0.9, color: 'var(--cream)',
            }}>
              Trem de<br/>
              <span style={{ color: 'var(--accent)', fontStyle: 'italic' }}>Minas</span>
            </div>
            <p style={{
              marginTop: 20, fontSize: 14, lineHeight: 1.55,
              color: 'rgba(251,246,235,0.6)', maxWidth: '32ch',
            }}>
              {t.footer.desc}
            </p>
            <a
              href={DATA_SHARED.menuPdf}
              target="_blank"
              rel="noopener noreferrer"
              className="mono"
              style={{
                display: 'inline-block', marginTop: 18,
                fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'var(--accent)', textDecoration: 'none',
                borderBottom: '1px solid var(--accent)', paddingBottom: 2,
              }}
            >cardápio completo (PDF) ↗</a>
          </div>

          <div>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 16,
            }}>{t.footer.visite}</div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(251,246,235,0.8)' }}>
              {endereco.rua}<br/>
              {endereco.bairro}<br/>
              {endereco.cidade}
            </div>
          </div>

          <div>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 16,
            }}>{t.footer.fale}</div>
            <div style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(251,246,235,0.8)' }}>
              <a href={DATA_SHARED.whatsapp} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--cream)', textDecoration: 'none' }}>WhatsApp →</a><br/>
              {endereco.email}<br/>
              <a href="https://instagram.com/tremdeminas_uk" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(251,246,235,0.8)' }}>@tremdeminas_uk</a>
            </div>
          </div>

          <div>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'var(--accent)', marginBottom: 16,
            }}>{t.footer.newsletter}</div>
            <p style={{ fontSize: 13, color: 'rgba(251,246,235,0.6)', marginBottom: 14, lineHeight: 1.5 }}>
              {t.footer.newsletterDesc}
            </p>
            <form onSubmit={e => { e.preventDefault(); alert('✓'); }} style={{ display: 'flex', gap: 0 }}>
              <input
                type="email" required placeholder={t.footer.newsletterPlaceholder}
                style={{
                  flex: 1, minWidth: 0,
                  background: 'transparent', border: 'none',
                  borderBottom: '1px solid rgba(251,246,235,0.3)',
                  padding: '10px 0', color: 'var(--cream)',
                  fontFamily: "'Inter', sans-serif", fontSize: 14, outline: 'none',
                }}
              />
              <button type="submit" style={{
                background: 'transparent', border: 'none',
                borderBottom: '1px solid rgba(251,246,235,0.3)',
                color: 'var(--accent)', padding: '10px 0 10px 14px',
                fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
                letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer',
              }}>{t.footer.newsletterSubmit}</button>
            </form>
          </div>
        </div>

        <div style={{
          borderTop: '1px solid rgba(251,246,235,0.15)',
          paddingTop: 28,
          display: 'flex', justifyContent: 'space-between', gap: 20,
          flexWrap: 'wrap',
          fontFamily: "'JetBrains Mono', monospace", fontSize: 11,
          letterSpacing: '0.1em', textTransform: 'uppercase',
          color: 'rgba(251,246,235,0.4)',
        }}>
          <span>{t.footer.rights}</span>
          <span>{t.footer.madeWith}</span>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .foot-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 540px) {
          .foot-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

window.Footer = Footer;