// app.jsx — Router, Tweaks integration, mount.

const { useState: useStateA, useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#15524A", "#F4F1E8", "#0F1A18"],
  "density": "comfortable",
  "hero": "split",
  "grid": false
}/*EDITMODE-END*/;

const ACCENT_FOR_HERO = {
  "#15524A": "",       // green (default)
  "#B0431A": "rust",
  "#0B3D91": "navy",
  "#F2C94C": "amber",
};

function App() {
  const [route, setRoute] = useStateA("home");
  const [lang, setLang] = useStateA("EN");
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks
  useEffectA(() => {
    const accent = ACCENT_FOR_HERO[t.palette && t.palette[0]] ?? "";
    if (accent) document.documentElement.setAttribute("data-accent", accent);
    else document.documentElement.removeAttribute("data-accent");
    document.documentElement.setAttribute("data-density", t.density);
    document.body.setAttribute("data-grid", t.grid ? "on" : "off");
  }, [t.palette, t.density, t.grid]);

  useEffectA(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, [route]);

  function go(r) { setRoute(r); }

  return (
    <div data-screen-label={route === "home" ? "01 Home" : route === "catalog" ? "02 Catalog" : "03 Product detail"}>
      <TopBar lang={lang} setLang={setLang} />
      <Nav route={route} go={go} />

      {route === "home" && <Home go={go} heroVariant={t.hero} />}
      {route === "catalog" && <Catalog go={go} />}
      {route === "product" && <Product go={go} />}

      <Footer go={go} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Page" />
        <TweakRadio
          label="Route"
          value={route}
          onChange={(v) => setRoute(v)}
          options={[
            { value: "home", label: "Home" },
            { value: "catalog", label: "Catalog" },
            { value: "product", label: "Product" },
          ]}
        />

        <TweakSection label="Theme" />
        <TweakColor
          label="Palette"
          value={t.palette}
          onChange={(v) => setTweak("palette", v)}
          options={[
            ["#15524A", "#F4F1E8", "#0F1A18"],
            ["#B0431A", "#F4F1E8", "#0F1A18"],
            ["#0B3D91", "#F4F1E8", "#0F1A18"],
            ["#F2C94C", "#0E1116", "#181D25"],
          ]}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={(v) => setTweak("density", v)}
          options={[
            { value: "comfortable", label: "Comfy" },
            { value: "compact", label: "Compact" },
          ]}
        />

        <TweakSection label="Hero variant" />
        <TweakRadio
          label="Layout"
          value={t.hero}
          onChange={(v) => setTweak("hero", v)}
          options={[
            { value: "split", label: "Split" },
            { value: "specs", label: "Specs" },
            { value: "headline", label: "Dark" },
          ]}
        />

        <TweakSection label="Diagnostics" />
        <TweakToggle
          label="Engineering grid"
          value={t.grid}
          onChange={(v) => setTweak("grid", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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