/* ============================================================
   TWEAKS — Panel global Closing Capital
   Controla la intensidad del dorado (sutil ↔ saturado)
   ============================================================ */

const { useEffect: useEffTW } = React;

function CCTweaks() {
  const [tw, setTweak] = useTweaks(window.TWEAK_DEFAULTS || { goldIntensity: 1.0 });

  // Aplica el valor a la variable CSS en :root
  useEffTW(() => {
    document.documentElement.style.setProperty('--gold-intensity', String(tw.goldIntensity));
  }, [tw.goldIntensity]);

  return (
    <TweaksPanel title="TWEAKS · CLOSING CAPITAL">
      <TweakSection title="Identidad luxury">
        <TweakSlider
          label="Intensidad del dorado"
          value={tw.goldIntensity}
          min={0.4}
          max={1.4}
          step={0.05}
          onChange={(v) => setTweak('goldIntensity', v)}
          format={(v) => v < 0.7 ? 'Sutil' : v < 1.0 ? 'Equilibrado' : v < 1.2 ? 'Cálido' : 'Saturado'}
        />
        <div style={{ fontSize: 11, color: '#8a8a95', letterSpacing: '0.05em', marginTop: 8, fontStyle: 'italic' }}>
          Aplica a títulos, líneas, bordes, partículas y CTAs.
        </div>
      </TweakSection>
    </TweaksPanel>
  );
}

// Montar en un contenedor flotante propio
const tweakRoot = document.createElement('div');
tweakRoot.id = 'cc-tweaks-root';
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<CCTweaks />);