/* App shell + Tweaks */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "maple",
  "dark": false,
  "displayFont": "Space Grotesk",
  "headline": "Turn your experience into a Canadian offer.",
  "subhead": "beHired helps developers who relocated to Canada land their first - or better - tech job. One focused program, a resume that beats the ATS, and interview prep tuned to how Canadian teams actually hire.",
  "showcase": true
}/*EDITMODE-END*/;

const FONT_STACKS = {
  "Space Grotesk": '"Space Grotesk", "Hanken Grotesk", system-ui, sans-serif',
  "Hanken Grotesk": '"Hanken Grotesk", system-ui, sans-serif',
  "Instrument Serif": '"Instrument Serif", Georgia, serif',
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const route = useHashRoute();
  useReveal(route.name + ":" + (route.moduleId || ""));

  // count this visitor as a site visit (deduped server-side) - top of the funnel
  useEffect(() => { try { if (typeof track === "function") track("site"); } catch (e) {} }, []);

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", t.theme === "maple" ? "" : t.theme);
    root.setAttribute("data-mode", t.dark ? "dark" : "light");
    root.style.setProperty("--font-display", FONT_STACKS[t.displayFont] || FONT_STACKS["Space Grotesk"]);
  }, [t.theme, t.dark, t.displayFont]);

  let screen;
  if (route.name === "lesson") screen = <Lesson key={route.moduleId} moduleId={route.moduleId} />;
  else if (route.name === "checkout") screen = <Checkout />;
  else if (route.name === "success") screen = <CheckoutSuccess />;
  else if (route.name === "signup") screen = <Signup />;
  else if (route.name === "admin") screen = <Admin />;
  else if (route.name === "legal") screen = route.page === "terms" ? <TermsOfService /> : route.page === "refund" ? <RefundPolicy /> : <PrivacyPolicy />;
  else screen = (
    <main>
      <Hero headline={t.headline} subhead={t.subhead} />
      <Roadmap />
      <FinalCTA />
    </main>
  );

  return (
    <>
      <Nav route={route} />
      {screen}
      <Footer />

      {route.name === "landing" && (
      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio label="Accent" value={t.theme}
          options={["maple", "pine", "indigo"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakToggle label="Dark mode" value={t.dark}
          onChange={(v) => setTweak("dark", v)} />
        <TweakSection label="Typography" />
        <TweakSelect label="Display font" value={t.displayFont}
          options={["Space Grotesk", "Hanken Grotesk", "Instrument Serif"]}
          onChange={(v) => setTweak("displayFont", v)} />
        <TweakSection label="Hero copy" />
        <TweakText label="Headline" value={t.headline} multiline
          onChange={(v) => setTweak("headline", v)} />
        <TweakText label="Subhead" value={t.subhead} multiline
          onChange={(v) => setTweak("subhead", v)} />
      </TweaksPanel>
      )}
    </>
  );
}

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