// Tweaks — accent color, hero variant, theme, intensity, crosshair toggle.
// Lives inside TweaksPanel (from tweaks-panel.jsx). Calls back to App via prop.

function TweaksUI({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Theme">
        <TweakRadio
          label="Mode"
          value={tweaks.theme}
          options={[
            { value: "light", label: "Light" },
            { value: "dark",  label: "Dark"  },
          ]}
          onChange={(v) => setTweak("theme", v)}
        />
      </TweakSection>

      <TweakSection label="Accent">
        <TweakColor
          label="Color"
          value={
            tweaks.accent === "matrix" ? "#00FF66"
            : tweaks.accent === "flame" ? "#FF6A00"
            : tweaks.accent === "ember" ? "#FFB627"
            : "#0A0A0A"
          }
          options={["#00FF66", "#FF6A00", "#FFB627", "#0A0A0A"]}
          onChange={(v) => setTweak("accent",
            v === "#00FF66" ? "matrix"
            : v === "#FF6A00" ? "flame"
            : v === "#FFB627" ? "ember"
            : "mono")}
        />
      </TweakSection>

      <TweakSection label="Hero">
        <TweakRadio
          label="Variant"
          value={tweaks.heroVariant}
          options={[
            { value: "spotlight", label: "Spotlight" },
            { value: "terminal",  label: "Terminal"  },
          ]}
          onChange={(v) => setTweak("heroVariant", v)}
        />
      </TweakSection>

      <TweakSection label="Motion">
        <TweakSlider
          label="Intensity"
          value={tweaks.intensity}
          min={0} max={3} step={1}
          onChange={(v) => setTweak("intensity", v)}
        />
        <TweakToggle
          label="Cursor crosshair"
          value={!!tweaks.crosshair}
          onChange={(v) => setTweak("crosshair", v)}
        />
        <TweakToggle
          label="Scramble on view"
          value={!!tweaks.scrambleOnView}
          onChange={(v) => setTweak("scrambleOnView", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// Map accent token to swatch — used by TweakColor visual rendering.
// (Override in case of mono: a black tile)
Object.assign(window, { TweaksUI });