/* Tweaks — Template Artisan */
const ARTISAN_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#F7C600",
  "motion": true
}/*EDITMODE-END*/;

function artisanLuma(hex) {
  const n = parseInt(hex.slice(1), 16);
  const r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255;
  return (0.299 * r + 0.587 * g + 0.114 * b) / 255;
}

function ArtisanTweaks() {
  const [t, setTweak] = useTweaks(ARTISAN_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--accent", t.accent);
    root.style.setProperty("--accent-ink", artisanLuma(t.accent) > 0.55 ? "#0d0d0d" : "#f6f5f1");
  }, [t.accent]);

  React.useEffect(() => {
    document.body.style.setProperty("--marq-state", t.motion ? "running" : "paused");
    document.querySelectorAll(".marquee .track, .avis-track, .beam, .sweep, .grid-floor").forEach((el) => {
      el.style.animationPlayState = t.motion ? "running" : "paused";
    });
  }, [t.motion]);

  return (
    <TweaksPanel>
      <TweakSection label="Couleur selon le métier" />
      <TweakColor
        label="Accent"
        value={t.accent}
        options={["#F7C600", "#2A8CDB", "#E2572B", "#1FA383"]}
        onChange={(v) => setTweak("accent", v)}
      />
      <TweakSection label="Motion" />
      <TweakToggle label="Animations de fond" value={t.motion} onChange={(v) => setTweak("motion", v)} />
    </TweaksPanel>
  );
}

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