/* global React, Reveal, useTweaks, TweakSection, TweakRadio, TweakToggle */
// chrome.jsx — общий «каркас» для всех внутренних страниц:
// хук применения tweaks (акцент/шрифт/движение + parallax), панель Tweaks, шапка-герой.

const FONT_STACKS = {
  inter: 'var(--font-apple), "Inter", system-ui, sans-serif',
  manrope: 'var(--font-apple), "Manrope", system-ui, sans-serif',
};

function useChrome(extra) {
  const defaults = Object.assign({ accent: "gold", font: "inter", motion: true }, extra || {});
  const [t, setTweak] = useTweaks(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;
    document.documentElement.classList.toggle(
      "anim-on", t.motion && !reduce && document.visibilityState === "visible"
    );
    window.__noMotion = !t.motion;
    window.dispatchEvent(new Event("gm:motion"));
  }, [t.motion]);

  React.useEffect(() => {
    const px = Array.from(document.querySelectorAll(".parallax"));
    if (!t.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); };
  }, [t.motion]);

  return [t, setTweak];
}

function ChromeTweaks({ t, setTweak }) {
  return (
    <React.Fragment>
      <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)} />
    </React.Fragment>
  );
}

// Шапка-герой для внутренних страниц (компактнее главного hero)
function PageHero({ eyebrow, title, lead, children, align = "left" }) {
  return (
    <section className={"page-hero" + (align === "center" ? " center" : "")} id="top">
      <div className="hero-glow g1"></div>
      <div className="hero-glow g2"></div>
      <div className="container">
        <Reveal className="page-hero-inner">
          <span className="eyebrow">{eyebrow}</span>
          <h1 className="page-title">{title}</h1>
          {lead ? <p className="lead page-lead">{lead}</p> : null}
          {children}
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { FONT_STACKS, useChrome, ChromeTweaks, PageHero });