function WhatsAppFAB() {
  const { lang, t } = useLang();
  const [visible, setVisible] = React.useState(false);

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

  const href = `https://wa.me/966581164926?text=${encodeURIComponent(t.contact.whatsappPrefill)}`;

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="WhatsApp"
      className={`fixed z-40 bottom-6 ${lang === 'ar' ? 'left-6' : 'right-6'} group transition-all duration-500 ${visible ? 'translate-y-0 opacity-100' : 'translate-y-6 opacity-0 pointer-events-none'}`}
      style={{ direction: 'ltr' }}
    >
      <span className="absolute inset-0 rounded-full bg-emerald-500/40 animate-ping" />
      <span className="relative flex items-center gap-2 px-4 py-3 rounded-full text-white font-semibold text-[13.5px] shadow-2xl"
        style={{ background: 'linear-gradient(135deg, #25D366 0%, #128C7E 100%)', boxShadow: '0 10px 30px -8px rgba(37,211,102,0.55), 0 0 0 1px rgba(255,255,255,0.12)' }}>
        <I.WhatsApp size={18} />
        <span className="hidden sm:inline" style={{ fontFamily: lang === 'ar' ? 'Cairo, sans-serif' : 'Inter, sans-serif' }}>
          {lang === 'ar' ? 'تواصل عبر واتساب' : 'Chat on WhatsApp'}
        </span>
      </span>
    </a>
  );
}

window.WhatsAppFAB = WhatsAppFAB;