/* global React, ReactDOM */

/* ============================================================
   Page-level wiring + Tweaks panel
   ============================================================ */

const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "training-room",
  "heroHeadline": "your-side",
  "ctaLabel": "start-free",
  "accent": "#F59E0B",
  "density": "comfortable"
}/*EDITMODE-END*/;

/* --- Nav scroll state ------------------------------------- */
(function initNav() {
  const nav = document.querySelector(".nav");
  if (!nav) return;
  const onScroll = () => {
    nav.classList.toggle("is-scrolled", window.scrollY > 12);
  };
  onScroll();
  window.addEventListener("scroll", onScroll, { passive: true });
})();

/* --- Smooth in-page anchor scrolling ---------------------- */
(function initAnchors() {
  document.addEventListener("click", (e) => {
    const a = e.target.closest('a[href^="#"]');
    if (!a) return;
    const id = a.getAttribute("href").slice(1);
    if (!id) return;
    const target = document.getElementById(id);
    if (!target) return;
    e.preventDefault();
    target.scrollIntoView({ behavior: "smooth", block: "start" });
  });
})();

/* --- Direction system ------------------------------------- */
function applyDirection(dir) {
  document.body.setAttribute("data-direction", dir);
  // toggle hero theme: dark for training-room, light for composed and stillness
  const hero = document.querySelector(".hero");
  if (hero) {
    hero.classList.toggle("on-dark", dir === "training-room");
  }
  const stakes = document.querySelector(".stakes");
  if (stakes) {
    stakes.classList.toggle("on-dark", dir === "training-room");
  }
}

function applyAccent(color) {
  document.documentElement.style.setProperty("--accent", color);
}

function applyDensity(d) {
  document.body.setAttribute("data-density", d);
}

function applyHeroHeadline(variant) {
  document.body.setAttribute("data-headline", variant);
}

function applyCtaLabel(label) {
  document.body.setAttribute("data-cta", label);
  const txt = label === "begin-training" ? "Begin training"
            : label === "sharpen" ? "Sharpen your skills"
            : "Start free";
  document.querySelectorAll("[data-cta-text]").forEach(el => { el.textContent = txt; });
}

/* --- Mount Tweaks panel ----------------------------------- */
const {
  TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect
} = window;

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

  useEffect(() => { applyDirection(t.direction); }, [t.direction]);
  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { applyDensity(t.density); }, [t.density]);
  useEffect(() => { applyHeroHeadline(t.heroHeadline); }, [t.heroHeadline]);
  useEffect(() => { applyCtaLabel(t.ctaLabel); }, [t.ctaLabel]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Direction" />
      <TweakSelect
        label="Variation"
        value={t.direction}
        options={[
          { value: "composed", label: "A · Composed" },
          { value: "training-room", label: "B · Training Room" },
          { value: "stillness", label: "C · Stillness" }
        ]}
        onChange={(v) => setTweak("direction", v)}
      />

      <TweakSection label="Copy" />
      <TweakSelect
        label="Headline"
        value={t.heroHeadline}
        options={[
          { value: "your-side", label: "Built for your side" },
          { value: "walk-in-ready", label: "Walk in ready" }
        ]}
        onChange={(v) => setTweak("heroHeadline", v)}
      />
      <TweakSelect
        label="CTA"
        value={t.ctaLabel}
        options={[
          { value: "start-free", label: "Start free" },
          { value: "begin-training", label: "Begin training" },
          { value: "sharpen", label: "Sharpen your skills" }
        ]}
        onChange={(v) => setTweak("ctaLabel", v)}
      />

      <TweakSection label="Style" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#F59E0B", "#D97706", "#0F766E", "#E11D48", "#7C3AED"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakRadio
        label="Density"
        value={t.density}
        options={[
          { value: "compact", label: "Tight" },
          { value: "comfortable", label: "Comfy" },
          { value: "spacious", label: "Airy" }
        ]}
        onChange={(v) => setTweak("density", v)}
      />
    </TweaksPanel>
  );
}

/* Mount immediately so first-paint reflects defaults */
(function () {
  // apply defaults eagerly so the page doesn't flash the wrong theme
  applyDirection(TWEAK_DEFAULTS.direction);
  applyAccent(TWEAK_DEFAULTS.accent);
  applyDensity(TWEAK_DEFAULTS.density);
  applyHeroHeadline(TWEAK_DEFAULTS.heroHeadline);
  applyCtaLabel(TWEAK_DEFAULTS.ctaLabel);

  const mount = document.getElementById("tweaks-root");
  if (mount) {
    const root = ReactDOM.createRoot(mount);
    root.render(<Tweaks />);
  }
})();