/* Octomatica — app shell: tweaks + reveal + composition */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "chat",
  "theme": "light",
  "accent": "emerald",
  "fonts": "geologica"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", t.theme);
    r.setAttribute("data-accent", t.accent);
    r.setAttribute("data-fonts", t.fonts);
  }, [t.theme, t.accent, t.fonts]);

  // Reliable anchor jump: content renders async (in-browser Babel), so the browser's
  // initial #hash scroll often fires before the target exists and lands on the hero.
  // Retry until the section is in the DOM, then scroll (offset handled by scroll-margin-top).
  React.useEffect(() => {
    const id = decodeURIComponent((window.location.hash || "").replace("#", ""));
    if (!id) return;
    let tries = 0;
    const tick = () => {
      const el = document.getElementById(id);
      if (el) { el.scrollIntoView({ behavior: "auto", block: "start" }); return; }
      if (tries++ < 40) setTimeout(tick, 80);
    };
    tick();
  }, []);

  // Scroll reveal — synchronous sweep for on-screen nodes + observer for the rest.
  // No rAF (throttled in background iframes). Keyed to heroVariant so swapped nodes wire up.
  React.useEffect(() => {
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.06, rootMargin: "0px 0px -4% 0px" });
    const wire = () => {
      document.querySelectorAll(".reveal:not(.in)").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight * 0.96 && r.bottom > -40) el.classList.add("in");
        else io.observe(el);
      });
    };
    wire();
    const onScroll = () => wire();
    window.addEventListener("scroll", onScroll, { passive: true });
    window.addEventListener("resize", onScroll);
    // Safety: if transitions never painted (background iframe), snap stuck in-view reveals visible.
    const safety = setTimeout(() => {
      document.querySelectorAll(".reveal").forEach((el) => {
        const r = el.getBoundingClientRect();
        if (r.top < window.innerHeight && r.bottom > 0 && getComputedStyle(el).opacity === "0") {
          el.style.transition = "none"; el.classList.add("in");
        }
      });
    }, 1400);
    return () => { clearTimeout(safety); io.disconnect(); window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); };
  }, [t.heroVariant]);

  return (
    <>
      <Navbar />
      {t.heroVariant === "chat" ? <HeroA /> : <HeroB />}
      <Trusted />
      <Capabilities />
      <Demo />
      <HowItWorks />
      <Stories />
      <Comparison />
      <AiTools />
      <Pricing />
      <Faq />
      <FinalCta />
      <Footer />

      <TweaksPanel>
        <TweakSection label="Главный экран" />
        <TweakRadio label="Вариант hero" value={t.heroVariant}
          options={[{ value:"chat", label:"Telegram-чат" }, { value:"mascot", label:"Маскот" }]}
          onChange={(v) => setTweak("heroVariant", v)} />
        <TweakSection label="Тема и цвет" />
        <TweakRadio label="Тема" value={t.theme}
          options={[{ value:"light", label:"Светлая" }, { value:"dark", label:"Тёмная" }]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakColor label="Акцент" value={t.accent === "emerald" ? "#14B981" : t.accent === "ocean" ? "#27A3E0" : t.accent === "sunset" ? "#F47A4E" : "#946EF2"}
          options={["#14B981", "#27A3E0", "#F47A4E", "#946EF2"]}
          onChange={(hex) => {
            const map = { "#14B981":"emerald", "#27A3E0":"ocean", "#F47A4E":"sunset", "#946EF2":"grape" };
            setTweak("accent", map[hex] || "emerald");
          }} />
        <TweakSection label="Типографика" />
        <TweakRadio label="Шрифты" value={t.fonts}
          options={[{ value:"geologica", label:"Geologica" }, { value:"manrope", label:"Manrope" }, { value:"golos", label:"Golos" }]}
          onChange={(v) => setTweak("fonts", v)} />
      </TweaksPanel>
    </>
  );
}

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