function WhatsappFAB() {
  const [hover, setHover] = React.useState(false);
  const settings = (window.SITE && window.SITE.settings) || {};
  const waDigits = (settings.contact && settings.contact.whatsappDigits) || '5544999451010';
  const fabText = encodeURIComponent((settings.contact && settings.contact.whatsappFabText) || 'Olá! Vim pelo site da SOSSEG.');
  const label = (settings.brand && settings.brand.fabLabel) || 'Fale com o Soriani';
  return (
    <a
      href={`https://wa.me/${waDigits}?text=${fabText}`}
      target="_blank" rel="noopener"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'fixed', bottom: 24, right: 24, zIndex: 80,
        height: 56, padding: hover ? '0 22px 0 16px' : '0 16px',
        borderRadius: 999,
        background: 'var(--whatsapp)', color: '#fff',
        display: 'flex', alignItems: 'center', gap: hover ? 10 : 0,
        boxShadow: '0 14px 30px -10px color-mix(in oklab, var(--whatsapp) 55%, transparent), 0 6px 14px -4px rgba(0,0,0,.2)',
        transition: 'all .25s ease',
        whiteSpace: 'nowrap', overflow: 'hidden',
        fontWeight: 600, fontSize: 14.5,
      }}
    >
      <Icon.Whatsapp width="22" height="22" />
      {hover && <span>{label}</span>}
    </a>
  );
}

window.WhatsappFAB = WhatsappFAB;