/* ============================================================
   app.jsx — main app: tweaks → CSS tokens, render all sections
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#FFE600", "#FF3EA5", "#4D5BFF", "#00E5C0"],
  "borderWidth": 3,
  "shadow": 7,
  "radius": 0,
  "dark": false
}/*EDITMODE-END*/;

const PALETTES = [
  ["#FFE600", "#FF3EA5", "#4D5BFF", "#00E5C0"],
  ["#FF5C00", "#FFC700", "#0A0A0A", "#1F8A5B"],
  ["#FF3EA5", "#FFE600", "#9B5CFF", "#00E5C0"],
  ["#00E5C0", "#4D5BFF", "#FFE600", "#FF3EA5"],
  ["#C6FF00", "#FF3EA5", "#0A0A0A", "#4D5BFF"],
];

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

  // map tweaks -> CSS variables
  useEffect(() => {
    const r = document.documentElement;
    const p = t.palette || PALETTES[0];
    r.style.setProperty('--accent', p[0]);
    r.style.setProperty('--accent-2', p[1]);
    r.style.setProperty('--accent-3', p[2]);
    r.style.setProperty('--accent-4', p[3]);
    r.style.setProperty('--bw', t.borderWidth + 'px');
    r.style.setProperty('--shadow', t.shadow + 'px');
    r.style.setProperty('--radius', t.radius + 'px');
    r.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  }, [t]);

  return (
    <React.Fragment>
      <Nav dark={t.dark} onToggleTheme={() => setTweak('dark', !t.dark)} />
      <Hero/>
      <Marquee/>
      <Showcase/>
      <Why/>
      <Stats/>
      <Features/>
      <Install/>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Color" />
        <TweakColor
          label="Palette" value={t.palette}
          options={PALETTES}
          onChange={(v) => setTweak('palette', v)} />
        <TweakSection label="Brutalism" />
        <TweakSlider label="Border weight" value={t.borderWidth} min={1} max={6} step={1} unit="px"
          onChange={(v) => setTweak('borderWidth', v)} />
        <TweakSlider label="Shadow hardness" value={t.shadow} min={0} max={14} step={1} unit="px"
          onChange={(v) => setTweak('shadow', v)} />
        <TweakSlider label="Corner radius" value={t.radius} min={0} max={20} step={1} unit="px"
          onChange={(v) => setTweak('radius', v)} />
        <TweakSection label="Theme" />
        <TweakToggle label="Dark mode" value={t.dark}
          onChange={(v) => setTweak('dark', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

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