// Meridi tweaks — graph density/drift + hero headline. Panel appears only in Tweaks mode.
const MERIDI_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "The right coordinates.",
  "graphDensity": 52,
  "driftSpeed": 1
}/*EDITMODE-END*/;

function MeridiTweaks() {
  const [t, setTweak] = useTweaks(MERIDI_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const h1 = document.getElementById("hero-h1");
    if (h1 && h1.textContent !== t.headline) h1.textContent = t.headline;
  }, [t.headline]);

  React.useEffect(() => {
    window.__meridiSpeedMult = t.driftSpeed;
  }, [t.driftSpeed]);

  React.useEffect(() => {
    if (window.__meridiNodeCount === t.graphDensity) return;
    window.__meridiNodeCount = t.graphDensity;
    window.dispatchEvent(new Event("meridi-graph-refresh"));
  }, [t.graphDensity]);

  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakSelect
        label="Headline"
        value={t.headline}
        options={["The right coordinates.", "Precision hiring for tech.", "One shortlist. Zero noise."]}
        onChange={(v) => setTweak("headline", v)}
      />
      <TweakSection label="Graph" />
      <TweakSlider label="Node density" value={t.graphDensity} min={20} max={90} step={2} onChange={(v) => setTweak("graphDensity", v)} />
      <TweakSlider label="Drift speed" value={t.driftSpeed} min={0.4} max={2.4} step={0.2} unit="×" onChange={(v) => setTweak("driftSpeed", v)} />
    </TweaksPanel>
  );
}

(function () {
  const host = document.createElement("div");
  document.body.appendChild(host);
  ReactDOM.createRoot(host).render(<MeridiTweaks />);
})();