function FloatingCTA({ whatsappLink, onWhatsApp }) {
  const [show, setShow] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setShow(window.scrollY > 500);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <a href="#"
       className={'float-cta' + (show ? ' float-cta--visible' : '')}
       onClick={e => { e.preventDefault(); onWhatsApp(); }}>
      <i data-lucide="message-circle" style={{ width: 18, height: 18, flexShrink: 0 }}></i>
      <span className="float-cta__label">Diagnóstico gratuito</span>
      <style>{`
        .float-cta {
          position: fixed; bottom: 20px; right: 20px; z-index: 60;
          display: inline-flex; align-items: center; gap: 8px;
          padding: 14px 20px; border-radius: 999px;
          background: var(--bac-blue); color: #fff;
          font-family: var(--font-sans); font-weight: 600; font-size: 14px;
          text-decoration: none;
          box-shadow: 0 8px 24px rgba(0,102,254,.35);
          transform: translateY(16px); opacity: 0; pointer-events: none;
          transition: all .22s var(--ease-out);
          -webkit-tap-highlight-color: transparent;
        }
        .float-cta--visible {
          transform: translateY(0); opacity: 1; pointer-events: auto;
        }
        .float-cta:hover { background: var(--bac-blue-700); transform: translateY(-2px); }
        @media (max-width: 479px) {
          .float-cta { padding: 14px; border-radius: 50%; bottom: 16px; right: 16px; }
          .float-cta__label { display: none; }
          .float-cta--visible:hover { transform: none; }
        }
        @media (min-width: 480px) {
          .float-cta { bottom: 24px; right: 24px; font-size: 15px; }
        }
      `}</style>
    </a>
  );
}