// app.jsx — головний модуль сайту ТОВ «РІФТ» (rift.org.ua)

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "blue",
  "theme": "light",
  "lang": "uk",
  "density": "comfortable"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', tweaks.theme);
    document.documentElement.setAttribute('data-density', tweaks.density);
    document.documentElement.setAttribute('data-accent', tweaks.accent);
  }, [tweaks.theme, tweaks.density, tweaks.accent]);

  React.useEffect(() => { window.scrollTo(0, 0); }, [page]);

  const lang = tweaks.lang;
  const setLang = (l) => setTweak('lang', l);

  const labels = {
    home: '01 Home', about: '02 About', history: '03 History', domains: '04 Domains', registrars: '05 Registrars',
    tech: '06 Technology', docs: '07 Documents', faq: '08 FAQ', contacts: '09 Contacts',
  };

  return (
    <div className="rb-app" data-screen-label={labels[page] || '00'}>
      <Header page={page} setPage={setPage} lang={lang} setLang={setLang} />

      {page === 'home'       && <HomePage       lang={lang} setPage={setPage} />}
      {page === 'about'      && <AboutPage       lang={lang} setPage={setPage} />}
      {page === 'history'    && <HistoryPage     lang={lang} setPage={setPage} />}
      {page === 'domains'    && <DomainsPage     lang={lang} setPage={setPage} />}
      {page === 'registrars' && <RegistrarsPage  lang={lang} setPage={setPage} />}
      {page === 'tech'       && <TechPage        lang={lang} setPage={setPage} />}
      {page === 'docs'       && <DocsPage        lang={lang} setPage={setPage} />}
      {page === 'faq'        && <FaqPage         lang={lang} setPage={setPage} />}
      {page === 'contacts'   && <ContactsPage    lang={lang} setPage={setPage} />}

      <Footer lang={lang} setPage={setPage} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Стиль">
          <TweakRadio label={lang === 'uk' ? 'Акцент' : 'Accent'} value={tweaks.accent} options={[
            { value: 'blue', label: lang === 'uk' ? 'Синій' : 'Blue' },
            { value: 'gold', label: lang === 'uk' ? 'Золотий' : 'Gold' },
          ]} onChange={v => setTweak('accent', v)} />
          <TweakRadio label={lang === 'uk' ? 'Тема' : 'Theme'} value={tweaks.theme} options={[
            { value: 'light', label: lang === 'uk' ? 'Світла' : 'Light' },
            { value: 'dark', label: lang === 'uk' ? 'Темна' : 'Dark' },
          ]} onChange={v => setTweak('theme', v)} />
          <TweakRadio label={lang === 'uk' ? 'Щільність' : 'Density'} value={tweaks.density} options={[
            { value: 'compact', label: lang === 'uk' ? 'Щільно' : 'Compact' },
            { value: 'comfortable', label: lang === 'uk' ? 'Норма' : 'Regular' },
            { value: 'spacious', label: lang === 'uk' ? 'Просторо' : 'Spacious' },
          ]} onChange={v => setTweak('density', v)} />
        </TweakSection>
        <TweakSection title={lang === 'uk' ? 'Контент' : 'Content'}>
          <TweakRadio label={lang === 'uk' ? 'Мова' : 'Language'} value={tweaks.lang} options={[
            { value: 'uk', label: 'UK' },
            { value: 'en', label: 'EN' },
          ]} onChange={v => setTweak('lang', v)} />
        </TweakSection>
        <TweakSection title={lang === 'uk' ? 'Навігація' : 'Navigation'}>
          <TweakSelect label={lang === 'uk' ? 'Сторінка' : 'Page'} value={page} options={[
            { value: 'home', label: lang === 'uk' ? 'Головна' : 'Home' },
            { value: 'about', label: lang === 'uk' ? 'Про нас' : 'About' },
            { value: 'history', label: lang === 'uk' ? 'Історія' : 'History' },
            { value: 'domains', label: lang === 'uk' ? 'Домени' : 'Domains' },
            { value: 'registrars', label: lang === 'uk' ? 'Реєстратори' : 'Registrars' },
            { value: 'tech', label: lang === 'uk' ? 'Технології' : 'Technology' },
            { value: 'docs', label: lang === 'uk' ? 'Документи' : 'Documents' },
            { value: 'faq', label: lang === 'uk' ? 'Питання' : 'FAQ' },
            { value: 'contacts', label: lang === 'uk' ? 'Контакти' : 'Contacts' },
          ]} onChange={v => setPage(v)} />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
};

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