/* ============ 63MOBIL — app shell & routing ============ */

function HomePage() {
  return (
    <>
      <Hero />
      <TrustBar />
      <FeaturedCars />
      <WhyUs />
      <Simulasi />
      <TukarTambah />
      <JualMobil />
      <Testimoni />
      <InstagramFeed />
      <Lokasi />
      <FAQ />
      <FinalCTA />
    </>
  );
}

function App() {
  const [route, setRoute] = React.useState({ view: "home", id: null });
  const [pendingSection, setPendingSection] = React.useState(null);

  React.useEffect(() => {
    window.__nav = (view, id = null) => {
      setRoute({ view, id });
      window.scrollTo({ top: 0, behavior: "auto" });
    };
    window.__goSection = (id) => {
      setRoute((r) => {
        if (r.view !== "home") { setPendingSection(id); return { view: "home", id: null }; }
        return r;
      });
      // if already home, scroll now
      requestAnimationFrame(() => {
        const el = document.getElementById(id);
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
        else setPendingSection(id);
      });
    };
  }, []);

  // after navigating home for a pending section, scroll
  React.useEffect(() => {
    if (route.view === "home" && pendingSection) {
      const t = setTimeout(() => {
        const el = document.getElementById(pendingSection);
        if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
        setPendingSection(null);
      }, 80);
      return () => clearTimeout(t);
    }
  }, [route, pendingSection]);

  return (
    <>
      <Header view={route.view} />
      <main>
        {route.view === "home" && <HomePage />}
        {route.view === "catalog" && <Catalog />}
        {route.view === "detail" && <Detail carId={route.id} />}
      </main>
      <Footer />
      <WAFloat />
    </>
  );
}

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