// Fixed WhatsApp chat button — visible on every page, bottom-right.
// A single forest-green pill; it reveals once past the hero.
function WhatsAppFab() {
  const wrapRef = React.useRef(null);
  const [revealed, setRevealed] = React.useState(false);

  // Reveal only after the hero has scrolled out of view. On the home route the
  // scroll is hijacked (window.scrollY stays 0), so we instead key the reveal to
  // the active panel index broadcast by ScrollHijack — visible from panel 2 on,
  // kept clean over the hero (panel 1).
  React.useEffect(() => {
    const hero = document.querySelector(".hero");
    const threshold = () => (hero ? hero.offsetHeight : window.innerHeight) * 0.45;
    const onScroll = () => setRevealed(window.scrollY > threshold());
    const onHijack = (e) => setRevealed(((e.detail && e.detail.index) || 0) >= 1);
    const onHijackEnd = () => onScroll();
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    window.addEventListener("hijack:change", onHijack);
    window.addEventListener("hijack:end", onHijackEnd);
    return () => {
      window.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onScroll);
      window.removeEventListener("hijack:change", onHijack);
      window.removeEventListener("hijack:end", onHijackEnd);
    };
  }, []);

  const content = (
    <>
      <Icon name="whatsapp" size={18}/>
      <span>WhatsApp</span>
    </>
  );

  return (
    <div className={`whatsapp-fab-wrap ${revealed ? "is-revealed" : ""}`} ref={wrapRef} aria-hidden={!revealed}>
      <a className="whatsapp-fab whatsapp-fab--base"
         href="https://wa.me/447000000000"
         target="_blank" rel="noopener noreferrer"
         aria-label="Message us on WhatsApp">{content}</a>
    </div>
  );
}
window.WhatsAppFab = WhatsAppFab;