/* Tweaks: hero logo animation variations */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "anim": "blinds",
  "speed": 60,
  "hold": 3.8,
  "accent": "#d9482f"
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    if (!window.__hero) return;
    window.__hero.mode = t.anim;
    window.__hero.stagger = t.anim === "sweep" ? 0 : Number(t.speed);
    window.__hero.fullHold = Math.round(Number(t.hold) * 1000);
    document.documentElement.style.setProperty("--accent", t.accent);
    if (window.__restartHero) window.__restartHero();
  }, [t.anim, t.speed, t.hold, t.accent]);

  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="히어로 로고 애니메이션" />
      <window.TweakRadio
        label="스타일"
        value={t.anim}
        options={[
          { value: "blinds", label: "Blinds" },
          { value: "defocus", label: "Defocus" },
          { value: "sweep", label: "Sweep" }
        ]}
        onChange={(v) => setTweak("anim", v)}
      />
      <window.TweakSlider
        label="전환 속도"
        value={t.speed} min={20} max={120} step={5} unit="ms"
        onChange={(v) => setTweak("speed", v)}
      />
      <window.TweakSlider
        label="완성 유지 시간"
        value={t.hold} min={1.5} max={6} step={0.1} unit="s"
        onChange={(v) => setTweak("hold", v)}
      />
      <window.TweakSection label="포인트 컬러" />
      <window.TweakColor
        label="Accent"
        value={t.accent}
        options={["#d9482f", "#393636", "#0066ff", "#00875a"]}
        onChange={(v) => setTweak("accent", v)}
      />
    </window.TweaksPanel>
  );
}

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