/* Tweaks host for SKY High homepage — mounts the shared TweaksPanel */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "listStyle": "bullets",
  "showPhotos": true,
  "cardAccents": "multicolor"
}/*EDITMODE-END*/;

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.body.classList.toggle('tweak-pills', t.listStyle === 'pills');
    document.body.classList.toggle('tweak-nophotos', !t.showPhotos);
    document.querySelectorAll('.subject-slide').forEach((el) => {
      if (!el.dataset.accent) el.dataset.accent = el.style.getPropertyValue('--accent');
      el.style.setProperty('--accent', t.cardAccents === 'uniform' ? '#E43D12' : el.dataset.accent);
    });
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Core Subjects" />
      <TweakRadio label="Topic list" value={t.listStyle}
        options={['bullets', 'pills']}
        onChange={(v) => setTweak('listStyle', v)} />
      <TweakToggle label="Card photos" value={t.showPhotos}
        onChange={(v) => setTweak('showPhotos', v)} />
      <TweakRadio label="Card accents" value={t.cardAccents}
        options={['multicolor', 'uniform']}
        onChange={(v) => setTweak('cardAccents', v)} />
    </TweaksPanel>
  );
}

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