// Shared per-shell mount — replaces the prototype's single hash router. Each
// per-path shell (index/Pricing/Compare/SignIn/App) calls window.mrMount(renderScreen)
// to render ONE screen with the same accent/theme tweak wiring the prototype had.
// Loaded after tweaks-panel.jsx (provides useTweaks / TweaksPanel).
(function () {
  const { useEffect } = React;

  const ACCENTS = { "Electric indigo": "#5b5bd6", "Blue": "#5b8def", "Green": "#2f9e6f", "Amber": "#c9762f", "Pink": "#cc5f97" };
  const TWEAK_DEFAULTS = { accent: "#5b5bd6", dark: false, codeTheme: "dark", heroLayout: "split", heroSubject: "launch" };

  function applyAccent(hex) {
    const s = document.documentElement.style;
    s.setProperty("--accent", hex);
    s.setProperty("--accent-hover", `color-mix(in srgb, ${hex} 84%, #000)`);
    s.setProperty("--accent-fg", "#fff");
    s.setProperty("--accent-bg-soft", `color-mix(in srgb, ${hex} 14%, transparent)`);
    s.setProperty("--accent-grad", `linear-gradient(135deg, ${hex}, color-mix(in srgb, ${hex} 55%, #8a7cf0))`);
  }

  window.mrMount = function (renderScreen) {
    function App() {
      const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
      useEffect(() => { applyAccent(t.accent); }, [t.accent]);
      useEffect(() => { document.documentElement.setAttribute("data-theme", t.dark ? "dark" : "light"); }, [t.dark]);
      useEffect(() => { document.documentElement.setAttribute("data-codetheme", t.codeTheme); }, [t.codeTheme]);
      const go = window.mrNav;
      return (
        <>
          {renderScreen({ go, t, setTweak })}
          <window.TweaksPanel title="Tweaks">
            <window.TweakSection label="Brand" />
            <window.TweakColor label="Accent" value={t.accent} options={Object.values(ACCENTS)} onChange={(v) => setTweak("accent", v)} />
            <window.TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />
            <window.TweakSection label="Code blocks" />
            <window.TweakRadio label="Code theme" value={t.codeTheme} options={["dark", "light"]} onChange={(v) => setTweak("codeTheme", v)} />
            <window.TweakSection label="Signature hero" />
            <window.TweakRadio label="Layout" value={t.heroLayout} options={["split", "code-left", "stacked"]} onChange={(v) => setTweak("heroLayout", v)} />
            <window.TweakSelect label="Render subject" value={t.heroSubject}
              options={[{ value: "launch", label: "Launch card" }, { value: "blog", label: "Blog share" }, { value: "sale", label: "Price drop" }]}
              onChange={(v) => setTweak("heroSubject", v)} />
          </window.TweaksPanel>
        </>
      );
    }
    ReactDOM.createRoot(document.getElementById("mr-app")).render(<App />);
  };
})();