// Main App — routing + tweaks integration

const { useState: useStateApp, useEffect: useEffectApp } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "oasis",
  "displayFont": "serif"
}/*EDITMODE-END*/;

function App() {
  const [route, setRouteState] = useStateApp({ page: "home" });
  const [tweaks, setTweak] = (window.useTweaks || (() => [TWEAK_DEFAULTS, () => {}]))(TWEAK_DEFAULTS);

  // Scroll to top whenever the route changes
  useEffectApp(() => {
    window.scrollTo({ top: 0, behavior: "auto" });
  }, [route.page, route.slug]);

  // Apply palette + font tweaks as CSS variables on :root
  useEffectApp(() => {
    const root = document.documentElement;
    const palettes = {
      oasis:  { oasis: "#1f7fb8", deep: "#0c3a5c", ink: "#114a73", leaf: "#5aab3f", leafD: "#3f8a26" },
      lagoon: { oasis: "#16a3a3", deep: "#0a4747", ink: "#0d6e6e", leaf: "#f0a23d", leafD: "#c88018" },
      sand:   { oasis: "#27567a", deep: "#1a3a55", ink: "#1f4869", leaf: "#c5915e", leafD: "#9b6f3e" },
    };
    const p = palettes[tweaks.palette] || palettes.oasis;
    root.style.setProperty("--oasis", p.oasis);
    root.style.setProperty("--oasis-deep", p.deep);
    root.style.setProperty("--oasis-ink", p.ink);
    root.style.setProperty("--leaf", p.leaf);
    root.style.setProperty("--leaf-deep", p.leafD);

    const fonts = {
      serif:   '"Instrument Serif", Georgia, serif',
      grotesk: '"Bricolage Grotesque", "Manrope", sans-serif',
      mono:    '"JetBrains Mono", ui-monospace, monospace',
    };
    root.style.setProperty("--f-display", fonts[tweaks.displayFont] || fonts.serif);
  }, [tweaks.palette, tweaks.displayFont]);

  // Tweaks panel
  const TweaksUI = () => {
    if (!window.TweaksPanel) return null;
    const TP = window.TweaksPanel;
    const TS = window.TweakSection;
    const TR = window.TweakRadio;
    return (
      <TP>
        <TS title="Palette" subtitle="Pulled from the logo + clinic media. Each option is a curated colour family.">
          <TR
            label="Tone"
            value={tweaks.palette}
            options={[
              { value: "oasis", label: "Oasis Blue (logo)" },
              { value: "lagoon", label: "Lagoon Teal" },
              { value: "sand", label: "Desert Sand" },
            ]}
            onChange={v => setTweak("palette", v)}
          />
        </TS>
        <TS title="Display type" subtitle="Big headline face. Body stays in Manrope for legibility.">
          <TR
            label="Display"
            value={tweaks.displayFont}
            options={[
              { value: "serif", label: "Instrument Serif (warm)" },
              { value: "grotesk", label: "Bricolage (clinical)" },
              { value: "mono", label: "Mono (technical)" },
            ]}
            onChange={v => setTweak("displayFont", v)}
          />
        </TS>
      </TP>
    );
  };

  let body;
  switch (route.page) {
    case "home":         body = <HomePage setRoute={setRouteState}/>; break;
    case "services":     body = <ServicesPage setRoute={setRouteState}/>; break;
    case "service":      body = <ServiceDetail slug={route.slug} setRoute={setRouteState}/>; break;
    case "diagnostics":  body = <DiagnosticsPage setRoute={setRouteState}/>; break;
    case "team":         body = <TeamPage setRoute={setRouteState}/>; break;
    case "vet":          body = <VetDetail slug={route.slug} setRoute={setRouteState}/>; break;
    case "about":        body = <AboutPage setRoute={setRouteState}/>; break;
    case "emergency":    body = <EmergencyPage setRoute={setRouteState}/>; break;
    case "contact":      body = <ContactPage setRoute={setRouteState}/>; break;
    default:             body = <NotFound setRoute={setRouteState}/>;
  }

  return (
    <React.Fragment>
      <Navbar route={route} setRoute={setRouteState}/>
      {body}
      <Footer setRoute={setRouteState}/>
      <MobileBottomBar setRoute={setRouteState}/>
      <TweaksUI/>
    </React.Fragment>
  );
}

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