/* global React, window */
const { Icon } = window;

const Footer = () => (
  <footer data-theme="dark" className="footer">
    <div className="painpoint-grid" />
    <div className="container">
      <div className="reveal">
        <div className="footer-huge" style={{ textWrap: "balance", display: "flex", alignItems: "center", width: "100%" }}>
          <img src="assets/thegroup-wordmark.svg" alt="The Group" style={{ width: "100%", height: "auto", display: "block" }} />
        </div>
      </div>
      <div className="footer-row">
        <div className="footer-col">
          <h4>Contacto</h4>
          <a href={window.DATA.WHATSAPP_URL} target="_blank" rel="noreferrer">WhatsApp · +54 922 24533928</a>
          <a href="mailto:Thegroupagency2026@gmail.com">Thegroupagency2026@gmail.com</a>
          <a href="#" rel="noreferrer">Buenos Aires · Argentina</a>
        </div>
        <div className="footer-col">
          <h4>Navegación</h4>
          {window.DATA.NAV_LINKS.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          <a href="#faq">Preguntas</a>
        </div>
        <div className="footer-col">
          <h4>Social</h4>
          <a href="#" rel="noreferrer">Instagram</a>
          <a href="#" rel="noreferrer">LinkedIn</a>
          <a href="#" rel="noreferrer">Behance</a>
        </div>
        <div className="footer-col">
          <h4>Legal</h4>
          <a href="#">Privacidad</a>
          <a href="#">Términos</a>
          <a href="#">Cookies</a>
        </div>
      </div>
      <div className="footer-meta">
        <span>© 2026 The Group · All rights reserved</span>
        <span>Hecho por The Group Agency · BS AS → Worldwide</span>
      </div>
    </div>
  </footer>
);

window.Footer = Footer;