// 聪联科技官网 — Tweaks (panel-only React island, drives CSS variables)
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1466c4",
  "headline": "serif",
  "heroGrid": true
}/*EDITMODE-END*/;

const HEAD_SERIF = '"Noto Serif SC", "Songti SC", serif';
const HEAD_SANS  = '"Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif';

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.accent]);

  React.useEffect(() => {
    document.documentElement.style.setProperty('--head', t.headline === 'sans' ? HEAD_SANS : HEAD_SERIF);
  }, [t.headline]);

  React.useEffect(() => {
    document.body.classList.toggle('no-grid', !t.heroGrid);
  }, [t.heroGrid]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="品牌色 / Brand" />
      <TweakColor label="主题色" value={t.accent}
        options={['#1466c4', '#0a4a9e', '#1b6f9e', '#2f54c7']}
        onChange={(v) => setTweak('accent', v)} />
      <TweakSection label="排版 / Type" />
      <TweakRadio label="标题字体" value={t.headline}
        options={['serif', 'sans']}
        onChange={(v) => setTweak('headline', v)} />
      <TweakSection label="首屏 / Hero" />
      <TweakToggle label="网格背景" value={t.heroGrid}
        onChange={(v) => setTweak('heroGrid', v)} />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.getElementById('tweaks-root');
  if (el && window.ReactDOM && window.useTweaks) {
    ReactDOM.createRoot(el).render(<TweaksApp />);
  }
})();