// 新文明团队官网 · 主应用入口
// 单页应用 + Hash 路由

const { useState, useEffect } = React;

function App() {
  const [currentPage, setCurrentPage] = useState("home");

  // 从 hash 读取初始路由
  useEffect(() => {
    const hash = window.location.hash.replace("#", "") || "home";
    setCurrentPage(hash);
  }, []);

  // 页面切换时更新 hash 并滚动到顶部
  const navigate = (page) => {
    setCurrentPage(page);
    window.location.hash = page;
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  // 监听 hash 变化
  useEffect(() => {
    const handleHashChange = () => {
      const hash = window.location.hash.replace("#", "") || "home";
      setCurrentPage(hash);
      window.scrollTo({ top: 0 });
    };
    window.addEventListener("hashchange", handleHashChange);
    return () => window.removeEventListener("hashchange", handleHashChange);
  }, []);

  // 渲染当前页面
  const renderPage = () => {
    switch (currentPage) {
      case "home":
        return <HomePage onNavigate={navigate} />;
      case "about":
        return <AboutPage onNavigate={navigate} />;
      case "history":
        return <HistoryPage onNavigate={navigate} />;
      case "mission":
        return <MissionPage onNavigate={navigate} />;
      case "projects":
        return <ProjectsPage onNavigate={navigate} />;
      case "members":
        return <MembersPage onNavigate={navigate} />;
      case "cangjie":
        return <CangjieTool onNavigate={navigate} />;
      case "entanglement":
        return <EntanglementTool onNavigate={navigate} />;
      case "semantic":
        return <SemanticTool onNavigate={navigate} />;
      case "soundform":
        return <SoundformTool onNavigate={navigate} />;
      case "apply":
        return <ApplyPage onNavigate={navigate} />;
      case "records":
        return <RecordsPage onNavigate={navigate} />;
      case "ode":
        return <OdePage onNavigate={navigate} />;
      default:
        return <HomePage onNavigate={navigate} />;
    }
  };

  return (
    <div style={{ display: "flex", flexDirection: "column", minHeight: "100vh" }}>
      <NavBar currentPage={currentPage} onNavigate={navigate} />
      <main className="main-wrap" style={{ flex: "1", width: "100%" }}>
        {renderPage()}
      </main>
      <Footer />
    </div>
  );
}

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