{sessions.find(s => s.id === activeId)?.title || t.new_chat} {activeModel.size}

{isPro ? ( PRO {t.unlimited} ) : ( <> {promptCount} / {FREE_LIMIT} {t.prompts}

)}

{isEmpty && (

{t.welcome_title}

{isGuest ? t.guest_welcome : t.welcome_sub}

{SUGGESTIONS.map((s, i) => ( ))}

)} {messages.map((m, i) => (

{m.role === "user" ? userInitials : }

{m.role === "user" ? t.you : "Xera AI"}

{renderMarkdown(m.content)}

))} {streaming && (

Xera AI

{streamBuf ? renderMarkdown(streamBuf) : null}

)}

setInput(e.target.value)}
                onKeyDown={onKey}
                placeholder={t.placeholder}
                disabled={streaming}
              />
              <button
                type="button"
                className={"send-btn" + (input.trim() && !streaming ? " active" : "")}
                onClick={() => send()}
                disabled={!input.trim() || streaming}
                aria-label="Senden"
              >
                <Icon.Send />
              </button>
            </div>
            <p className="disclaimer">
              <Icon.Lock />  {t.disclaimer_local} <span className="dot">•</span> {t.disclaimer_text}
            </p>
          </div>

{showLimit && (
            <div className="limit-overlay" onClick={(e) => { if (e.target === e.currentTarget) setShowLimit(false); }}>
              <div className="limit-card">
                <button className="close-x" onClick={() => setShowLimit(false)} type="button" aria-label="Close">
                  <Icon.Close />
                </button>
                <div className="limit-icon"><Icon.Sparkle /></div>
                <h3>{t.limit_title}</h3>
                <p>{t.limit_body_1}</p>
                {isGuest ? (
                  <>
                    <p>{t.limit_body_guest}</p>
                    <a href="/auth/login" className="discord-btn">
                      <Icon.Discord />
                      {t.discord_login}
                    </a>
                  </>
                ) : (
                  <>
                    <p>{t.limit_body_2}</p>
                    <a href="https://discord.gg/YOUR_INVITE_LINK" className="discord-btn" target="_blank" rel="noopener">
                      <Icon.Discord />
                      {t.join_discord}
                    </a>
                  </>
                )}
              </div>
            </div>
          )}
        </main>
      </div>
    </div>
  );
}

/* ----------------------------------------------------------
   App root — router
   ---------------------------------------------------------- */

function App() {
  const { path, navigate } = useRouter();
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [settingsOpen, setSettingsOpen] = useState(false);

useEffect(() => {
    fetch("/api/me").then(r => r.json()).then(data => {
      setUser(data);
      setConfig(c => ({ ...c, isPro: data.is_pro || data.is_admin }));
      setLoading(false);
    }).catch(() => {
      setUser(null);
      setLoading(false);
    });
  }, []);

useEffect(() => {
    document.documentElement.setAttribute("data-theme", config.theme);
    document.documentElement.style.setProperty("--accent-h", config.accentHue);
    const { isPro, ...toSave } = config;
    localStorage.setItem("xera-config", JSON.stringify(toSave));
  }, [config]);

useEffect(() => {
    if (!settingsOpen) return;
    const onKey = (e) => { if (e.key === "Escape") setSettingsOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [settingsOpen]);

const setTheme = (mode) => setConfig(c => ({ ...c, theme: mode }));
  const openSettings = () => setSettingsOpen(true);
  const closeSettings = () => setSettingsOpen(false);
  const t = STRINGS[config.language] || STRINGS.de;

if (loading) return null;

// If logged in and on / or /login → redirect to /c
  if (user && !user.is_guest && (path === "/" || path === "/login")) {
    navigate("/c");
  }

let page;
  if (path === "/") {
    page = <LandingPage navigate={navigate} theme={config.theme} setTheme={setTheme} openSettings={openSettings} t={t} />;
  } else if (path === "/login") {
    page = <LoginPage navigate={navigate} theme={config.theme} setTheme={setTheme} openSettings={openSettings} t={t} />;
  } else if (path === "/c" || path.startsWith("/c/")) {
    const guestUser = user || { id: "guest", username: "Guest", is_guest: true, is_pro: false, is_admin: false, prompt_count: 0, limit: 5 };
    page = <ChatPage user={guestUser} setUser={setUser} navigate={navigate} theme={config.theme} setTheme={setTheme} openSettings={openSettings} config={config} setConfig={setConfig} t={t} />;
  } else {
    page = <LandingPage navigate={navigate} theme={config.theme} setTheme={setTheme} openSettings={openSettings} t={t} />;
  }

return (
    <>
      {page}
      <SettingsModal open={settingsOpen} onClose={closeSettings} config={config} setConfig={setConfig} user={user} t={t} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

{tabs.find(x => x.id === tab)?.label}

{t.landing_demo_title}

{t.landing_hero}

{t.landing_feat1_title}

{t.landing_feat2_title}

{t.landing_feat3_title}

{t.landing_about_title} Miguel Rodriguez

{t.welcome_title}