// Tweaks panel for Eduvelora — controls colors, fonts, animation intensity.
// Defaults are persisted as a JSON block between EDITMODE markers.

const EDU_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#0B2D5B", "#C9A13A", "#22D3EE"],
  "displayFont": "Bricolage Grotesque",
  "bodyFont": "Plus Jakarta Sans",
  "motion": 1.0,
  "darkNav": false
}/*EDITMODE-END*/;

const EDU_PALETTES = [
  ["#0B2D5B", "#C9A13A", "#22D3EE"], // navy / gold / cyan (brand default)
  ["#7C5CFF", "#C9A13A", "#22D3EE"], // violet / gold / cyan
  ["#FF6B6B", "#06D6A0", "#C9A13A"], // coral / mint / gold
  ["#0EA5E9", "#F472B6", "#FACC15"], // sky / rose / yellow
  ["#1F8A5B", "#C9A13A", "#3B82F6"]  // forest / gold / blue
];

const EDU_DISPLAY_FONTS = ["Bricolage Grotesque", "Fraunces", "Caprasimo", "Space Grotesk", "Familjen Grotesk"];
const EDU_BODY_FONTS = ["Plus Jakarta Sans", "DM Sans", "Inter", "Manrope", "Newsreader"];

function applyEduTweaks(t) {
  const root = document.documentElement;
  if (t.palette && t.palette.length >= 3) {
    root.style.setProperty('--primary', t.palette[0]);
    root.style.setProperty('--secondary', t.palette[1]);
    root.style.setProperty('--tertiary', t.palette[2]);
  }
  root.style.setProperty('--font-display', `"${t.displayFont}", system-ui, sans-serif`);
  root.style.setProperty('--font-body', `"${t.bodyFont}", system-ui, sans-serif`);
  root.style.setProperty('--motion', String(t.motion));
}

function EduTweaksApp() {
  const [t, setTweak] = useTweaks(EDU_TWEAK_DEFAULTS);
  React.useEffect(() => { applyEduTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Palette" />
      <TweakColor label="Accents"
        value={t.palette}
        options={EDU_PALETTES}
        onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Typography" />
      <TweakSelect label="Display font"
        value={t.displayFont}
        options={EDU_DISPLAY_FONTS}
        onChange={(v) => setTweak('displayFont', v)} />
      <TweakSelect label="Body font"
        value={t.bodyFont}
        options={EDU_BODY_FONTS}
        onChange={(v) => setTweak('bodyFont', v)} />

      <TweakSection label="Motion" />
      <TweakSlider label="Animation intensity"
        value={t.motion}
        min={0} max={2} step={0.1}
        unit="x"
        onChange={(v) => setTweak('motion', v)} />
    </TweaksPanel>
  );
}

// Apply defaults immediately on load (before mounting React panel).
(function () {
  // Read persisted overrides from URL hash if present (host may pass them)
  try { applyEduTweaks(EDU_TWEAK_DEFAULTS); } catch (e) {}
})();

window.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('tweaks-root');
  if (!root) return;
  ReactDOM.createRoot(root).render(<EduTweaksApp />);
});