/* Quartoloom deck — Tweaks wiring */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "look": "Energetic",
  "accent": "#18B6A6",
  "pattern": true
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const deck = document.querySelector('deck-stage');
  if (!deck) return;
  // Look direction
  deck.setAttribute('data-theme', t.look === 'Editorial' ? 'a' : 'b');
  // Accent color (inline overrides theme rule)
  deck.style.setProperty('--accent', t.accent);
  // derive a brighter/deeper sibling for accent-2
  deck.style.setProperty('--accent-2', t.accent);
  // Pattern texture
  deck.classList.toggle('no-weave', !t.pattern);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Overall look" />
      <TweakRadio label="Direction" value={t.look}
        options={['Energetic', 'Editorial']}
        onChange={(v) => setTweak('look', v)} />
      <TweakSection label="Brand accent" />
      <TweakColor label="Accent" value={t.accent}
        options={['#18B6A6', '#1FD3BE', '#0E8C80']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="Graphics" />
      <TweakToggle label="Woven texture" value={t.pattern}
        onChange={(v) => setTweak('pattern', v)} />
    </TweaksPanel>
  );
}

// apply persisted/default tweaks immediately on load
applyTweaks(TWEAK_DEFAULTS);
ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);