/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakToggle,
   Header, Hero, StatsBand, Thesis, Tools, Sections, CTA, Footer */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "hero": "split",
  "font": "inter",
  "motion": true
}/*EDITMODE-END*/;

// Настоящий SF Pro подхватывается на устройствах Apple через -apple-system;
// для остальных — ближайший веб-фолбэк с полной кириллицей.
const FONT_STACKS = {
  inter: 'var(--font-apple), "Inter", system-ui, sans-serif',
  manrope: 'var(--font-apple), "Manrope", system-ui, sans-serif',
};

function useParallax(motion, dep) {
  React.useEffect(() => {
    const px = Array.from(document.querySelectorAll(".parallax"));
    if (!motion) { px.forEach((e) => (e.style.transform = "")); return; }
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        raf = null;
        const y = window.scrollY;
        px.forEach((el) => {
          const s = parseFloat(el.dataset.speed || "0.1");
          el.style.transform = `translate3d(0, ${(-y * s).toFixed(1)}px, 0)`;
        });
      });
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => { window.removeEventListener("scroll", onScroll); if (raf) cancelAnimationFrame(raf); };
  }, [motion, dep]);
}

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

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--font-family", FONT_STACKS[t.font] || FONT_STACKS.inter);
  }, [t.font]);

  React.useEffect(() => {
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    const canAnim = t.motion && !reduce && document.visibilityState === "visible";
    document.documentElement.classList.toggle("anim-on", canAnim);
    window.__noMotion = !t.motion;
    window.dispatchEvent(new Event("gm:motion"));
  }, [t.motion]);

  useParallax(t.motion, t.hero);

  return (
    <React.Fragment>
      <Header />
      <main>
        <Hero variant={t.hero} />
        <StatsBand />
        <Thesis />
        <Sections />
        <Tools />
        <CTA />
      </main>
      <Footer />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio
          label="Композиция"
          value={t.hero}
          options={[{ value: "split", label: "Раскладка" }, { value: "cutout", label: "Силуэт" }, { value: "cinematic", label: "Кинокадр" }]}
          onChange={(v) => setTweak("hero", v)}
        />
        <TweakSection label="Бренд" />
        <TweakRadio
          label="Акцент"
          value={t.accent}
          options={[{ value: "gold", label: "Золото" }, { value: "orange", label: "Оранжевый" }]}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakSection label="Типографика" />
        <TweakRadio
          label="Шрифт (фолбэк)"
          value={t.font}
          options={[{ value: "inter", label: "Inter" }, { value: "manrope", label: "Manrope" }]}
          onChange={(v) => setTweak("font", v)}
        />
        <TweakSection label="Движение" />
        <TweakToggle
          label="Анимации при скролле"
          value={t.motion}
          onChange={(v) => setTweak("motion", v)}
        />
      </TweaksPanel>
    </React.Fragment>
  );
}

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