// ============================================================
// FLOATING ASSISTANTS — WhatsApp bot + Asistente virtual
// Two character-based chat buttons in the corner
// ============================================================

function FloatingAssistants() {
  const [open, setOpen] = React.useState(false);

  const voxi = CHARACTERS.find(c => c.id === "voxi");
  const gatito = CHARACTERS.find(c => c.id === "gatito-te-amo");

  const whatsappLink = "https://wa.me/525532009853?text=" + encodeURIComponent(
    "Hola Cristina, vengo del sitio Gatito Te Amo. Quiero información."
  );
  const assistantLink = "https://wa.me/525532009853?text=" + encodeURIComponent(
    "Hola, quiero hablar con el asistente virtual de Gatito Te Amo."
  );

  return (
    <div className={"fab" + (open ? " is-open" : "")}>
      <div className="fab-buttons">
        <a
          href={assistantLink}
          target="_blank"
          rel="noopener"
          className="fab-btn fab-btn-assistant"
          aria-label="Hablar con el asistente virtual"
          style={{ "--fc": gatito.color }}
          onClick={() => setOpen(false)}
        >
          <span className="fab-avatar">
            <img src={gatito.img} alt={gatito.name} draggable="false" />
            <span className="fab-status" />
          </span>
          <span className="fab-text">
            <small>Asistente virtual</small>
            <b>Gatito Te Amo</b>
          </span>
          <span className="fab-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none">
              <path d="M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2h-7l-4 4v-4H6a2 2 0 0 1-2-2V5Z" fill="currentColor"/>
            </svg>
          </span>
        </a>

        <a
          href={whatsappLink}
          target="_blank"
          rel="noopener"
          className="fab-btn fab-btn-whatsapp"
          aria-label="Hablar por WhatsApp con Voxi"
          style={{ "--fc": "#25D366" }}
          onClick={() => setOpen(false)}
        >
          <span className="fab-avatar">
            <img src={voxi.img} alt={voxi.name} draggable="false" />
            <span className="fab-status" />
          </span>
          <span className="fab-text">
            <small>WhatsApp</small>
            <b>Voxi · habla con Cristina</b>
          </span>
          <span className="fab-icon" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="currentColor">
              <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.93.55 3.74 1.5 5.27L2 22l4.96-1.3a9.86 9.86 0 0 0 5.08 1.39h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.13-2.91-7.01A9.83 9.83 0 0 0 12.04 2Zm5.83 14.05c-.25.7-1.44 1.34-2 1.42-.51.08-1.17.11-1.88-.12-.43-.14-.99-.32-1.7-.63-2.99-1.29-4.93-4.3-5.08-4.5-.15-.2-1.22-1.62-1.22-3.09s.77-2.19 1.04-2.5c.27-.3.59-.38.79-.38.2 0 .39 0 .57.01.18.01.43-.07.67.51.25.6.85 2.07.92 2.22.07.15.12.32.02.52-.1.2-.15.32-.3.49-.15.18-.32.39-.45.53-.15.15-.31.31-.13.6.18.3.79 1.31 1.7 2.12 1.17 1.04 2.16 1.36 2.46 1.51.3.15.47.13.65-.08.18-.2.74-.87.94-1.16.2-.3.4-.25.67-.15.27.1 1.73.81 2.02.96.3.15.49.22.57.35.07.13.07.75-.18 1.45Z"/>
            </svg>
          </span>
        </a>
      </div>

      <button
        type="button"
        className="fab-toggle"
        onClick={() => setOpen(o => !o)}
        aria-label={open ? "Cerrar opciones de contacto" : "Hablar con un gatito"}
        aria-expanded={open}
      >
        <span className="fab-toggle-icon">
          {open ? (
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round">
              <path d="M6 6l12 12M18 6 6 18" />
            </svg>
          ) : (
            <span className="fab-toggle-faces">
              <img src={gatito.img} alt="" draggable="false" />
              <img src={voxi.img} alt="" draggable="false" />
            </span>
          )}
        </span>
        {!open && <span className="fab-toggle-pulse" aria-hidden="true" />}
        {!open && <span className="fab-toggle-label">Hablemos</span>}
      </button>
    </div>
  );
}

window.FloatingAssistants = FloatingAssistants;