/* ============ Dave Ko — Tweaks (vibe variations) ============ */
const DK_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "vibe": "gallery",
  "cols": 3,
  "corners": "sharp",
  "grain": true,
  "reveal": true
}/*EDITMODE-END*/;

const VIBE_COLS = { editorial: 2, gallery: 3, cinematic: 1 };

function DKTweaks() {
  const [t, setTweak] = useTweaks(DK_TWEAK_DEFAULTS);
  const root = document.documentElement;

  React.useEffect(() => { root.setAttribute("data-vibe", t.vibe); }, [t.vibe]);
  React.useEffect(() => { root.style.setProperty("--grid-cols", t.cols); }, [t.cols]);
  React.useEffect(() => { root.style.setProperty("--tile-radius", t.corners === "soft" ? "10px" : "0px"); }, [t.corners]);
  React.useEffect(() => { root.setAttribute("data-reveal", t.reveal ? "1" : "0"); }, [t.reveal]);
  React.useEffect(() => {
    let s = document.getElementById("dk-grain-off");
    if (!t.grain) { if (!s) { s = document.createElement("style"); s.id = "dk-grain-off"; s.textContent = "body::after{display:none!important}"; document.head.appendChild(s); } }
    else if (s) s.remove();
  }, [t.grain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Vibe" />
      <TweakRadio
        label="Overall direction"
        value={t.vibe}
        options={["editorial", "gallery", "cinematic"]}
        onChange={(v) => setTweak({ vibe: v, cols: VIBE_COLS[v] })}
      />
      <p style={{ margin: "2px 2px 0", fontSize: 11, lineHeight: 1.5, color: "rgba(255,255,255,0.4)", fontFamily: "var(--mono, monospace)" }}>
        Editorial — serif hero, generous 2-up.<br />
        Gallery — dense worship-style wall.<br />
        Cinematic — full-bleed, one-up, max black.
      </p>

      <TweakSection label="Grid" />
      <TweakSlider label="Columns" value={t.cols} min={1} max={4} step={1} onChange={(v) => setTweak("cols", v)} />
      <TweakRadio label="Tile corners" value={t.corners} options={["sharp", "soft"]} onChange={(v) => setTweak("corners", v)} />

      <TweakSection label="Texture & motion" />
      <TweakToggle label="Film grain" value={t.grain} onChange={(v) => setTweak("grain", v)} />
      <TweakToggle label="Scroll reveal" value={t.reveal} onChange={(v) => setTweak("reveal", v)} />
    </TweaksPanel>
  );
}

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