const Footer = ({ onNavigate }) => (
  <footer style={{background:'#2D3436', color:'#b2bec3', padding:'40px 24px 24px', fontFamily:"'Helvetica Neue', Helvetica, Arial, sans-serif"}}>
    <div style={{maxWidth:1100, margin:'0 auto'}}>
      <div style={{display:'flex', justifyContent:'space-between', flexWrap:'wrap', gap:24, marginBottom:32}}>
        <div>
          <div style={{fontSize:20, fontWeight:800, color:'#fff', marginBottom:8}}>Lokat</div>
          <div style={{fontSize:13, maxWidth:220, lineHeight:1.6}}>Marketplace de boxes clínicos en Chile. Arrienda por hora, cuando lo necesitas.</div>
        </div>
        <div style={{display:'flex', gap:40, flexWrap:'wrap'}}>
          <div>
            <div style={{fontSize:12, fontWeight:700, color:'#fff', marginBottom:12, textTransform:'uppercase', letterSpacing:1}}>Legal</div>
            {[['Términos de uso','terms'],['Privacidad','privacy'],['Cookies','cookies']].map(([label, screen]) => (
              <div key={screen} style={{marginBottom:8}}>
                <span onClick={() => onNavigate && onNavigate(screen)} style={{fontSize:13, color:'#b2bec3', cursor:'pointer'}}>{label}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{fontSize:12, fontWeight:700, color:'#fff', marginBottom:12, textTransform:'uppercase', letterSpacing:1}}>Ayuda</div>
            <div><a href="mailto:contacto@lokat.app" style={{fontSize:13, color:'#b2bec3', textDecoration:'none'}}>Contacto</a></div>
          </div>
        </div>
      </div>
      <div style={{borderTop:'1px solid #636e72', paddingTop:16, fontSize:12, textAlign:'center'}}>
        © {new Date().getFullYear()} Lokat SpA · Todos los derechos reservados
      </div>
    </div>
  </footer>
);
window.Footer = Footer;