// Footer.jsx
function Footer() {
  return (
    <footer className="footer" data-screen-label="07 Footer">
      <div className="footer__inner">
        <div className="footer__cta-row">
          <h2 className="footer__cta-title">
            Construyamos<br/>
            tu autoridad <em>juntos.</em>
          </h2>
          <Button variant="white" size="lg" href="#contacto">
            Reservar diagnóstico
            <Icon name="arrow-up-right" size={16} strokeWidth={2}/>
          </Button>
        </div>

        <div className="footer__cols">
          <div className="footer__col">
            <a href="#top" className="footer__brand" aria-label="Daniela Cabrera Marketing">
              <span className="footer__brand-wordmark">
                Daniela<em>Cabrera</em>
              </span>
              <span className="footer__brand-sub">Marketing para Doctores</span>
            </a>
            <p className="footer__brand-desc">
              Marketing con ética médica.
              Más que likes, pacientes reales para
              especialistas que valoran su tiempo.
            </p>
          </div>
          <div className="footer__col">
            <h4>Servicios</h4>
            <ul>
              <li><a href="#planes">Social Media</a></li>
              <li><a href="#planes">Facebook Ads</a></li>
              <li><a href="#planes">Google Business</a></li>
              <li><a href="#proceso">Estrategia</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Conoce</h4>
            <ul>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#testimonios">Testimonios</a></li>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#contacto">Contacto</a></li>
            </ul>
          </div>
          <div className="footer__col">
            <h4>Contacto</h4>
            <ul>
              <li><a href="https://wa.link/0veemt" target="_blank" rel="noopener">WhatsApp</a></li>
              <li><a href="https://www.instagram.com/danielacabrera_mkt/" target="_blank" rel="noopener">Instagram</a></li>
              <li><a href="#" style={{pointerEvents:'none', color:'var(--lav-200)'}}>Tampico, Tamps.</a></li>
            </ul>
          </div>
        </div>

        <div className="footer__bottom">
          <span className="footer__copy">© 2026 Daniela Cabrera Marketing · Todos los derechos reservados.</span>
          <div className="footer__social">
            <a href="https://www.instagram.com/danielacabrera_mkt/" target="_blank" rel="noopener" aria-label="Instagram"><Icon name="instagram" size={16}/></a>
            <a href="https://wa.link/0veemt" target="_blank" rel="noopener" aria-label="WhatsApp"><Icon name="whatsapp" size={16}/></a>
            <a href="#" aria-label="Facebook"><Icon name="facebook" size={16}/></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Footer = Footer;