function SocialIcon({ name }) {
  const paths = {
    instagram: <><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1" fill="currentColor"/></>,
    tiktok:    <><path d="M14 4v9.5a3.5 3.5 0 1 1-3.5-3.5"/><path d="M14 4c.5 2.5 2.5 4 5 4"/></>,
    linkedin:  <><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M8 10v7M8 7v.01M12 17v-4a2 2 0 0 1 4 0v4M12 17v-7"/></>,
    youtube:   <><rect x="3" y="6" width="18" height="12" rx="3"/><path d="m11 9 4 3-4 3z" fill="currentColor"/></>,
  };
  return (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      {paths[name]}
    </svg>
  );
}

function Footer() {
  return (
    <footer className="acmp-footer">
      <div className="acmp-footer-inner">
        <div>
          <img src={window.__r('logoPrimary','assets/logo-primary.png')} width="220" alt="Academia Comunica de Mai Pistiner" style={{filter:'brightness(0) invert(1)'}}/>
          <div className="socials" style={{marginTop:22}}>
            <a aria-label="Instagram"><SocialIcon name="instagram"/></a>
            <a aria-label="TikTok"><SocialIcon name="tiktok"/></a>
            <a aria-label="LinkedIn"><SocialIcon name="linkedin"/></a>
            <a aria-label="YouTube"><SocialIcon name="youtube"/></a>
          </div>
        </div>
        <div>
          <h4>Aprender</h4>
          <ul>
            <li><a>Cursos online</a></li>
            <li><a>Programas en vivo</a></li>
            <li><a>El método</a></li>
            <li><a>Recursos gratis</a></li>
          </ul>
        </div>
        <div>
          <h4>Empresas</h4>
          <ul>
            <li><a>In-company</a></li>
            <li><a>Casos</a></li>
            <li><a>Hablar con ventas</a></li>
          </ul>
        </div>
        <div>
          <h4>Academia</h4>
          <ul>
            <li><a>Sobre Mai</a></li>
            <li><a>Equipo</a></li>
            <li><a>Prensa</a></li>
            <li><a>Contacto</a></li>
          </ul>
        </div>
      </div>
      <div className="acmp-footer-bottom">
        <span>© 2026 Academia Comunica de Mai Pistiner</span>
        <span>Hecho con método. Sin palabras vacías.</span>
      </div>
    </footer>
  );
}
Object.assign(window, { Footer, SocialIcon });