/* tsumugu LP — Tweaks panel (hero layout + layout knobs) */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "a",
  "density": "regular",
  "motion": true
}/*EDITMODE-END*/;

const HERO_LABELS = { "分割": "a", "中央": "b" };
const HERO_BY_VALUE = { a: "分割", b: "中央" };
const DENS_BY_VALUE = { compact: "コンパクト", regular: "標準", spacious: "ゆったり" };
const DENS_LABELS = { "コンパクト": "compact", "標準": "regular", "ゆったり": "spacious" };

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

  React.useEffect(() => {
    const r = document.documentElement;
    r.dataset.hero = t.hero;
    r.dataset.density = t.density;
    r.dataset.motion = t.motion ? "on" : "off";
  }, [t.hero, t.density, t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="ファーストビュー" />
      <TweakRadio
        label="レイアウト"
        value={HERO_BY_VALUE[t.hero]}
        options={["分割", "中央"]}
        onChange={(v) => setTweak("hero", HERO_LABELS[v])}
      />
      <TweakSection label="レイアウト" />
      <TweakRadio
        label="余白"
        value={DENS_BY_VALUE[t.density]}
        options={["コンパクト", "標準", "ゆったり"]}
        onChange={(v) => setTweak("density", DENS_LABELS[v])}
      />
      <TweakToggle
        label="モックの浮遊アニメ"
        value={t.motion}
        onChange={(v) => setTweak("motion", v)}
      />
    </TweaksPanel>
  );
}

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