/* global React */

const FloatingContact = () => {
  const [hovered, setHovered] = React.useState(false);

  return (
    <div style={{
      position: "fixed", bottom: 28, right: 28, zIndex: 999,
      display: "flex", alignItems: "center", gap: 12,
      pointerEvents: "none",
    }}>

      {/* Number label — slides in on hover */}
      <div style={{
        background: "rgba(8,18,30,0.95)",
        border: "1px solid rgba(11,110,104,0.45)",
        color: "var(--parchment)",
        padding: "9px 16px",
        borderRadius: 4,
        whiteSpace: "nowrap",
        pointerEvents: "none",
        opacity: hovered ? 1 : 0,
        transform: hovered ? "translateX(0)" : "translateX(14px)",
        transition: "opacity 200ms ease, transform 200ms ease",
        backdropFilter: "blur(12px)",
        boxShadow: "0 8px 28px rgba(0,0,0,0.4)",
      }}>
        <div style={{
          fontFamily: "var(--font-mono)", fontSize: 10,
          color: "var(--peacock-bright)", letterSpacing: "0.14em",
          textTransform: "uppercase", marginBottom: 3
        }}>Call us</div>
        <div style={{
          fontFamily: "var(--font-condensed)", fontSize: 15, fontWeight: 700,
          letterSpacing: "0.04em", color: "var(--parchment)", lineHeight: 1.4
        }}>+91 92708 42423</div>
        <div style={{
          fontFamily: "var(--font-condensed)", fontSize: 15, fontWeight: 700,
          letterSpacing: "0.04em", color: "rgba(240,233,216,0.6)", lineHeight: 1.4
        }}>+91 88889 99433</div>
      </div>

      {/* FAB button */}
      <a
        href="tel:+919270842423"
        onMouseEnter={() => setHovered(true)}
        onMouseLeave={() => setHovered(false)}
        aria-label="Call Pravah Solution"
        style={{
          position: "relative", flexShrink: 0,
          width: 58, height: 58, borderRadius: "50%",
          background: "linear-gradient(135deg, var(--peacock) 0%, #0d8a82 100%)",
          boxShadow: hovered
            ? "0 6px 28px rgba(11,110,104,0.7)"
            : "0 4px 20px rgba(11,110,104,0.45)",
          display: "flex", alignItems: "center", justifyContent: "center",
          textDecoration: "none", pointerEvents: "all",
          transition: "box-shadow 220ms ease, transform 220ms ease",
          transform: hovered ? "scale(1.08)" : "scale(1)",
        }}
      >
        {/* Pulse ring 1 */}
        <span style={{
          position: "absolute", inset: 0, borderRadius: "50%",
          border: "2.5px solid rgba(11,110,104,0.55)",
          animation: "fc-pulse 2.6s ease-out infinite",
          pointerEvents: "none",
        }}/>
        {/* Pulse ring 2 */}
        <span style={{
          position: "absolute", inset: 0, borderRadius: "50%",
          border: "2.5px solid rgba(11,110,104,0.35)",
          animation: "fc-pulse 2.6s ease-out infinite 1.3s",
          pointerEvents: "none",
        }}/>

        {/* Phone icon */}
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none"
          stroke="#fff" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
          style={{ position: "relative", zIndex: 1 }}>
          <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12 19.79 19.79 0 0 1 1.61 3.38 2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.6a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
        </svg>
      </a>

      <style>{`
        @keyframes fc-pulse {
          0%   { transform: scale(1);   opacity: 0.75; }
          100% { transform: scale(2.4); opacity: 0; }
        }
      `}</style>
    </div>
  );
};

window.FloatingContact = FloatingContact;