// tweaks.jsx — MKR Labz tweaks UI (uses tweaks-panel.jsx helpers)

(function () {
  const root = document.getElementById('tweaks-root');
  if (!root) return;

  const DEFAULTS = window.MKR_TWEAK_DEFAULTS || {};

  function broadcast(values) {
    window.dispatchEvent(new CustomEvent('mkr-tweaks-changed', { detail: values }));
  }

  function App() {
    const [t, setTweak] = useTweaks(DEFAULTS);

    React.useEffect(() => { broadcast(t); }, [t]);

    return (
      <TweaksPanel title="MKR Tweaks">
        <TweakSection label="Hero" />
        <TweakText
          label="Tagline"
          value={t.tagline}
          onChange={(v) => setTweak('tagline', v)}
        />
        <TweakToggle
          label="Logo bobble"
          value={!!t.heroAnim}
          onChange={(v) => setTweak('heroAnim', v)}
        />
        <TweakToggle
          label="Starburst"
          value={!!t.showStarburst}
          onChange={(v) => setTweak('showStarburst', v)}
        />

        <TweakSection label="Style" />
        <TweakRadio
          label="Primary accent"
          value={t.primaryAccent}
          options={['yellow', 'red', 'green']}
          onChange={(v) => setTweak('primaryAccent', v)}
        />
        <TweakToggle
          label="Halftone dots"
          value={!!t.showHalftone}
          onChange={(v) => setTweak('showHalftone', v)}
        />
        <TweakToggle
          label="Blueprint grid"
          value={!!t.showGrid}
          onChange={(v) => setTweak('showGrid', v)}
        />
        <TweakToggle
          label="Comic tilt"
          value={!!t.panelTilt}
          onChange={(v) => setTweak('panelTilt', v)}
        />
      </TweaksPanel>
    );
  }

  ReactDOM.createRoot(root).render(<App />);
})();