// ФриТаун — App root + Tweaks
const { useState: useStateMain, useEffect: useEffectMain, useRef: useRefMain } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "editorial",
  "accent": "#1a3a52"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [modalOpen, setModalOpen] = useStateMain(false);
  const [parallax, setParallax] = useStateMain(0);
  const siteData = useSiteData();
  const vis = siteData.visibility || {};

  // Применяем тему: приоритет — SiteData (админка) → Tweaks → дефолт
  useEffectMain(() => {
    const mode = (siteData.theme && siteData.theme.mode) || t.theme;
    document.documentElement.setAttribute("data-theme", mode);
  }, [siteData.theme && siteData.theme.mode, t.theme]);

  // Кастомный акцентный цвет из SiteData ПОВЕРХ темы
  useEffectMain(() => {
    const accent = siteData.theme && siteData.theme.accent;
    if (accent) {
      document.documentElement.style.setProperty("--accent", accent);
    } else if (t.theme === "editorial") {
      document.documentElement.style.setProperty("--accent", t.accent);
    } else {
      document.documentElement.style.removeProperty("--accent");
    }
  }, [siteData.theme, t.theme, t.accent]);

  useEffectMain(() => {
    const onScroll = () => setParallax(window.scrollY);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  useEffectMain(() => {
    document.body.style.overflow = modalOpen ? "hidden" : "";
  }, [modalOpen]);

  useEffectMain(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.classList.add("visible");
          }
        });
      },
      { threshold: 0.15, rootMargin: "0px 0px -40px 0px" }
    );
    const timer = setTimeout(() => {
      document.querySelectorAll(".reveal").forEach(el => observer.observe(el));
    }, 150);
    return () => {
      clearTimeout(timer);
      observer.disconnect();
    };
  }, []);

  const openForm = () => setModalOpen(true);

  return (
    <>
      <Navbar onOpenForm={openForm} />
      <main>
        {vis.hero !== false && <Hero onOpenForm={openForm} parallax={parallax} />}
        {vis.marquee !== false && <Marquee />}
        {(siteData.theme && siteData.theme.showScrollHouse !== false) && <ScrollScene />}
        {vis.catalog !== false && <Catalog onOpenForm={openForm} />}
        {vis.forSale !== false && <ForSale onOpenForm={openForm} />}
        {vis.services !== false && <Services onOpenForm={openForm} />}
        {vis.works !== false && <Works />}
        {vis.cta !== false && <CTABand onOpenForm={openForm} />}
      </main>
      <Footer />

      {vis.fab !== false && (
      <button className="fab" onClick={openForm} aria-label="Заказать звонок">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
          <path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.3.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C9.9 21 3 14.1 3 5.5 3 4.9 3.4 4.5 4 4.5h3.4c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.3 0 .7-.2 1L6.6 10.8z"/>
        </svg>
      </button>
      )}

      <Modal open={modalOpen} onClose={() => setModalOpen(false)} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Стиль">
          <TweakRadio
            label="Тема"
            value={t.theme}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "industrial", label: "Industrial" },
              { value: "warm", label: "Warm" },
            ]}
            onChange={(v) => setTweak("theme", v)}
          />
          {t.theme === "editorial" && (
            <TweakColor
              label="Акцент"
              value={t.accent}
              options={["#1a3a52", "#d9583a", "#2d5a3d", "#6b3aa8"]}
              onChange={(v) => setTweak("accent", v)}
            />
          )}
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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