window.WhatsAppButton = function WhatsAppButton() {
  const message = encodeURIComponent("Hola, quisiera recibir asesoría legal.");
  const [isDesktop, setIsDesktop] = React.useState(window.innerWidth > 768);
  const [open, setOpen] = React.useState(window.innerWidth > 768);

  React.useEffect(function bindResizeListener() {
    const onResize = function onResize() {
      const nextIsDesktop = window.innerWidth > 768;

      setIsDesktop(nextIsDesktop);
      if (!nextIsDesktop) {
        setOpen(false);
      }
    };

    window.addEventListener("resize", onResize);
    return function cleanup() {
      window.removeEventListener("resize", onResize);
    };
  }, []);

  return (
    <div
      style={{
        position: "fixed",
        right: isDesktop ? 24 : 18,
        bottom: isDesktop ? 28 : 20,
        zIndex: 80,
        display: "flex",
        flexDirection: "column",
        alignItems: "flex-end",
        gap: 12,
      }}
    >
      {open ? (
        <div
          style={{
            width: isDesktop ? 324 : 286,
            maxWidth: "calc(100vw - 36px)",
            background: "#FFFDF9",
            borderRadius: 18,
            padding: 18,
            boxShadow: "0 24px 60px -20px rgba(17,33,59,.32)",
            border: "1px solid rgba(207,163,74,.24)",
          }}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "space-between",
              gap: 12,
              marginBottom: 14,
            }}
          >
            <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
              <div
                style={{
                  width: 42,
                  height: 42,
                  borderRadius: 12,
                  background: "#11213b",
                  display: "grid",
                  placeItems: "center",
                  overflow: "hidden",
                  boxShadow: "inset 0 0 0 1px rgba(207,163,74,.16)",
                  padding: 6,
                }}
              >
                <img
                  src="/assets/images/footer-logo.png"
                  alt="Logo Hernández & Asociados"
                  style={{
                    width: "100%",
                    height: "100%",
                    objectFit: "contain",
                  }}
                />
              </div>

              <div>
                <div
                  style={{
                    color: "#11213b",
                    fontFamily: 'Georgia, "Times New Roman", serif',
                    fontSize: 18,
                    fontWeight: 600,
                    lineHeight: 1.1,
                  }}
                >
                  Hernández & Asociados
                </div>
                <div style={{ color: "#25D366", fontSize: 11, marginTop: 4 }}>
                  ● En línea
                </div>
              </div>
            </div>

            <button
              type="button"
              aria-label="Cerrar panel de WhatsApp"
              onClick={function closePanel() {
                setOpen(false);
              }}
              style={{
                background: "transparent",
                border: 0,
                color: "#6f7680",
                cursor: "pointer",
                fontSize: 22,
                lineHeight: 1,
                padding: 2,
              }}
            >
              ×
            </button>
          </div>

          <div
            style={{
              background: "#f4efe4",
              borderRadius: 12,
              color: "#11213b",
              fontSize: 14,
              lineHeight: 1.55,
              padding: 14,
            }}
          >
            Hola, somos Hernández &amp; Asociados. Cuéntenos su necesidad legal y con
            gusto le orientaremos a la brevedad.
          </div>

          <a
            href={`https://wa.me/573022943899?text=${message}`}
            target="_blank"
            rel="noreferrer"
            style={{
              marginTop: 12,
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              gap: 10,
              padding: "13px 18px",
              background: "#25D366",
              color: "#ffffff",
              borderRadius: 12,
              fontSize: 13.5,
              fontWeight: 700,
              letterSpacing: ".02em",
              boxShadow: "0 12px 28px -12px rgba(37,211,102,.55)",
            }}
          >
            <svg viewBox="0 0 32 32" width="16" height="16" aria-hidden="true">
              <path
                fill="currentColor"
                d="M19.11 17.21c-.29-.14-1.69-.83-1.95-.92-.26-.1-.45-.14-.64.14-.19.29-.73.92-.9 1.11-.16.19-.33.21-.62.07-.29-.14-1.21-.44-2.31-1.39-.85-.76-1.43-1.7-1.6-1.99-.16-.29-.02-.45.12-.59.12-.12.29-.33.43-.5.14-.17.19-.29.29-.48.09-.19.05-.36-.02-.5-.07-.14-.64-1.55-.88-2.12-.23-.55-.47-.48-.64-.49h-.55c-.19 0-.5.07-.76.36-.26.29-1 1-.99 2.43 0 1.43 1.04 2.82 1.19 3.01.14.19 2.04 3.12 4.94 4.37.69.29 1.22.46 1.64.58.69.22 1.31.19 1.8.12.55-.08 1.69-.69 1.93-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.55-.33Z"
              />
              <path
                fill="currentColor"
                d="M16.15 3.2c-6.98 0-12.64 5.66-12.64 12.64 0 2.23.58 4.41 1.69 6.32L3.2 28.8l6.8-1.96a12.58 12.58 0 0 0 6.14 1.58h.01c6.97 0 12.65-5.66 12.65-12.64 0-3.38-1.31-6.56-3.7-8.95A12.56 12.56 0 0 0 16.15 3.2Zm0 22.98h-.01a10.4 10.4 0 0 1-5.3-1.45l-.38-.22-4.03 1.16 1.17-3.93-.24-.4a10.44 10.44 0 0 1-1.6-5.54c0-5.77 4.69-10.46 10.47-10.46 2.79 0 5.41 1.09 7.39 3.06a10.38 10.38 0 0 1 3.07 7.4c0 5.77-4.7 10.46-10.47 10.46Z"
              />
            </svg>
            Iniciar conversación
          </a>
        </div>
      ) : null}

      <button
        type="button"
        aria-label={open ? "Cerrar WhatsApp" : "Abrir WhatsApp"}
        onClick={function togglePanel() {
          setOpen(function nextOpen(previous) {
            return !previous;
          });
        }}
        style={{
          width: isDesktop ? 60 : 54,
          height: isDesktop ? 60 : 54,
          borderRadius: "50%",
          border: 0,
          background: "#25D366",
          color: "#ffffff",
          display: "grid",
          placeItems: "center",
          boxShadow: "0 16px 32px rgba(17,33,59,.18)",
          cursor: "pointer",
          transition: "transform .25s ease, box-shadow .25s ease, background-color .25s ease",
        }}
        onMouseOver={function handleOver(event) {
          event.currentTarget.style.transform = "translateY(-2px)";
          event.currentTarget.style.boxShadow = "0 20px 40px rgba(17,33,59,.22)";
          event.currentTarget.style.background = "#22c55e";
        }}
        onMouseOut={function handleOut(event) {
          event.currentTarget.style.transform = "none";
          event.currentTarget.style.boxShadow = "0 16px 32px rgba(17,33,59,.18)";
          event.currentTarget.style.background = "#25D366";
        }}
      >
        <svg viewBox="0 0 32 32" width="28" height="28" aria-hidden="true">
          <path
            fill="currentColor"
            d="M19.11 17.21c-.29-.14-1.69-.83-1.95-.92-.26-.1-.45-.14-.64.14-.19.29-.73.92-.9 1.11-.16.19-.33.21-.62.07-.29-.14-1.21-.44-2.31-1.39-.85-.76-1.43-1.7-1.6-1.99-.16-.29-.02-.45.12-.59.12-.12.29-.33.43-.5.14-.17.19-.29.29-.48.09-.19.05-.36-.02-.5-.07-.14-.64-1.55-.88-2.12-.23-.55-.47-.48-.64-.49h-.55c-.19 0-.5.07-.76.36-.26.29-1 1-.99 2.43 0 1.43 1.04 2.82 1.19 3.01.14.19 2.04 3.12 4.94 4.37.69.29 1.22.46 1.64.58.69.22 1.31.19 1.8.12.55-.08 1.69-.69 1.93-1.36.24-.67.24-1.24.17-1.36-.07-.12-.26-.19-.55-.33Z"
          />
          <path
            fill="currentColor"
            d="M16.15 3.2c-6.98 0-12.64 5.66-12.64 12.64 0 2.23.58 4.41 1.69 6.32L3.2 28.8l6.8-1.96a12.58 12.58 0 0 0 6.14 1.58h.01c6.97 0 12.65-5.66 12.65-12.64 0-3.38-1.31-6.56-3.7-8.95A12.56 12.56 0 0 0 16.15 3.2Zm0 22.98h-.01a10.4 10.4 0 0 1-5.3-1.45l-.38-.22-4.03 1.16 1.17-3.93-.24-.4a10.44 10.44 0 0 1-1.6-5.54c0-5.77 4.69-10.46 10.47-10.46 2.79 0 5.41 1.09 7.39 3.06a10.38 10.38 0 0 1 3.07 7.4c0 5.77-4.7 10.46-10.47 10.46Z"
          />
        </svg>
      </button>
    </div>
  );
};
