// ISTOK Group — main app

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "accent": "#479efe",
  "accent2": "#4138c4",
  "density": "comfortable",
  "showTicker": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang === 'ru' ? 'ru' : 'en';
  const t = window.CONTENT[lang];

  // Apply accent vars
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty('--accent', tweaks.accent);
    root.style.setProperty('--accent-2', tweaks.accent2);
  }, [tweaks.accent, tweaks.accent2]);

  // Density
  React.useEffect(() => {
    document.body.dataset.density = tweaks.density || 'comfortable';
  }, [tweaks.density]);

  useReveal();

  return (
    <>
      <Nav t={t} lang={lang} onLang={(l) => setTweak('lang', l)} />
      <Hero t={t} />
      {tweaks.showTicker && <Ticker items={t.ticker} />}
      <About t={t} />
      <Services t={t} />
      <Numbers t={t} />
      <Expertise t={t} />
      <Planning t={t} />
      <Work t={t} />
      <Why t={t} />
      <Contact t={t} />
      <Footer t={t} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio
            label="Locale"
            value={tweaks.lang}
            onChange={(v) => setTweak('lang', v)}
            options={[{ value: 'en', label: 'EN' }, { value: 'ru', label: 'RU' }]}
          />
        </TweakSection>
        <TweakSection label="Accent palette">
          <TweakColor
            label="Primary"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#479efe', '#22d3ee', '#7c5cff', '#f97316', '#10b981']}
          />
          <TweakColor
            label="Deep"
            value={tweaks.accent2}
            onChange={(v) => setTweak('accent2', v)}
            options={['#4138c4', '#0c4a6e', '#3b1d8a', '#9a3412', '#065f46']}
          />
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio
            label="Spacing"
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[{ value: 'compact', label: 'Tight' }, { value: 'comfortable', label: 'Default' }]}
          />
        </TweakSection>
        <TweakSection label="Sections">
          <TweakToggle label="Tech ticker" value={tweaks.showTicker} onChange={(v) => setTweak('showTicker', v)} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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