// Main app — assembles the landing page and wires Tweaks.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accentPalette": "blue-violet",
  "displayFont": "Sora",
  "showGrid": true,
  "heroCTA": "Попробовать"
}/*EDITMODE-END*/;

const PALETTES = {
  'blue-violet': { blue: '#5b8cff', violet: '#a06bff', cyan: '#4be3d0', label: 'Blue × Violet' },
  'cyber-cyan':  { blue: '#00d3ff', violet: '#7a5bff', cyan: '#5cffd1', label: 'Cyber Cyan' },
  'rose-violet': { blue: '#ff6bd0', violet: '#a06bff', cyan: '#ffc46b', label: 'Rose Violet' },
  'mono-ice':    { blue: '#cfd9ff', violet: '#8fa3d6', cyan: '#a0e6ff', label: 'Mono Ice' },
};

const FONT_OPTIONS = ['Sora', 'Space Grotesk', 'Manrope', 'DM Sans'];

const App = () => {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  // Apply tweaks to CSS vars
  React.useEffect(() => {
    const p = PALETTES[t.accentPalette] || PALETTES['blue-violet'];
    const root = document.documentElement;
    root.style.setProperty('--accent-blue', p.blue);
    root.style.setProperty('--accent-violet', p.violet);
    root.style.setProperty('--accent-cyan', p.cyan);
    root.style.setProperty('--font-display', `'${t.displayFont}', system-ui, sans-serif`);
    root.style.setProperty('--font-body', `'${t.displayFont}', system-ui, sans-serif`);
    document.body.classList.toggle('no-grid', !t.showGrid);
  }, [t.accentPalette, t.displayFont, t.showGrid]);

  return (
    <React.Fragment>
      <Nav heroCTA={t.heroCTA} />
      <main>
        <window.HeroStage heroCTA={t.heroCTA} />
        <window.StageTicker />
        <Problem />
        <Solution />
        <Models />
        <Pricing />
        <ProductPreview />
        <FinalCTA heroCTA={t.heroCTA} />
      </main>
      <Footer />

      <window.TweaksPanel title="Tweaks">
        <window.TweakSection label="Палитра">
          <window.TweakRadio
            label="Акценты"
            value={t.accentPalette}
            options={['blue-violet', 'cyber-cyan', 'rose-violet', 'mono-ice']}
            onChange={(v) => setTweak('accentPalette', v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Типографика">
          <window.TweakSelect
            label="Шрифт"
            value={t.displayFont}
            options={FONT_OPTIONS}
            onChange={(v) => setTweak('displayFont', v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Фон">
          <window.TweakToggle
            label="Сетка"
            value={t.showGrid}
            onChange={(v) => setTweak('showGrid', v)}
          />
        </window.TweakSection>
        <window.TweakSection label="Hero">
          <window.TweakText
            label="Кнопка"
            value={t.heroCTA}
            onChange={(v) => setTweak('heroCTA', v)}
          />
        </window.TweakSection>
      </window.TweaksPanel>
    </React.Fragment>
  );
};

window.App = App;

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