/* InstallCard → window. (Definido pero actualmente no renderizado en ninguna pantalla.) */
(function () {
  const { useState, useEffect } = React;

  function InstallCard() {
    const [deferred, setDeferred] = useState(null);
    const [installed, setInstalled] = useState(false);
    const [showIOS, setShowIOS] = useState(false);

    useEffect(() => {
      const standalone =
        window.matchMedia("(display-mode: standalone)").matches ||
        window.navigator.standalone === true;
      if (standalone) { setInstalled(true); return; }

      const onBIP = (e) => { e.preventDefault(); setDeferred(e); };
      const onInstalled = () => { setInstalled(true); setDeferred(null); };
      window.addEventListener("beforeinstallprompt", onBIP);
      window.addEventListener("appinstalled", onInstalled);

      const ua = navigator.userAgent || "";
      const isIOS = /iPad|iPhone|iPod/.test(ua) && !window.MSStream;
      if (isIOS) setShowIOS(true);

      return () => {
        window.removeEventListener("beforeinstallprompt", onBIP);
        window.removeEventListener("appinstalled", onInstalled);
      };
    }, []);

    const handleInstall = async () => {
      if (!deferred) return;
      deferred.prompt();
      const { outcome } = await deferred.userChoice;
      if (outcome === "accepted") setInstalled(true);
      setDeferred(null);
    };

    if (installed) return null;

    return (
      <div className="w-full card-soft mt-4 p-5">
        <div className="flex items-center gap-3 mb-2">
          <div className="w-10 h-10 rounded-xl bg-[#DFFBC2] flex items-center justify-center text-xl">📲</div>
          <div>
            <div className="font-black text-[#3C3C3C]">Instalar en tu dispositivo</div>
            <div className="text-xs font-semibold text-[#777]">Úsala como una app nativa, sin barra del navegador</div>
          </div>
        </div>

        {deferred && (
          <button onClick={handleInstall}
                  className="btn-3d btn-green w-full h-12 mt-3 rounded-full text-white font-black uppercase tracking-wide">
            Instalar app
          </button>
        )}

        {!deferred && showIOS && (
          <p className="text-sm text-[#3C3C3C] font-semibold mt-2 leading-snug">
            En Safari: toca el botón <span className="font-black">Compartir</span> ⬆ y luego
            <span className="font-black"> Agregar a pantalla de inicio</span>.
          </p>
        )}

        {!deferred && !showIOS && (
          <p className="text-sm text-[#3C3C3C] font-semibold mt-2 leading-snug">
            En Chrome/Edge: abre el menú ⋮ y toca <span className="font-black">Instalar aplicación</span> o <span className="font-black">Agregar a pantalla de inicio</span>.
          </p>
        )}
      </div>
    );
  }

  window.InstallCard = InstallCard;
})();