// FloatingWA.jsx — Floating WhatsApp button (bottom-right). Hides when footer is visible.
function FloatingWA() {
  const [hidden, setHidden] = React.useState(false);

  React.useEffect(() => {
    const footer = document.querySelector('.footer');
    if (!footer || !('IntersectionObserver' in window)) return;
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach(e => setHidden(e.isIntersecting));
      },
      { rootMargin: '0px 0px -180px 0px', threshold: 0 }
    );
    io.observe(footer);
    return () => io.disconnect();
  }, []);

  return (
    <a
      className={'wa-fab ' + (hidden ? 'wa-fab--hidden' : '')}
      href="https://wa.link/0veemt"
      target="_blank"
      rel="noopener"
      aria-label="Escribir por WhatsApp"
      aria-hidden={hidden}
      tabIndex={hidden ? -1 : 0}
    >
      <span className="wa-fab__pulse" aria-hidden="true"></span>
      <span className="wa-fab__icon"><Icon name="whatsapp" size={26}/></span>
      <span className="wa-fab__label">Habla con Daniela</span>
    </a>
  );
}

window.FloatingWA = FloatingWA;