// MG Ceramic — App shell + Tweaks
const TWEAK_DEFAULTS = Object.assign(
  /*EDITMODE-BEGIN*/{
    "hero": "default",
    "theme": "light",
    "rounded": "sharp",
    "density": "regular",
    "displayWeight": 300,
    "card": "default"
  }/*EDITMODE-END*/,
  (typeof window !== "undefined" && window.__TWEAK_OVERRIDE) || {}
);

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    const html = document.documentElement;
    html.setAttribute("data-theme", t.theme);
    html.setAttribute("data-rounded", t.rounded);
    html.setAttribute("data-density", t.density);
    html.setAttribute("data-card", t.card);
    document.body.style.setProperty("--display-weight", t.displayWeight);
  }, [t.theme, t.rounded, t.density, t.card, t.displayWeight]);

  return (
    <React.Fragment>
      <TopBar />
      <Header />
      <Hero variant={t.hero} />
      <Marquee />
      <Stats />

      <Designs />
      <Hits />
      <Heritage />
      <Why />
      <Projects />
      <Calculator />
      <Reviews />
      <Faq />
      <Blog />
      <Geo />
      <B2B />
      <Contact />
      <Footer />

      <TweaksPanel title="Tweaks · MG Ceramic">
        <TweakSection label="Hero" />
        <TweakRadio
          label="Вариант"
          value={t.hero}
          options={[
            { value: "default", label: "Сплит" },
            { value: "editorial", label: "Журнал" },
            { value: "catalog", label: "Каталог" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />

        <TweakSection label="Тема" />
        <TweakRadio
          label="Светлая / тёмная"
          value={t.theme}
          options={["light", "dark"]}
          onChange={(v) => setTweak("theme", v)}
        />
        <TweakRadio
          label="Скругления"
          value={t.rounded}
          options={["sharp", "soft"]}
          onChange={(v) => setTweak("rounded", v)}
        />

        <TweakSection label="Типографика" />
        <TweakRadio
          label="Вес дисплея"
          value={t.displayWeight}
          options={[
            { value: 200, label: "Hairline" },
            { value: 300, label: "Light" },
            { value: 500, label: "Medium" },
            { value: 700, label: "Bold" },
          ]}
          onChange={(v) => setTweak("displayWeight", v)}
        />

        <TweakSection label="Контент" />
        <TweakRadio
          label="Плотность"
          value={t.density}
          options={[
            { value: "regular", label: "Свободная" },
            { value: "dense", label: "Насыщенная" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="Карточки товара"
          value={t.card}
          options={[
            { value: "default", label: "Default" },
            { value: "outlined", label: "Outlined" },
            { value: "elevated", label: "Elevated" },
          ]}
          onChange={(v) => setTweak("card", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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