/* Park Lane — Tweaks panel. Applies to the page via window.applyPLTweaks(). */

const PLO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "gold",
  "show_consult": true,
  "show_itero": true,
  "show_costs": true,
  "show_how": true
}/*EDITMODE-END*/;

function PLOTweaksApp() {
  const [t, setTweak] = useTweaks(PLO_TWEAK_DEFAULTS);

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

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand accent" />
      <TweakRadio label="Accent" value={t.accent}
        options={['gold', 'bronze', 'navy']}
        onChange={(v) => setTweak('accent', v)} />

      <TweakSection label="Show sections" />
      <TweakToggle label="What's included" value={t.show_consult} onChange={(v) => setTweak('show_consult', v)} />
      <TweakToggle label="See your smile (iTero)" value={t.show_itero} onChange={(v) => setTweak('show_itero', v)} />
      <TweakToggle label="Costs & payment" value={t.show_costs} onChange={(v) => setTweak('show_costs', v)} />
      <TweakToggle label="How Invisalign works" value={t.show_how} onChange={(v) => setTweak('show_how', v)} />
    </TweaksPanel>
  );
}

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