// pages/mobile/MobileApp.jsx — mobile shell com drawer swipe-down, notificacoes e busca

const MOBILE_TABS = [
  { id: "dashboard",  label: "Início",     icon: "Home" },
  { id: "diarios",    label: "Diários",    icon: "Book" },
  { id: "cameras",    label: "Câmeras",    icon: "Cam" },
  { id: "financeiro", label: "Financeiro", icon: "Wallet" },
  { id: "more",       label: "Mais",       icon: "More" },
];

const MOBILE_MORE = [
  { id: "cronograma", label: "Cronograma",   icon: "Calendar", desc: "Fases da obra" },
  { id: "progresso",  label: "Progresso",    icon: "Chart",    desc: "Execucao por etapa" },
  { id: "notas",      label: "Notas fiscais", icon: "Receipt", desc: "Emitidas e materiais · por mês" },
  { id: "documentos", label: "Documentos",   icon: "Doc",      desc: "Contratos e projetos" },
];

// Módulo liberado pelo admin? (PORTAL_PERMISSOES vem do backend; default tudo on)
function mModuleEnabled(id) {
  const perms = window.PORTAL_PERMISSOES || {};
  return perms[id] !== false;
}
// Primeiro módulo liberado (fallback quando a página ativa foi desligada).
function mFirstEnabled() {
  const order = ["dashboard", "diarios", "cronograma", "progresso", "financeiro", "notas", "cameras", "documentos"];
  return order.find(mModuleEnabled) || "dashboard";
}

