// Tweaks panel for Bahi Elfeky's site (modern dark)

const SITE_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#67e8f9",
  "grid": false,
  "cursorGlow": false
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  "#c8ff36", // electric lime (default)
  "#67e8f9", // cyan
  "#a78bfa", // violet
  "#fb923c", // orange
  "#f472b6"  // pink
];

function SiteTweaks() {
  const [t, setTweak] = useTweaks(SITE_TWEAK_DEFAULTS);

  React.useEffect(() => {
    if (!window.__site) return;
    window.__site.setAccent(t.accent);
    window.__site.setGridOverlay(t.grid);
    window.__site.setCursorGlow(t.cursorGlow);
  }, [t.accent, t.grid, t.cursorGlow]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={ACCENT_OPTIONS}
        onChange={(v) => setTweak("accent", v)}
      />

      <TweakSection label="Effects" />
      <TweakToggle
        label="Cursor glow"
        value={t.cursorGlow}
        onChange={(v) => setTweak("cursorGlow", v)}
      />
      <TweakToggle
        label="12-col grid overlay"
        value={t.grid}
        onChange={(v) => setTweak("grid", v)}
      />

      <TweakSection label="Motion" />
      <TweakButton
        label="Replay scroll reveals"
        onClick={() => {
          const els = document.querySelectorAll(".reveal");
          els.forEach((el) => el.classList.remove("is-in"));
          void document.body.offsetWidth;
          const io = new IntersectionObserver(
            (entries) => entries.forEach((e) => e.isIntersecting && e.target.classList.add("is-in")),
            { threshold: 0.12 }
          );
          els.forEach((el) => io.observe(el));
        }}
      />
      <TweakButton
        label="Jump to top"
        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
      />
    </TweaksPanel>
  );
}

const __siteRoot = document.createElement("div");
document.body.appendChild(__siteRoot);
ReactDOM.createRoot(__siteRoot).render(<SiteTweaks />);