/* Tweaks for the portfolio — drives CSS variables + body data-attrs on the vanilla page. */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": ["#29c2ff", "#5bd0ff", "#0792cf"],
  "bg": "cool",
  "hero": "left",
  "cards": "hard",
  "companion": true,
  "motion": true
}/*EDITMODE-END*/;

const BG_PALETTES = {
  cool:  { "--bg": "#ffffff", "--bg-2": "#ffffff" },
  warm:  { "--bg": "#fdfcf8", "--bg-2": "#fdfcf8" },
  sand:  { "--bg": "#faf6ee", "--bg-2": "#faf6ee" }
};

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

  React.useEffect(() => {
    const root = document.documentElement;
    const [main, bright, ink] = t.accent;
    root.style.setProperty("--accent", main);
    root.style.setProperty("--accent-bright", bright);
    root.style.setProperty("--accent-ink", ink);
    const pal = BG_PALETTES[t.bg] || BG_PALETTES.warm;
    Object.entries(pal).forEach(([k, v]) => root.style.setProperty(k, v));
    const b = document.body;
    b.dataset.hero = t.hero;
    b.dataset.cards = t.cards;
    b.dataset.bg = t.bg;
    b.dataset.companion = t.companion ? "on" : "off";
    b.dataset.motion = t.motion ? "on" : "off";
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Accent" />
      <TweakColor label="Accent color" value={t.accent}
        options={[
          ["#29c2ff", "#5bd0ff", "#0792cf"],
          ["#19b48b", "#46d1ac", "#0c8c69"],
          ["#a78bfa", "#c4b1fc", "#7c5cf0"],
          ["#ff7a59", "#ff9d83", "#e2552f"]
        ]}
        onChange={(v) => setTweak("accent", v)} />

      <TweakSection label="Background" />
      <TweakRadio label="Warmth" value={t.bg}
        options={["cool", "warm", "sand"]}
        onChange={(v) => setTweak("bg", v)} />

      <TweakSection label="Layout" />
      <TweakRadio label="Hero" value={t.hero}
        options={["left", "center"]}
        onChange={(v) => setTweak("hero", v)} />
      <TweakRadio label="Cards" value={t.cards}
        options={["hard", "soft"]}
        onChange={(v) => setTweak("cards", v)} />

      <TweakSection label="Personality" />
      <TweakToggle label="Scroll companion" value={t.companion}
        onChange={(v) => setTweak("companion", v)} />
      <TweakToggle label="Motion" value={t.motion}
        onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

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