// Main app — Tweaks panel + page assembly

const { TweaksPanel, useTweaks, TweakSection, TweakColor, TweakToggle, TweakRadio } = window;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentHue": 30,
  "darkMode": false,
  "showGrain": true
}/*EDITMODE-END*/;

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

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', `oklch(0.62 0.18 ${t.accentHue})`);
    root.style.setProperty('--accent-soft', `oklch(0.62 0.18 ${t.accentHue} / 0.10)`);
    root.style.setProperty('--accent-line', `oklch(0.62 0.18 ${t.accentHue} / 0.25)`);
    root.style.setProperty('--accent-deep', `oklch(0.45 0.16 ${t.accentHue})`);
    root.dataset.theme = t.darkMode ? 'dark' : 'light';
  }, [t]);

  const { Nav, Hero, StatsBar, Features, Steps, Payment, Pricing, Testimonials, FinalCTA, Footer } = window;

  return (
    <>
      <Nav />
      <main>
        <Hero />
        <StatsBar />
        <Features />
        <Steps />
        <Payment />
        <Pricing />
        <Testimonials />
        <FinalCTA />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Apparence" />
        <TweakToggle label="Mode sombre" value={t.darkMode} onChange={(v) => setTweak('darkMode', v)} />
        <TweakSection label="Couleur d'accent" />
        <div style={{ padding: '4px 0' }}>
          <input
            type="range" min="0" max="360" step="1" value={t.accentHue}
            onChange={(e) => setTweak('accentHue', +e.target.value)}
            style={{ width: '100%' }}
          />
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: '#888', marginTop: 4, fontFamily: 'monospace' }}>
            <span>hue: {t.accentHue}°</span>
            <div style={{ display: 'flex', gap: 4 }}>
              {[20, 30, 60, 140, 220, 280].map(h => (
                <button key={h} onClick={() => setTweak('accentHue', h)} style={{
                  width: 16, height: 16, borderRadius: 999,
                  border: t.accentHue === h ? '2px solid #000' : '1px solid #ccc',
                  background: `oklch(0.62 0.18 ${h})`,
                  cursor: 'pointer', padding: 0,
                }} />
              ))}
            </div>
          </div>
        </div>
      </TweaksPanel>
    </>
  );
}

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