/* Strive site Tweaks — visual style + how-it-works layout */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "style": "forest",
  "how": "stepper"
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;
  if (t.style === 'forest') root.removeAttribute('data-style');
  else root.setAttribute('data-style', t.style);
  root.setAttribute('data-how', t.how);
  try {
    localStorage.setItem('strive_style_v2', t.style);
    localStorage.setItem('strive_how_v2', t.how);
  } catch (e) {}
}

function StriveTweaks() {
  // Seed from persisted values so the panel matches what's on screen
  const seeded = { ...TWEAK_DEFAULTS };
  try {
    const s = localStorage.getItem('strive_style_v2'); if (s) seeded.style = s;
    const h = localStorage.getItem('strive_how_v2'); if (h) seeded.how = h;
  } catch (e) {}

  const [t, setTweak] = useTweaks(seeded);
  const hasHow = !!document.querySelector('.how');

  React.useEffect(() => { applyTweaks(t); }, [t.style, t.how]);

  return (
    <TweaksPanel>
      <TweakSection label="Visual style" />
      <TweakRadio
        label="Mood"
        value={t.style}
        options={['forest', 'midnight', 'aurora']}
        onChange={(v) => setTweak('style', v)}
      />
      {hasHow && <TweakSection label="How it works" />}
      {hasHow && (
        <TweakRadio
          label="Layout"
          value={t.how}
          options={['stepper', 'timeline', 'cards']}
          onChange={(v) => setTweak('how', v)}
        />
      )}
    </TweaksPanel>
  );
}

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