/* floating.jsx — WhatsApp FAB + sticky booking CTA */

function FloatingCTAs({ onBookClick }) {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      // Show sticky cta after hero, hide near contact form
      const y = window.scrollY;
      const contact = document.getElementById("contacto");
      const contactTop = contact ? contact.getBoundingClientRect().top + window.scrollY : Infinity;
      setShow(y > window.innerHeight * 0.8 && y < contactTop - 200);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <React.Fragment>
      <a
        className="wa-fab"
        href="https://wa.me/573013083210"
        target="_blank"
        rel="noreferrer"
        aria-label="Escribir por WhatsApp">

        <svg className="wa-fab-logo" viewBox="-2 -2 36 36" aria-hidden>
          <defs>
            <linearGradient id="wa-grad" x1="16" y1="0.5" x2="16" y2="31.5" gradientUnits="userSpaceOnUse">
              <stop offset="0" stopColor="#60D66A" />
              <stop offset="1" stopColor="#23B33A" />
            </linearGradient>
          </defs>
          {/* White outer ring — same bubble shape scaled up behind the green */}
          <path fill="#fff" transform="translate(16 16) scale(1.13) translate(-16 -16)" d="M16 .5C7.44.5.5 7.44.5 16c0 2.74.72 5.41 2.08 7.77L.36 31.64l8.05-2.11A15.45 15.45 0 0016 31.5c8.56 0 15.5-6.94 15.5-15.5S24.56.5 16 .5z" />
          {/* Green speech-bubble with tail (official silhouette) */}
          <path fill="url(#wa-grad)" d="M16 .5C7.44.5.5 7.44.5 16c0 2.74.72 5.41 2.08 7.77L.36 31.64l8.05-2.11A15.45 15.45 0 0016 31.5c8.56 0 15.5-6.94 15.5-15.5S24.56.5 16 .5z" />
          {/* White handset */}
          <path fill="#fff" d="M23.6 19.16c-.39-.2-2.3-1.14-2.66-1.27-.36-.13-.62-.2-.88.2-.26.39-1.01 1.27-1.24 1.53-.23.26-.46.29-.85.1-.39-.2-1.64-.6-3.13-1.93-1.16-1.03-1.94-2.31-2.17-2.7-.23-.39-.02-.6.17-.79.18-.18.39-.46.59-.69.2-.23.26-.39.39-.65.13-.26.07-.49-.03-.69-.1-.2-.88-2.12-1.2-2.9-.32-.76-.64-.66-.88-.67l-.75-.01c-.26 0-.69.1-1.05.49-.36.39-1.38 1.34-1.38 3.27 0 1.93 1.41 3.8 1.6 4.06.2.26 2.77 4.23 6.71 5.93.94.4 1.67.64 2.24.83.94.3 1.8.26 2.48.16.76-.11 2.3-.94 2.62-1.84.32-.9.32-1.67.23-1.84-.1-.16-.36-.26-.75-.45z" />
        </svg>
      </a>

      <button
        className={`sticky-cta ${show ? "is-shown" : ""}`}
        onClick={onBookClick}
        aria-hidden={!show}>
        
        <span>Cupos limitados esta semana</span>
        <span className="pill-go">Agendar <Arr /></span>
      </button>
    </React.Fragment>);

}

Object.assign(window, { FloatingCTAs });