// Top-level app + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#A78BFA",
  "heroVariant": "a",
  "showMascot": true,
  "intensity": 100
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--violet', t.accent);
    // derive a slightly darker shade for --violet-2
    root.style.setProperty('--violet-2', t.accent);
    // Background intensity (fades the radial glows)
    document.body.style.setProperty('--bg-strength', String(t.intensity / 100));
  }, [t.accent, t.intensity]);

  return (
    <>
      <Nav/>
      <main>
        <Hero heroVariant={t.heroVariant}/>
        <Marquee/>
        <NewBaseline/>
        <HowMinicornWorks/>
        <Coach/>
        <NotAChatbot/>
        <Features/>
        <Screens/>
        <ForSpecialists/>
        <BlackBox/>
        {/* <HowItWorks/> */}
        {/* <Testimonials/> */}
        <Pricing/>
        <FAQ/>
        <CTA/>
      </main>
      <Footer/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Стиль"/>
        <TweakColor label="Акцент" value={t.accent} onChange={v => setTweak('accent', v)}/>
        <TweakSlider label="Свечения" value={t.intensity} min={20} max={150} unit="%"
                     onChange={v => setTweak('intensity', v)}/>

        <TweakSection label="Контент"/>
        <TweakSelect label="Hero копирайт" value={t.heroVariant}
                     options={[
                       { value: 'a', label: 'A — Ешь спокойно' },
                       { value: 'b', label: 'B — Не диета. Привычка' },
                       { value: 'c', label: 'C — Карта здоровья' },
                     ]}
                     onChange={v => setTweak('heroVariant', v)}/>
      </TweaksPanel>
    </>
  );
}

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