/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakSelect, TweakSlider */

const KYULIZ_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hero": "b",
  "blue": "classic",
  "accent": "gold",
  "font": "zenkaku",
  "weight": 500,
  "radius": 18
}/*EDITMODE-END*/;

function KyulizTweaks() {
  const [t, setTweak] = useTweaks(KYULIZ_TWEAK_DEFAULTS);

  // Apply to the plain-HTML page whenever a tweak changes (and on mount)
  React.useEffect(() => {
    if (window.applyKyulizTweaks) window.applyKyulizTweaks(t);
  }, [t]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="ヒーロー（第一印象）" />
      <TweakRadio
        label="レイアウト案"
        value={t.hero}
        options={[
          { value: "a", label: "A 分割＋写真" },
          { value: "b", label: "B 中央寄せ" },
          { value: "c", label: "C 画面デモ" }
        ]}
        onChange={(v) => setTweak("hero", v)}
      />

      <TweakSection label="カラー" />
      <TweakRadio
        label="メインのブルー"
        value={t.blue}
        options={[
          { value: "classic", label: "クラシック" },
          { value: "navy", label: "ネイビー" },
          { value: "teal", label: "ティール" }
        ]}
        onChange={(v) => setTweak("blue", v)}
      />
      <TweakRadio
        label="差し色（温かみ）"
        value={t.accent}
        options={[
          { value: "gold", label: "ゴールド" },
          { value: "amber", label: "アンバー" },
          { value: "orange", label: "オレンジ" },
          { value: "terracotta", label: "テラコッタ" }
        ]}
        onChange={(v) => setTweak("accent", v)}
      />

      <TweakSection label="タイポグラフィ" />
      <TweakSelect
        label="フォント"
        value={t.font}
        options={[
          { value: "zenkaku", label: "Zen Kaku Gothic New（標準）" },
          { value: "notosans", label: "Noto Sans JP" },
          { value: "mplus", label: "M PLUS Rounded（やわらか）" },
          { value: "biz", label: "BIZ UDPGothic（実務的）" }
        ]}
        onChange={(v) => setTweak("font", v)}
      />
      <TweakRadio
        label="見出しの太さ"
        value={t.weight}
        options={[
          { value: 300, label: "細" },
          { value: 500, label: "中" },
          { value: 700, label: "太" }
        ]}
        onChange={(v) => setTweak("weight", v)}
      />

      <TweakSection label="形状" />
      <TweakSlider
        label="角丸"
        value={t.radius}
        min={4}
        max={28}
        step={2}
        unit="px"
        onChange={(v) => setTweak("radius", v)}
      />
    </TweaksPanel>
  );
}

(function mountTweaks() {
  const el = document.getElementById("tweaks-root");
  if (!el) return;
  ReactDOM.createRoot(el).render(<KyulizTweaks />);
})();