/* global React */

const FloatingAssistant = () => {
  const [pulse, setPulse] = React.useState(true);

  // Stop the attention pulse once the user scrolls past the hero
  React.useEffect(() => {
    const onScroll = () => {
      if (window.scrollY > 400) setPulse(false);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <a href="#assistant" className={`fab-assistant ${pulse ? "pulse" : ""}`} aria-label="Talk to our assistant">
      <span className="fab-rings" aria-hidden="true">
        <span></span><span></span>
      </span>
      <span className="fab-icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
          <path d="M19 10v2a7 7 0 0 1-14 0v-2M12 19v4M8 23h8"/>
        </svg>
      </span>
      <span className="fab-label">Talk now</span>
    </a>
  );
};

window.FloatingAssistant = FloatingAssistant;