// FloatingContactDock — el ÚNICO componente flotante de contacto.
// ---------------------------------------------------------------------------
// Consolidación ronda 2 (may-2026): la página tenía 5 entradas dispersas al
// mismo objetivo (pill WhatsApp en nav, "Urgencia penal contacto inmediato"
// en hero, card "¿Tienes una consulta?" auto-pop, pill flotante "Urgencia
// penal", botón "Agendar consulta" disperso). Todo se colapsa acá en dos
// botones, cada uno con su nivel de urgencia explícito.
//
// Diseño:
//   · Bottom-right, fixed. Siempre visible.
//   · Dos botones apilados verticalmente, con label visible (no solo ícono):
//
//       ┌─────────────────────────────┐
//       │ 🛈  Urgencia penal      24/7│   <- accent fill (azul petróleo)
//       └─────────────────────────────┘
//       ┌─────────────────────────────┐
//       │ 💬  WhatsApp                │   <- neutro: bg-base + line border
//       └─────────────────────────────┘
//
//   · Urgencia arriba (jerarquía visual: acción crítica más distintiva).
//     WhatsApp abajo (más cerca del pulgar para el uso frecuente).
//   · Touch targets ≥ 44×44 (padding vertical 14px + altura mínima 48px).
//   · safe-area-inset-bottom para iPhones con notch.
//   · Sin verde de marca WhatsApp (CLAUDE.md: nada chillón).
//   · Sin auto-popup card (la card "¿Tienes una consulta?" de la versión
//     anterior se eliminó porque duplicaba el botón visible).
//   · Fade-in suave al cargar; pointer-events off hasta que el fade termina.

const WA_HREF = "https://wa.me/56940906268";
const WA_URGENCIA_HREF = "https://wa.me/56940906268?text=URGENTE";

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

  React.useEffect(() => {
    const id = requestAnimationFrame(() => setVisible(true));
    return () => cancelAnimationFrame(id);
  }, []);

  // Estilo compartido base de cada botón del dock.
  const baseBtn = {
    display: "inline-flex",
    alignItems: "center",
    gap: 10,
    minHeight: 48,
    padding: "12px 16px",
    borderRadius: 999,
    fontFamily: "var(--font-ui)",
    fontSize: 14,
    fontWeight: 500,
    textDecoration: "none",
    letterSpacing: "0.01em",
    transition:
      "background 220ms var(--ease-std), color 220ms var(--ease-std), border-color 220ms var(--ease-std)",
    boxShadow: "0 1px 0 var(--line), 0 6px 16px rgba(26,20,20,0.06)",
    // Cinturón de touch target — incluso si el padding de algún SVG colapsa,
    // 48px de minHeight + 44px de minWidth nunca caen bajo el target.
    minWidth: 44,
  };

  return (
    <div
      className="rt-fcd"
      aria-label="Canales de contacto"
      style={{
        position: "fixed",
        right: 20,
        // Apoya en safe-area inferior (notch / barra inferior iOS) pero
        // garantiza al menos 20px de respiro al borde físico.
        bottom: "max(20px, env(safe-area-inset-bottom, 0px))",
        zIndex: 60,
        display: "flex",
        flexDirection: "column",
        gap: 10,
        alignItems: "flex-end",
        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)",
      }}
    >
      {/* Urgencia penal — acción crítica, accent fill, badge 24/7. */}
      <a
        href={WA_URGENCIA_HREF}
        aria-label="Urgencia penal — contacto inmediato por WhatsApp, atención 24 horas"
        className="rt-fcd-urgencia"
        style={{
          ...baseBtn,
          background: "var(--accent)",
          color: "var(--ink-inverse)",
          border: "1px solid var(--accent)",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = "var(--accent-deep)";
          e.currentTarget.style.borderColor = "var(--accent-deep)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = "var(--accent)";
          e.currentTarget.style.borderColor = "var(--accent)";
        }}
      >
        <MessageCircle width={18} height={18} />
        <span className="rt-fcd-label">Urgencia penal</span>
        <span
          aria-hidden="true"
          style={{
            display: "inline-flex",
            alignItems: "center",
            justifyContent: "center",
            padding: "2px 8px",
            background: "rgba(250, 250, 247, 0.18)",
            color: "var(--ink-inverse)",
            borderRadius: 999,
            fontFamily: "var(--font-ui)",
            fontSize: 10,
            fontWeight: 500,
            letterSpacing: "0.08em",
          }}
        >
          24/7
        </span>
      </a>

      {/* WhatsApp — consulta general, neutro. */}
      <a
        href={WA_HREF}
        aria-label="Escribir por WhatsApp — consulta general"
        className="rt-fcd-whatsapp"
        style={{
          ...baseBtn,
          background: "var(--bg-base)",
          color: "var(--ink)",
          border: "1px solid var(--line)",
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.borderColor = "var(--ink-muted)";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.borderColor = "var(--line)";
        }}
      >
        <MessageCircle width={18} height={18} />
        <span className="rt-fcd-label">WhatsApp</span>
      </a>

      {/* En viewports muy estrechos (≤360px), colapsa labels a ícono solo,
          conservando aria-label completo. Mantiene el dock compacto sin
          tapar contenido del hero. */}
      <style>{`
        @media (max-width: 360px) {
          .rt-fcd-label { display: none; }
          .rt-fcd { gap: 8px; }
        }
      `}</style>
    </div>
  );
}

Object.assign(window, { FloatingContactDock });