/* ATX Decon — app shell + router */

const ACCENTS = {
  "Action Blue": { base: "#1E88E5", bright: "#3f9bef", deep: "#1567b4", soft: "#e3f0fc", ink: "#1567b4" },
  "Sky":         { base: "#2aa3d4", bright: "#43b5e3", deep: "#1c7ea6", soft: "#e0f2fa", ink: "#1c7ea6" },
  "Royal":       { base: "#2d5bd0", bright: "#4a74e0", deep: "#1f43a0", soft: "#e6ecfb", ink: "#1f43a0" },
  "Teal":        { base: "#1f8a8a", bright: "#2aa5a5", deep: "#156868", soft: "#dcefef", ink: "#156868" },
};
const RADII = { Sharp: 4, Balanced: 14, Soft: 22 };
const HEAD_FONTS = {
  "Editorial serif": "'Newsreader', Georgia, serif",
  "Modern sans": "'Hanken Grotesk', system-ui, sans-serif",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Action Blue",
  "radius": "Balanced",
  "headFont": "Editorial serif"
}/*EDITMODE-END*/;

const PAGES = {
  home: (go) => <HomePage go={go} />,
  biohazard: (go) => <ServicePage id="biohazard" go={go} />,
  infestation: (go) => <ServicePage id="infestation" go={go} />,
  hoarding: (go) => <ServicePage id="hoarding" go={go} />,
  about: (go) => <AboutPage go={go} />,
  contact: (go) => <ContactPage go={go} />,
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const r = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS["Action Blue"];
    r.setProperty("--accent", a.base);
    r.setProperty("--accent-bright", a.bright);
    r.setProperty("--accent-deep", a.deep);
    r.setProperty("--accent-soft", a.soft);
    r.setProperty("--accent-ink", a.ink);
    const rad = RADII[t.radius] ?? 14;
    r.setProperty("--radius", rad + "px");
    r.setProperty("--radius-sm", Math.max(2, Math.round(rad * 0.55)) + "px");
    r.setProperty("--radius-lg", Math.round(rad * 1.5) + "px");
    r.setProperty("--font-display", HEAD_FONTS[t.headFont] || HEAD_FONTS["Editorial serif"]);
  }, [t.accent, t.radius, t.headFont]);

  const [page, setPage] = React.useState(() => {
    const h = (window.location.hash || "").replace("#", "");
    return PAGES[h] ? h : "home";
  });

  const go = React.useCallback((id) => {
    if (!PAGES[id]) id = "home";
    setPage(id);
    window.location.hash = id;
    window.scrollTo({ top: 0, behavior: "auto" });
  }, []);

  // expose for stray links (e.g. ReassureBand outline button)
  React.useEffect(() => { window.__go = go; }, [go]);

  React.useEffect(() => {
    const onHash = () => {
      const h = (window.location.hash || "").replace("#", "");
      if (PAGES[h]) setPage(h);
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  return (
    <>
      <EmergencyBar />
      <Header current={page} go={go} />
      {PAGES[page](go)}
      <Footer go={go} />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent color" />
        <TweakColor
          label="Action accent"
          value={(ACCENTS[t.accent] || ACCENTS["Action Blue"]).base}
          options={Object.values(ACCENTS).map((a) => a.base)}
          onChange={(hex) => {
            const name = Object.keys(ACCENTS).find((k) => ACCENTS[k].base === hex) || "Action Blue";
            setTweak("accent", name);
          }}
        />
        <TweakSection label="Shape & type" />
        <TweakRadio label="Corner radius" value={t.radius}
          options={Object.keys(RADII)} onChange={(v) => setTweak("radius", v)} />
        <TweakRadio label="Headline font" value={t.headFont}
          options={Object.keys(HEAD_FONTS)} onChange={(v) => setTweak("headFont", v)} />
      </TweaksPanel>
    </>
  );
}

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