// FloatingWhatsApp — persistent affordance, bottom-right, appears after the
// hero (~600px scroll). 1.5px bordeaux border on near-white, small bordeaux
// "24/7" badge. Label "Urgencia penal".
// On narrow viewports the text label is hidden; icon + badge remain.
function FloatingWhatsApp() {
  const [visible, setVisible] = React.useState(false);

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

  return (
    <a
      href="https://wa.me/56978901234"
      aria-label="Urgencia penal — contacto inmediato por WhatsApp"
      className="rt-fw"
      style={{
        position: "fixed",
        right: 24,
        bottom: 24,
        zIndex: 60,
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        padding: "10px 14px 10px 12px",
        background: "var(--bg-base)",
        border: "1.5px solid var(--accent)",
        color: "var(--accent)",
        borderRadius: 999,
        fontFamily: "var(--font-ui)",
        fontSize: 14,
        fontWeight: 500,
        textDecoration: "none",
        boxShadow: "0 1px 0 var(--line), 0 1px 8px rgba(26,20,20,0.04)",
        opacity: visible ? 1 : 0,
        transform: visible ? "translateY(0)" : "translateY(8px)",
        pointerEvents: visible ? "auto" : "none",
        transition:
          "opacity 300ms var(--ease-std), transform 300ms var(--ease-std), background 250ms var(--ease-std)",
      }}
      onMouseEnter={(e) => (e.currentTarget.style.background = "var(--accent-tint)")}
      onMouseLeave={(e) => (e.currentTarget.style.background = "var(--bg-base)")}
    >
      <MessageCircle width={18} height={18} />
      <span className="rt-fw-label">Urgencia penal</span>
      <span
        style={{
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "2px 8px",
          background: "var(--accent)",
          color: "var(--ink-inverse)",
          borderRadius: 999,
          fontFamily: "var(--font-ui)",
          fontSize: 10,
          fontWeight: 500,
          letterSpacing: "0.08em",
        }}
      >
        24/7
      </span>

      <style>{`
        @media (max-width: 540px) {
          .rt-fw .rt-fw-label { display: none; }
          .rt-fw { padding: 10px 12px; gap: 8px; }
        }
      `}</style>
    </a>
  );
}

Object.assign(window, { FloatingWhatsApp });