// The knobs the dev panel exposes. Only mounted with ?tweaks in the URL.

function SiteTweaks({ tw, setTweak, setLang }) {
  return (
    <TweaksPanel>
      <TweakSection label="Language" />
      <TweakRadio label="Site language" value={tw.lang || 'EN'} options={['EN', 'RO']} onChange={setLang} />
      <TweakSection label="Brand" />
      <TweakColor label="Accent" value={tw.accent}
        options={['#3D90C9', '#6BA8D6', '#34647F', '#1A7A72', '#5E6B73', '#3568C4', '#3E6B43', '#BE6A3A']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSelect label="Fonts" value={tw.fonts} options={Object.keys(FONT_PAIRS)}
        onChange={(v) => setTweak('fonts', v)} />
      <TweakSection label="Theme" />
      <TweakToggle label="Dark mode" value={tw.darkMode} onChange={(v) => setTweak('darkMode', v)} />
      <TweakRadio label="Hero cards" value={tw.hero || 'Gradient'} options={['Gradient', 'Flat', 'Deep']}
        onChange={(v) => setTweak('hero', v)} />
      <TweakSlider label="Background tint %" value={tw.bgTint ?? 2} min={0} max={14} step={0.5}
        onChange={(v) => setTweak('bgTint', v)} />
      <TweakRadio label="Shadows" value={tw.shadows || 'Soft'} options={['Flat', 'Soft', 'Elevated']}
        onChange={(v) => setTweak('shadows', v)} />
    </TweaksPanel>
  );
}

Object.assign(window, { SiteTweaks });