function Footer() {
  return (
    <footer>
      <div className="container footer-grid">
        <div style={{display:"flex", alignItems:"center", gap:14}}>
          <a href="#" className="logo" style={{fontSize:"1.1rem"}}>
            <span className="logo-dot"></span>
            hey <em style={{fontStyle:"italic", marginLeft:2}}>bots</em>
          </a>
          <span style={{color:"var(--ink-muted)"}}>· estudio boutique · Buenos Aires</span>
        </div>
        <div className="footer-links">
          <a href="#servicios">Servicios</a>
          <a href="#proceso">Proceso</a>
          <a href="#faq">FAQ</a>
          <a href="mailto:hola@heybots.ai">hola@heybots.ai</a>
        </div>
        <div style={{fontFamily:"var(--font-mono)", fontSize:"0.72rem", letterSpacing:"0.1em"}}>© 2026 HEY BOTS</div>
      </div>
      <div
        className="container"
        style={{
          marginTop: 32,
          paddingTop: 24,
          borderTop: "1px solid var(--line-soft)",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          gap: 16,
          flexWrap: "wrap",
          fontFamily: "var(--font-mono)",
          fontSize: "0.72rem",
          letterSpacing: "0.12em",
          textTransform: "uppercase",
          color: "var(--ink-muted)",
        }}
      >
        <span>Documentos legales</span>
        <div style={{display:"flex", gap:24, flexWrap:"wrap"}}>
          <a href="/privacy" style={{transition:"color 0.2s"}}>Privacidad</a>
          <a href="/terms" style={{transition:"color 0.2s"}}>Términos</a>
          <a href="/data-deletion" style={{transition:"color 0.2s"}}>Eliminación de datos</a>
        </div>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer });