// tweaks-mount.jsx — wires the Tweaks panel to the app's tweak store via context.
function TweaksPanelMount() {
  const { tweaks: t, setTweaks: setTweak } = useApp();
  const { lang, setLang } = useLang();
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand accent" />
      <TweakColor label="Primary color" value={t.accent}
        options={["#C7F262", "#00654B", "#A3E635", "#2563EB", "#7E22CE"]}
        onChange={(v) => setTweak("accent", v)} />
      <TweakSection label="Layout" />
      <TweakRadio label="Density" value={t.density}
        options={["compact", "comfortable"]}
        onChange={(v) => setTweak("density", v)} />
      <TweakSlider label="Corner radius" value={t.radius} min={6} max={24} step={2} unit="px"
        onChange={(v) => setTweak("radius", v)} />
      <TweakRadio label="Contacts view" value={t.crmView}
        options={["list", "board"]}
        onChange={(v) => setTweak("crmView", v)} />
      <TweakSection label="Language" />
      <TweakRadio label="Interface" value={lang}
        options={["en", "ar"]}
        onChange={(v) => setLang(v)} />
    </TweaksPanel>
  );
}
window.TweaksPanelMount = TweaksPanelMount;