/* APEX CLIPS — app: router + Tweaks + mount */

const ACCENTS = {
  "#1d6cff": { ink: "#ffffff", name: "Electric Blue" },
  "#ff5a1f": { ink: "#ffffff", name: "Sunset Orange" },
  "#ffd60a": { ink: "#0a0a0b", name: "Alpine Yellow" },
  "#a3ff12": { ink: "#0a0a0b", name: "Acid Green" },
};
const MOTION = { Cinematic: 1.5, Balanced: 1, Minimal: 0.35 };
const FONTS = {
  "Saira Condensed": '"Saira Condensed", "Arial Narrow", sans-serif',
  "Archivo": '"Archivo", system-ui, sans-serif',
  "Anton": '"Anton", "Saira Condensed", sans-serif',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1d6cff",
  "motion": "Cinematic",
  "headline": "Saira Condensed",
  "grain": true
}/*EDITMODE-END*/;

function App() {
  const { path, go } = useRouter();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // apply tweaks to :root
  useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    r.style.setProperty("--accent-ink", (ACCENTS[t.accent] || ACCENTS["#1d6cff"]).ink);
    r.style.setProperty("--motion", MOTION[t.motion] || 1);
    r.style.setProperty("--display", FONTS[t.headline] || FONTS["Saira Condensed"]);
    document.body.dataset.grain = t.grain ? "on" : "off";
  }, [t.accent, t.motion, t.headline, t.grain]);

  // route → page
  let page;
  if (path.startsWith("/clip/")) page = <ClipDetail />;
  else if (path.startsWith("/library")) page = <Library />;
  else if (path.startsWith("/submit")) page = <Submit />;
  else if (path.startsWith("/license")) page = <License />;
  else if (path.startsWith("/creators")) page = <ForCreators />;
  else if (path.startsWith("/publishers")) page = <ForPublishers />;
  else if (path.startsWith("/brands")) page = <ForBrands />;
  else if (path.startsWith("/rights")) page = <Rights />;
  else if (path.startsWith("/pricing")) page = <Pricing />;
  else if (path.startsWith("/about")) page = <About />;
  else if (path.startsWith("/contact")) page = <Contact />;
  else if (path.startsWith("/tv")) page = <ForTV />;
  else if (path.startsWith("/bespoke")) page = <Bespoke />;
  else if (path.startsWith("/faq")) page = <FAQPage />;
  else page = <Home />;

  return (
    <RouteCtx.Provider value={{ path, go }}>
      {page}
      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor label="Brand accent" value={t.accent}
          options={Object.keys(ACCENTS)}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Motion & type" />
        <TweakRadio label="Motion" value={t.motion} options={["Cinematic", "Balanced", "Minimal"]}
          onChange={(v) => setTweak("motion", v)} />
        <TweakSelect label="Headline font" value={t.headline} options={Object.keys(FONTS)}
          onChange={(v) => setTweak("headline", v)} />
        <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak("grain", v)} />
      </TweaksPanel>
    </RouteCtx.Provider>
  );
}

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