function WhatsAppFab() {
  const [hovered, setHovered] = React.useState(false);
  return (
    <a
      href={window.WHATSAPP_URL}
      target="_blank"
      rel="noreferrer"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      className="fixed bottom-5 right-5 z-40 inline-flex items-center gap-2.5 bg-accent hover:bg-accent/90 text-white rounded-full shadow-glow transition-all duration-300"
      style={{
        padding: hovered ? '14px 22px 14px 18px' : '14px',
        boxShadow:
          '0 0 40px hsl(210 100% 45% / .25), 0 12px 28px hsl(210 100% 45% / .35)',
      }}
      aria-label="Fale conosco no WhatsApp"
    >
      <Icon name="message-circle" size={28} />
      <span
        className="font-semibold text-sm whitespace-nowrap overflow-hidden transition-all"
        style={{ maxWidth: hovered ? 220 : 0, opacity: hovered ? 1 : 0 }}
      >
        Fale conosco
      </span>
    </a>
  );
}

window.WhatsAppFab = WhatsAppFab;