// Tweaks panel — single knob: reveal mode (explode | xray | cross)
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "revealMode": "explode"
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    if (window.__setMode) window.__setMode(tweaks.revealMode);
  }, [tweaks.revealMode]);

  useEffect(() => {
    const handler = (e) => setTweak('revealMode', e.detail);
    window.addEventListener('mode-changed', handler);
    return () => window.removeEventListener('mode-changed', handler);
  }, [setTweak]);

  const desc =
    tweaks.revealMode === 'explode' ? 'Hovered subsystem flies outward in 3D — temples swing, lenses pop forward.' :
    tweaks.revealMode === 'xray'    ? 'Non-active subsystems fade out, isolating the active one.' :
                                       'Active subsystem highlighted as a section cut.';

  return React.createElement(
    window.TweaksPanel,
    { title: 'TWEAKS' },
    React.createElement(
      window.TweakSection,
      { label: 'REVEAL MODE' },
      React.createElement(window.TweakRadio, {
        label: 'MODE',
        value: tweaks.revealMode,
        onChange: (v) => setTweak('revealMode', v),
        options: [
          { value: 'explode', label: 'EXPLODE' },
          { value: 'xray',    label: 'X-RAY' },
          { value: 'cross',   label: 'CROSS' },
        ],
      }),
      React.createElement(
        'div',
        {
          style: {
            fontSize: 10,
            color: '#4a6a8a',
            marginTop: 10,
            letterSpacing: '0.06em',
            lineHeight: 1.5,
            padding: '8px 10px',
            border: '1px dashed rgba(74,106,138,0.3)',
            borderRadius: 4,
          },
        },
        desc
      )
    )
  );
}

const root = document.createElement('div');
document.body.appendChild(root);
ReactDOM.createRoot(root).render(React.createElement(App));