/* Patrimo — panneau Tweaks */
const PATRIMO_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "teinte": "Bleu Klein",
  "grain": 100,
  "sectionClaire": true,
  "voileNiveau": 40
}/*EDITMODE-END*/;

const PATRIMO_TEINTES = {
  "Braise":     { h: 24,  s: "78%", l: "51%" },
  "Or":         { h: 41,  s: "62%", l: "52%" },
  "Bleu Klein": { h: 224, s: "80%", l: "56%" }
};

function PatrimoTweaks() {
  const [t, setTweak] = useTweaks(PATRIMO_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    const teinte = PATRIMO_TEINTES[t.teinte] || PATRIMO_TEINTES["Braise"];
    root.style.setProperty('--acc-h', teinte.h);
    root.style.setProperty('--acc-s', teinte.s);
    root.style.setProperty('--acc-l', teinte.l);
    root.style.setProperty('--grain', (t.grain / 100).toFixed(2));
    document.body.dataset.claire = t.sectionClaire ? 'on' : 'off';
    const niv = typeof t.voileNiveau === 'number' ? t.voileNiveau : 40;
    root.style.setProperty('--voile-hero', (niv / 100).toFixed(2));
    // tracés SVG calés sur la teinte
    const vive = `hsl(${teinte.h} 92% 70%)`;
    document.querySelectorAll('.trace, .graphe circle').forEach(el => {
      if (el.tagName === 'circle') el.setAttribute('fill', vive);
      else el.setAttribute('stroke', vive);
    });
  }, [t]);

  return (
    <TweaksPanel>
      <TweakSection label="Couleur" />
      <TweakRadio label="Teinte d'accent" value={t.teinte}
                  options={['Braise', 'Or', 'Bleu Klein']}
                  onChange={(v) => setTweak('teinte', v)} />
      <TweakSection label="Matière" />
      <TweakSlider label="Grain" value={t.grain} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('grain', v)} />
      <TweakSlider label="Voile du hero" value={typeof t.voileNiveau === 'number' ? t.voileNiveau : 40} min={0} max={100} unit="%"
                   onChange={(v) => setTweak('voileNiveau', v)} />
      <TweakSection label="Rythme" />
      <TweakToggle label="Section claire (Positionnement)" value={t.sectionClaire}
                   onChange={(v) => setTweak('sectionClaire', v)} />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<PatrimoTweaks />);