// ADOS website — Footer
function Footer({ onNavigate }) {
  const cols = [
    { h: 'Servicios', items: ['Implementación BIM', 'Coordinación BIM', 'Ingeniería estructural', 'Hidrosanitario', 'Arquitectura'] },
    { h: 'Compañía', items: ['Proyectos', 'Proceso', 'Nosotros', 'Sector público', 'Sector privado'] },
    { h: 'Contacto', items: ['adosiyc@hotmail.com', '+57 310 233 5153', 'Colombia', 'LinkedIn', 'Instagram'] },
  ];
  return (
    <footer style={{ background: 'var(--bg-deep)', borderTop: '1px solid var(--border)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px var(--pad-x) 40px' }}>
        <div className="w-footer-grid">
          <div>
            {/* logotipo: cubo real + texto (reemplaza al SVG de muestra) */}
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18 }}>
              <img src="./assets/logo/ados-cube-real.png" alt="ADOS" style={{ height: 40 }} />
              <span style={{ width: 1, alignSelf: 'stretch', background: 'rgba(255,255,255,0.35)' }} />
              <span style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 22, letterSpacing: '-0.03em', color: '#FFFFFF', lineHeight: 1 }}>ADOS</span>
                <span style={{ fontFamily: 'var(--font-body)', fontWeight: 500, fontSize: 8.5, letterSpacing: '0.19em', color: 'var(--accent)' }}>INGENIERÍA Y ARQUITECTURA SAS</span>
              </span>
            </div>
            <p style={{ color: 'var(--text-muted)', fontSize: 14, maxWidth: 260, lineHeight: 1.6, margin: 0 }}>
              Consultoría BIM, ingeniería y arquitectura.
            </p>
          </div>
          {cols.map((c) => (
            <div key={c.h}>
              <div style={{ fontSize: '0.7rem', textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--text-faint)', marginBottom: 16 }}>{c.h}</div>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
                {c.items.map((it) => (
                  <li key={it}><a href="#" onClick={(e) => e.preventDefault()} style={{ color: 'var(--text-muted)', fontSize: 14 }}>{it}</a></li>
                ))}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', color: 'var(--text-faint)', fontSize: 12.5 }}>
          <span>© 2026 ADOS Ingeniería y Arquitectura SAS · NIT 000.000.000-0</span>
          <span style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.04em' }}>BIM desde el primer día</span>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;