// Stylify landing — Tweaks panel (mounted only when host enables Tweaks)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "voice": "The job",
  "mood": "Paper",
  "rhythm": "Relaxed"
}/*EDITMODE-END*/;

const HERO_COPY = {
  "The job": {
    h1: "Messy draft in. Polished document out.",
    sub: "Stylify applies real Word styles, headings, lists, and tables to any document, including the confidential ones. It runs locally by default, and you approve every change as a tracked redline."
  },
  "The tagline": {
    h1: "Clean formatting, in seconds.",
    sub: "Stylify turns messy notes into a clean, properly styled Word document from a single plain-language instruction. It runs locally by default, and shows every change as a tracked redline."
  },
  "The room": {
    h1: "The AI formatter your IT team can approve.",
    sub: "Where cloud AI isn't allowed, Stylify still works. It formats Word documents entirely on your machine, even with Wi-Fi off, and you approve every change as a tracked redline."
  }
};

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute("data-mood", t.mood.toLowerCase());
  root.setAttribute("data-rhythm", t.rhythm.toLowerCase());
  const copy = HERO_COPY[t.voice] || HERO_COPY["The job"];
  const h1 = document.getElementById("heroH1");
  const sub = document.getElementById("heroSub");
  if (h1 && h1.textContent !== copy.h1) h1.textContent = copy.h1;
  if (sub && sub.textContent.trim() !== copy.sub) sub.textContent = copy.sub;
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Hero voice" />
      <TweakRadio label="Headline" value={t.voice}
                  options={["The job", "The tagline", "The room"]}
                  onChange={(v) => setTweak("voice", v)} />
      <TweakSection label="Feel" />
      <TweakRadio label="Canvas" value={t.mood}
                  options={["Paper", "Crisp"]}
                  onChange={(v) => setTweak("mood", v)} />
      <TweakRadio label="Rhythm" value={t.rhythm}
                  options={["Relaxed", "Compact"]}
                  onChange={(v) => setTweak("rhythm", v)} />
    </TweaksPanel>
  );
}

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