// Floating WhatsApp button — bottom-right, hidden below lg (the mobile bottom bar
// carries WhatsApp there, avoiding overlap). Gentle entrance after 1.5s.
const { useState: useStateWa } = React;
const useEffectWa = React.useLayoutEffect;

function FloatingWhatsApp() {
  const [shown, setShown] = useStateWa(false);
  const reduced = usePrefersReducedMotion();
  useEffectWa(() => {
    const t = setTimeout(() => setShown(true), reduced ? 0 : 1500);
    return () => clearTimeout(t);
  }, [reduced]);
  return (
    <a
      href={WHATSAPP_URL}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Chat with us on WhatsApp"
      className="wa-flash fixed bottom-6 right-6 z-50 hidden lg:flex h-14 w-14 items-center justify-center rounded-full text-white"
      style={{
        background: '#25D366',
        boxShadow: '0 14px 30px -10px rgba(37,211,102,0.7)',
        opacity: shown ? 1 : 0,
        transform: shown ? 'scale(1)' : 'scale(0.6)',
        transition: reduced ? 'none' : 'opacity 450ms ' + EASE + ', transform 450ms ' + EASE,
      }}
      onMouseEnter={(e) => { if (!reduced) e.currentTarget.style.transform = 'scale(1.05)'; }}
      onMouseLeave={(e) => { if (!reduced) e.currentTarget.style.transform = 'scale(1)'; }}
    >
      <Icon name="whatsapp" size={28} />
    </a>
  );
}

Object.assign(window, { FloatingWhatsApp });