/* Tweaks panel for Jyoti's portfolio */
const { useState, useEffect } = React;

function PortfolioTweaks() {
  const defaults = window.__TWEAK_DEFAULTS || { accent: '#b83a3a', grain: 0.085, italic: true, vignette: true };
  const [tweaks, setTweak] = useTweaks(defaults);

  useEffect(() => { if (window.__applyTweaks) window.__applyTweaks(tweaks); }, [tweaks]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent">
        <TweakColor
          label="Wine red"
          value={tweaks.accent}
          options={['#b83a3a', '#8c1f2b', '#c75050', '#a13c3c', '#d4af37']}
          onChange={v => setTweak('accent', v)}
        />
      </TweakSection>
      <TweakSection label="Atmosphere">
        <TweakSlider
          label="Grain"
          min={0} max={0.25} step={0.005}
          value={tweaks.grain}
          onChange={v => setTweak('grain', v)}
        />
        <TweakToggle
          label="Vignette"
          value={tweaks.vignette}
          onChange={v => setTweak('vignette', v)}
        />
      </TweakSection>
      <TweakSection label="Typography">
        <TweakToggle
          label="Italic emphasis"
          value={tweaks.italic}
          onChange={v => setTweak('italic', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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