// app.jsx — root, tweak wiring, hero variant switching, theme + lang

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "paper",
  "typeset": "serif",
  "density": "regular",
  "hero": "bleed",
  "displaySize": 100,
  "dark": false,
  "gridDensity": "regular",
  "lang": "ru",
  "cursorBlob": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.palette = t.palette;
    r.dataset.typeset = t.typeset;
    r.dataset.density = t.density;
    r.dataset.theme = t.dark ? 'dark' : 'light';
    r.lang = t.lang;
    r.style.setProperty('--fs-display', `clamp(${56 * t.displaySize / 100}px, ${11 * t.displaySize / 100}vw, ${144 * t.displaySize / 100}px)`);
  }, [t]);

  const Hero = t.hero === 'bleed' ? HeroBleed : t.hero === 'split' ? HeroSplit : HeroType;

  return (
    <>
      <Header lang={t.lang} setLang={(v)=>setTweak('lang', v)} dark={t.dark} setDark={(v)=>setTweak('dark', v)} />
      <main id="top">
        <Hero lang={t.lang} />
        <Intro lang={t.lang} />
        <Marquee />
        <Categories density={t.gridDensity} lang={t.lang} />
        <Services lang={t.lang} />
        <PressTape lang={t.lang} />
        <PressList lang={t.lang} />
        <Reviews lang={t.lang} />
        <Contact lang={t.lang} />
        <Faq lang={t.lang} />
      </main>
      <Footer lang={t.lang} />
      {t.cursorBlob && <CursorBlob />}

      <TweaksPanel title="Tweaks · Захар Гринов">
        <TweakSection label="Hero" />
        <TweakRadio label="Раскладка" value={t.hero}
          options={['bleed', 'split', 'type']}
          onChange={(v) => setTweak('hero', v)} />
        <TweakSlider label="Display size" value={t.displaySize} min={70} max={140} unit="%"
          onChange={(v) => setTweak('displaySize', v)} />

        <TweakSection label="Тема" />
        <TweakToggle label="Тёмный режим" value={t.dark}
          onChange={(v) => setTweak('dark', v)} />
        <TweakRadio label="Язык" value={t.lang}
          options={['ru', 'en']}
          onChange={(v) => setTweak('lang', v)} />

        <TweakSection label="Палитра" />
        <TweakRadio label="Цветовая база" value={t.palette}
          options={['paper', 'cool', 'latte']}
          onChange={(v) => setTweak('palette', v)} />

        <TweakSection label="Типографика" />
        <TweakRadio label="Гарнитуры" value={t.typeset}
          options={['serif', 'lora', 'pt', 'sans']}
          onChange={(v) => setTweak('typeset', v)} />

        <TweakSection label="Плотность" />
        <TweakRadio label="Ритм секций" value={t.density}
          options={['compact', 'regular', 'airy']}
          onChange={(v) => setTweak('density', v)} />
        <TweakRadio label="Сетка портфолио" value={t.gridDensity}
          options={['airy', 'regular', 'dense']}
          onChange={(v) => setTweak('gridDensity', v)} />

        <TweakSection label="Эффекты" />
        <TweakToggle label="Курсор-блик" value={t.cursorBlob}
          onChange={(v) => setTweak('cursorBlob', v)} />
      </TweaksPanel>
    </>
  );
}

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