/* ===== Tweaks app — 히어로 변형 / 강조색 ===== */
const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "c",
  "accent": "#009999"
}/*EDITMODE-END*/;

const ACCENT_PAIR = {
  "#009999": "#006868", // 제이드 (GS)
  "#1B5230": "#0F3020", // 포레스트 (GS)
  "#E87722": "#BF5500", // 오렌지 (GS)
  "#D7182A": "#8E0C18"  // 코리아 레드
};

const HERO_OPTIONS = [
  { value: "a", label: "A · 허들 사진" },
  { value: "b", label: "B · 타이포" },
  { value: "c", label: "C · 팀 콜라주" }
];

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

  React.useEffect(() => { window.applyHeroVariant && window.applyHeroVariant(t.heroVariant); }, [t.heroVariant]);
  React.useEffect(() => { window.applyAccent && window.applyAccent(t.accent, ACCENT_PAIR[t.accent]); }, [t.accent]);

  return (
    <TweaksPanel>
      <TweakSection label="히어로(첫 화면) 시안" />
      <TweakRadio
        label="레이아웃"
        value={t.heroVariant}
        options={HERO_OPTIONS}
        onChange={(v) => setTweak("heroVariant", v)}
      />
      <TweakSection label="강조색 (구조·라벨)" />
      <TweakColor
        label="액센트"
        value={t.accent}
        options={["#009999", "#1B5230", "#E87722", "#D7182A"]}
        onChange={(v) => setTweak("accent", v)}
      />
    </TweaksPanel>
  );
}

(function mount() {
  const root = document.createElement("div");
  root.id = "tweaks-root";
  document.body.appendChild(root);
  ReactDOM.createRoot(root).render(<TweaksApp />);
})();