// Floating WhatsApp button — appears bottom-right after a small scroll,
// pulses gently to draw the eye without being annoying.
function WhatsAppFab({ visible = true, theme }) {
  const [show, setShow] = React.useState(false);
  const [hover, setHover] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 120);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  if (!visible) return null;

  return (
    <a
      href="https://wa.me/message/LNRZZI7DNWANB1"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Escribinos por WhatsApp"
      title="Escribinos por WhatsApp"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'fixed',
        bottom: '22px',
        right: '22px',
        zIndex: 200,
        width: hover ? 'auto' : '62px',
        height: '62px',
        padding: hover ? '0 22px 0 12px' : '0',
        background: '#25D366',
        borderRadius: '999px',
        boxShadow: show
          ? '0 10px 32px rgba(37,211,102,0.45), 0 4px 12px rgba(0,0,0,0.2)'
          : 'none',
        display: show ? 'inline-flex' : 'none',
        alignItems: 'center',
        gap: '10px',
        textDecoration: 'none',
        color: '#fff',
        fontFamily: theme?.body || 'sans-serif',
        fontSize: '15px',
        fontWeight: 600,
        whiteSpace: 'nowrap',
        transition: 'width 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease',
        transform: show ? 'translateY(0) scale(1)' : 'translateY(20px) scale(0.6)',
        overflow: 'hidden',
      }}
    >
      <span style={{
        width: '46px', height: '46px',
        borderRadius: '50%',
        background: '#fff',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
        marginLeft: hover ? '0' : '8px',
        boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.04)',
      }}>
        <img src="assets/social/whatsapp.png" alt="" aria-hidden="true" style={{
          width: '42px', height: '42px', display: 'block',
        }} />
      </span>
      {hover && <span style={{ paddingRight: '4px' }}>Escribinos</span>}

      {/* gentle pulse ring */}
      <span aria-hidden="true" style={{
        position: 'absolute',
        inset: '-2px',
        borderRadius: '999px',
        border: '2px solid #25D366',
        opacity: 0.55,
        animation: 'ls-fab-pulse 2.2s ease-out infinite',
        pointerEvents: 'none',
      }} />
    </a>
  );
}

window.WhatsAppFab = WhatsAppFab;