// Tweaks panel for portfolio v2 — secondary color + marquee.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "secondary": "#e0f316",
  "marquee": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.secondary);
    document.body.classList.toggle("no-marquee", !t.marquee);
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Color" />
      <TweakColor
        label="Secondary"
        value={t.secondary}
        options={["#e0f316", "#9df316", "#16f3c5", "#f3d916"]}
        onChange={(v) => setTweak("secondary", v)}
      />
      <TweakSection label="Layout" />
      <TweakToggle
        label="Keyword marquee"
        value={t.marquee}
        onChange={(v) => setTweak("marquee", v)}
      />
    </TweaksPanel>
  );
}

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