// Footer
function Footer() {
  return (
    <footer style={{ background: 'var(--ink)', color: '#fff', paddingTop: 60, paddingBottom: 24 }}>
      <div className="container">
        <div style={{
          display: 'grid', gridTemplateColumns: '2fr 1fr 1fr 1fr', gap: 40, paddingBottom: 48,
          borderBottom: '1px solid #2a2a35',
        }} className="foot-grid">
          <div>
            <Logo size={32} color="#fff" />
            <p style={{ marginTop: 18, color: '#9a9aaa', fontSize: 15, maxWidth: 320, lineHeight: 1.6 }}>
              Conectando sua empresa ao futuro com apps, sites, automação e estratégia digital sob medida.
            </p>
            <div style={{ marginTop: 24, display: 'flex', gap: 8 }}>
              {['in', 'ig', 'gh', 'wh'].map(s => (
                <a key={s} href={s === 'wh' ? 'https://wa.me/5531982494098' : '#'} target={s === 'wh' ? '_blank' : undefined} rel="noopener" style={{
                  width: 38, height: 38, borderRadius: 10,
                  background: '#16161d', border: '1px solid #2a2a35',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  color: '#9a9aaa', fontFamily: 'JetBrains Mono', fontSize: 12, fontWeight: 700,
                  textTransform: 'uppercase',
                }}>{s}</a>
              ))}
            </div>
          </div>
          <FootCol title="Serviços" items={['Web', 'Apps', 'Design', 'Automação', 'Micro-SaaS']} />
          <FootCol title="Empresa" items={['Sobre nós', 'Projetos', 'Processo', 'FAQ', 'Contato']} />
          <FootCol title="Contato" items={[{ label: 'contato@devsocialmedia.com.br', href: 'mailto:contato@devsocialmedia.com.br' }, { label: '+55 31 98249-4098', href: 'https://wa.me/5531982494098' }, 'Brasil · Remoto', '24h resposta']} mono />
        </div>
        <div style={{ paddingTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <span className="mono" style={{ fontSize: 12, color: '#666' }}>
            © 2026 DEVSocialMedia · CNPJ 54.237.557/0001-11
          </span>
          <span className="mono" style={{ fontSize: 12, color: '#666' }}>
            built with ❤ + ☕ in Brasil
          </span>
        </div>
      </div>

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

function FootCol({ title, items, mono }) {
  return (
    <div>
      <div className="mono" style={{ fontSize: 11, color: '#666', textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 14 }}>{title}</div>
      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(it => { const o = typeof it === 'string' ? { label: it, href: '#' } : it; return (
          <li key={o.label}>
            <a href={o.href} target={o.href.startsWith('http') ? '_blank' : undefined} rel="noopener" style={{
              color: '#9a9aaa', fontSize: 14,
              fontFamily: mono ? 'JetBrains Mono, monospace' : 'inherit',
            }}>{o.label}</a>
          </li>
        ); })}
      </ul>
    </div>
  );
}

window.Footer = Footer;