// App.jsx — router + tweaks shell.
const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C8A45C",
  "gridOverlay": false,
  "density": "regular"
}/*EDITMODE-END*/;

function parseRoute() {
  const h = window.location.hash.replace(/^#/, "");
  return h || "/";
}

function App() {
  const [route, setRoute] = useStateA(parseRoute());
  const [drawerOpen, setDrawerOpen] = useStateA(false);
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffectA(() => {
    const onHash = () => setRoute(parseRoute());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const navigate = (path) => {
    if (path === route) return;
    window.location.hash = path;
    window.scrollTo({ top: 0, behavior: "instant" in window ? "instant" : "auto" });
  };

  // route changed → scroll to top
  useEffectA(() => {
    window.scrollTo(0, 0);
  }, [route]);

  // apply tweaks
  useEffectA(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.body.classList.toggle("grid-on", !!t.gridOverlay);
    const fs = t.density === "compact" ? 14 : t.density === "comfy" ? 16 : 15;
    document.body.style.fontSize = fs + "px";
  }, [t.accent, t.gridOverlay, t.density]);

  let page;
  if (route === "/") {
    page = (
      <main>
        <HomeHero onNavigate={navigate} />
        <TrustStrip />
        <Capabilities />
        <PlatformBlock onNavigate={navigate} />
        <Statement />
        <NewsBlock onNavigate={navigate} />
        <ContactCTA onNavigate={navigate} />
      </main>
    );
  } else if (route.startsWith("/entry/")) {
    const slug = route.replace(/^\/entry\//, "").replace(/\/$/, "");
    page = <EntryPage slug={slug} onNavigate={navigate} />;
  } else if (route.startsWith("/platform")) {
    page = <AviationPage onNavigate={navigate} />;
  } else if (route.startsWith("/capabilities")) {
    page = <CapabilitiesPage onNavigate={navigate} />;
  } else if (route.startsWith("/about")) {
    page = <AboutPage onNavigate={navigate} />;
  } else if (route.startsWith("/contact")) {
    page = <ContactPage onNavigate={navigate} />;
  } else {
    page = (
      <main style={{ padding: "180px 0" }}>
        <div className="wrap">
          <div className="eyebrow accent-text" style={{ marginBottom: 16 }}>ERR · 404</div>
          <h1 className="display">Off the line.</h1>
          <p className="lede mute" style={{ marginTop: 24 }}>That route doesn't map to a fielded page.</p>
          <a href="#/" onClick={(e) => { e.preventDefault(); navigate("/"); }} className="btn" style={{ marginTop: 32 }}>Return to index <span className="arrow">→</span></a>
        </div>
      </main>
    );
  }

  return (
    <>
      <Nav route={route} onNavigate={navigate} onOpenDrawer={() => setDrawerOpen(true)} />
      <Drawer open={drawerOpen} onClose={() => setDrawerOpen(false)} onNavigate={navigate} route={route} />
      {page}
      <Footer onNavigate={navigate} />

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={t.accent}
          options={["#C8A45C", "#E94842", "#3B82F6", "#7CA982"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Atmosphere" />
        <TweakToggle label="Grid overlay" value={t.gridOverlay}
          onChange={(v) => setTweak("gridOverlay", v)} />
        <TweakRadio label="Density" value={t.density}
          options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)} />
      </TweaksPanel>
    </>
  );
}

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