const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#ff7a00", "#f4f1ea"],
  "stack": "Stacked",
  "weight": "Black",
  "tracking": -3.5,
  "showGrain": true
}/*EDITMODE-END*/;

const PALETTES = [
  ["#0c0c0e", "#f4f1ea"],   // ink / cream (default)
  ["#0a1428", "#dfe8ff"],   // deep navy / icy
  ["#1a0f0a", "#ffb380"],   // espresso / amber
  ["#08110d", "#9af0c5"],   // forest / mint
  ["#f4f1ea", "#0c0c0e"],   // inverse: cream / ink
  ["#ff3b1f", "#fff7ea"]    // hot signal
];

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

  React.useEffect(() => {
    const root = document.documentElement;
    const [bg, fg] = tweaks.palette;
    root.style.setProperty("--bg", bg);
    root.style.setProperty("--fg", fg);
    root.style.setProperty(
      "--muted",
      `color-mix(in oklab, ${fg} 42%, transparent)`
    );
    root.style.setProperty(
      "--hairline",
      `color-mix(in oklab, ${fg} 14%, transparent)`
    );
  }, [tweaks.palette]);

  React.useEffect(() => {
    const wm = document.querySelector(".wordmark");
    if (!wm) return;
    wm.style.letterSpacing = (tweaks.tracking / 100) + "em";
    wm.style.fontFamily =
      tweaks.weight === "Black"
        ? "'Archivo Black', 'Archivo', sans-serif"
        : "'Archivo', sans-serif";
    wm.style.fontWeight = tweaks.weight === "Black" ? 900 : 700;
  }, [tweaks.tracking, tweaks.weight]);

  React.useEffect(() => {
    const wm = document.querySelector(".wordmark");
    if (!wm) return;
    if (tweaks.stack === "Stacked") {
      wm.innerHTML = `<span class="row">Superflow</span><span class="row">Games</span>`;
    } else {
      wm.innerHTML = `<span class="row">Superflow Games</span>`;
    }
  }, [tweaks.stack]);

  React.useEffect(() => {
    document.body.style.setProperty(
      "--grain-opacity",
      tweaks.showGrain ? "0.035" : "0"
    );
    // Apply via stylesheet
    let style = document.getElementById("grain-style");
    if (!style) {
      style = document.createElement("style");
      style.id = "grain-style";
      document.head.appendChild(style);
    }
    style.textContent = `body::before { opacity: ${
      tweaks.showGrain ? 0.035 : 0
    } !important; }`;
  }, [tweaks.showGrain]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Palette">
        <TweakColor
          label="Background / Foreground"
          value={tweaks.palette}
          options={PALETTES}
          onChange={(v) => setTweak("palette", v)}
        />
      </TweakSection>

      <TweakSection title="Wordmark">
        <TweakRadio
          label="Layout"
          value={tweaks.stack}
          options={["Stacked", "Inline"]}
          onChange={(v) => setTweak("stack", v)}
        />
        <TweakRadio
          label="Weight"
          value={tweaks.weight}
          options={["Black", "Bold"]}
          onChange={(v) => setTweak("weight", v)}
        />
        <TweakSlider
          label="Tracking"
          value={tweaks.tracking}
          min={-6}
          max={2}
          step={0.5}
          format={(v) => v + " /100em"}
          onChange={(v) => setTweak("tracking", v)}
        />
      </TweakSection>

      <TweakSection title="Surface">
        <TweakToggle
          label="Grain texture"
          value={tweaks.showGrain}
          onChange={(v) => setTweak("showGrain", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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