// Flightlines site — Tweaks panel
// Mounts into #tweaks-root; visible only when the host toggles Tweaks on.
const FL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "bpOpacity": 0.55,
  "cycleSec": 10,
  "scan": true
}/*EDITMODE-END*/;

function FlightlinesTweaks() {
  const [t, setTweak] = useTweaks(FL_TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--bp-opacity', String(t.bpOpacity));
  }, [t.bpOpacity]);

  React.useEffect(() => {
    if (window.__setCycle) window.__setCycle(t.cycleSec);
  }, [t.cycleSec]);

  React.useEffect(() => {
    document.body.classList.toggle('no-scan', !t.scan);
  }, [t.scan]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero background" />
      <TweakSlider label="Drawing intensity" value={t.bpOpacity} min={0} max={0.6} step={0.01}
                   onChange={(v) => setTweak('bpOpacity', v)} />
      <TweakSlider label="Cycle time" value={t.cycleSec} min={2} max={15} step={1} unit="s"
                   onChange={(v) => setTweak('cycleSec', v)} />
      <TweakSection label="Instrument strip" />
      <TweakToggle label="Scan line" value={t.scan}
                   onChange={(v) => setTweak('scan', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<FlightlinesTweaks />);