// web-app.jsx — shell: auth + routing + live clock + theme
function WebApp() {
  const { useState, useEffect } = React;
  const [user, setUser] = useState(() => MA.loadSession());
  const [now, setNow] = useState(new Date());
  const [dark, setDark] = useState(() => localStorage.getItem('motoart_dark') === '1');

  useEffect(() => { const id = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(id); }, []);

  const theme = dark ? 'dark' : 'light';
  const toggleTheme = () => setDark(d => { localStorage.setItem('motoart_dark', d ? '0' : '1'); return !d; });
  const logout = () => { MA.clearSession(); setUser(null); };

  return (
    <div className="app" data-theme={theme}>
      {!user
        ? <Login onLogin={setUser} />
        : user.role === 'pemilik'
          ? <WebOwner user={user} onLogout={logout} />
          : <WebEmployee user={user} now={now} onLogout={logout} theme={theme} onToggleTheme={toggleTheme} />}
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<WebApp />);