/**
 * footer.jsx — footer (brand, service links, contact, service areas —
 * the area list doubles as local-SEO keywords) and the floating
 * WhatsApp button that stays reachable while scrolling.
 */

function Footer() {
  const { t } = useLang();
  const B = window.BUSINESS;

  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__grid">
          <div>
            <a className="brand" href="#inicio">
              <span className="brand__mark"><img src="images/Logonobg.png" alt="Cerrajeros Campello 24H logo" /></span>
              <span className="brand__name">
                Cerrajeros Campello <span>24H</span>
              </span>
            </a>
            <p className="footer__tagline">{t.footer.tagline}</p>
          </div>

          <div>
            <h4>{t.footer.servicesTitle}</h4>
            <ul>
              {t.services.items.map((s) => (
                <li key={s.title}>
                  <a href="#servicios">{s.title}</a>
                </li>
              ))}
            </ul>
          </div>

          <div>
            <h4>{t.footer.contactTitle}</h4>
            <ul>
              <li><a href={B.phoneHref}>{B.phoneDisplay}</a></li>
              <li><a href={"mailto:" + B.email}>{B.email}</a></li>
              <li>{B.address}</li>
            </ul>
          </div>

          <div>
            <h4>{t.footer.areasTitle}</h4>
            <ul>
              {t.footer.areas.map((area) => (
                <li key={area}>{area}</li>
              ))}
            </ul>
          </div>
        </div>

        <div className="footer__bottom">{t.footer.legal}</div>
      </div>
    </footer>
  );
}

/** Always-visible WhatsApp shortcut — the highest-converting channel
 *  for Spanish local services after the phone call itself.
 *  Does a single attention pulse a few seconds after page load. */
function WhatsAppFab() {
  const { t } = useLang();
  const [pulsed, setPulsed] = React.useState(false);

  React.useEffect(() => {
    const id = setTimeout(() => setPulsed(true), 2800);
    return () => clearTimeout(id);
  }, []);

  return (
    <a
      className={"whatsapp-fab" + (pulsed ? " whatsapp-fab--pulse" : "")}
      href={window.BUSINESS.whatsappHref}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={t.whatsapp.label}
    >
      <Icon name="whatsapp" size={32} />
    </a>
  );
}

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