function App() {
  const config = window.GREEN_TEA_CONFIG || {};
  const theme = config.theme || {};
  const tweakConfig = config.tweaks || {};
  const defaultAccent = theme.defaultAccent || '__auto__';
  const fontStacks = theme.fontStacks || {};
  const [t, setTweak] = useTweaks(tweakConfig.defaults || {});

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--font-head', fontStacks[t.headFont] || fontStacks.mincho);
    if (t.accent && t.accent !== defaultAccent) {
      root.style.setProperty('--accent', t.accent);
    } else {
      root.style.removeProperty('--accent');
    }
  }, [t.headFont, t.accent]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label={'\u5b57\u9ad4 · Typeface'} />
      <TweakRadio
        label={'\u6a19\u984c\u5b57'}
        value={t.headFont}
        options={tweakConfig.fontOptions || []}
        onChange={(v) => setTweak('headFont', v)}
      />
      <TweakSection label={'\u4e3b\u8272 · Accent'} />
      <TweakRadio
        label={'\u8272\u5f69'}
        value={t.accent}
        options={tweakConfig.accentOptions || []}
        onChange={(v) => setTweak('accent', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<App />);