// App entry — routing, tweaks panel, hooks everything together
const { useEffect: useEffectA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2347d9",
  "bg": "white",
  "density": 0.6,
  "speed": 1,
  "fontPair": "sora-manrope",
  "heroVariant": "split"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  ["#2347d9", "#16308f"],   // royal blue
  ["#1d4ed8", "#142f8f"],   // sapphire
  ["#0284c7", "#075e8a"],   // sky
  ["#0e7490", "#0a4a5c"],   // medical teal
];
const BG_OPTIONS = {
  "white": ["#ffffff", "#f5f8fc", "#eef2f8"],
  "mist":  ["#f6f8fb", "#ffffff", "#e9eef6"],
  "cool":  ["#eef1f6", "#ffffff", "#e2e8f2"],
};
const FONT_OPTIONS = {
  "sora-manrope":     { display: "Sora", body: "Manrope" },
  "jakarta":          { display: "Plus Jakarta Sans", body: "Plus Jakarta Sans" },
  "grotesk-manrope":  { display: "Space Grotesk", body: "Manrope" },
};

function applyTweaks(t) {
  const root = document.documentElement;
  const acc = ACCENT_OPTIONS.find(o => o[0] === t.accent) || [t.accent, t.accent];
  root.style.setProperty("--accent", acc[0]);
  root.style.setProperty("--accent-deep", acc[1] || acc[0]);
  root.style.setProperty("--accent-soft", acc[0] + "1c");
  root.style.setProperty("--accent-glow", acc[0] + "2e");
  const bg = BG_OPTIONS[t.bg] || BG_OPTIONS["white"];
  root.style.setProperty("--bg", bg[0]);
  root.style.setProperty("--bg-2", bg[1]);
  root.style.setProperty("--bg-3", bg[2]);
  root.style.setProperty("--three-d-density", t.density);
  root.style.setProperty("--anim-speed", t.speed);
  const fp = FONT_OPTIONS[t.fontPair] || FONT_OPTIONS["sora-manrope"];
  root.style.setProperty("--type-display", `"${fp.display}", "Helvetica Neue", sans-serif`);
  root.style.setProperty("--type-body", `"${fp.body}", "Helvetica Neue", sans-serif`);
}

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useEffectA(() => { applyTweaks(t); }, [t.accent, t.bg, t.density, t.speed, t.fontPair]);

  const route = window.useRoute();

  let page;
  if (route.path === "shop") page = <window.ShopPage initialCat={(route.id && window.CAT_FROM_SLUG(route.id)) || "All"} />;
  else if (route.path === "product") page = <window.ProductPage id={route.id} />;
  else if (route.path === "cart") page = <window.CartPage />;
  else if (route.path === "checkout") page = <window.CheckoutPage />;
  else if (route.path === "newsletter") page = <window.NewsletterPage />;
  else page = <window.HomePage heroVariant={t.heroVariant} />;

  const { TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakSlider, TweakColor } = window;

  return (
    <>
      <window.AgeGate />
      <window.AmbientField density={t.density} />
      <window.Header />
      {page}
      <window.Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Color">
          <TweakColor
            label="Accent"
            value={t.accent}
            options={ACCENT_OPTIONS.map(o => o[0])}
            onChange={(v) => setTweak("accent", v)}
          />
          <TweakRadio
            label="Background"
            value={t.bg}
            options={[
              { value: "white", label: "White" },
              { value: "mist", label: "Mist" },
              { value: "cool", label: "Cool" },
            ]}
            onChange={(v) => setTweak("bg", v)}
          />
        </TweakSection>
        <TweakSection label="Motion + 3D">
          <TweakSlider label="3D density" min={0} max={1.5} step={0.1} value={t.density} onChange={(v) => setTweak("density", v)} />
          <TweakSlider label="Speed" min={0.4} max={2} step={0.1} value={t.speed} onChange={(v) => setTweak("speed", v)} />
        </TweakSection>
        <TweakSection label="Type + Layout">
          <TweakSelect
            label="Font pair"
            value={t.fontPair}
            options={[
              { value: "sora-manrope", label: "Sora + Manrope" },
              { value: "jakarta", label: "Plus Jakarta Sans" },
              { value: "grotesk-manrope", label: "Space Grotesk + Manrope" },
            ]}
            onChange={(v) => setTweak("fontPair", v)}
          />
          <TweakRadio
            label="Hero"
            value={t.heroVariant}
            options={[
              { value: "split", label: "Split" },
              { value: "centered", label: "Centered" },
            ]}
            onChange={(v) => setTweak("heroVariant", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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