/* Tweaks island — applies live changes to the plain-HTML landing page.
   Mounts only the panel; mutates document via CSS vars + classes + hero API. */
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#C22F1A",
  "heroMode": "slider",
  "density": "regular"
}/*EDITMODE-END*/;

// accent base -> [hover, active, soft]
const ACCENTS = {
  "#C22F1A": ["#A82614", "#8C1D0F", "#FBEAE6"], // vintage red (default)
  "#D6402A": ["#B0250F", "#971F0C", "#FBEAE6"], // bright orange-red
  "#1B7A47": ["#15663A", "#0F5630", "#E7F3EC"], // forest green
  "#13648F": ["#0E4E72", "#0A3D5A", "#EAF3F9"]  // brand blue
};

function applyAccent(base) {
  var trio = ACCENTS[base] || [base, base, "#FBEAE6"];
  var r = document.documentElement;
  r.style.setProperty('--accent', base);
  r.style.setProperty('--accent-hover', trio[0]);
  r.style.setProperty('--accent-active', trio[1]);
  r.style.setProperty('--accent-soft', trio[2]);
}
function applyDensity(d) {
  document.body.classList.remove('density-compact', 'density-regular', 'density-comfy');
  document.body.classList.add('density-' + d);
}
function applyHero(mode) {
  if (window.__setHeroMode) window.__setHeroMode(mode);
}

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

  useEffect(() => { applyAccent(t.accent); }, [t.accent]);
  useEffect(() => { applyDensity(t.density); }, [t.density]);
  useEffect(() => { applyHero(t.heroMode); }, [t.heroMode]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Brand accent" />
      <TweakColor
        label="CTA color"
        value={t.accent}
        options={Object.keys(ACCENTS)}
        onChange={(v) => setTweak('accent', v)}
      />
      <TweakSection label="Hero" />
      <TweakRadio
        label="Layout"
        value={t.heroMode}
        options={['slider', 'static']}
        onChange={(v) => setTweak('heroMode', v)}
      />
      <TweakSection label="Spacing" />
      <TweakRadio
        label="Density"
        value={t.density}
        options={['compact', 'regular', 'comfy']}
        onChange={(v) => setTweak('density', v)}
      />
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaksRoot')).render(<App />);