function WhatsAppButton() {
  const [expanded, setExpanded] = React.useState(false);
  const [visible, setVisible] = React.useState(false);

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

  const msg = encodeURIComponent(`Hello SSE, I'd like to enquire about your products.`);
  const href = `https://wa.me/${SSE_INFO.phoneRaw}?text=${msg}`;

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      onMouseEnter={() => setExpanded(true)}
      onMouseLeave={() => setExpanded(false)}
      style={{
        position: 'fixed',
        bottom: 24,
        right: 24,
        zIndex: 90,
        display: 'flex',
        alignItems: 'center',
        gap: 12,
        padding: '14px 18px',
        borderRadius: 999,
        background: '#25D366',
        color: 'white',
        boxShadow: '0 12px 40px -8px rgba(37, 211, 102, 0.5), 0 2px 8px rgba(0,0,0,0.15)',
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0) scale(1)' : 'translateY(20px) scale(0.9)',
        transition: 'all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
        fontFamily: 'var(--font-body)',
        fontSize: 15,
        fontWeight: 600,
        pointerEvents: visible ? 'auto' : 'none',
      }}>
      <svg width="24" height="24" viewBox="0 0 24 24" fill="white">
        <path d="M20.52 3.48A11.86 11.86 0 0012.03 0C5.42 0 .06 5.36.06 11.97c0 2.11.55 4.17 1.6 5.98L0 24l6.24-1.63a11.97 11.97 0 005.79 1.48h.01c6.61 0 11.98-5.36 11.98-11.97 0-3.2-1.25-6.2-3.5-8.4zM12.04 21.8h-.01a9.9 9.9 0 01-5.05-1.38l-.36-.21-3.7.97.99-3.6-.24-.37a9.87 9.87 0 01-1.52-5.25c0-5.47 4.46-9.92 9.94-9.92 2.65 0 5.14 1.04 7.02 2.91a9.86 9.86 0 012.9 7.02c0 5.48-4.46 9.83-9.97 9.83zm5.44-7.4c-.3-.15-1.77-.87-2.04-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.6.13-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.07 2.88 1.22 3.08c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.7.63.71.22 1.36.19 1.87.11.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z"/>
      </svg>
      <div style={{
        maxWidth: expanded ? 200 : 0,
        overflow: 'hidden',
        transition: 'max-width 0.35s cubic-bezier(0.4,0,0.2,1)',
        whiteSpace: 'nowrap',
      }}>
        <span style={{ paddingRight: 8 }}>WhatsApp us</span>
      </div>
    </a>
  );
}

Object.assign(window, { WhatsAppButton });