function Footer() {
  return (
    <footer className="footer">
      <div className="footer__inner">
        <div className="footer__brand-block">
          <img src="assets/logo-light.svg" alt="Cuarto As Studio" className="footer__logo" />
          <div className="footer__brand-tag">Diseño con intención. Sistemas para escalar. Sin azar.</div>
        </div>

        <div className="footer__col">
          <h4 className="footer__col-title">Studio</h4>
          <ul>
            <li><a href="#fuerzas" data-hover>Las 4 fuerzas</a></li>
            <li><a href="#proceso" data-hover>Proceso</a></li>
            <li><a href="#trabajo" data-hover>Trabajo</a></li>
            <li><a href="#contacto" data-hover>Contacto</a></li>
          </ul>
        </div>

        <div className="footer__col">
          <h4 className="footer__col-title">Servicios</h4>
          <ul>
            <li><a href="#servicios" data-hover>Estrategia <span style={{color:'var(--accent)'}}>♠</span></a></li>
            <li><a href="#servicios" data-hover>Identidad <span style={{color:'var(--accent)'}}>♣</span></a></li>
            <li><a href="#servicios" data-hover>Producto <span style={{color:'var(--accent)'}}>♦</span></a></li>
            <li><a href="#servicios" data-hover>Crecimiento <span style={{color:'var(--accent)'}}>♥</span></a></li>
          </ul>
        </div>

        <div className="footer__col">
          <h4 className="footer__col-title">Conecta</h4>
          <ul>
            <li><a href="https://www.instagram.com/cuartoasstudio/" data-hover>Instagram <span aria-hidden>↗</span></a></li>
            <li><a href="#" data-hover>Behance <span aria-hidden>↗</span></a></li>
            <li><a href="https://www.linkedin.com/company/cuarto-as-studio/" data-hover>LinkedIn <span aria-hidden>↗</span></a></li>
            <li><a href="mailto:hola@cuartoas.studio" data-hover>hola@cuartoas.studio</a></li>
          </ul>
        </div>
      </div>

      <div className="footer__bottom">
        <span>© 2026 Cuarto As Studio · Todos los derechos reservados</span>
        <span>♠ ♥ ♦ ♣ — La mano imbatible</span>
        <span>Hecho con 💚 en Mx</span>
      </div>
    </footer>
  );
}
window.Footer = Footer;