/* ModalInstalarIOS → window. Bottom sheet que explica al user cómo
   instalar la PWA en iOS Safari (donde beforeinstallprompt no existe).

   Props:
     abierto: boolean.
     onClose: () => void.
*/
(function () {
  const { useEffect } = React;

  function IconShare() {
    return (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path d="M12 3v12" stroke="#2563EB" strokeWidth="2" strokeLinecap="round"/>
        <path d="M8 7l4-4 4 4" stroke="#2563EB" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
        <rect x="5" y="10" width="14" height="11" rx="2" stroke="#2563EB" strokeWidth="2"/>
      </svg>
    );
  }
  function IconPlus() {
    return (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <rect x="3" y="3" width="18" height="18" rx="4" stroke="#2563EB" strokeWidth="2"/>
        <path d="M12 8v8M8 12h8" stroke="#2563EB" strokeWidth="2" strokeLinecap="round"/>
      </svg>
    );
  }
  function IconCheck() {
    return (
      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <circle cx="12" cy="12" r="9" stroke="#2563EB" strokeWidth="2"/>
        <path d="M8 12l3 3 5-6" stroke="#2563EB" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    );
  }

  function Step({ Icon, numero, titulo, detalle }) {
    return (
      <div style={{ display: "flex", alignItems: "flex-start", gap: 14, padding: "12px 4px" }}>
        <div style={{
          width: 48, height: 48, borderRadius: 14,
          background: "#DCE7F7",
          display: "flex", alignItems: "center", justifyContent: "center",
          flexShrink: 0,
        }} aria-hidden="true">
          <Icon />
        </div>
        <div style={{ flex: 1, minWidth: 0, paddingTop: 2 }}>
          <div style={{
            fontSize: 11, fontWeight: 900,
            letterSpacing: "0.15em", textTransform: "uppercase",
            color: "#9CA3AF",
            marginBottom: 2,
          }}>
            Paso {numero}
          </div>
          <div style={{
            fontSize: 15, fontWeight: 900,
            color: "#3C3C3C",
            lineHeight: 1.35,
          }}>
            {titulo}
          </div>
          {detalle && (
            <div style={{
              fontSize: 12, fontWeight: 500,
              color: "#777",
              marginTop: 4, lineHeight: 1.5,
            }}>
              {detalle}
            </div>
          )}
        </div>
      </div>
    );
  }

  function ModalInstalarIOS({ abierto, onClose }) {
    useEffect(() => {
      if (!abierto) return;
      const onKey = (e) => { if (e.key === "Escape") onClose && onClose(); };
      document.addEventListener("keydown", onKey);
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => {
        document.removeEventListener("keydown", onKey);
        document.body.style.overflow = prev;
      };
    }, [abierto, onClose]);

    const dark = typeof document !== "undefined" &&
      document.querySelector(".app-frame")?.classList.contains("dark");

    const content = (
      <div aria-hidden={!abierto}>
        <div
          onClick={onClose}
          style={{
            position: "fixed", inset: 0,
            background: "rgba(0,0,0,0.45)",
            zIndex: 80,
            opacity: abierto ? 1 : 0,
            pointerEvents: abierto ? "auto" : "none",
            transition: "opacity 150ms ease",
          }}
        />
        <div
          role="dialog"
          aria-modal="true"
          aria-label="Instalar CultoRD en iOS"
          style={{
            position: "fixed",
            bottom: 0, left: "50%",
            width: "100%", maxWidth: 430,
            transform: abierto ? "translate(-50%, 0)" : "translate(-50%, 100%)",
            transition: "transform 260ms cubic-bezier(0.2, 0.9, 0.3, 1)",
            zIndex: 81,
            background: dark ? "#1A1A1A" : "#FFFFFF",
            color: dark ? "#F0F0F0" : "#3C3C3C",
            borderTopLeftRadius: 24,
            borderTopRightRadius: 24,
            boxShadow: "0 -8px 40px rgba(0,0,0,0.18)",
            padding: "14px 20px calc(24px + env(safe-area-inset-bottom, 0px))",
          }}
        >
          <div style={{
            width: 40, height: 4, borderRadius: 999,
            background: dark ? "#3A3A3A" : "#E5E7EB",
            margin: "0 auto 14px",
          }} aria-hidden="true" />

          <h3 style={{
            margin: "0 0 4px",
            fontSize: 19, fontWeight: 900,
            color: dark ? "#F0F0F0" : "#111827",
          }}>
            Instalar CultoRD en iOS
          </h3>
          <p style={{
            margin: "0 0 14px",
            fontSize: 13, fontWeight: 500,
            color: dark ? "#9CA3AF" : "#6B7280",
            lineHeight: 1.5,
          }}>
            En Safari, sigue estos pasos para agregarla a tu pantalla de inicio.
          </p>

          <div style={{
            borderRadius: 14,
            background: dark ? "#0F0F10" : "#F9FAFB",
            padding: 4,
          }}>
            <Step
              Icon={IconShare}
              numero={1}
              titulo="Tap el botón Compartir"
              detalle="En la barra inferior de Safari, el cuadrado con flecha hacia arriba."
            />
            <Step
              Icon={IconPlus}
              numero={2}
              titulo="Desliza y tap “Añadir a pantalla de inicio”"
              detalle="Aparece entre las opciones del menú de Compartir."
            />
            <Step
              Icon={IconCheck}
              numero={3}
              titulo="Tap “Añadir” en la esquina"
              detalle="Listo — el icono de CultoRD queda en tu pantalla de inicio."
            />
          </div>

          <button
            type="button"
            onClick={onClose}
            style={{
              marginTop: 16,
              width: "100%",
              padding: "12px 16px",
              borderRadius: 999,
              border: "none",
              background: "#2563EB",
              color: "#FFFFFF",
              fontWeight: 900,
              fontSize: 14,
              cursor: "pointer",
              fontFamily: "inherit",
              letterSpacing: 0.2,
            }}
          >
            Entendido
          </button>
        </div>
      </div>
    );

    if (typeof document === "undefined") return null;
    return ReactDOM.createPortal(content, document.body);
  }

  window.ModalInstalarIOS = ModalInstalarIOS;
})();