// Tweaks panel for A.R.M. Agency site
const { useEffect: useEffectT } = React;

function ARMTweaks() {
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  useEffectT(() => {
    if (window.__applyTweaks) window.__applyTweaks(tweaks);
  }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Look">
        <TweakRadio
          label="Accent color"
          value={tweaks.accent}
          onChange={(v) => setTweaks({ accent: v })}
          options={[
            { value: 'gold', label: 'Goud (current)' },
            { value: 'green', label: 'Groen' },
            { value: 'indigo', label: 'Indigo' },
            { value: 'rust', label: 'Rust' },
          ]}
        />
      </TweakSection>

      <TweakSection title="Hero">
        <TweakText
          label="Kicker"
          value={tweaks.heroKicker}
          onChange={(v) => setTweaks({ heroKicker: v })}
        />
        <TweakText
          label="Headline"
          value={tweaks.heroHeadline}
          onChange={(v) => setTweaks({ heroHeadline: v })}
          multiline
        />
        <TweakToggle
          label="Pre-launch badge"
          value={tweaks.prelaunchBadge}
          onChange={(v) => setTweaks({ prelaunchBadge: v })}
        />
      </TweakSection>

      <TweakSection title="Sections">
        <TweakToggle
          label="Example automation demo"
          value={tweaks.showDemo}
          onChange={(v) => setTweaks({ showDemo: v })}
        />
        <TweakToggle
          label="Founder section"
          value={tweaks.showFounder}
          onChange={(v) => setTweaks({ showFounder: v })}
        />
        <TweakToggle
          label="Workflow scan tool"
          value={tweaks.showScanTool}
          onChange={(v) => setTweaks({ showScanTool: v })}
        />
        <TweakToggle
          label="Journal (blog)"
          value={tweaks.showBlog}
          onChange={(v) => setTweaks({ showBlog: v })}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweaksRoot = document.createElement('div');
document.body.appendChild(tweaksRoot);
ReactDOM.createRoot(tweaksRoot).render(<ARMTweaks />);