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

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

  const openWA = () => window.openWhatsApp();

  return (
    <div
      onMouseEnter={() => setExpanded(true)}
      onMouseLeave={() => setExpanded(false)}
      onClick={openWA}
      style={{
        position: 'fixed',
        bottom: 24,
        right: 24,
        zIndex: 80,
        cursor: 'pointer',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 8,
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0) scale(1)' : 'translateY(40px) scale(0.85)',
        pointerEvents: visible ? 'auto' : 'none',
        transition: 'all .4s cubic-bezier(.2,.7,.2,1)',
      }}
      aria-label="Contactar por WhatsApp"
    >
      {/* Tooltip */}
      <div style={{
        position: 'absolute',
        right: 'calc(100% + 16px)',
        top: '50%',
        transform: expanded ? 'translateY(-50%) translateX(0)' : 'translateY(-50%) translateX(8px)',
        background: 'var(--navy)',
        color: 'white',
        padding: '10px 16px',
        borderRadius: 8,
        fontSize: 13,
        fontWeight: 600,
        whiteSpace: 'nowrap',
        opacity: expanded ? 1 : 0,
        pointerEvents: 'none',
        transition: 'all .25s cubic-bezier(.2,.7,.2,1)',
        boxShadow: '0 8px 24px rgba(15,27,61,0.25)',
      }}>
        ¡Hablemos por WhatsApp!
        <div style={{
          position: 'absolute',
          right: -5, top: '50%',
          transform: 'translateY(-50%) rotate(45deg)',
          width: 10, height: 10,
          background: 'var(--navy)',
        }}/>
      </div>

      {/* Character (clickable) */}
      <div style={{
        position: 'relative',
        width: 140, height: 140,
        animation: 'floatBob 4s ease-in-out infinite',
      }}>
        {/* Pulse ring */}
        <div style={{
          position: 'absolute',
          inset: '12%',
          borderRadius: '50%',
          border: '2px solid rgba(16,185,129,0.5)',
          animation: 'pulse 2.4s ease-out infinite',
          pointerEvents: 'none',
        }}/>
        <img
          src="assets/contactanos-character.png"
          alt=""
          style={{
            width: '100%',
            height: '100%',
            objectFit: 'contain',
            filter: 'drop-shadow(0 12px 24px rgba(0,0,0,0.30))',
            transform: expanded ? 'scale(1.08)' : 'scale(1)',
            transition: 'transform .3s cubic-bezier(.2,.7,.2,1)',
          }}
        />
      </div>

      <style>{`
        @keyframes floatBob {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(-6px); }
        }
        @keyframes pulse {
          0%   { transform: scale(0.95); opacity: 0.8; }
          100% { transform: scale(1.45); opacity: 0; }
        }
      `}</style>
    </div>
  );
}

window.FloatingContact = FloatingContact;