// app.jsx — root, accent tweak (teal / orange)
const { useEffect } = React;

const ACCENTS = {
  teal:   { a:"#00A2A7", a6:"#008E90", a05:"#E6F5F5" },
  orange: { a:"#FA8116", a6:"#EB5712", a05:"#FFF1E6" },
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "teal",
  "radius": 16
}/*EDITMODE-END*/;

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

  useEffect(()=>{
    const c = ACCENTS[t.accent] || ACCENTS.teal;
    const r = document.documentElement.style;
    r.setProperty("--accent", c.a);
    r.setProperty("--accent-600", c.a6);
    r.setProperty("--accent-050", c.a05);
    r.setProperty("--r", t.radius+"px");
    r.setProperty("--r-lg", (t.radius+8)+"px");
    r.setProperty("--r-xl", (t.radius+16)+"px");
  },[t.accent,t.radius]);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero />
        <WhatIsVovo />
        <Audience />
        <Categories />
        <HowItWorks />
        <ChooseMaster />
        <FreeForMasters />
        <Faq />
        <FormSection />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Фирменный стиль" />
        <TweakRadio label="Основной акцент" value={t.accent==="orange"?"Оранж":"Бирюза"}
          options={["Бирюза","Оранж"]}
          onChange={(v)=>setTweak("accent", v==="Оранж"?"orange":"teal")} />
        <TweakColor label="Цвет" value={ACCENTS[t.accent].a}
          options={["#00A2A7","#FA8116"]}
          onChange={(hex)=>setTweak("accent", hex==="#FA8116"?"orange":"teal")} />
        <TweakSection label="Форма" />
        <TweakSlider label="Скругление" value={t.radius} min={6} max={26} unit="px"
          onChange={(v)=>setTweak("radius",v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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