function MobileApp({ onLogout }) {
  const [active, setActive] = React.useState(() => localStorage.getItem("portal-m-page") || "dashboard");
  const [moreOpen, setMoreOpen] = React.useState(false);
  const [notifOpen, setNotifOpen] = React.useState(false);
  const [searchOpen, setSearchOpen] = React.useState(false);
  const [searchQ, setSearchQ] = React.useState("");
  const [camOverride, setCamOverride] = React.useState(null);

  // Drag state — track posicao + velocidade para UX estilo native app (iOS)
  const sheetState = React.useRef({
    moreStart: 0, moreLastY: 0, moreLastT: 0, moreVelocity: 0,
    notifStart: 0, notifLastY: 0, notifLastT: 0, notifVelocity: 0,
  });
  const [moreDrag, setMoreDrag] = React.useState(0);
  const [notifDrag, setNotifDrag] = React.useState(0);
  const [moreDragging, setMoreDragging] = React.useState(false);
  const [notifDragging, setNotifDragging] = React.useState(false);
  const [moreClosing, setMoreClosing] = React.useState(false);
  const [notifClosing, setNotifClosing] = React.useState(false);
  const [searchClosing, setSearchClosing] = React.useState(false);
  // "entered": vira true 1 frame após montar → dispara a animação de subida via
  // transform inline (substitui o CSS animation, que travava o fechar/arrastar).
  const [moreEntered, setMoreEntered] = React.useState(false);
  const [notifEntered, setNotifEntered] = React.useState(false);

  // Pull-to-refresh state
  const [ptrDistance, setPtrDistance] = React.useState(0);
  const [ptrRefreshing, setPtrRefreshing] = React.useState(false);

  React.useEffect(() => localStorage.setItem("portal-m-page", active), [active]);

  // Bloqueia scroll da pagina enquanto sheet/busca estao abertos
  React.useEffect(() => {
    const locked = moreOpen || notifOpen || searchOpen;
    if (locked) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [moreOpen, notifOpen, searchOpen]);

  const go = (id) => {
    if (id === "more") { openMore(); return; }
    setActive(id);
    closeMore();
  };

  // ---------- Animacoes de abrir/fechar sheets ----------
  // Abertura: monta em translateY(100%) (entered=false) e, no frame seguinte,
  // entered=true dispara a subida. Fechamento: closing=true desce e desmonta
  // só depois da transição (330ms) — assim a descida é animada de verdade.
  const SHEET_CLOSE_MS = 330;
  const openMore = () => { if (moreOpen) return; setMoreClosing(false); setMoreEntered(false); setMoreOpen(true); setMoreDrag(0); };
  const closeMore = () => {
    if (!moreOpen || moreClosing) return;
    setMoreClosing(true);
    setTimeout(() => { setMoreOpen(false); setMoreClosing(false); setMoreEntered(false); setMoreDrag(0); }, SHEET_CLOSE_MS);
  };
  const openNotif = () => { if (notifOpen) return; setNotifClosing(false); setNotifEntered(false); setNotifOpen(true); setNotifDrag(0); };
  const closeNotif = () => {
    if (!notifOpen || notifClosing) return;
    setNotifClosing(true);
    setTimeout(() => { setNotifOpen(false); setNotifClosing(false); setNotifEntered(false); setNotifDrag(0); }, SHEET_CLOSE_MS);
  };

  // Dispara a subida 1 frame após montar (precisa do frame inicial em 100% pra
  // a transição ter um ponto de partida). Double-rAF p/ robustez entre browsers.
  React.useEffect(() => {
    if (!moreOpen || moreClosing) return;
    let r2; const r1 = requestAnimationFrame(() => { r2 = requestAnimationFrame(() => setMoreEntered(true)); });
    return () => { cancelAnimationFrame(r1); if (r2) cancelAnimationFrame(r2); };
  }, [moreOpen, moreClosing]);
  React.useEffect(() => {
    if (!notifOpen || notifClosing) return;
    let r2; const r1 = requestAnimationFrame(() => { r2 = requestAnimationFrame(() => setNotifEntered(true)); });
    return () => { cancelAnimationFrame(r1); if (r2) cancelAnimationFrame(r2); };
  }, [notifOpen, notifClosing]);
  const openSearch = () => { setSearchClosing(false); setSearchOpen(true); };
  const closeSearch = () => {
    if (!searchOpen) return;
    setSearchClosing(true);
    setTimeout(() => { setSearchOpen(false); setSearchClosing(false); setSearchQ(""); }, 200);
  };

  // ---------- Swipe-down nos sheets — UX estilo iOS ----------
  // Funciona tanto com touch (mobile real) quanto com mouse (DevTools/desktop).
  // - Track velocidade (px/ms) para dismissal por flick
  // - Resistencia elastica quando arrasta pra cima (rubber-band)
  // - Backdrop opacity segue o drag
  // - Limiar de fechamento: dy > 120 OU velocidade > 0.5 px/ms
  const makeSwipeHandlers = (kind) => {
    const K = kind === "more" ? "more" : "notif";
    const setDrag = kind === "more" ? setMoreDrag : setNotifDrag;
    const setDragging = kind === "more" ? setMoreDragging : setNotifDragging;
    const close = kind === "more" ? closeMore : closeNotif;

    const startDrag = (y) => {
      const now = performance.now();
      sheetState.current[K + "Start"] = y;
      sheetState.current[K + "LastY"] = y;
      sheetState.current[K + "LastT"] = now;
      sheetState.current[K + "Velocity"] = 0;
      setDragging(true);
    };
    const moveDrag = (y) => {
      const start = sheetState.current[K + "Start"];
      if (!start) return;
      const now = performance.now();
      const prevY = sheetState.current[K + "LastY"];
      const prevT = sheetState.current[K + "LastT"];
      const dt = Math.max(1, now - prevT);
      const instV = (y - prevY) / dt;
      sheetState.current[K + "Velocity"] = sheetState.current[K + "Velocity"] * 0.7 + instV * 0.3;
      sheetState.current[K + "LastY"] = y;
      sheetState.current[K + "LastT"] = now;

      let dy = y - start;
      if (dy < 0) dy = dy * 0.25; // rubber-band
      setDrag(dy);
    };
    const endDrag = () => {
      const start = sheetState.current[K + "Start"];
      if (!start) { setDragging(false); return; }
      const dy = sheetState.current[K + "LastY"] - start;
      const v = sheetState.current[K + "Velocity"];
      sheetState.current[K + "Start"] = 0;
      setDragging(false);
      if (dy > 120 || v > 0.5) {
        close();
      } else {
        setDrag(0);
      }
    };

    // Mouse handlers: quando comeca drag, registra listeners no document
    // para capturar mouse que sai do elemento. preventDefault nos moves
    // para impedir seleção de texto e scroll da pagina atras.
    const onMouseDown = (e) => {
      e.preventDefault();
      e.stopPropagation();
      startDrag(e.clientY);
      const onMove = (ev) => {
        ev.preventDefault();
        moveDrag(ev.clientY);
      };
      const onUp = (ev) => {
        endDrag();
        document.removeEventListener("mousemove", onMove);
        document.removeEventListener("mouseup", onUp);
      };
      document.addEventListener("mousemove", onMove);
      document.addEventListener("mouseup", onUp);
    };

    return {
      onTouchStart: (e) => {
        e.stopPropagation();
        startDrag(e.touches[0].clientY);
      },
      onTouchMove: (e) => {
        // Impede o scroll da pagina atras quando esta arrastando pra baixo
        if (e.cancelable) e.preventDefault();
        moveDrag(e.touches[0].clientY);
      },
      onTouchEnd: () => endDrag(),
      onTouchCancel: () => {
        sheetState.current[K + "Start"] = 0;
        setDragging(false);
        setDrag(0);
      },
      onMouseDown,
    };
  };

  // ---------- Pull-to-refresh ----------
  const scrollRef = React.useRef(null);
  const touch = React.useRef({ startY: 0, active: false });
  React.useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const onStart = (e) => {
      if (active !== "dashboard") return;
      if (window.scrollY > 2) return;
      touch.current.startY = e.touches[0].clientY;
      touch.current.active = true;
    };
    const onMove = (e) => {
      if (!touch.current.active) return;
      const dy = e.touches[0].clientY - touch.current.startY;
      if (dy > 0 && window.scrollY <= 0) {
        setPtrDistance(Math.min(dy * 0.5, 80));
      }
    };
    const onEnd = () => {
      if (!touch.current.active) return;
      touch.current.active = false;
      if (ptrDistance > 50) {
        setPtrRefreshing(true);
        setPtrDistance(60);
        setTimeout(() => {
          setPtrRefreshing(false);
          setPtrDistance(0);
        }, 700);
      } else {
        setPtrDistance(0);
      }
    };
    el.addEventListener("touchstart", onStart, { passive: true });
    el.addEventListener("touchmove", onMove, { passive: true });
    el.addEventListener("touchend", onEnd);
    return () => {
      el.removeEventListener("touchstart", onStart);
      el.removeEventListener("touchmove", onMove);
      el.removeEventListener("touchend", onEnd);
    };
  }, [active, ptrDistance]);

  // ---------- Search ----------
  const searchResults = React.useMemo(() => {
    const q = searchQ.trim().toLowerCase();
    if (!q || q.length < 2) return [];
    const out = [];
    for (const d of DIARIES) {
      const hay = [d.id, d.date, d.statusLabel, (d.activities || []).join(" ")].join(" ").toLowerCase();
      if (hay.includes(q)) out.push({ type: "diario", label: d.id + " · " + fmtDateShort(d.date), sub: (d.activities[0] || "").slice(0, 80), target: "diarios" });
      if (out.length >= 6) break;
    }
    for (const doc of (DOCS_OBRA || []).concat(DOCS_EQUIPE || [])) {
      if (out.length >= 10) break;
      if (doc.name.toLowerCase().includes(q)) out.push({ type: "doc", label: doc.name, sub: doc.category, target: "documentos" });
    }
    return out;
  }, [searchQ]);

  // ---------- Notificacoes ----------
  const notifications = React.useMemo(() => {
    const out = [];
    for (const m of (MILESTONES || []).slice(0, 3)) {
      out.push({
        title: m.label,
        body: m.fin ? "Compromisso financeiro em " + m.days + " dias" : "Marco em " + m.days + " dias",
        date: m.date,
        target: m.fin ? "financeiro" : "cronograma",
        kind: m.fin ? "fin" : "marco",
      });
    }
    if (DIARIES[0]) {
      const d = DIARIES[0];
      out.push({
        title: "Novo diario de obra",
        body: (d.activities[0] || d.statusLabel).slice(0, 100),
        date: d.date,
        target: "diarios",
        kind: "diario",
      });
    }
    const nextParc = (FIN.installments || []).find((p) => p.status !== "paid");
    if (nextParc) {
      out.push({
        title: "Parcela " + nextParc.n + " em aberto",
        body: fmtBRL(nextParc.amount) + " · venc. " + fmtDate(nextParc.due),
        date: nextParc.due,
        target: "financeiro",
        kind: "parcela",
      });
    }
    return out.slice(0, 8);
  }, []);

  const pages = {
    dashboard: <MobileDashboard onNav={setActive} onOpenCam={(c) => { setCamOverride(c); setActive("cameras"); }} />,
    diarios: <MobileDiarios />,
    cameras: <MobileCameras initialCam={camOverride} onCamConsumed={() => setCamOverride(null)} />,
    financeiro: <MobileFinanceiro />,
    cronograma: <MobileCronograma />,
    progresso: <MobileProgresso />,
    notas: <MobileNotasFiscais />,
    documentos: <MobileDocumentos />,
  };

  return (
    <div className="mobile-app" ref={scrollRef} data-screen-label={active}>
      {/* Sticky header */}
      <div className="m-header">
        <div className="m-header-brand">
          <div className="brand-mark">S</div>
          <div className="m-header-titles">
            <div className="m-header-project">{PROJECT.name || "Obra"}</div>
            <div className="m-header-status"><span className="status-dot live"></span>canteiro ativo · {PROJECT.code || "—"}</div>
          </div>
        </div>
        <button
          className="m-header-action"
          onClick={openSearch}
          title="Buscar"
          aria-label="Buscar"
        >
          <I.Search size={16} />
        </button>
        <button
          className="m-header-action"
          onClick={openNotif}
          title="Notificacoes"
          aria-label="Notificacoes"
          style={{ position: "relative" }}
        >
          <I.Bell size={16} />
          {notifications.length > 0 && <span className="notif-dot" style={{ top: 7, right: 7 }}></span>}
        </button>
      </div>

      {/* Pull to refresh */}
      {(ptrDistance > 0 || ptrRefreshing) && (
        <div className={"m-ptr " + (ptrRefreshing ? "spin" : "")} style={{ height: ptrDistance }}>
          <div className="m-ptr-ring" style={{ transform: `rotate(${ptrDistance * 4}deg)` }} />
          {ptrRefreshing ? "atualizando…" : ptrDistance > 50 ? "solte para atualizar" : "puxe para atualizar"}
        </div>
      )}

      {/* Page */}
      <div
        className="m-page"
        key={active}
        style={{ transform: ptrDistance > 0 ? `translateY(${ptrDistance}px)` : undefined, transition: ptrDistance === 0 ? "transform 0.2s ease-out" : undefined }}
      >
        {(mModuleEnabled(active) && pages[active]) ? pages[active] : (pages[mFirstEnabled()] || pages.dashboard)}
      </div>

      {/* Bottom tabbar — esconde módulos desligados pelo admin (mantém "Mais") */}
      <nav className="m-tabbar">
        {MOBILE_TABS.filter(t => t.id === "more" || mModuleEnabled(t.id)).map(t => {
          const IC = I[t.icon];
          const isActive = t.id === "more" ? moreOpen : (active === t.id && !moreOpen);
          return (
            <button key={t.id} className={"m-tab " + (isActive ? "active" : "")} onClick={() => go(t.id)}>
              <IC size={21} />
              <span>{t.label}</span>
            </button>
          );
        })}
      </nav>

      {/* More sheet */}
      {moreOpen && (
        <>
          <div
            className="m-sheet-backdrop"
            onClick={closeMore}
            style={{
              opacity: (moreClosing || !moreEntered) ? 0 : Math.max(0, 1 - moreDrag / 400),
              transition: moreDragging ? "none" : "opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1)",
            }}
          />
          <div
            className="m-sheet"
            style={{
              transform: (moreClosing || !moreEntered) ? "translateY(100%)" : `translateY(${Math.max(0, moreDrag)}px)`,
              transition: moreDragging
                ? "none"
                : moreClosing
                  ? "transform 0.30s cubic-bezier(0.32, 0.72, 0, 1)"
                  : !moreEntered
                    ? "none"
                    : "transform 0.42s cubic-bezier(0.34, 1.3, 0.64, 1)",
            }}
          >
            {/* Área de grab estilo iOS: handle + cabeçalho arrastáveis pra baixo */}
            <div
              className="m-sheet-grab"
              style={{ touchAction: "none" }}
              {...makeSwipeHandlers("more")}
            >
              <div style={{ padding: "8px 0 4px", cursor: "grab" }} onClick={closeMore}>
                <div className="m-sheet-handle" />
              </div>
              <div className="m-sheet-head">
                <div className="m-sheet-title">Mais</div>
                <button
                  className="m-sheet-close"
                  onClick={closeMore}
                  onMouseDown={(e) => e.stopPropagation()}
                  onTouchStart={(e) => e.stopPropagation()}
                ><I.X size={14} /></button>
              </div>
            </div>
            <div className="m-sheet-body">
              {MOBILE_MORE.filter(item => mModuleEnabled(item.id)).map(item => {
                const IC = I[item.icon];
                return (
                  <button key={item.id} className="m-list-row" onClick={() => { setActive(item.id); closeMore(); }}>
                    <span className="icon-slot"><IC size={16} /></span>
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div style={{ fontSize: 14.5, fontWeight: 500 }}>{item.label}</div>
                      <div style={{ fontSize: 11, color: "var(--fg-4)", marginTop: 1 }}>{item.desc}</div>
                    </div>
                    <I.Chevron size={14} style={{ color: "var(--fg-5)" }} />
                  </button>
                );
              })}

              <div style={{ padding: "18px 18px 10px", fontSize: 10, color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.08em", fontWeight: 500 }}>Conta</div>
              <button className="m-list-row">
                <span className="icon-slot">
                  <div className="user-avatar" style={{ width: 22, height: 22, fontSize: 9 }}>
                    {((window.PORTAL_USER?.nome || PROJECT.sindico || "C").split(/\s+/).slice(0,2).map(p => p[0]?.toUpperCase()).join("")) || "C"}
                  </div>
                </span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 14.5, fontWeight: 500 }}>{window.PORTAL_USER?.nome || PROJECT.sindico || "Cliente"}</div>
                  <div style={{ fontSize: 11, color: "var(--fg-4)", marginTop: 1 }}>
                    {window.PORTAL_USER?.cargo || "Sindico"} · {window.PORTAL_USER?.email || "—"}
                  </div>
                </div>
              </button>
              <button className="m-list-row" onClick={onLogout}>
                <span className="icon-slot" style={{ background: "#fef2f2", color: "var(--red)" }}><I.Logout size={16} /></span>
                <span style={{ color: "var(--red)" }}>Sair</span>
              </button>
            </div>
          </div>
        </>
      )}

      {/* Notifications sheet */}
      {notifOpen && (
        <>
          <div
            className="m-sheet-backdrop"
            onClick={closeNotif}
            style={{
              opacity: (notifClosing || !notifEntered) ? 0 : Math.max(0, 1 - notifDrag / 400),
              transition: notifDragging ? "none" : "opacity 0.32s cubic-bezier(0.32, 0.72, 0, 1)",
            }}
          />
          <div
            className="m-sheet"
            style={{
              transform: (notifClosing || !notifEntered) ? "translateY(100%)" : `translateY(${Math.max(0, notifDrag)}px)`,
              transition: notifDragging
                ? "none"
                : notifClosing
                  ? "transform 0.30s cubic-bezier(0.32, 0.72, 0, 1)"
                  : !notifEntered
                    ? "none"
                    : "transform 0.42s cubic-bezier(0.34, 1.3, 0.64, 1)",
            }}
          >
            <div
              className="m-sheet-grab"
              style={{ touchAction: "none" }}
              {...makeSwipeHandlers("notif")}
            >
              <div style={{ padding: "8px 0 4px", cursor: "grab" }} onClick={closeNotif}>
                <div className="m-sheet-handle" />
              </div>
              <div className="m-sheet-head">
                <div className="m-sheet-title">Novidades</div>
                <button
                  className="m-sheet-close"
                  onClick={closeNotif}
                  onMouseDown={(e) => e.stopPropagation()}
                  onTouchStart={(e) => e.stopPropagation()}
                ><I.X size={14} /></button>
              </div>
            </div>
            <div className="m-sheet-body">
              {notifications.length === 0 ? (
                <div style={{ padding: 24, textAlign: "center", color: "var(--fg-4)", fontSize: 13 }}>
                  Nada novo por enquanto.
                </div>
              ) : notifications.map((n, i) => (
                <button
                  key={i}
                  className="m-list-row"
                  onClick={() => { setActive(n.target); closeNotif(); }}
                >
                  <span className="icon-slot" style={{
                    background: n.kind === "fin" ? "#FEF3C7" : n.kind === "parcela" ? "#FEE2E2" : "var(--bg-muted)",
                    color: n.kind === "fin" || n.kind === "parcela" ? "#b45309" : "var(--fg-3)",
                  }}>
                    {n.kind === "fin" || n.kind === "parcela" ? <I.Wallet size={16} /> : n.kind === "marco" ? <I.Calendar size={16} /> : <I.Book size={16} />}
                  </span>
                  <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
                    <div style={{ fontSize: 14, fontWeight: 500, color: "var(--fg)" }}>{n.title}</div>
                    <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{n.body}</div>
                    {n.date && <div style={{ fontSize: 10.5, color: "var(--fg-4)", marginTop: 3 }}>{fmtDate(n.date)}</div>}
                  </div>
                  <I.Chevron size={14} style={{ color: "var(--fg-5)" }} />
                </button>
              ))}
            </div>
          </div>
        </>
      )}

      {/* Search overlay (tela inteira no mobile) */}
      {searchOpen && (
        <div
          style={{
            position: "fixed", inset: 0, zIndex: 60,
            background: "#fff",
            display: "flex", flexDirection: "column",
            animation: searchClosing ? "searchOut 0.2s var(--ease-out) both" : "searchIn 0.22s var(--ease-out) both",
            paddingBottom: "env(safe-area-inset-bottom, 0px)",
          }}
        >
          <div style={{ display: "flex", gap: 10, padding: "12px 16px", borderBottom: "1px solid var(--border)", alignItems: "center" }}>
            <button
              onClick={closeSearch}
              style={{ background: "var(--bg-muted)", border: "none", width: 34, height: 34, borderRadius: "50%", display: "grid", placeItems: "center", color: "var(--fg-3)", cursor: "pointer" }}
              aria-label="Fechar"
            >
              <I.X size={14} />
            </button>
            <input
              type="text"
              autoFocus
              value={searchQ}
              onChange={(e) => setSearchQ(e.target.value)}
              placeholder="Buscar diarios, documentos, datas..."
              style={{
                flex: 1, border: "1px solid var(--border)", borderRadius: "var(--radius, 999px)",
                padding: "10px 14px", fontSize: 14, outline: "none",
                background: "#fff", color: "var(--fg)",
              }}
            />
          </div>
          <div style={{ flex: 1, overflow: "auto", padding: "8px 0" }}>
            {searchQ.trim().length < 2 ? (
              <div style={{ padding: "32px 16px", textAlign: "center", color: "var(--fg-4)", fontSize: 13 }}>
                Digite ao menos 2 caracteres para buscar.
              </div>
            ) : searchResults.length === 0 ? (
              <div style={{ padding: "32px 16px", textAlign: "center", color: "var(--fg-4)", fontSize: 13 }}>
                Nenhum resultado encontrado.
              </div>
            ) : searchResults.map((r, i) => (
              <button
                key={i}
                className="m-list-row"
                onClick={() => { setActive(r.target); closeSearch(); }}
              >
                <span className="icon-slot">
                  {r.type === "diario" ? <I.Book size={16} /> : <I.Doc size={16} />}
                </span>
                <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
                  <div style={{ fontSize: 14, fontWeight: 500, color: "var(--fg)" }}>{r.label}</div>
                  <div style={{ fontSize: 12, color: "var(--fg-3)", marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{r.sub}</div>
                </div>
                <I.Chevron size={14} style={{ color: "var(--fg-5)" }} />
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

window.MobileApp = MobileApp;