// MapAfrique — Tweaks panel. Edits the live design; nothing here touches data.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#16623f", "#b8470f", "#faf7f1"],
  "display": "Hanken",
  "radius": 20,
  "marker": "Teardrop",
  "density": "Comfortable",
  "mapBase": "Street",
  "ratings": true,
  "badges": true,
  "openStatus": true
}/*EDITMODE-END*/;

const PALETTES = [
  ["#16623f", "#b8470f", "#faf7f1"], // Savanna (default)
  ["#0e7490", "#dc6a1c", "#f3f7f8"], // Lagoon
  ["#3f4db8", "#c2410c", "#f6f6fb"], // Indigo
  ["#7c3aed", "#b45309", "#faf6fb"], // Plum
  ["#be123c", "#0f766e", "#fdf6f5"], // Rose
];

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { if (window.applyTweaks) window.applyTweaks(t); }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme" />
      <TweakColor label="Palette" value={t.palette} options={PALETTES}
                  onChange={(v) => setTweak('palette', v)} />

      <TweakSection label="Type & shape" />
      <TweakRadio label="Display font" value={t.display}
                  options={['Hanken', 'Space', 'Serif', 'Clean']}
                  onChange={(v) => setTweak('display', v)} />
      <TweakSlider label="Corner radius" value={t.radius} min={8} max={26} step={1} unit="px"
                  onChange={(v) => setTweak('radius', v)} />
      <TweakRadio label="Markers" value={t.marker}
                  options={['Teardrop', 'Circle', 'Square']}
                  onChange={(v) => setTweak('marker', v)} />

      <TweakSection label="Layout & content" />
      <TweakRadio label="Card density" value={t.density}
                  options={['Comfortable', 'Compact']}
                  onChange={(v) => setTweak('density', v)} />
      <TweakRadio label="Base map" value={t.mapBase}
                  options={['Street', 'Satellite']}
                  onChange={(v) => setTweak('mapBase', v)} />
      <TweakToggle label="Star ratings" value={t.ratings}
                  onChange={(v) => setTweak('ratings', v)} />
      <TweakToggle label="Verified badges" value={t.badges}
                  onChange={(v) => setTweak('badges', v)} />
      <TweakToggle label="Open / closed tag" value={t.openStatus}
                  onChange={(v) => setTweak('openStatus', v)} />
    </TweaksPanel>
  );
}

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