/* Tutors Adelaide — Tweaks app (shared across all pages).
   Applies tokens via window.applyTweaks and persists to localStorage
   so changes carry between pages. */

const TA_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "headingFont": "Cinzel",
  "radius": 18,
  "waves": true
}/*EDITMODE-END*/;

function TAApp() {
  // start from on-disk defaults merged with any locally-saved values
  let initial = TA_TWEAK_DEFAULTS;
  try {
    const ls = JSON.parse(localStorage.getItem("ta-tweaks") || "null");
    if (ls) initial = Object.assign({}, TA_TWEAK_DEFAULTS, ls);
  } catch (e) {}

  const [t, setTweak] = useTweaks(initial);

  React.useEffect(() => {
    window.applyTweaks(t);
    try { localStorage.setItem("ta-tweaks", JSON.stringify(t)); } catch (e) {}
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand colour" />
      <TweakColor
        label="Accent / CTA"
        value={window.TA_ACCENTS[t.accent].accent}
        options={["#e7af46", "#2bab9c", "#3d6fb0", "#e08769"]}
        onChange={(hex) => {
          const map = { "#e7af46": "gold", "#2bab9c": "teal", "#3d6fb0": "royal", "#e08769": "coral" };
          setTweak("accent", map[hex] || "gold");
        }}
      />
      <TweakSection label="Typography" />
      <TweakSelect
        label="Heading font"
        value={t.headingFont}
        options={["Cinzel", "Playfair Display", "Outfit"]}
        onChange={(v) => setTweak("headingFont", v)}
      />
      <TweakSection label="Shape" />
      <TweakSlider
        label="Corner radius" value={t.radius} min={4} max={30} step={1} unit="px"
        onChange={(v) => setTweak("radius", v)}
      />
      <TweakToggle
        label="Watercolour background" value={t.waves}
        onChange={(v) => setTweak("waves", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.getElementById("tweaks-root");
  if (el && window.ReactDOM) ReactDOM.createRoot(el).render(<TAApp />);
})();