/* global React, ReactDOM, PhoneApp, BrandMark, Icon, useStore */
const { useState: usePB } = React;

function PhoneStandalone() {
  useStore(); // подписка на общее состояние (поручения и т.д.)
  const [theme, setTheme] = usePB("dark");
  function toggle() { const t = theme === "dark" ? "light" : "dark"; setTheme(t); document.documentElement.setAttribute("data-theme", t); }
  return (
    <div className="phone-solo">
      <div className="app-bar">
        <a className="app-bar-btn back" href="/demo" title="Назад в демо"><span className="chev">←</span>Демо</a>
        <div className="app-bar-brand"><span className="app-bar-ic"><BrandMark size={18} /></span><div><b>Сигнал</b><small>телефон руководителя</small></div></div>
        <div className="app-bar-acts">
          <a className="app-bar-btn label-hide" href="install.html"><Icon name="bell" size={15} /><span>Установить</span></a>
          <button className="app-bar-btn icon" onClick={toggle} title="Тема"><Icon name={theme === "dark" ? "sun" : "moon"} size={16} /></button>
        </div>
      </div>
      <div className="device"><div className="device-notch"></div><div className="device-screen"><PhoneApp /></div></div>
      <p className="ph-note">Демонстрационные данные торговой компании. Действия сохраняются в этом браузере.</p>
    </div>
  );
}

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("sw.js", { scope: "/app-demo/" }).catch(function (e) { console.warn("SW", e); });
}
ReactDOM.createRoot(document.getElementById("root")).render(<PhoneStandalone />);