// tweaks-app.jsx — Home page Tweaks
// Drives the static index.html via CSS variables, classes, and the snow field.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "snowTint": "frost",
  "snowDensity": 1,
  "snowSpeed": 1,
  "snowMotion": true,
  "accent": ["#545454", "#3a3a3a"],
  "tileCorners": "rounded",
  "tileGap": 16
}/*EDITMODE-END*/;

function applyTweaks(t) {
  const root = document.documentElement;

  // ---- Hero (glistening fall) ----
  if (window.Snow) {
    window.Snow.set({
      tint: t.snowTint,
      intensity: t.snowDensity,
      fallSpeed: t.snowSpeed,
      motion: t.snowMotion,
    });
  }
  // Keep the footer's northern lights in sync with the hero.
  if (window.FooterAurora) {
    window.FooterAurora.set({
      tint: t.snowTint,
      intensity: t.snowDensity,
      motion: t.snowMotion,
    });
  }
  // Keep the nav-bar aurora in sync too (dialed back so links stay legible).
  if (window.HeaderAurora) {
    window.HeaderAurora.set({
      tint: t.snowTint,
      intensity: t.snowDensity * 0.55,
      motion: t.snowMotion,
    });
  }

  // Accent (brand + hover)
  if (Array.isArray(t.accent)) {
    root.style.setProperty("--brand", t.accent[0]);
    root.style.setProperty("--brand-dark", t.accent[1]);
  }

  // Bento tile corners + gap
  const work = document.querySelector(".work");
  if (work) {
    work.style.setProperty("--tile-radius", t.tileCorners === "sharp" ? "0px" : "16px");
    work.style.setProperty("--tile-gap", `${t.tileGap}px`);
  }
}

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

  React.useEffect(() => { applyTweaks(t); }, [t]);
  React.useEffect(() => {
    const onResize = () => applyTweaks(t);
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Aurora hero" />
      <TweakRadio
        label="Tint"
        value={t.snowTint}
        options={["frost", "silver", "blush"]}
        onChange={(v) => setTweak("snowTint", v)}
      />
      <TweakSlider
        label="Intensity"
        min={0.4}
        max={1.6}
        step={0.1}
        value={t.snowDensity}
        onChange={(v) => setTweak("snowDensity", v)}
      />
      <TweakSlider
        label="Drift speed"
        min={0.3}
        max={2}
        step={0.1}
        value={t.snowSpeed}
        onChange={(v) => setTweak("snowSpeed", v)}
      />
      <TweakToggle
        label="Motion"
        value={t.snowMotion}
        onChange={(v) => setTweak("snowMotion", v)}
      />

      <TweakSection label="Brand" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={[
          ["#545454", "#3a3a3a"],
          ["#423819", "#594c2c"],
          ["#2d3a55", "#3f5170"],
          ["#2f5d4a", "#3d7a62"],
          ["#4a2d44", "#6b4561"],
        ]}
        onChange={(v) => setTweak("accent", v)}
      />

      <TweakSection label="Featured work" />
      <TweakRadio
        label="Tile corners"
        value={t.tileCorners}
        options={["rounded", "sharp"]}
        onChange={(v) => setTweak("tileCorners", v)}
      />
      <TweakSlider
        label="Tile gap"
        min={6}
        max={28}
        step={2}
        value={t.tileGap}
        onChange={(v) => setTweak("tileGap", v)}
      />
    </TweaksPanel>
  );
}

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