/* Tweaks for ADG LP */
const { useEffect } = React;

const PALETTES = [
  { // sunset (default — matches attached concept)
    key: 'sunset',
    swatch: ['#F5C04A', '#E89234', '#D86B2C'],
    grad: 'linear-gradient(95deg, #F5C04A 0%, #E89234 45%, #D86B2C 100%)',
    nodeColors: ['#F5C04A', '#E89234', '#D86B2C', '#C97E2A'],
    lineColor: 'rgba(216,107,44,',
    burnt: '#A03A1F',
  },
  { // sunrise — softer/peachier
    key: 'sunrise',
    swatch: ['#FFD27D', '#FFA15C', '#F37B43'],
    grad: 'linear-gradient(95deg, #FFD27D 0%, #FFA15C 50%, #F37B43 100%)',
    nodeColors: ['#FFD27D', '#FFA15C', '#F37B43'],
    lineColor: 'rgba(243,123,67,',
    burnt: '#C44A2B',
  },
  { // ember — deeper, more saturated
    key: 'ember',
    swatch: ['#EBA94E', '#D9772C', '#B84A1F'],
    grad: 'linear-gradient(95deg, #EBA94E 0%, #D9772C 45%, #B84A1F 100%)',
    nodeColors: ['#EBA94E', '#D9772C', '#B84A1F'],
    lineColor: 'rgba(184,74,31,',
    burnt: '#7A2814',
  },
  { // honey — yellow→red contrast
    key: 'honey',
    swatch: ['#F4D35E', '#EE964B', '#D8572A'],
    grad: 'linear-gradient(95deg, #F4D35E 0%, #EE964B 45%, #D8572A 100%)',
    nodeColors: ['#F4D35E', '#EE964B', '#D8572A'],
    lineColor: 'rgba(216,87,42,',
    burnt: '#9E2A2B',
  },
];

function findPalette(swatchArr) {
  const k = JSON.stringify(swatchArr);
  return PALETTES.find(p => JSON.stringify(p.swatch) === k) || PALETTES[0];
}

function applyPalette(swatchArr) {
  const p = findPalette(swatchArr);
  const root = document.documentElement;
  root.style.setProperty('--gold',  p.swatch[0]);
  root.style.setProperty('--amber', p.swatch[1]);
  root.style.setProperty('--orange', p.swatch[2]);
  root.style.setProperty('--burnt', p.burnt);
  root.style.setProperty('--grad',  p.grad);

  if (window.heroNet) window.heroNet.reseed({ colors: p.nodeColors, lineColor: p.lineColor });
  if (window.ctaNet)  window.ctaNet.reseed({  colors: p.nodeColors, lineColor: p.lineColor });
}

function applyDensity(density) {
  const map = { Low: 36, Mid: 64, High: 96 };
  const count = map[density] || 64;
  if (window.heroNet) window.heroNet.reseed({ nodeCount: count });
}

function applySpeed(speed) {
  const map = { Calm: 0.1, Normal: 0.22, Lively: 0.38 };
  const s = map[speed] || 0.22;
  if (window.heroNet) window.heroNet.reseed({ speed: s });
  if (window.ctaNet)  window.ctaNet.reseed({  speed: s * 0.8 });
}

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#F5C04A", "#E89234", "#D86B2C"],
  "density": "Mid",
  "speed": "Normal",
  "showCue": true
}/*EDITMODE-END*/;

function ADGTweaks() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => {
    const id = setTimeout(() => applyDensity(t.density), 60);
    return () => clearTimeout(id);
  }, [t.density]);
  useEffect(() => {
    const id = setTimeout(() => applySpeed(t.speed), 60);
    return () => clearTimeout(id);
  }, [t.speed]);
  useEffect(() => {
    const cue = document.querySelector('.scroll-cue');
    if (cue) cue.style.display = t.showCue ? 'flex' : 'none';
  }, [t.showCue]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Color">
        <TweakColor
          label="Palette"
          value={t.palette}
          onChange={(v) => setTweak('palette', v)}
          options={PALETTES.map(p => p.swatch)}
        />
      </TweakSection>

      <TweakSection label="Hero motion">
        <TweakRadio
          label="Density"
          value={t.density}
          onChange={(v) => setTweak('density', v)}
          options={['Low', 'Mid', 'High']}
        />
        <TweakRadio
          label="Speed"
          value={t.speed}
          onChange={(v) => setTweak('speed', v)}
          options={['Calm', 'Normal', 'Lively']}
        />
        <TweakToggle
          label="Scroll cue"
          value={t.showCue}
          onChange={(v) => setTweak('showCue', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

const tweakRoot = document.createElement('div');
document.body.appendChild(tweakRoot);
ReactDOM.createRoot(tweakRoot).render(<ADGTweaks />);