/* global React, Icon, WhatsAppIcon */
// Footer.jsx — footer with location + quick links + WhatsApp float

function Footer({ onWhatsApp }) {
  const contact = window.MR_CONTACT || {
    email: 'eleammirefugoenelcampo@gmail.com',
    phoneDisplay: '+56 9 3220 9463',
    phoneHref: '+56932209463',
  };

  return (
    <footer className="mr-footer">
      <div className="mr-footer__top mr-container">
        <div className="mr-footer__brand">
          <div className="mr-footer__name">Mi Refugio en el Campo</div>
          <p className="mr-footer__tag">Hogar de acogida para adultos mayores. Un hogar no reemplaza a la familia. La acompaña.</p>
          <div className="mr-footer__loc">
            <Icon name="map-pin" size={18} />
            <span>Lagunillas, Villa Alegre · Región del Maule, Chile</span>
          </div>
        </div>

        <nav className="mr-footer__links" aria-label="Enlaces rápidos">
          <span className="mr-footer__h">El hogar</span>
          <a href="#apoyo">Cuándo pedir apoyo</a>
          <a href="#hogar-cuidado">Qué encontrará aquí</a>
          <a href="#dia">La calma del campo</a>
          <a href="#proceso">Antes de ingresar</a>
          <a href="#faq">Preguntas frecuentes</a>
        </nav>

        <div className="mr-footer__contact">
          <span className="mr-footer__h">Conversemos</span>
          <button className="mr-footer__wa" onClick={() => onWhatsApp()}>
            <WhatsAppIcon size={20} /> Escríbenos por WhatsApp
          </button>
          <div className="mr-footer__direct">
            <a href={`tel:${contact.phoneHref}`}><Icon name="phone" size={16} />{contact.phoneDisplay}</a>
            <a href={`mailto:${contact.email}`}><Icon name="mail" size={16} />{contact.email}</a>
          </div>
          <p className="mr-fine" style={{ color: 'var(--fg-on-deep-muted)', marginTop: 14 }}>
            Sin presión. Sin apuro. Con claridad.
          </p>
        </div>
      </div>
      <div className="mr-footer__base mr-container">
        <span>© {new Date().getFullYear()} Mi Refugio en el Campo</span>
        <span>Cada persona mayor merece cuidado, compañía y respeto.</span>
      </div>
    </footer>
  );
}

function WhatsAppFloat({ onWhatsApp }) {
  return (
    <button className="mr-wafloat" onClick={() => onWhatsApp()} aria-label="Conversar por WhatsApp">
      <WhatsAppIcon size={28} />
      <span>Hablemos</span>
    </button>
  );
}

Object.assign(window, { Footer, WhatsAppFloat });