// app.jsx — root composition, language state, tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e23a1e",
  "headFont": "Manrope",
  "theme": "light",
  "heroOverlay": "ink"
}/*EDITMODE-END*/;

const ACCENTS = {
  "#e23a1e": "#c22f16", // фирменный красный
  "#1f6feb": "#1858c4", // синий (доверие)
  "#0f7a4f": "#0c6240", // зелёный
  "#7a4de0": "#6438c4", // фиолет
};

function App() {
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [lang, setLang] = useState(() => localStorage.getItem("mp_lang") || "ru");
  const t = CONTENT[lang];

  useEffect(() => { localStorage.setItem("mp_lang", lang); document.documentElement.lang = lang === "kg" ? "ky" : "ru"; }, [lang]);

  // apply tweaks → CSS vars
  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", tw.theme === "dark" ? "dark" : "light");
    r.style.setProperty("--accent", tw.accent);
    r.style.setProperty("--accent-press", ACCENTS[tw.accent] || tw.accent);
    // tint derived from accent
    r.style.setProperty("--accent-tint", `color-mix(in srgb, ${tw.accent} 12%, ${tw.theme === "dark" ? "#16130f" : "#ffffff"})`);
    r.style.setProperty("--font-head", `'${tw.headFont}', system-ui, sans-serif`);
  }, [tw]);

  const scrollTo = (id) => { const el = document.getElementById(id); if (el) window.scrollTo({ top: id === "form" ? el.offsetTop - 50 : el.offsetTop - 70, behavior: "smooth" }); };

  return (
    <React.Fragment>
      <Header t={t} lang={lang} setLang={setLang} onCta={() => scrollTo("form")} />
      <Hero t={t} lang={lang} onCta={() => scrollTo("form")} onCalc={() => scrollTo("calc")} />
      <Metrics t={t} />
      <HowItWorks t={t} />
      <Advantages t={t} />
      <ForWhom t={t} />
      <Calculator t={t} lang={lang} onApply={() => scrollTo("form")} />
      <Reviews t={t} />
      <FAQ t={t} />
      <AppBlock t={t} />
      <ContactForm t={t} lang={lang} />
      <Footer t={t} />

      <TweaksPanel>
        <TweakSection label="Тема" />
        <TweakRadio label="Режим" value={tw.theme} options={["light", "dark"]} onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="Акцентный цвет" />
        <TweakColor label="Акцент" value={tw.accent} options={Object.keys(ACCENTS)} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Шрифт заголовков" />
        <TweakSelect label="Гарнитура" value={tw.headFont} options={["Manrope", "Onest", "Golos Text"]} onChange={(v) => setTweak("headFont", v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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