function WhatsApp() {
  const [hovered, setHovered] = React.useState(false);

  return (
    <a
      href="https://wa.me/5215512345678"
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Contactar por WhatsApp"
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: 'fixed',
        bottom: '2rem',
        right: '2rem',
        width: 56,
        height: 56,
        borderRadius: '50%',
        background: '#25D366',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        textDecoration: 'none',
        boxShadow: hovered
          ? '0 8px 24px rgba(37,211,102,0.45)'
          : '0 4px 14px rgba(0,0,0,0.25)',
        transform: hovered ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
        zIndex: 10000,
      }}
    >
      {/* Tooltip — oculto en móvil */}
      <span style={{
        position: 'absolute',
        bottom: 'calc(100% + 10px)',
        right: 0,
        background: '#fff',
        color: '#000',
        fontSize: '0.75rem',
        fontWeight: 500,
        padding: '5px 10px',
        borderRadius: '6px',
        whiteSpace: 'nowrap',
        boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
        opacity: hovered ? 1 : 0,
        pointerEvents: 'none',
        transition: 'opacity 0.15s ease',
      }}>
        ¿Hablamos?
      </span>

      {/* WhatsApp SVG */}
      <svg width="28" height="28" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <path d="M16 3C9.373 3 4 8.373 4 15c0 2.385.668 4.61 1.832 6.502L4 29l7.697-1.81A11.94 11.94 0 0016 27c6.627 0 12-5.373 12-12S22.627 3 16 3z" fill="#fff"/>
        <path d="M16 5.2c-5.412 0-9.8 4.388-9.8 9.8 0 2.144.69 4.13 1.862 5.754l-1.22 4.55 4.676-1.196A9.745 9.745 0 0016 25.6c5.412 0 9.8-4.388 9.8-9.8S21.412 5.2 16 5.2zm4.87 13.622c-.202.568-1.183 1.087-1.632 1.156-.416.063-.946.09-1.526-.096-.352-.112-.804-.262-1.382-.513-2.432-1.049-4.022-3.48-4.143-3.643-.12-.163-.977-1.3-.977-2.48 0-1.18.618-1.761.836-2.002.22-.24.48-.3.64-.3.16 0 .32.002.46.008.148.007.347-.056.542.414.202.482.687 1.672.747 1.793.06.12.1.263.02.424-.08.16-.12.26-.24.4-.12.14-.252.313-.36.42-.12.12-.245.25-.105.49.14.24.622 1.026 1.337 1.66.918.82 1.692 1.073 1.932 1.193.24.12.38.1.52-.06.14-.16.6-.7.76-.94.16-.24.32-.2.54-.12.22.08 1.4.66 1.64.78.24.12.4.18.46.28.06.1.06.576-.142 1.136z" fill="#25D366"/>
      </svg>

      <style>{`
        @media (max-width: 768px) {
          a[aria-label="Contactar por WhatsApp"] {
            width: 44px !important;
            height: 44px !important;
            bottom: 1rem !important;
            right: 1rem !important;
          }
          a[aria-label="Contactar por WhatsApp"] svg {
            width: 22px !important;
            height: 22px !important;
          }
          a[aria-label="Contactar por WhatsApp"] span {
            display: none !important;
          }
        }
      `}</style>
    </a>
  );
}
window.WhatsApp = WhatsApp;