/* Tweaks island — gentle, accessibility-minded controls for the calm guide. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#5f7d4e", "#466235", "#d7e3c9", "#eef3e7", "#a9c195"],
  "fontChoice": "Pretendard",
  "baseSize": 18,
  "motion": true
}/*EDITMODE-END*/;

const FONT_MAP = {
  "Pretendard": "'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif",
  "Noto Sans KR": "'Noto Sans KR', sans-serif",
  "시스템": "-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', system-ui, sans-serif"
};

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

  React.useEffect(()=>{
    const p = t.palette || TWEAK_DEFAULTS.palette;
    const r = document.documentElement.style;
    r.setProperty("--accent", p[0]);
    r.setProperty("--accent-strong", p[1]);
    r.setProperty("--accent-soft", p[2]);
    r.setProperty("--accent-wash", p[3]);
    if(p[4]) r.setProperty("--accent-100", p[4]);
  }, [t.palette]);

  React.useEffect(()=>{
    document.documentElement.style.setProperty("--font", FONT_MAP[t.fontChoice] || FONT_MAP.Pretendard);
  }, [t.fontChoice]);

  React.useEffect(()=>{ document.body.style.fontSize = (t.baseSize||18) + "px"; }, [t.baseSize]);

  React.useEffect(()=>{
    document.body.classList.toggle("motion-off", !t.motion);
    if(!t.motion && window.checkReveals) window.checkReveals();
  }, [t.motion]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="분위기" />
      <TweakColor label="강조 색" value={t.palette}
        options={[
          ["#5f7d4e","#466235","#d7e3c9","#eef3e7","#a9c195"],
          ["#7a936a","#5d7650","#dde7d5","#f1f5ec","#b3c8a6"],
          ["#c0703f","#a2562f","#ecd8c6","#f7efe6","#e3bd9f"],
          ["#bd6a7e","#9c4e62","#eed9df","#f8eff2","#dcaeba"],
          ["#8479a6","#645788","#e3ddee","#f3f1f9","#beb2d6"]
        ]}
        onChange={(v)=> setTweak("palette", v)} />
      <TweakRadio label="본문 글꼴" value={t.fontChoice}
        options={["Pretendard","Noto Sans KR","시스템"]}
        onChange={(v)=> setTweak("fontChoice", v)} />

      <TweakSection label="읽기 편하게" />
      <TweakSlider label="글자 크기" value={t.baseSize} min={17} max={22} step={1} unit="px"
        onChange={(v)=> setTweak("baseSize", v)} />
      <TweakToggle label="부드러운 등장 효과" value={t.motion}
        onChange={(v)=> setTweak("motion", v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById("tweaks-root")).render(<TweaksIsland />);