// MastersFit site — Tweaks panel
// Palette + dark mode defer to the shared MFTheme controller (so the header
// light/dark toggle and this panel stay in sync). Reading size is panel-local.
const { useTweaks, TweaksPanel, TweakSection, TweakSelect, TweakToggle, TweakSlider } = window;

const MF_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "readingSize": 17,
  "heroHeadline": "Your best training years aren't behind you."
}/*EDITMODE-END*/;

// Hero headline candidates — all on-voice (encouraging coach, capability not vanity).
const MF_HEADLINES = [
  { value: "Your best training years aren't behind you.", label: "Best years ahead (current)" },
  { value: "Training built around the body you have today.", label: "Body you have today" },
  { value: "Get stronger for the next 30 years.", label: "Next 30 years" },
  { value: "A coach that adapts to you, every week.", label: "Adapts to you" },
  { value: "Strength has no expiration date.", label: "No expiration date" },
  { value: "Train smarter than you did at 30.", label: "Smarter than at 30" },
];

const MF_PALETTES = [
  { value: "original", label: "Monochrome" },
  { value: "steel-blue", label: "Steel blue" },
  { value: "dusty-denim", label: "Dusty denim" },
  { value: "dusty-sage", label: "Dusty sage" },
  { value: "carbon-violet", label: "Carbon violet" },
];

function MFTweaks() {
  const [t, setTweak] = useTweaks(MF_TWEAK_DEFAULTS);
  const [palette, setPalette] = React.useState(window.MFTheme.getPalette());
  const [dark, setDark] = React.useState(window.MFTheme.isDark());

  React.useEffect(() => {
    const h = (e) => { setPalette(e.detail.palette); setDark(e.detail.dark); };
    window.addEventListener("mf-theme-change", h);
    return () => window.removeEventListener("mf-theme-change", h);
  }, []);

  React.useEffect(() => {
    document.body.style.fontSize = `${t.readingSize}px`;
  }, [t.readingSize]);

  React.useEffect(() => {
    const el = document.getElementById("hero-headline");
    if (el) el.textContent = t.heroHeadline;
  }, [t.heroHeadline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Hero" />
      <TweakSelect label="Headline" value={t.heroHeadline} options={MF_HEADLINES}
        onChange={(v) => setTweak("heroHeadline", v)} />
      <TweakSection label="Brand theme" />
      <TweakSelect label="Palette" value={palette} options={MF_PALETTES}
        onChange={(v) => window.MFTheme.setPalette(v)} />
      <TweakToggle label="Dark mode" value={dark}
        onChange={(v) => window.MFTheme.setDark(v)} />
      <TweakSection label="Readability" />
      <TweakSlider label="Reading size" value={t.readingSize} min={15} max={20} step={1} unit="px"
        onChange={(v) => setTweak("readingSize", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<MFTweaks />);