// $FLYIT — Tweaks wiring. Applies hero variant, accent color, glow and motion
// to the plain-HTML page via body data-attributes + CSS variables.

const FLYIT_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3edc64",
  "glow": 1,
  "motion": true
}/*EDITMODE-END*/;

function hexToRgb(hex) {
  const m = hex.replace("#", "");
  return [
    parseInt(m.slice(0, 2), 16),
    parseInt(m.slice(2, 4), 16),
    parseInt(m.slice(4, 6), 16),
  ];
}



function FlyitTweaks() {
  const [t, setTweak] = useTweaks(FLYIT_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.dataset.motion = t.motion ? "on" : "off";
  }, [t.motion]);

  React.useEffect(() => {
    const [r, g, b] = hexToRgb(t.accent);
    const root = document.documentElement.style;
    root.setProperty("--accent", t.accent);
    root.setProperty("--accent-soft", `rgba(${r}, ${g}, ${b}, 0.14)`);
    root.setProperty("--accent-glow", `rgba(${r}, ${g}, ${b}, 0.38)`);
  }, [t.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty("--glow-mult", String(t.glow));
  }, [t.glow]);

  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakColor
        label="Accent green"
        value={t.accent}
        options={["#3edc64", "#34e0a1", "#a3e635"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSlider
        label="Glow intensity"
        value={t.glow}
        min={0}
        max={2}
        step={0.1}
        onChange={(v) => setTweak("glow", v)}
      />
      <TweakToggle
        label="Motion"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

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