function App() {
  const [ready, setReady] = React.useState(false);

  React.useEffect(() => {
    // Polling for components and data
    const interval = setInterval(() => {
      const isReady = 
        window.useRoute && 
        window.Home && 
        window.Program && 
        window.Coaches && 
        window.CoachProfile && 
        window.History && 
        window.Partnership && 
        window.AppPage && 
        window.Contact &&
        window.Navbar &&
        window.Footer &&
        window.COACHES &&
        window.TROPHIES &&
        window.PARTNERSHIPS &&
        window.TIMELINE;

      if (isReady) {
        setReady(true);
        clearInterval(interval);
      }
    }, 50);

    // Safety timeout: render anyway after 5 seconds to avoid permanent white screen
    const timeout = setTimeout(() => {
      setReady(true);
      clearInterval(interval);
    }, 5000);

    return () => {
      clearInterval(interval);
      clearTimeout(timeout);
    };
  }, []);

  if (!ready) {
    return (
      <div style={{ 
        background: "#1A1A1A", 
        color: "#F4F0E5", 
        height: "100vh", 
        display: "flex", 
        flexDirection: "column",
        alignItems: "center", 
        justifyContent: "center", 
        fontFamily: "sans-serif" 
      }}>
        <img src="src/assets/logomerah.png" alt="" style={{ width: 64, height: 64, marginBottom: 24, animation: "pulse 2s infinite ease-in-out" }} />
        <div style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", opacity: 0.5 }}>Loading Gambit Experience...</div>
        <style>{`
          @keyframes pulse { 0% { opacity: 0.4; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.4; transform: scale(0.95); } }
        `}</style>
      </div>
    );
  }

  return <AppContent />;
}

function AppContent() {
  const route = window.useRoute ? window.useRoute() : "/";

  // Parse route
  let page;
  try {
    if (route === "/" || route === "") {
      page = <window.Home />;
    } else if (route === "/program") {
      page = <window.Program />;
    } else if (route === "/coaches") {
      page = <window.Coaches />;
    } else if (route.startsWith("/coaches/")) {
      const slug = route.replace("/coaches/", "");
      page = <window.CoachProfile slug={slug} />;
    } else if (route === "/history") {
      page = <window.History />;
    } else if (route === "/partnership") {
      page = <window.Partnership />;
    } else if (route === "/app") {
      page = <window.AppPage />;
    } else if (route === "/contact") {
      page = <window.Contact />;
    } else {
      page = (
        <main className="page-enter">
          <section className="section">
            <div className="container" style={{ paddingTop: 120 }}>
              <h1>404 - Halaman tidak ditemukan.</h1>
              <p>Halaman yang Anda cari tidak tersedia.</p>
              <a href="#/" className="btn btn-primary">Kembali ke Beranda</a>
            </div>
          </section>
        </main>
      );
    }
  } catch (err) {
    console.error("Render error:", err);
    page = (
      <div style={{ padding: 40, color: "white" }}>
        <h2>Terjadi Kesalahan Aplikasi</h2>
        <p>Mohon maaf, aplikasi mengalami kendala saat memuat halaman.</p>
        <button onClick={() => window.location.reload()}>Muat Ulang Halaman</button>
      </div>
    );
  }

  return (
    <>
      {window.Navbar && <window.Navbar route={route} />}
      {page}
      {window.Footer && <window.Footer />}
    </>
  );
}

window.App = App;

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