// ============= ROOT APP =============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#2AABEE",
  "heroVariant": "a",
  "language": "ru"
}/*EDITMODE-END*/;

const HERO_LABELS = { a: "Центр", b: "Сплит", c: "Спот" };

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

  const theme = tw.theme || "dark";
  const accent = tw.accent || "#2AABEE";
  const heroVariant = tw.heroVariant || "a";
  const lang = tw.language || "ru";
  const [usefulOpen, setUsefulOpen] = useState(false);
  const [featuresOpen, setFeaturesOpen] = useState(false);
  const [authed, setAuthed] = useState(false);

  useEffect(() => {
    let cancelled = false;
    fetch("/api/auth/check", { credentials: "include" })
      .then((r) => r.ok ? r.json() : { authenticated: false })
      .then((d) => { if (!cancelled) setAuthed(Boolean(d && d.authenticated)); })
      .catch(() => { if (!cancelled) setAuthed(false); });
    return () => { cancelled = true; };
  }, []);

  // apply theme + accent + lang to the document
  useEffect(() => {
    document.documentElement.dataset.theme = theme;
  }, [theme]);
  useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent);
  }, [accent]);
  useEffect(() => {
    document.documentElement.lang = lang === "uk" ? "uk" : lang;
  }, [lang]);

  const setTheme = useCallback((v) => setTweak("theme", v), [setTweak]);
  const setLang = useCallback((v) => setTweak("language", v), [setTweak]);

  const t = useCallback((path) => {
    const dict = window.I18N[lang] || window.I18N.ru;
    const v = window.tpath(dict, path);
    if (v == null) {
      const fb = window.tpath(window.I18N.ru, path);
      return fb == null ? path : fb;
    }
    return v;
  }, [lang]);

  const ctaHref = authed ? "/dashboard" : "/login";
  const ctaLabel = useCallback((base) => {
    const authedKey = base.replace(/\.cta$/, ".ctaAuthed");
    return authed ? t(authedKey) : t(base);
  }, [authed, t]);

  const ctx = { t, lang, setLang, theme, setTheme, accent, heroVariant, usefulOpen, setUsefulOpen, featuresOpen, setFeaturesOpen, authed, ctaHref, ctaLabel };

  return (
    <AppCtx.Provider value={ctx}>
      <div className="lp">
        <div className="lp__ambient" aria-hidden="true"></div>
        <div className="lp__grain" aria-hidden="true"></div>
        <Nav />
        <main>
          <Hero />
          <TrustStrip />
          <HowItWorks />
          <Features />
          <Showcase />
          <VideoWalkthrough />
          <Pricing />
          <WhyUs />
          <Testimonials />
          <Stories />
          <Faq />
          <FinalCta />
        </main>
        <Footer />
      </div>

      {usefulOpen && <UsefulOverlay initialTab={usefulOpen} />}
      {featuresOpen && <FeaturesOverlay />}

      <TweaksPanel>
        <TweakSection label="Тема" />
        <TweakRadio label="Режим" value={theme} options={["dark", "light"]} onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Акцент" value={accent}
          options={ACCENTS.map((a) => a.v)} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Вариант" value={heroVariant} options={["a", "b", "c"]} onChange={(v) => setTweak("heroVariant", v)} />
        <TweakSection label="Язык" />
        <TweakRadio label="Language" value={lang} options={["ru", "en", "uk"]} onChange={(v) => setTweak("language", v)} />
      </TweaksPanel>
    </AppCtx.Provider>
  );
}

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