/* global React, ReactDOM */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect } = window;

function PXLTweaks() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS || { headline: 'skin-pixel' });

  React.useEffect(() => {
    if (window.applyHeadline) window.applyHeadline(t.headline);
  }, [t.headline]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Hero headline">
        <TweakSelect
          label="Headline"
          value={t.headline}
          onChange={(v) => setTweak('headline', v)}
          options={[
            { value: 'skin-pixel',  label: 'Skin, pixel by pixel.' },
            { value: 'reimagined',  label: 'Phototherapy, reimagined.' },
            { value: 'scan-treat',  label: 'Scan it. Map it. Treat it.' },
            { value: 'targeted',    label: 'The first targeted LED mask.' },
            { value: 'beyond-flat', label: 'Beyond flat light.' },
          ]}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const mount = document.createElement('div');
document.body.appendChild(mount);
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;
ReactDOM.createRoot(mount).render(<PXLTweaks />);