// MISLAK — Router + Tweaks
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "#977DFF",
  "density": "comfy",
  "showDemo": true,
  "heroLayout": "center"
}/*EDITMODE-END*/;

const PALETTE_MAP = {
  "#977DFF": { ink: "#FFFFFF", soft: "#F1EDFF" },
  "#0A0A0A": { ink: "#FFFFFF", soft: "#ECECEA" },
  "#3A9277": { ink: "#062018", soft: "oklch(0.95 0.04 165)" },
  "#7A5AE0": { ink: "#1A0B33", soft: "oklch(0.95 0.04 290)" },
};

function Router() {
  const hash = window.useHashRoute();
  const lang = window.useLang();
  const { seg, sub } = window.parseRoute(hash);
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Contact lives on the home page now — redirect the old /contact route there and scroll to it.
  if (seg === "contact" && window.__pendingScroll == null) window.__pendingScroll = "contact";
  useEffect(() => {
    if (seg === "contact") window.history.replaceState(null, "", "#/");
  }, [seg]);

  useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.palette);
    const meta = PALETTE_MAP[t.palette];
    if (meta) {
      root.style.setProperty("--accent-ink", meta.ink);
      root.style.setProperty("--accent-soft", meta.soft);
    }
    root.style.setProperty("--maxw", t.density === "tight" ? "1180px" : "1240px");
  }, [t.palette, t.density]);

  const Page = (() => {
    switch (seg) {
      case "home": return <window.HomePage showDemo={t.showDemo} heroLayout={t.heroLayout}/>;
      case "contact": return <window.HomePage showDemo={t.showDemo} heroLayout={t.heroLayout}/>;
      case "survey": return <window.SurveyPage/>;
      case "calculator": return <window.CalculatorPage/>;
      case "ai-readiness": return <window.AIReadinessPage/>;
      case "about": return <window.AboutPage/>;
      case "careers": return <window.CareersPage/>;
      case "privacy": return <window.PrivacyPage/>;
      case "terms": return <window.TermsPage/>;
      case "deletion": return <window.DeletionPage/>;
      case "login": return <window.AuthPage/>;
      default: return <window.NotFound/>;
    }
  })();

  return (
    <React.Fragment>
      <window.Nav/>
      <main>{Page}</main>
      <window.Footer/>

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Theme">
          <window.TweakColor
            label={window.L("لون التمييز", "Accent color")}
            value={t.palette}
            onChange={(v) => setTweak("palette", v)}
            options={["#977DFF", "#0A0A0A", "#3A9277"]}
          />
          <window.TweakRadio
            label={window.L("الكثافة", "Density")}
            value={t.density}
            onChange={(v) => setTweak("density", v)}
            options={["comfy", "tight"]}
          />
          <window.TweakToggle
            label={window.L("عرض لقطة لوحة التحكم", "Show dashboard preview")}
            value={t.showDemo}
            onChange={(v) => setTweak("showDemo", v)}
          />
          <window.TweakRadio
            label={window.L("تخطيط الواجهة", "Hero layout")}
            value={t.heroLayout}
            onChange={(v) => setTweak("heroLayout", v)}
            options={["center", "start"]}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Router/>);