/* Cognitive Education — Tweaks app (shared across all pages).
   Loaded as text/babel AFTER tweaks-panel.jsx so its window exports exist.
   Persists to localStorage via window.CogTweaks so the chosen direction
   carries across subpages. */
(function () {
  var T = window;
  var DEFAULTS = Object.assign(
    { palette: 'blue', type: 'sans', hero: 'split' },
    window.CogTweaks.load()
  );

  var PAL_HEX = { blue: '#1E5BD6', forest: '#15875A', indigo: '#5B45D6', slate: '#1F3251' };
  var HEX_PAL = {};
  Object.keys(PAL_HEX).forEach(function (k) { HEX_PAL[PAL_HEX[k].toLowerCase()] = k; });

  function CogTweaksApp() {
    var hook = T.useTweaks(DEFAULTS);
    var t = hook[0], setTweak = hook[1];

    React.useEffect(function () {
      window.CogTweaks.save(t);
      window.CogTweaks.apply(t);
    }, [t]);

    var hasHero = !!document.querySelector('.hero');

    return React.createElement(
      T.TweaksPanel, { title: 'Tweaks' },
      React.createElement(T.TweakSection, { label: 'Color style' }),
      React.createElement(T.TweakColor, {
        label: 'Palette',
        value: PAL_HEX[t.palette] || PAL_HEX.blue,
        options: [PAL_HEX.blue, PAL_HEX.forest, PAL_HEX.indigo, PAL_HEX.slate],
        onChange: function (hex) { setTweak('palette', HEX_PAL[String(hex).toLowerCase()] || 'blue'); }
      }),
      React.createElement('div', {
        style: { fontSize: '10.5px', color: 'rgba(41,38,27,.5)', marginTop: '-2px' }
      }, 'Trust Blue · Forest · Indigo · Slate Ink'),

      React.createElement(T.TweakSection, { label: 'Typography' }),
      React.createElement(T.TweakRadio, {
        label: 'Headline type',
        value: t.type,
        options: ['editorial', 'modern', 'sans'],
        onChange: function (v) { setTweak('type', v); }
      }),
      React.createElement('div', {
        style: { fontSize: '10.5px', color: 'rgba(41,38,27,.5)', marginTop: '-2px' }
      }, 'Editorial · Modern · Sans'),

      hasHero ? React.createElement(T.TweakSection, { label: 'Hero layout' }) : null,
      hasHero ? React.createElement(T.TweakRadio, {
        label: 'Layout',
        value: t.hero,
        options: ['split', 'centered', 'editorial'],
        onChange: function (v) { setTweak('hero', v); }
      }) : null
    );
  }

  var mount = document.getElementById('tweaks-root');
  if (mount) ReactDOM.createRoot(mount).render(React.createElement(CogTweaksApp));
})();