// Footer — SBL site footer with brand, links, contact.
function Footer({ onNav }) {
  const { isMobile, isTablet } = window.useResponsive();
  const { t } = window.useLang();
  const cols = [
    { title: 'Imóveis', items: [
      { label: 'Comprar',         action: 'listings', filters: { kind: 'sale' } },
      { label: 'Temporada',       action: 'listings', filters: { kind: 'season' } },
      { label: 'Aluguel anual',   action: 'listings', filters: { kind: 'rent' } },
      { label: 'Lançamentos',     action: 'listings', filters: { launch: true } },
      { label: 'Imóveis de luxo', action: 'listings', filters: { luxury: true } },
    ]},
    { title: 'Bairros', items: [
      { label: 'Cabo Branco', action: 'listings', filters: { neighborhood: 'Cabo Branco' } },
      { label: 'Tambaú',      action: 'listings', filters: { neighborhood: 'Tambaú' } },
      { label: 'Manaíra',     action: 'listings', filters: { neighborhood: 'Manaíra' } },
      { label: 'Bessa',       action: 'listings', filters: { neighborhood: 'Bessa' } },
      { label: 'Altiplano',   action: 'listings', filters: { neighborhood: 'Altiplano' } },
    ]},
    { title: 'SBL', items: [
      { label: 'Sobre nós',          action: 'about' },
      { label: 'Anuncie seu imóvel', action: 'announce' },
      { label: 'Trabalhe conosco',   action: 'workwithus' },
      { label: 'Contato',            action: 'contact' },
      { label: 'Blog',               action: 'blog' },
    ]},
  ];
  return (
    <footer style={{ background: 'var(--brown-900)', color: 'var(--brown-100)', paddingTop: isMobile ? 48 : 64 }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: isMobile ? '0 20px' : '0 40px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(3, 1fr)' : isTablet ? '1fr 1fr' : '1.6fr 1fr 1fr 1fr', gap: isMobile ? 32 : 40, paddingBottom: 48 }}>
          <div style={{ gridColumn: isMobile ? '1 / -1' : 'auto' }}>
            <div style={{ textAlign: isMobile ? 'center' : 'left' }}>
              <div style={{ background: 'var(--cream-50)', borderRadius: 'var(--radius-md)', padding: '14px 18px', display: 'inline-block', marginBottom: 18 }}>
                <img src="../../assets/logo_principal.png" alt="SBL" style={{ height: 56 }} />
              </div>
            </div>
            <p style={{ fontFamily: 'var(--font-editorial)', fontSize: 18, fontStyle: 'italic', color: 'var(--rose-200)', lineHeight: 1.5, maxWidth: 320, margin: isMobile ? '0 auto 18px' : '0 0 18px', textAlign: isMobile ? 'center' : 'left' }}>
              {t('Elegância, credibilidade e atendimento personalizado no mercado imobiliário de João Pessoa.')}
            </p>
            <div style={{ display: 'flex', gap: 12, justifyContent: isMobile ? 'center' : 'flex-start' }}>
              {['instagram', 'facebook'].map((ic) => (
                <span key={ic} style={{ width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--brown-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rose-300)' }}>
                  <i data-lucide={ic} style={{ width: 18, height: 18 }}></i>
                </span>
              ))}
              <a href="https://wa.me/558399585248?text=Ol%C3%A1%2C%20vim%20pelo%20site%20da%20SBL%20e%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es." target="_blank" rel="noopener noreferrer" style={{ width: 40, height: 40, borderRadius: '50%', border: '1px solid var(--brown-600)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', color: 'var(--rose-300)', textDecoration: 'none' }}>
                <i data-lucide="message-circle" style={{ width: 18, height: 18 }}></i>
              </a>
            </div>
          </div>
          {cols.map((c) => (
            <div key={c.title} style={{ textAlign: isMobile ? 'center' : 'left' }}>
              <div style={{ fontFamily: 'var(--font-logo)', fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'var(--rose-400)', marginBottom: 16 }}>{t(c.title)}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11, alignItems: isMobile ? 'center' : 'flex-start' }}>
                {c.items.map((it) => (
                  <li key={it.label}><a href="#" onClick={(e) => { e.preventDefault(); if (it.action) onNav(it.action, it.filters); }} style={{ fontFamily: 'var(--font-body)', fontSize: 13.5, color: 'var(--brown-100)' }}
                    onMouseEnter={(e) => e.currentTarget.style.color = 'var(--rose-300)'}
                    onMouseLeave={(e) => e.currentTarget.style.color = 'var(--brown-100)'}>{t(it.label)}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid var(--brown-700)', padding: '22px 0 24px', display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12 }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--warmgray-400)', textAlign: isMobile ? 'center' : 'left' }}>© 2026 SBL Imóveis e Locações · CRECI/PB 16696 · João Pessoa, Paraíba</span>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--warmgray-400)', textAlign: isMobile ? 'center' : 'left' }}>{t('Política de Privacidade · Termos de Uso')}</span>
        </div>
        <div style={{ borderTop: '1px solid var(--brown-800)', padding: '12px 0 20px', textAlign: 'center' }}>
          <span style={{ fontFamily: 'var(--font-body)', fontSize: 11, color: 'var(--warmgray-600)' }}>
            Desenvolvido por{' '}
            <a
              href="https://www.remiltonmartins.com.br"
              target="_blank"
              rel="noopener noreferrer"
              onMouseEnter={e => e.target.style.fontWeight = '700'}
              onMouseLeave={e => e.target.style.fontWeight = '400'}
              style={{ color: 'var(--warmgray-400)', textDecoration: 'none', fontWeight: '400', transition: 'font-weight 0.15s' }}
            >
              Remilton Martins
            </a>
          </span>
        </div>
      </div>
    </footer>
  );
}
window.Footer = Footer;